Popup(3)photoshop(1)php(1)pug(1)seo(2)shopify(5)slick(5)swiper(6)wordpress(6)脱jQuery(3)show_chartFXfxfxタグ一覧トレード戦略(16)トレード記録(16)手法(2)book日記diarydiaryタグ一覧Apps(1)ツール(1)ライフハック(1)mailお問い合わせcontactHOMEweb商品の合わせ買いを実装するweb商品の合わせ買いを実装する公開日:2019/08/05shopify今回はshopifyで合わせ買いを実装した方法を書いていきたいと思います。最初はアプリを探していたんですが、欲しい機能を持っているアプリがなかったので、自分で制作することにしました。Analyticsの拡張eコマースに「商品がカートに追加された回数」を送信する方法も記載しています。今回実装する方法を紹介する上で、以下のことが条件です。ecAddCartSend表示イメージと制作コードまず最初に制作後の表示イメージと、該当箇所のコードをご覧ください。font-size:24px;}管理画面での合わせ買いの設定方法ここでは合わせ買い商品を管理画面で設定する方法を説明します。Editorアプリがインストールされていることが前提で説明していきます。Metafields」が追加されます。Metafields」を押すと別ウィンドウでMetafieldsを設定できる画面が開きます。Metafield」で新しくmetafieldを追加します。type」は「string」にします。「Value」には合わせ買いに設定したい商品のhandleを入れます。複数の商品のhandleを入れる場合は、コンマ区切りでhandleを入れます。ここで注意したいのは、コンマ前後に空白を入れないことです。Metafieldボタン」「Metafieldsの設定画面」のキャプチャを載せています。商品のhandleは、商品管理画面の「ウェブサイトのSEOを編集する」を押すと確認できます。Editorの管理画面)これで商品の合わせ買いの設定は完了です。商品にバリエーションがある場合や、合わせ買いに設定した商品にバリエーションがある場合でも全てが表示されるようにしています。拡張eコマースの設定ができている前提でこちらは説明していきます。この合わせ買い設定で重要なことは、一度に複数の商品をカートに追加できることにあります。拡張eコマースでは、1つの商品ページから「商品がカートに追加された回数」を1回しか送信できません。これは何を意味しているかというと、合わせ買いのカスタマイズをして、一度に3つ商品をカートに追加しても「商品がカートに追加された回数」は1回になるのです。set)」になってしまい、分析が困難になってしまいます。そこで、今回紹介しているjsでは、追加した商品分を「商品がカートに追加された回数」として送信する関数を記述しています。set)」を除外してください。Analyticsに送信されている情報で、合わせ買いコードの影響は出ませんので、安心して合わせ買いコードをお使いください。liquidファイルのコードの解説ここからはコード解説です。liquidのタグ説明にもなってきますから、しっかりカスタマイズする人だけ読んでくれれば大丈夫です。コード上部から必要そうなとこだけ説明していきますので、可能な人はこちらを別ウインドウで開いて読むと分かりやすいと思います。}}"></div>まずは合わせ買いのところではなく、商品情報を出力している箇所です。}}は登録している商品の1枚目の画像パスを出力しています。ここではwidthが300pxの画像を出力しています。%}これは商品にバリエーションがあるかどうかを判定しています。%}が「true」を返します。%}商品のバリエーションを全てoptionタグで出力しています。}}は商品の全てのバリエーション情報が入っている配列です。%}と書くことで、バリエーションを1つ1つ取り出しています。}}はバリエーションのタイトルです。商品名ではないことに気をつけてください。S,M,L)がそれぞれバリエーションのタイトルです。・・・)がそれぞれバリエーションのタイトルです。}}によってshopifyは商品を判定していますので、非常に重要な値です。%}商品にバリエーションがない場合は単純に商品金額を出力しています。ここからが合わせ買い商品の出力関連のコードです。products」があるかどうかを判定しています。metafieldを設定するように管理画面での合わせ買いの設定方法で説明したかと思います。ここで「Namespace」や「Key」の値を間違っていると正しく出力されません。%}ここでは「bundle_products」に「product.metafields['bundle'].products」の値をコンマ区切りで、配列にして格納しています。split:','」は指定した文字を区切りとして配列を生成するFilterです。["pants","jacket"]です。jacket"]となってしまいますので、metafieldでの設定値に気をつけてください。%}for文で、bundle_productsの中身を1つずつ取り出して、handleに格納して回しています。%}「all_products[商品のhandle]」で特定の商品情報を取得できます。%}で、bundleにall_products[handle]を格納しています。ここでbundleオブジェクトはproductオブジェクトと同じようなオブジェクトです。bundle.titleで合わせ買い商品の商品名を出力できます。他の金額などの情報についても同様です。%}合わせ買い商品が利用できるかどうかを判別しています。Store」にチェックがついているかどうかを判定しています。%}合わせ買い商品をバリエーションごとに出力しています。さきほど説明した商品のバリエーションとほとんど説明がかぶりますが、違う箇所だけ説明します。typeを取得できます。Title」になってしまうので、この場合は「variant.title」を出力しないようにしています。}}</span></div>このコードは、総額を表示する箇所です。総額を動的に変更するにはjavascriptでします。}}で出力しています。%}ここは「カートに追加する」ボタンの表示箇所です。%}(以下、formオブジェクト)は呪文のようなもので、特別説明することがありません。このformオブジェクトの間に、inputタグやselectタグなどで「name="id"」、「value="商品のvariantID"」を設置すれば目的の商品をカートに追加できます。「name="id"」のままだと、いくつinputタグなどを記載しても1つしかカートに追加されません。そこで「name="id[]"」として、複数商品を一度にカート追加できるようにしています。id名「PurchaseBundleItems」の空の要素がありますが、ここに選択した合わせ買い商品のinputタグを入れていきます。初期値として、商品バリエーション1つ目をformオブジェクトの中に入れています。上記の2行目の箇所です。cart」で設定しているテキストを出力します。以上で、liquidファイルのコードの解説終了です。次にjavascript(jQuery)のコード解説です。これも可能な人はこちらを別ウィンドウで開いて読むと分かりやすいと思いますここでは関数ごとに説明しています。});}これは合わせ買い商品をクリックしたときに発火する関数です。簡単に言うとやっていることは以下のことです。クリックした要素へのクラス「selected」の付与または除去クリックした要素がクラス「selected」を持っている場合は、formオブジェクト内にクリックした合わせ買い商品の情報を入れます。(formオブジェクトに関してはこちら)クリックした要素がクラス「selected」を持っていない場合は、formオブジェクト内にあるクリックした合わせ買い商品の情報を削除します。関数の中で、「data-sku」「data-type」がありますが、これは拡張eコマースで送信する値として使用しています。「data-price」は拡張eコマース、総額を計算するために使用しています。カートに追加するだけでいいのなら、必須は「data-variant」のみです。この値をinputタグのvalue値として入れて、カートに追加するボタンを押せば、カートに追加されます。totalPriceを入れています。});}商品のバリエーションを選択したときに発火する関数です。これは以下のようなことをやっています。totalPriceを入れています。ecArrayMake();}これはid「totalPrice」内に選択した商品、合わせ買い商品の総額を出力する関数です。inputタグの「data-price」から金額を取得して計算しています。});}これは拡張eコマースへ「商品がカートに追加された回数」を送信するための配列「ecArray」を作成するための関数です。inputタグの、name="id[]"から必要な情報を取得しています。analyticsへ「商品がカートに追加された回数」を送信する関数です。id「AddToCart」をクリックした時に発火するように設定しています。カートへ追加するボタンのid名が違う場合は適宜こちらを変更してください。shopifyをカスタマイズするときはぜひ、使ってください〜。