创建第二个addtocart按钮/表单

我正在使用Shopify，并设法在页面上添加第二个'addtocart'按钮，以便人们可以订购样品。每个产品有2个变体-第一个=平均数，他们可以选择一个数量，和第二个=样品，这没有一个数量框，它被链接到按钮自动添加1。

这工作得很好，但是我们不希望它这样，当一个人添加一些东西到购物车，无论是仪表或样品，他们被带到购物车页面。相反，它们停留在产品页面上，并更新迷你艺术品。

主题有这个功能，并在第一个按钮上工作得很好(一个链接到测量)，但是如果我尝试复制第一个按钮到样本按钮(即它的类名等)，然后当你点击它时，它会添加测量和任何数量是在数量字段，而不是添加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));
  }
};

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