Shopifyは、バリアントがカートに入っている場合、またはカートに5つがすでに入っている場合は、「カートに追加」ボタンを無効にします。

私はShopifyで作業しています。商品ページには2つの「カートに追加」ボタンがあり、メーターの第1の変形のための最初のボタンと、サンプルの最後の変形のための第2のボタンがあります。これはすべての製品で同じです。顧客は希望する数のメーターを注文することができますが、顧客は各製品/ファブリックの1つのサンプルと、1つの注文あたり合計で5つのサンプル（製品/ファブリックの）のみに制限されることを望みます。Shopifyは、バリアントがカートに入っている場合、またはカートに5つがすでに入っている場合は、「カートに追加」ボタンを無効にします。

私はいくつかの調査を行いましたが、コールバックを使用する必要があるようですが、どのように書くか作成する方法がわからないので、これを行う方法がわかりません。

<section class="sample-area"> 
    <hr style="width: 50%; margin: 20px 25%;" /> 
    <h3 style="text-transform: uppercase; padding-bottom: 15px;">Order a free sample</h3> 
<form class="sample-form" id="sample-form" method="post" action="/cart/add"> 
<input type="hidden" id="quantity" name="quantity" value="1"> 
<input type="hidden" name="id" value="{{ product.variants.last.id }}" data-variant-title="{{ product.variants.last.title }}"/> 
<input type="submit" class="action-button enter" value="{{ 'products.product.add_to_cart' | t }}" />

ここ

がカートのコーディングです：

<td class="price">{% if item.price > 0 %}<span class="money mets">{{ item.price | money }}</span>{% else %}<span>FREE</span>{% endif %}</td> 
    <td class="quantity">{% if item.variant.title contains "Sample" %}<input type="hidden" class="field" value="{{ item.quantity }}" data-id="{{ item.variant.id }}">{{ item.quantity }} 
     {% else %} 
     <select id="updates_{{ item.variant.id }}" name="updates[]" class="drops"> 
    {% for i in (2..20) %} 
    <option value="{{ i }}" {% if item.quantity == i %} selected{% endif %}>{{ i }}</option> 
    {% endfor %} 
    </select>{% endif %}</td> 
    <td class="total"><span class="money">{{ item.quantity | times: item.price | money }}</span></td> 
    <td class="remove last"><a href="/cart/change/{{ item.variant.id }}?line={{ forloop.index }}&quantity=0">v</a></td>

そして最終的にここまでに関してスクリプトです。ここ

は、第二ボタンのための私のコードですボタン

ProductView.prototype.events = { 
     "click #product-area .thumb": "determineSelectedThumb", 
     "click .fullscreen-product-viewer .thumb": "determineSelectedThumb", 
     "click .toggle-fullview": "openFullview", 
     "click .fullscreen-product-viewer": "closeFullview", 
     "click .fullscreen-product-viewer .modal": "stopProp", 
     "click #product-area .submit": "addProductToCart", 
     "click #product-area .enter": "addSampleToCart", 
     "click .modal-wrap .close": "closeFullview", 
     "change #product-area .single-option-selector": "resetErrors" 
    }; 

     ProductView.prototype.addSampleToCart = function(e) { 
     var quantity, submitButton, variant; 
     if (Theme.productQuickAdd) { 
     e.preventDefault(); 
     submitButton = this.$(e.target); 
     if (this.processing === false) { 
      submitButton.data("original-text", submitButton.val()).val(Theme.pleaseWait).addClass("disabled"); 
      this.processing = true; 
      variant = this.$(".product.variants.last.id").val(); 
      quantity = this.$("1").val(); 
      return Shopify.addItemFromForm('sample-form', (function(_this) { 
      return function(product) { 
       Shopify.getCart(function(cart) { 
       return _this.updateMiniCart(cart); 
       }); 
       submitButton.val(Theme.addedToCart); 
return setTimeout(function() { 
       submitButton.val(submitButton.data("original-text")).removeClass("disabled"); 
       return _this.processing = false; 
       }, 2000); 
      }; 
      })(this)); 
     } else { 
      return false; 
     } 
     } 
    };

何か助けていただきありがとうございます - 何かが不足している場合、またはより良い説明を希望される場合は、私にお知らせください（そして、十分に明確でないことについてお詫び申し上げます）。

繰り返すだけで、サンプルは常に製品ごとに2つのうちの最後の変種です。この機能を無効にする機能は、カート内に既に存在していて、最大5つのサンプル（製品に関係なく）がサンプルの変形のみに対応しています。

あなたはせずにそれを行うことができますが、その多くの困難になるだろう、あなたががいくつかの経験が必要になります。この

https://cartjs.org/

を見てみる必要がある多くのおかげ

出典

2016-11-03 Silver Hampshire