以下のサイトを参考にして有料アプリを使わずに、スクロール追従型の購入ボタンを設置したいのですが、
liquidの設定以降の「商品ページのテンプレートに以下のように記述」「JavaScriptの追加」がどこの操作をしているのかわかりません。
どこを開いて設定したらいいのか詳しく教えてくださらないでしょうか。
https://soukl.net/shopify-column-fixed-cart/
よろしくお願いいたします。
Topic summary
ユーザーがShopifyで有料アプリを使わずにスクロール追従型の購入ボタンを実装しようとしているが、参考サイトの手順で「商品ページのテンプレートへの記述」と「JavaScriptの追加」の具体的な操作場所がわからず質問。
回答者からの指示:
- Dawnテーマの場合、
main-product.liquidの{% schema %}直前に完成コードを記載 - JavaScriptコードを
fixed-cart.jsというファイル名でassetsディレクトリに格納 fixed-cart.liquidはsnippetsディレクトリに格納する必要がある
発生した問題:
ユーザーが実装を試みたところ、カスタマイズ画面でエラーが発生。原因はfixed-cart.liquidをsectionsではなくsnippetsに配置すべきだったため。
解決策:
fixed-cart.liquidをsnippetsディレクトリに移動することで解決する見込み。
@tcsf2 様
ご質問いただいている、「商品ページのテンプレートに以下のように記述」「JavaScriptの追加」ですが下記になるかと思われます。
商品ページのテンプレートに以下のように記述
ご利用テーマの商品ページのテンプレート内に完成コードを記載します。
Dawnテーマをご利用でしたら、main-product.liquidが対象になるかと思われます。（※テーマによって名称が異なります。）
main-product.liquid内に記載できれば良いのですが、わかりやすくするために{% schema %}直前に記載いただくのが良いかと思います。
JavaScriptの追加
JavaScriptの追加になるのですが、記載されいてるコードを「fixed-cart.js」というファイル名で、
Dawnテーマのassetsディレクトリ内に格納すると良いのではないでしょうか。
ご参考まで。
（キュー小坂）
回答ありがとうございます！
テーマはDawnです。
教えてくださった通りの場所にそれぞれのパートを入れてみました。
しかし、カスタマイズで確認してみると以下のようなエラーが出てしまいました。
→ちなみにmain-product.liquidの25行目には以下を追記しています。
{% render ‘fixed-cart’%}
なにが原因なのでしょうか…
もし可能であれば再度お教えいただけますと幸いです。
何卒宜しくお願い致します。
@tcsf2 様
元々参考にされていたページにて、fixed-cart.liquidはスニペットとして作成すると記載がありましたので説明を省いておりました。
記載いただいたエラーは、fixed-cart.liquidがスニペット（snippets）に無いというエラーになります。
いただいた画像を見るとfixed-cart.liquidはsectionsの中に格納されておりますので、
fixed-cart.liquidをsnippets内に格納いただければ、表示されるかと思います。
ご参考まで。
（キュー小坂）