- コレクションページにお気に入りボタンを追加することができます。
- お気に入りボタンのカスタマイズ方法は、こちらをご覧ください。
- お気に入りに登録した顧客の一覧は、StoreCRM→[お気に入り]→[お気に入り一覧]で確認できます。
コレクションページにお気に入りボタンを追加する
- 本マニュアルは「Dawn ver.15.2.0」を使用して解説をおこないます。
- 別テーマ、別バージョンをご使用の場合はお問い合わせからてご使用のテーマ名と共にご連絡ください。
1. テーマ→お気に入りを導入したいテーマ→[・・・]→[コードを編集]をクリックします。
2. [snippets]→[card-product.liquid]を開きます
3. 207行目、{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}の下に以下のコードを貼り付けます。お気に入りボタンに文言を付けるかつけないかを選択することができるので、ストアに合わせて選択します。
念のため、保存も忘れずにしておきましょう。
HTML容量を抑えるため、data-variants は id（バリエーションID）と title（バリエーション名）の2項目だけを出力します。全項目を出力すると、価格・SKU・画像などの情報が商品カードごとに繰り返され、特にバリエーション数や表示商品数が多いページで表示速度に影響します。
以下はお気に入りボタン専用のコードです。メール・LINEの再入荷通知ボタンは在庫切れ判定に available も使用するため、同じ2項目への削減は適用しないでください。テーマの商品変数が product など別の名前の場合は、card_product をその変数名へ置き換えてください。引用符は半角の " を使用します。一覧用は data-variant-selector で選択するため、data-variant-id を指定しません。単一バリエーションは自動的に選択されます。
【文言有りver】
<div class="storecrm-favorite"
data-product-id="{{ card_product.id }}"
data-product-tags="{{ card_product.tags | json | escape }}"
data-variant-selector
data-variants="[{%- for v in card_product.variants -%}{"id":{{ v.id }},"title":{{ v.title | json | escape }}}{%- unless forloop.last -%},{%- endunless -%}{%- endfor -%}]"></div>【文言無しver】
<div class="storecrm-favorite"
data-product-id="{{ card_product.id }}"
data-product-tags="{{ card_product.tags | json | escape }}"
data-no-label
data-variant-selector
data-variants="[{%- for v in card_product.variants -%}{"id":{{ v.id }},"title":{{ v.title | json | escape }}}{%- unless forloop.last -%},{%- endunless -%}{%- endfor -%}]"></div>
4. [asset]→[component-card.css]を開きます。
5. [.card__heading a::after]で検索をおこない、350行目の
bottom: 0; → bottom: 50; に変更します。
保存も忘れずにしておきましょう。
6. コレクションページを確認し、お気に入りボタンが正しく表示されていることを確認します。
既存の全項目出力コードを変更する場合は、テーマを複製してから data-variants を上記の軽量版へ差し替えてください。アプリ更新だけでは、テーマへ手動で貼り付けたコードは変更されません。変更後は、ハートの表示、複数バリエーションの選択、単一バリエーション商品の登録、登録・解除、お気に入り一覧への反映を確認してください。
関連ページ
Japanese 
English