目次
「Spotlight」は、Shopifyの無料テーマ
このテーマは、中でも特徴的なテーマで、HOMEがコレクションページのようになっています。
公式からは、ショップ開設後すぐに販売を開始したい人向きのテーマと紹介されています。
まだテーマを導入していない方は、こちら！
「カートに追加する」ボタンを設置するとは？
カスタマイズなしのデフォルトのテーマだと、商品をカートに入れるには、一度詳細ページを挟まなければなりません。
この記事では、「Spotlight」のHOMEから直接カートに追加したい場合のカスタマイズ手順について紹介していきます。
注意点
このカスタマイズでは、ソースコードに触れるため、実装するかは慎重にご検討ください。
また、動作テストは簡易的なもののみ行っています。バージョンの違いやアプリの干渉等で正常に動作しない可能性がございますが、それらを含めて詳細なテストは行っておりません。
不具合なく確実に動作するという保証は致しかねますことをご了承ください。
また、作成後も定期的なメンテナンスは必要になってきますので、そちらについてもご留意ください。
カスタマイズを始める前に重要なこと
このカスタマイズ以外でも共通して必要な内容です。
それは、「バックアップを取る」ことです。
テーマ丸ごと複製することができるので、複製してから作業に取り掛かりましょう。
テーマの複製方法
「販売チャンネル」→「オンラインストア」→「テーマ」にある「…」からテーマの複製が可能です。
ソースコードの編集画面を開く
テーマが複製できたら、ソースコードを編集していきます。
編集するのは、先ほど複製したテーマです。
こちらも、テーマを複製したときと同じく「…」から編集画面を開けます。
ソースコードを編集する
まずは、どのファイルを編集するか
次に、ファイルのどこを編集するかを見ていきます。
編集するファイル
「sections/featured-collection.liquid」に変更を加えていきます。
コードを追加する
必要な記述は、以下２つです。
- buy-buttonsの呼び出し
- product-form.jsの追加
1.buy-buttonsの呼び出し
Windowsの場合、「Ctrl＋F」を押すと検索なので、
「render ‘card-product’」と検索し、引っ掛かった部分にコードを追加していきます。
まずは、「render ‘card-product’」部分をdivタグで囲います。
その下に「カートに追加する」ボタンを表示させるコードを追加します。
以下は、その例になります。
<div>
{% render 'card-product',
.
.
.
%}
</div>
<div>
{%- assign productItemFormID = 'product-form-' | append: section.id -%}
{%- render 'buy-buttons',
product: product,
product_form_id: productItemFormID,
section_id: section.id,
-%}
</div>
追加したコードを解説すると
「render ‘buy-buttons’」で、「snippets/buy-buttons.liquid」を呼び出しています。
このファイルでは、商品を購入するためのボタンを出力するコードが記載されています。
テーマによってファイルの有無や構造が違いますが、無料テーマであれば作りはあまり変わらないかと思います。
さらに、
「product」では、商品情報を渡し
「product_form_id」では、フォームIDを設定し
「section_id」では、セクションIDを渡しています。
2.product-form.jsの追加
「product-form.js」と検索し、引っ掛かった部分に変更を加えます。
以下のように、unlessから「product-form.js」を外に出します。
{%- unless section.settings.quick_add == 'none' -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
{%- endunless -%}
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
これは、「product-form.js」を常に読み込む変更になります。
読み込む理由は、このJavaScriptは「商品をカートに追加した際に、カートアイコンに通知を出す」記述を含んでいるためです。
これで全て記述を終えたので、最後に右上の「保存」を押下してください。
追加したボタンの挙動を確認
プレビューを開いて挙動を確認したいと思います。
今回も「…」から開けるため、そちらから「プレビュー」を押下してください。
正常に動いている場合、以下のようにボタンが表示されます。
同じく、任意の「カートに追加する」を押下すると、通知が来ます。
問題なければこれで終了です。
お疲れさまでした！
最後に
初めの方に記載しました通り、コードを触る関係上、本番に反映するかどうは念入りに確認しご検討ください。
また、テーマのバージョンによって動かなくなったなど、様々な可能性があるので実装後もメンテナンスはお忘れなきよう…
