Liquid、JavaScriptなどに関する質問
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に制限が多いかと思っていたのですが、こういった内容であればさまざまカスタマイズができそうだと感じました。
アプリとの連携ができるとなお良いと感じるのですがきっと難しいのでしょうね。
この度はご回答ありがとうございました。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024