FROM CACHE - jp_header
解決済

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

N0613
観光客
7 0 0

natsumi156_0-1657168127052.png

 

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

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

 

Natsumi
1 件の受理された解決策

Jizo_Inagaki
Shopify Partner
990 373 690

成功

一応ですが以下のような感じで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
1441 504 644

Natsumi156 様

 

はじめまして。

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

 

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

以下、例になります。

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

 

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

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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

N0613
観光客
7 0 0

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

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

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

Natsumi

Jizo_Inagaki
Shopify Partner
990 373 690

成功

一応ですが以下のような感じで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
観光客
7 0 0

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

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

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

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

 

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

Natsumi