如果购物车中有变体或购物车中已有5个商品，则Shopify禁用“添加到购物车”按钮

Question

我正在Shopify上工作。 我在产品页面上设置了2个“添加到购物车”按钮，第一个按钮用于米的第一个变量，第二个按钮用于样品的最后一个变量。 所有产品都一样。 客户可以订购任意数量的仪表，但是我们希望将客户限制为每个产品/织物仅1个样品，每个订单总共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个样品（无论什么产品）仅适用于样品变体。

非常感谢

Answer 1

你需要看看这个

https://cartjs.org/

您可以在没有它的情况下完成此任务，但要付出更多的努力，尽管您需要一些经验，否则您可能会遇到困难。