创建第二个addtocart按钮/表单Shopify

Question

我正在使用Shopify，并设法在页面上添加第二个“addtocart”按钮，以便人们可以订购样品。每个产品有2个变体 - 第1个= Meterage，然后可以选择数量，第2个=样本，没有数量框，它链接到按钮以自动添加1。

这个工作正常，但是我们不希望这样，当一个人将某些东西添加到购物车后，无论是计量还是样品，它们都会被带到购物车页面。相反，他们会留在产品页面上并更新迷你卡。

主题具有此功能，并且在第一个按钮（链接到meterage的按钮）上工作得很好但是如果我尝试将第一个按钮复制到示例按钮（即其类名等），那么当您单击时在它上面，它增加了meterage和数量字段中的任何数量，而不是添加1个样本。

我试过复制javascript并添加一个新类，我尝试创建一个新的部分，因为我认为它会链接到这个，但没有任何工作。我想要做的就是如果有人点击“订购样品”按钮，那么他们就会停留在产品页面上，并更新微型车。不幸的是，当涉及到javascript时，我是一个完全的新手，所以我无法解决这个问题。

以下是产品页面的液体编码：

    <section id="product-area" class="clearfix" itemscope itemtype="http://schema.org/Product" data-product-id="{{ product.id }}">

    <meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
    {% if settings.show-brand-names %}
      <meta itemprop="brand" content="{{ product.vendor }}" />
    {% endif %}
    <meta itemprop="name" content="{{ product.title }}">

    <div class="showcase product-images">
      <div class="container {% if product.images.size == 1 or settings.product-thumb-orientation == 'below' or settings.product-thumb-orientation == 'list' %}wide{% endif %}">
        <div class="product-main-image wrap">
          {% unless settings.product-thumb-orientation == 'list' %}
            {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
            <img itemprop="image" alt="{{ featured_image.alt }}" src="{{ featured_image | img_url: 'original' }}">
            {% if settings.product-image-borders %}<span class="overlay"></span>{% endif %}
          {% else %}
            {% for image in product.images %}
              <div class="image-list-item">
                <img itemprop="image" alt="{{ image.alt }}" src="{{ image | img_url: 'original' }}">
                {% if settings.product-image-borders %}<span class="overlay"></span>{% endif %}
              </div>
            {% endfor %}
          {% endunless %}

          {% if settings.product-image-zoom %}
            <div class="product-zoom"></div>
          {% endif %}
        </div>
      </div>

      {% if product.images.size > 1 and settings.product-thumb-orientation != 'list' %}
        <div class="pager {% if settings.product-thumb-orientation == 'below' %}below-main-image{% endif %}">
          <div class="inner">
            {% for image in product.images %}
              <div class="wrap thumb {% include 'for-looper' %} {% if forloop.first %}active{% endif %}">
                <img alt="{{ image.alt }}" src="{{ image.src | product_img_url: 'small' }}" data-high-res-url="{{ image.src | product_img_url: 'original' }}">
                <span class="overlay"></span>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endif %}

      {% if settings.display-fullsize-product-viewer %}
        <div class="notes">
          <a href="#" class="toggle-fullview"><span class="icon">l</span>{{ 'products.product.view_fullsize_image' | t }}</a>
        </div>
      {% endif %}
      {% if settings.display-product-email-link %}
        <div class="notes">
          <a href="mailto:{{ shop.email }}?Subject={{ product.title | escape }}" class="email-us"><span class="icon">j</span>{{ 'products.product.email_us' | t }}</a>
        </div>
      {% endif %}
      {% if settings.enable-fitting-guide %}
        <div class="notes">
          <a href="/pages/{{ settings.fitting-guide-link }}" class="fitting-guide"><span class="icon">{{ settings.fitting-guide-icon }}</span>{{ 'products.product.fitting_guide' | t }}</a>
        </div>
      {% endif %}
    </div>

    <div class="product-details-wrapper">
    <div class="product-details {% if product.images.size > 1 %}border{% endif %} {% if product.variants.size == 1 and settings.display-product-quantity-option == false %}no-options{% endif %}" itemprop="offers" itemscope itemtype="http://schema.org/Offer">

      <div class="module header">
        {% if settings.show-brand-names %}
          <h3 class="brand">{{ product.vendor }}</h3>
        {% endif %}
        <h1 itemprop="name" class="title">{{ product.title }}</h1>
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
        {% if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %}
          <p class="price sale"><span class="original money">{{ product.selected_or_first_available_variant.compare_at_price | money }}</span> <span class="money mets" itemprop="price">{{ product.selected_or_first_available_variant.price | money }}</span></p>
        {% else %}
          <p class="price"><span class="money mets" itemprop="price">{{ product.selected_or_first_available_variant.price | money }}</span></p>
        {% endif %}
      </div>

      <div class="module options {% unless product.available %}unavailable{% endunless %}">
        <h3 style="text-transform: uppercase;">Order by the metre</h3>

{% if product.available %} 

<!-- If the product is available then... -->
        <link itemprop="availability" href="http://schema.org/InStock" />
        <form class="product-form" id="product-form" action="/cart/add" method="post">

          <input type="hidden" name="id" class="product-select" value="{{ product.selected_or_first_available_variant.id }}" data-variant-title="{{ product.selected_or_first_available_variant.title }}" />

          <div id="infiniteoptions-container" class="side-labels"></div>
          <div id="uploadery-container" class="side-labels"></div>


            <div class="selector-wrapper quantity" style="margin-bottom: 0;">
              <p>Quantity &nbsp;<select id="quantity" class="drops" name="quantity">
{% for i in (2..30) %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select> metres</p>
              <p><em>Minimum 2 metres. Whole metres only</em></p>
            </div>

          <div class="selector-wrapper submit-wrapper">
            {% if product.options.size > 1 %}<label></label>{% endif %}<input type="submit" class="action-button submit" value="{{ 'products.product.add_to_cart' | t }}">
          </div>

        </form>
        {% else %}

          <link itemprop="availability" href="http://schema.org/OutOfStock" />
          <span class="action-button unavailable disabled">{{ 'products.product.sold_out' | t }}</span>

        {% endif %}
        <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" name="id" value="{{ product.variants.last.id }}" data-variant-title="{{ product.variants.last.title }}" quantity="1"/>
    <input type="submit" class="action-button" value="{{ 'products.product.add_to_cart' | t }}" />
  </form> 
        <p><em>Max. 5 samples per order</em></p>
      </div>

      {% if product.description.size > 0 %}
      <div class="module description">
        <div class="rte" itemprop="description">{{ product.description }}</div>
      </div>
      {% endif %}

    </div>
    </div>

  </section>

然后是Quickshop编码（因为这也需要在那里实现）

    <div id="quick-shop-{{ itemType.id }}" class="quick-shop-content clearfix" {% if itemType.options.size == 1 %}data-option="{{ itemType.options.first | escape }}"{% endif %}>

  <div class="showcase {% if itemType.images.size == 1 %}wide{% endif %}">
    <div class="container {% if itemType.images.size == 1 or settings.product-thumb-orientation == 'below' %}wide{% endif %}">
      <div class="wrap">
        <img alt="{{ firstVariantImage.alt }}" src="{{ firstVariantImage | product_img_url: 'large' }}">
        {% if settings.product-image-borders %}<span class="overlay"></span>{% endif %}
      </div>
    </div>

    {% if itemType.images.size > 1 %}
      <div class="pager {% if settings.product-thumb-orientation == 'below' %}below-main-image{% endif %}">
        <div class="inner">
          {% for image in itemType.images %}
            <div class="wrap thumb {% include 'for-looper' %} {% if forloop.first %}active{% endif %}">
              <img alt="{{ image.alt }}" src="{{ image.src | product_img_url: 'small' }}" data-high-res-url="{{ image.src | product_img_url: 'large' }}">
              <span class="overlay"></span>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    {% if settings.display-product-email-link %}<div class="notes"><a href="mailto:{{ shop.email }}?subject={{ itemType.title | escape }}" class="email-us"><span class="icon">j</span>{{ 'products.product.email_us' | t }}</a></div>{% endif %}
  </div>

  <div class="product-details-wrapper {% if itemType.variants.size == 1 and settings.display-product-quantity-option == false %}no-options{% endif %}">

    <div class="module header">
      <span class="close-modal">v</span>
      {% if settings.show-brand-names %}
        <p class="brand">{{ itemType.vendor }}</p>
      {% endif %}
      <p class="title"><a href="{{ itemType.url }}">{{ itemType.title }}</a></p>
      {% if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %}
          <p class="price sale"><span class="original money">{{ product.selected_or_first_available_variant.compare_at_price | money }}</span> <span class="money mets" itemprop="price">{{ product.selected_or_first_available_variant.price | money }}</span></p>
        {% else %}
          <p class="price"><span class="money mets" itemprop="price">{{ product.selected_or_first_available_variant.price | money }}</span></p>
        {% endif %}
    </div>

    <form class="module options quick-shop-form {% unless itemType.available %}unavailable{% endunless %}" action="/cart/add" method="post" id="quick-shop-form-{{ itemType.id }}" data-product-id="{{ itemType.id }}">
<h3 style="text-transform: uppercase; padding-bottom: 10px;">Order by the metre</h3>
      {% if itemType.available %} <!-- If the product is available then... -->

        <input type="hidden" name="id" class="product-select" value="{{ firstVariant.id }}" data-variant-title="{{ firstVariant.title }}" />

        <div class="selector-wrapper quantity" style="margin-bottom: 0;">
              <p>Quantity &nbsp;<select id="quantity" class="drops" name="quantity">
{% for i in (2..30) %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select> metres</p>
              <p><em>Minimum 2 metres. Whole metres only</em></p>
            </div>

        <div class="selector-wrapper">
          {% if itemType.options.size > 1 %}<label></label>{% endif %}
          <input class="action-button submit" type="submit" value="{{ 'products.product.add_to_cart' | t }}" style="margin-top: 0;"/>
      </div>

        <div class="error-wrap"></div>

      {% else %}

        <span class="action-button unavailable disabled">{{ 'products.product.sold_out' | t }}</span>

      {% endif %}

    </form>
<hr style="width: 50%; margin: 0 25% 20px 25%;" />
        <h3 style="text-transform: uppercase; padding-bottom: 15px;">Order a free sample</h3>
    <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.last.id }}" />
    <input type="submit" class="action-button" value="{{ 'products.product.add_to_cart' | t }}" />
  </form> 
        <p><em>Max. 5 samples per order</em></p>
    <div class="module description">
      {% if itemType.description.size > 0 %}
        <div class="rte special">{{ itemType.description }}</div>
      {% endif %}
      <a class="go-to-product" href="{{ itemType.url }}">{{ 'products.product.visit_page' | t }} <span>→</span></a>
    </div>

  </div>

</div>

<script>
  Theme.products["{{ itemType.id }}"] = {{ itemType | json }};
  Theme.products["{{ product.id }}"].firstVariant = {{ product.selected_or_first_available_variant.id | json }};
</script>

接下来是与此相关的javascript部分（我想！如果我遗漏了某些内容，请说出来，我可以发布）

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 .modal-wrap .close": "closeFullview",
  "change #product-area .single-option-selector": "resetErrors"
};

ProductView.prototype.addProductToCart = 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-select").val();
      quantity = this.$(".product-quantity").val();
      return Shopify.addItemFromForm('product-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;
    }
  }
};

ProductView.prototype.updateMiniCart = function(cart) {
  var i, item, itemProperties, itemText, j, len, miniCartItemsWrap, productPrice, propertiesArray, propertyKeysArray, ref, variant;
  miniCartItemsWrap = $(".mini-cart-items-wrap");
  miniCartItemsWrap.empty();
  if (cart.items.length !== 1) {
    itemText = Theme.cartItemsOther;
  } else {
    itemText = Theme.cartItemsOne;
    $(".mini-cart .options").show();
    miniCartItemsWrap.find(".no-items").hide();
  }
  $(".mini-cart-wrap label").html("<span class='item-count'>" + cart.items.length + "</span> " + itemText);
  ref = cart.items;
  for (j = 0, len = ref.length; j < len; j++) {
    item = ref[j];
    productPrice = Shopify.formatMoney(item.line_price, Theme.moneyFormat);
    variant = item.variant_title ? "<p class='variant'>" + item.variant_title + "</p>" : "";
    itemProperties = "";
    if (item.properties) {
      propertyKeysArray = Object.keys(item.properties);
      propertiesArray = _.values(item.properties);
      i = 0;
      while (i < propertyKeysArray.length) {
        if (propertiesArray[i].length) {
          itemProperties = itemProperties + ("<p class=\"property\">\n    <span class=\"property-label\">" + propertyKeysArray[i] + ":</span>\n    <span class=\"property-value\">" + propertiesArray[i] + "</span>\n</p>");
        }
        i++;
      }
    }
    miniCartItemsWrap.append("<div id=\"item-" + item.variant_id + "\" class=\"item clearfix\">\n    <div class=\"image-wrap\">\n        <img alt=\"" + item.title + "\" src=\"" + item.image + "\">\n        <a class=\"overlay\" href=\"" + item.url + "\"></a>\n    </div>\n    <div class=\"details\">\n        <p class=\"brand\">" + item.vendor + "</p>\n        <p class=\"title\"><a href=\"" + item.url + "\">" + item.product_title + "</a><span class=\"quantity\">× <span class=\"count\">" + item.quantity + "</span></span></p>\n        <p class=\"price\"><span class=\"money\">" + productPrice + "</span></p>\n        " + variant + "\n        " + itemProperties + "\n    </div>\n</div>");
  }
  if (Theme.currencySwitcher) {
    return $(document.body).trigger("switch-currency");
  }
};

QuickShopView.prototype.updateMiniCart = function(cart, properties) {
  var i, item, itemProperties, itemText, j, len, miniCartItemsWrap, productPrice, propertiesArray, propertyKeysArray, ref, variant;
  miniCartItemsWrap = $(".mini-cart-items-wrap");
  miniCartItemsWrap.empty();
  if (cart.items.length !== 1) {
    itemText = Theme.cartItemsOther;
  } else {
    itemText = Theme.cartItemsOne;
    $(".mini-cart .options").show();
    miniCartItemsWrap.find(".no-items").hide();
  }
  $(".mini-cart-wrap label").html("<span class='items-count'>" + cart.items.length + "</span> " + itemText);
  ref = cart.items;
  for (j = 0, len = ref.length; j < len; j++) {
    item = ref[j];
    productPrice = Shopify.formatMoney(item.line_price, Theme.moneyFormat);
    variant = item.variant_title ? "<p class='variant'>" + item.variant_title + "</p>" : "";
    itemProperties = "";
    if (item.properties) {
      propertyKeysArray = Object.keys(item.properties);
      propertiesArray = _.values(item.properties);
      i = 0;
      while (i < propertyKeysArray.length) {
        if (propertiesArray[i].length) {
          itemProperties = itemProperties + ("<p class=\"property\">\n    <span class=\"property-label\">" + propertyKeysArray[i] + ":</span>\n    <span class=\"property-value\">" + propertiesArray[i] + "</span>\n</p>");
        }
        i++;
      }
    }
    miniCartItemsWrap.append("<div id=\"item-" + item.variant_id + "\" class=\"item clearfix\">\n    <div class=\"image-wrap\">\n        <img alt=\"" + item.title + "\" src=\"" + item.image + "\">\n        <a class=\"overlay\" href=\"" + item.url + "\"></a>\n    </div>\n    <div class=\"details\">\n        <p class=\"brand\">" + item.vendor + "</p>\n        <p class=\"title\"><a href=\"" + item.url + "\">" + item.product_title + "</a><span class=\"quantity\">× <span class=\"count\">" + item.quantity + "</span></span></p>\n        <p class=\"price\"><span class=\"money\">" + productPrice + "</span></p>\n        " + variant + "\n        " + itemProperties + "\n    </div>\n</div>");
  }
  if (Theme.currencySwitcher) {
    return $(document.body).trigger("switch-currency");
  }
};

QuickShopView.prototype.addToCart = function(e) {
  var button, imageAlt, j, k, len, len1, postToCartUrl, productFormID, properties, ref, selector, thumb, variantSelectors, variantTitle;
  if (Theme.productQuickAdd) {
    e.preventDefault();
    variantTitle = '';
    variantSelectors = this.quickShop.find('.single-option-selector');
    for (j = 0, len = variantSelectors.length; j < len; j++) {
      selector = variantSelectors[j];
      selector = $(selector);
      variantTitle += selector.val() + " / ";
    }
    variantTitle = variantTitle.substring(0, variantTitle.length - 3);
    properties = {};
    properties.variant = {};
    properties.product = {};
    properties.quantity = {};
    properties.matching_image = {};
    properties.quantity.added = this.quickShop.find('.product-quantity').val();
    properties.variant.id = this.quickShop.find('.product-select').val();
    properties.variant.title = this.quickShop.find('.product-select').data('variant-title') || variantTitle;
    properties.product.title = this.quickShop.find('.title').text();
    properties.product.url = this.quickShop.find('.title a').attr('href');
    ref = this.quickShop.find('.thumb');
    for (k = 0, len1 = ref.length; k < len1; k++) {
      thumb = ref[k];
      imageAlt = $(thumb).find('img').attr('alt');
      if (variantTitle.indexOf(imageAlt) > -1) {
        properties.matching_image = $(thumb).find('img').attr('src');
      }
    }
    postToCartUrl = "/cart/add.js?quantity=" +     properties.quantity.added + "&id=" + properties.variant.id;
    productFormID = this.quickShop.find('.quick-shop-form').attr('id');
    button = this.quickShop.find('.submit');
    button.data('original-text', button.val());
    button.val(Theme.pleaseWait).addClass('disabled');
    return Shopify.addItemFromForm(productFormID, (function(_this) {
      return function(product) {
        button.val(Theme.addedToCart);
        _this.errorWrap.html('');
        return Shopify.getCart(function(cart) {
          return _this.updateMiniCart(cart, properties);
        });
      };
    })(this));
  }
};

如果您需要任何额外信息或编码，请说 - 非常感谢您的帮助

Answer 1

我认为购买按钮集成将解决您的问题，您不必从核心代码创建第二个。只需从Buy Button频道生成代码，然后添加代码并根据需要进行修改