FROM CACHE - jp_header

Buy buttonでの注文メモ欄に、デフォルトで文章を入れる方法はありますか

解決済
N0613
観光客
5 0 0

natsumi156_0-1657168127052.png

 

Buybuttonの機能で注文メモ「備考欄」を記載できるコードを発行しています。

購入者に入力して欲しい内容などをデフォルトで枠内に記載しておきたいと思うのですが、そういったことは可能なのでしょうか?また、もし可能であれば方法をご教示いただけますと幸いです。

 

1 件の受理された解決策

ベストソリューション
Jizo_Inagaki
Shopify Partner
604 245 564

成功

一応ですが以下のような感じでcartにeventsを設定する方法でplaceholderを追加可能でした。

 

 

// 以上省略 
 "cart": {
    "events": {
      'afterRender': function(component){
        const iframe = component.node.childNodes[0]
        const iframeDocument = iframe.contentWindow.document;
        const textarea = iframeDocument.querySelector('.shopify-buy__cart__note__text-area');
        textarea.setAttribute('placeholder','追加したい内容');
      }
    },
// 以下省略

 

参考:「events」の項目

https://shopify.github.io/buy-button-js/customization/

 

他にはiframeのでの出力をやめて購入ボタン設置側のサイトにJSを書いて処理を行うことも考えられますが(実際に試してはいません)、この場合CSSを独自につくる必要があると思います。

参考:  「Custom styling without iframes」の項目

https://shopify.github.io/buy-button-js/advanced/

 

蛇足ですが、以下の「追加情報」欄に必要な事柄入力するのが簡単で利便性が高いかなとも思います。

https://help.shopify.com/ja/manual/online-sales-channels/buy-button/create-buy-button#part-f05022400...

より見やすくすのであれば、placeholderと同様にJSで付近に同種の文言を追加するなども考えられます。

 

以上ですが、JavaScriptの読み書きが難しい場合はパートナーやエキスパートに依頼されることをお勧めします。

またはこのまま他の方の回答をお待ちください。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

4件の返信4
株式会社フルバランス
Shopify Partner
521 145 358

Natsumi156 様

 

はじめまして。

株式会社フルバランスのドウケと申します。

 

一案ではございますが、該当コードのinputまたはtextareaにplaceholderを設けることで、解決するのではないでしょうか。

以下、例になります。

<textarea placeholder="特別な連絡事項がありましたら、こちらに入力して下さい。"></textarea>

 

ご参考になれば幸いです。

また、お困りごとなどありましたら、お気軽にご質問くださいね。

もし少しでも解決のお役に立てましたら、Best Answerボタンを押して頂けると嬉しいです!
株式会社フルバランス(Shopify Experts)
東京・高田馬場 18期目のWebデザイン・システム制作会社です。Shopify / Shopify Plusの制作・運営をサポートしております。
https://fbl.jp/
N0613
観光客
5 0 0

ご返信ありがとうございます。

ご教示いただいた内容をカート画面のテンプレートに追記したことで、shopify本体のカート画面にはデフォルトの文章を挿入できたのですが、Buybuttonでの購入時にはデフォルトテキストが反映されないようでした。

可能であればBuybuttonでの購入時にデフォルトテキストの表示がしたいのですが、何か方法などあるでしょうか。

Jizo_Inagaki
Shopify Partner
604 245 564

成功

一応ですが以下のような感じでcartにeventsを設定する方法でplaceholderを追加可能でした。

 

 

// 以上省略 
 "cart": {
    "events": {
      'afterRender': function(component){
        const iframe = component.node.childNodes[0]
        const iframeDocument = iframe.contentWindow.document;
        const textarea = iframeDocument.querySelector('.shopify-buy__cart__note__text-area');
        textarea.setAttribute('placeholder','追加したい内容');
      }
    },
// 以下省略

 

参考:「events」の項目

https://shopify.github.io/buy-button-js/customization/

 

他にはiframeのでの出力をやめて購入ボタン設置側のサイトにJSを書いて処理を行うことも考えられますが(実際に試してはいません)、この場合CSSを独自につくる必要があると思います。

参考:  「Custom styling without iframes」の項目

https://shopify.github.io/buy-button-js/advanced/

 

蛇足ですが、以下の「追加情報」欄に必要な事柄入力するのが簡単で利便性が高いかなとも思います。

https://help.shopify.com/ja/manual/online-sales-channels/buy-button/create-buy-button#part-f05022400...

より見やすくすのであれば、placeholderと同様にJSで付近に同種の文言を追加するなども考えられます。

 

以上ですが、JavaScriptの読み書きが難しい場合はパートナーやエキスパートに依頼されることをお勧めします。

またはこのまま他の方の回答をお待ちください。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
N0613
観光客
5 0 0

ご回答ありがとうございます。

ご提案いただいた内容や参考ページをもとに、実装することができました。

これまではBuybuttonに制限が多いかと思っていたのですが、こういった内容であればさまざまカスタマイズができそうだと感じました。

アプリとの連携ができるとなお良いと感じるのですがきっと難しいのでしょうね。

 

この度はご回答ありがとうございました。