Shopifyカートページにギフトラッピング機能を実装する方法【コード編集初心者向け】

Shopifyでギフトラッピング機能を付けたいけど、アプリを使うとお金がかかる・・・。

検索するとshopify公式で出しているらしい「カートページにギフトラッピング機能を実装する方法」を紹介する記事を発見！

しかし、試してみたところ、なぜかエラーコメントが出る・・・

仕方ないので、自力でカートページにギフトラッピング機能を付けてみました。

この記事を書いた人

パピティー

htmlとCSSのきほん本を3冊読んだだけの初心者が、やりたいことベースで、shopifyとwordpressに奮闘中。

完成イメージ
設定の流れ
まとめ

完成イメージ

商品がカートに入っている場合、カート下に「ギフトラッピングを追加」ボタンを表示します。

「ギフトラッピングを追加」ボタンをクリックすると以下のように、「ギフトラッピングを追加」ボタンは消えてギフトラッピング商品がカートに追加されます。

カートからギフトラッピング商品を削除して更新ボタンを押すと再び「ギフトラッピングを追加」ボタンが表示されます。

設定の流れ

ギフトを商品登録
メニューにGift wrappingを追加
「gift-wrapping.liquid」スニペットを新設
コードを書く
main-cart-items.liquidの「/form」直前に「{% render ‘gift-wrapping’ %}」を記入

では、早速設定していきましょう！

１．ギフトを商品登録

商品名や画像、説明などを通常の商品と同様に登録します。

２．メニューにGift wrappingを追加

Gift wrappingというメニューを追加し、１.で登録した商品を紐づけます。

ハンドル名は「gift-wrapping」としてください。（４．のコード内で使用します）

３．「gift-wrapping.liquid」スニペットを新設

スニペット箇所にgift-wrappingというリキッドファイルを新たに作成します。

４．コードを書く

３．で作ったgift-wrapping.liquidに以下のコードを貼り付ける。

{% if linklists.gift-wrapping.links.size > 0 and linklists.gift-wrapping.links.first.type == ‘product_link’ %}

<div id="is-a-gift" style="clear: left; margin: 30px 0" class="clearfix rte">
    <button id="gift-wrapping-btn">ギフトラッピングを追加</button>
  </div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id %}

return fetch('/cart/update.js', request)
        .then(response => response.json())
        .then(data => {
          // カートの更新後、ボタンの表示状態をチェックして更新します
          checkCartAndUpdateButton();
        })
        .catch(error => {
          console.error('カートの更新中にエラーが発生しました:', error);
          alert('カートの更新中にエラーが発生しました: ' + error.message);
        });
    }

document.addEventListener("DOMContentLoaded", function() {
      var giftWrappingBtn = document.getElementById('gift-wrapping-btn');

// ページ読み込み時にボタンの表示状態を初期化します
      checkCartAndUpdateButton();

giftWrappingBtn.addEventListener("click", function() {
        var button = this;
        // 現在のボタンの表示状態に応じて、ギフトラッピングを追加または削除します
        var quantity = button.style.display === 'none' ? 0 : 1;
        updateCart(quantity);
      });
    });
  </script>

{% else %}
  <p style="clear: left; margin: 30px 0" class="rte">
    現在、ギフトラッピングオプションを追加することができません。もう一度お試しください。それでも問題が解決しない場合は、カスタマーサポートまでお問い合わせください。
  </p>
{% endif %}

※CSS箇所でボタンのデザインやテキストはお好きなように調整してください。

５．main-cart-items.liquidの「/form」直前に「{% render ‘gift-wrapping’ %}」を記入

main-cart-items.liquidの「/form」直前に

{% render ‘gift-wrapping’ %}

を追記するだけ。

これでカートに商品を追加して、カートページを確認すると「ギフトラッピングを追加」ボタンが追加されているはずです。

まとめ

Shopifyのカートページにギフトラッピング機能を追加する方法は以下の通りです。

商品登録
メニュー登録
スニペット新設
main-cart-item.liquidに埋め込み

ギフトラッピング資材を商品一覧やカテゴリなどに表示させたくない場合には、コレクションから除外設定をお忘れなく。

shopifyのカートページにアプリなしでギフトラッピング機能を付ける方法