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

[N0613]

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

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

[株式会社フルバランス]

Natsumi156 様

はじめまして。

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

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

以下、例になります。

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

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

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

[N0613]

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

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

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

[Jizo_Inagaki · Accepted solution]

一応ですが以下のような感じで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の読み書きが難しい場合はパートナーやエキスパートに依頼されることをお勧めします。

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

[N0613]

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

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

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

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

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