Buybuttonの機能で注文メモ「備考欄」を記載できるコードを発行しています。
購入者に入力して欲しい内容などをデフォルトで枠内に記載しておきたいと思うのですが、そういったことは可能なのでしょうか?また、もし可能であれば方法をご教示いただけますと幸いです。
解決済! ベストソリューションを見る。
成功
一応ですが以下のような感じで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/
蛇足ですが、以下の「追加情報」欄に必要な事柄入力するのが簡単で利便性が高いかなとも思います。
より見やすくすのであれば、placeholderと同様にJSで付近に同種の文言を追加するなども考えられます。
以上ですが、JavaScriptの読み書きが難しい場合はパートナーやエキスパートに依頼されることをお勧めします。
またはこのまま他の方の回答をお待ちください。
Natsumi156 様
はじめまして。
株式会社フルバランスのドウケと申します。
一案ではございますが、該当コードのinputまたはtextareaにplaceholderを設けることで、解決するのではないでしょうか。
以下、例になります。
<textarea placeholder="特別な連絡事項がありましたら、こちらに入力して下さい。"></textarea>
ご参考になれば幸いです。
また、お困りごとなどありましたら、お気軽にご質問くださいね。
ご返信ありがとうございます。
ご教示いただいた内容をカート画面のテンプレートに追記したことで、shopify本体のカート画面にはデフォルトの文章を挿入できたのですが、Buybuttonでの購入時にはデフォルトテキストが反映されないようでした。
可能であればBuybuttonでの購入時にデフォルトテキストの表示がしたいのですが、何か方法などあるでしょうか。
成功
一応ですが以下のような感じで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/
蛇足ですが、以下の「追加情報」欄に必要な事柄入力するのが簡単で利便性が高いかなとも思います。
より見やすくすのであれば、placeholderと同様にJSで付近に同種の文言を追加するなども考えられます。
以上ですが、JavaScriptの読み書きが難しい場合はパートナーやエキスパートに依頼されることをお勧めします。
またはこのまま他の方の回答をお待ちください。
ご回答ありがとうございます。
ご提案いただいた内容や参考ページをもとに、実装することができました。
これまではBuybuttonに制限が多いかと思っていたのですが、こういった内容であればさまざまカスタマイズができそうだと感じました。
アプリとの連携ができるとなお良いと感じるのですがきっと難しいのでしょうね。
この度はご回答ありがとうございました。
有料広告は、必ずしもリターンがあるとは限らず、コストがかかってしまいます。ネットショップを開設したばかりのころは、「予算をかけずにお客様が集まってくれる方法を実行したい」と考える方...
Byお客様との効果的なコミュニケーションを実現する[顧客管理]の新機能「お客様セグメンテーション」をご紹介!
ByShopify Marketsとは?ご利用可能な機能とご利用プランによる機能の違いShopify Marketsの管理画面 マーケットのタイプ各種設定マーケットを追加す...
By Daiki