shopify wishlist

Shopifyウィッシュリスト

Shopify ストアに単純な顧客ウィッシュリストを実装するために使用されるファイルのセット。

バージョン: 2.3.0 - オンラインストア 2.0 と互換性があります。

以前のバージョン:

• v2.1.0 (オンラインストア 1.0)
• v2.0.0
• v1.0.0

インストール

Shopify Wishlistの使用を開始するには、このリポジトリ内のファイルの一部を Shopify テーマ コードにコピーする必要があります。

注: このセットアップは、製品カードを表示するためのスニペットがあることを前提としています。

コピーするファイル:

リポジトリファイル	Shopify テーマの場所
button-wishlist.liquid	snippets/
icon-heart.liquid	snippets/
wishlist-template.liquid	sections/
product-card-template.liquid	sections/
page.wishlist.json	templates/
product.card.json	templates/
Wishlist.js	assets/

1. button-wishlist.liquidスニペットを既存の商品カード スニペット内、またはproduct.liquidテンプレート上に配置します。
   • {%- render 'button-wishlist', product: product -%}
   • これにより、顧客はウィッシュリストにアイテムを追加したり、ウィッシュリストからアイテムを削除したりできるようになります。
2. product-card-template.liquidセクションのスニペットを既存の製品カード スニペットに置き換えます。
   • ステップ 1 と同じスニペット
   • 製品カード スニペットでは別の製品変数名が使用されている可能性があります。再確認してください。
3. 製品カード要素のクラス名をWishlist.jsのselectorsオブジェクトに追加します。
   • 例: 製品カードのクラス名が.product-itemの場合、 selectors変数は次のようになります。

      const selectors = {
       button: '[button-wishlist]',
       grid: '[grid-wishlist]',
       productCard: '.product-item', // your classname here
     };
     

4. Shopify 管理画面で新しいページを作成します。
   • 管理者 > オンライン ストア > ページ > ページの追加
   • 新しいページのtemplateをpage.wishlistに設定します
   • このページには、顧客が保存したウィッシュリストの項目が表示されます
5. スクリプトをtheme.liquidの</head>終了タグの前に配置します。
   • <script src="{{ 'Wishlist.js' | asset_url }}" defer="defer"></script>

それでおしまい！ Shopify ストアを表示すると、製品カード内 (コレクション ページなど) または製品テンプレート上にウィッシュリスト ボタンが表示されます。ウィッシュリスト ボタンをクリックすると、顧客のウィッシュリストに項目が追加または削除され、ボタン上でアクティブなスタイリングがトリガーされます。ウィッシュリスト項目を追加した後、ステップ 3 で作成したページに移動すると、ウィッシュリストを表示できます。

デモ Shopify ストア

注意事項

• このウィッシュリストは、JavaScript と localStorage を使用して顧客のウィッシュリストをブラウザに保存します。ユーザーがブラウザのストレージをクリアしたり、シークレット モードで閲覧したりすると、localStorage は保持されません。
• 顧客が製品を閲覧してウィッシュリストに追加すると、対応する製品がすでにウィッシュリストに含まれている場合、スクリプトはウィッシュリストのボタンを自動的にアクティブ状態に設定します。
• これらのファイルにはスタイルや構造が含まれていないため、必要に応じてカスタマイズできます。これは、余計なもののないウィッシュリストの基本機能を提供することを目的としています。
• 未公開のテーマで作業している場合は、公開済みのテーマでも新しいテンプレートを作成する必要があります。 Shopify 管理者は、公開されたテーマにテンプレートが存在する場合にのみ、ページをテンプレートに割り当てることを許可します。
• Online Store 2.0 バージョンにアップグレードする場合は、古い.liquidウィッシュリストと製品カード テンプレートを削除する必要があります。