我正在使用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 <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 <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));
}
};
如果您需要任何额外信息或编码，请说 - 非常感谢您的帮助
答案 0 :(得分：0)
我认为购买按钮集成将解决您的问题，您不必从核心代码创建第二个。只需从Buy Button频道生成代码，然后添加代码并根据需要进行修改