FROM CACHE - jp_header
解決済

初回限定品を1個限定販売したい

resonate
観光客
3 0 1

テーマ:Dawn
初回限定商品を販売します。
1ユーザーにつき初回1回限り、1個限定で販売したいと考えていますが、設定方法が見つからず悩んでいます。

 

①もし対応しているアプリがありましたら、教えてください。

②リキッド編集で可能であれば、詳細を教えていただけますと大変有難いです…。

 (HTML,CSSは問題ないですがリキッドは初心者です)


※アプリについては自分でも調べたのですが、カートごとではなくユーザーごとに回数・数量限定できるものは見つけることができませんでした。複数アプリの組合せでもよいので、ご提案いただけると助かります。

※購入時にログイン必須設定にしています。また初回限定商品にはタグをつけています。

1 件の受理された解決策

HYUGA_NIIGAKI
Shopify Partner
5 1 2

成功

はじめまして。
新垣と申します。

 

こちらの要望、技術的には少しハイレベルなお話になります。

*添付のコードは全てサンプルになり、追加調整が必要になります。

 

①要望に対応しているアプリは見聞きしたことがなく残念ですが、お力添えできません。

②LiquidおよびJSとShopify Flowを組み合わせることで可能かと思います。

以下、大まかですがステップになります。

 

Flowでの処理:顧客の限定商品購入有無を判別できるようにする。

  1. 該当商品に特定のタグ(例:"限定商品")を付与
  2. Flowにて注文作成時のトリガーを選択
  3. 条件にて注文商品内に"限定商品"タグ商品の有無を判別する
  4. "限定商品"タグ商品があった場合、アクションにて顧客に特定のタグ(例:"限定商品購入")を付与

 

コード編集での処理:"限定商品購入"タグのある顧客に"限定商品"商品の購入を不可にする

  1. 商品ページに追加
// 商品が'限定商品'タグを持ち、かつ顧客も'限定商品購入'タグも持つ場合
{% if product.tags contains '限定商品' and customer.tags contains '限定商品購入' %}
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 購入ボタンを無効化する
      const addToCartButton = document.querySelector('[type="submit"]');
      if (addToCartButton) {
        addToCartButton.disabled = true;
        addToCartButton.innerText = 'この商品は購入できません';
      }

      // カートに追加するフォームを無効化する
      const addToCartForm = document.querySelector('form[action="/cart/add"]');
      if (addToCartForm) {
        addToCartForm.addEventListener('submit', function(event) {
          event.preventDefault();
          alert('この商品は既に購入済みのため、再度購入することはできません。');
        });
      }
    });
  </script>
{% endif %}

 

コード編集での処理:全顧客に対して"限定商品"は1個のみの購入に制限する

  1. カートページに追加
// カート内の限定商品の数量をカウント
{% assign limitedItemCount = 0 %}
{% for item in cart.items %}
  {% if item.product.tags contains '限定商品' %}
    {% assign limitedItemCount = limitedItemCount | plus: item.quantity %}
  {% endif %}
{% endfor %}

<script>
document.addEventListener('DOMContentLoaded', function() {
  const limitedItemsCount = {{ limitedItemCount }};

  // 数量制限を超えている場合の処理
  if (limitedItemsCount > 1) {
    // チェックアウトボタンを無効化
    const checkoutButton = document.querySelector('[name="checkout"]');
    if (checkoutButton) {
      checkoutButton.disabled = true;
    }

    // ユーザーに警告を表示
    alert('限定商品は1個のみ購入可能です。カート内の数量を調整してください。');
  }
});
</script>

 

以上です。
少々難しい話かもしれませんが、解決への一歩となれば幸いです。

 

御ストアの益々の発展を祈っております。

元の投稿で解決策を見る

4件の返信4

Qcoltd
Shopify Partner
1013 412 388

@resonate

 

①のアプリは探せばあるかと思いますが②のリキッド編集で対応可能ですので、②の考え方を記載させていただきます。

 

今回ご提示させていただく方法は、ログインしていないと初回限定商品は購入できません。

 

  1. 商品テンプレート(liquid)を編集
    ・初回限定のタグがついている商品の場合、数量セレクターを非表示にする処理を追加
    ・ユーザーが未ログインだったら、『カートに追加ボタン』を非表示にする処理を追加
    ・ユーザーに初回限定商品を買ったことを示すタグがついていたら、『カートに追加ボタン』を非表示にする処理を追加
  2. カートテンプレート(liquid)を編集
    ・初回限定のタグがついている商品の場合、数量セレクターを非表示にする処理を追加
  3. 初回限定商品を購入した際、Shopify Flowやタグをつけるアプリを使用しユーザーに初回限定商品を買ったことを示すタグを付与

 

ご参考まで
(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
resonate
観光客
3 0 1

丁寧に教えてくださり、ありがとうございました!
今の自分のレベルでは編集が難しいことが良くわかりました(笑)
流れだけでもとても参考になりました。

HYUGA_NIIGAKI
Shopify Partner
5 1 2

成功

はじめまして。
新垣と申します。

 

こちらの要望、技術的には少しハイレベルなお話になります。

*添付のコードは全てサンプルになり、追加調整が必要になります。

 

①要望に対応しているアプリは見聞きしたことがなく残念ですが、お力添えできません。

②LiquidおよびJSとShopify Flowを組み合わせることで可能かと思います。

以下、大まかですがステップになります。

 

Flowでの処理:顧客の限定商品購入有無を判別できるようにする。

  1. 該当商品に特定のタグ(例:"限定商品")を付与
  2. Flowにて注文作成時のトリガーを選択
  3. 条件にて注文商品内に"限定商品"タグ商品の有無を判別する
  4. "限定商品"タグ商品があった場合、アクションにて顧客に特定のタグ(例:"限定商品購入")を付与

 

コード編集での処理:"限定商品購入"タグのある顧客に"限定商品"商品の購入を不可にする

  1. 商品ページに追加
// 商品が'限定商品'タグを持ち、かつ顧客も'限定商品購入'タグも持つ場合
{% if product.tags contains '限定商品' and customer.tags contains '限定商品購入' %}
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 購入ボタンを無効化する
      const addToCartButton = document.querySelector('[type="submit"]');
      if (addToCartButton) {
        addToCartButton.disabled = true;
        addToCartButton.innerText = 'この商品は購入できません';
      }

      // カートに追加するフォームを無効化する
      const addToCartForm = document.querySelector('form[action="/cart/add"]');
      if (addToCartForm) {
        addToCartForm.addEventListener('submit', function(event) {
          event.preventDefault();
          alert('この商品は既に購入済みのため、再度購入することはできません。');
        });
      }
    });
  </script>
{% endif %}

 

コード編集での処理:全顧客に対して"限定商品"は1個のみの購入に制限する

  1. カートページに追加
// カート内の限定商品の数量をカウント
{% assign limitedItemCount = 0 %}
{% for item in cart.items %}
  {% if item.product.tags contains '限定商品' %}
    {% assign limitedItemCount = limitedItemCount | plus: item.quantity %}
  {% endif %}
{% endfor %}

<script>
document.addEventListener('DOMContentLoaded', function() {
  const limitedItemsCount = {{ limitedItemCount }};

  // 数量制限を超えている場合の処理
  if (limitedItemsCount > 1) {
    // チェックアウトボタンを無効化
    const checkoutButton = document.querySelector('[name="checkout"]');
    if (checkoutButton) {
      checkoutButton.disabled = true;
    }

    // ユーザーに警告を表示
    alert('限定商品は1個のみ購入可能です。カート内の数量を調整してください。');
  }
});
</script>

 

以上です。
少々難しい話かもしれませんが、解決への一歩となれば幸いです。

 

御ストアの益々の発展を祈っております。

resonate
観光客
3 0 1

丁寧に教えてくださり、ありがとうございます!

コードまで記述くださり、心より感謝申し上げます。
Flowから勉強してみます。