我有一个网站，其中列出了一些产品，我还创建了一个快速框文本，因此，当用户单击展开图标时，将显示一个弹出窗口，并显示产品说明。我的代码如下所示
Shopify.doNotTriggerClickOnThumb = false;
var selectCallbackQuickview = function(variant, selector) {
var productItem = jQuery('.quick-view .product-item');
addToCart = productItem.find('.add-to-cart-btn'),
productPrice = productItem.find('.price'),
comparePrice = productItem.find('.compare-price'),
totalPrice = productItem.find('.total-price span'),
inventory = productItem.find('.product-inventory');
if (variant) {
if (variant.available) {
// We have a valid product variant, so enable the submit button
addToCart.removeClass('disabled').removeAttr('disabled').text('Add to Cart');
} else {
// Variant is sold out, disable the submit button
addToCart.val('Sold Out').addClass('disabled').attr('disabled', 'disabled');
}
// Regardless of stock, update the product price
productPrice.html(Shopify.formatMoney(variant.price, "<span class=money>${{amount}}</span>"));
// Also update and show the product's compare price if necessary
if ( variant.compare_at_price > variant.price ) {
comparePrice
.html(Shopify.formatMoney(variant.compare_at_price, "<span class=money>${{amount}}</span>"))
.show();
productPrice.addClass('on-sale');
} else {
comparePrice.hide();
productPrice.removeClass('on-sale');
}
//update variant inventory
var inventoryInfo = productItem.find('.product-inventory span');
if (variant.available) {
if (variant.inventory_management !=null ) {
inventoryInfo.text(window.in_stock );
inventoryInfo.addClass('items-count');
inventoryInfo.removeClass('many-in-stock');
inventoryInfo.removeClass('out-of-stock');
inventoryInfo.removeClass('unavailable');
} else {
inventoryInfo.text(window.many_in_stock);
inventoryInfo.addClass('many-in-stock')
inventoryInfo.removeClass('items-count');
inventoryInfo.removeClass('out-of-stock');
inventoryInfo.removeClass('unavailable');
}
} else {
inventoryInfo.addClass('out-of-stock')
inventoryInfo.text(window.out_of_stock);
inventoryInfo.removeClass('items-count');
inventoryInfo.removeClass('many-in-stock');
inventoryInfo.removeClass('unavailable');
}
/*recaculate total price*/
//try pattern one before pattern 2
var regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;
var unitPriceTextMatch = jQuery('.quick-view .price').text().match(regex);
if (!unitPriceTextMatch) {
regex = /([0-9]+[.|,][0-9]+)/g;
unitPriceTextMatch = jQuery('.quick-view .price').text().match(regex);
}
if (unitPriceTextMatch) {
var unitPriceText = unitPriceTextMatch[0];
var unitPrice = unitPriceText.replace(/[.|,]/g,'');
var quantity = parseInt(jQuery('.quick-view input[name=quantity]').val());
var totalPrice = unitPrice * quantity;
var totalPriceText = Shopify.formatMoney(totalPrice, window.money_format);
regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;
if (!totalPriceText.match(regex)) {
regex = /([0-9]+[.|,][0-9]+)/g;
}
totalPriceText = totalPriceText.match(regex)[0];
var regInput = new RegExp(unitPriceText, "g");
var totalPriceHtml = jQuery('.quick-view .price').html().replace(regInput ,totalPriceText);
jQuery('.quick-view .total-price span').html(totalPriceHtml);
}
/*end of price calculation*/
Currency.convertAll('USD', jQuery('#currencies').val(), 'span.money', 'money_format');
/*begin variant image*/
/*begin variant image*/
if (variant && variant.featured_image) {
var originalImage = jQuery(".quick-view .quickview-featured-image img");
var newImage = variant.featured_image;
var element = originalImage[0];
Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
newImageSizedSrc = newImageSizedSrc.replace(/\?(.*)/,"");
jQuery('.quick-view .more-view-wrapper img').each(function() {
var grandSize = jQuery(this).attr('src');
grandSize = grandSize.replace('medium','grande');
if (grandSize == newImageSizedSrc) {
jQuery(this).parent().trigger('click');
return false;
}
});
});
}
/*end of variant image*/
/*end of variant image*/
} else {
// The variant doesn't exist. Just a safegaurd for errors, but disable the submit button anyway
addToCart.text('Unavailable').addClass('disabled').attr('disabled', 'disabled');
var inventoryInfo = productItem.find('.product-inventory span');
inventoryInfo.addClass("unavailable");
inventoryInfo.removeClass("many-in-stock");
inventoryInfo.removeClass("items-count");
inventoryInfo.removeClass("out-of-stock");
inventoryInfo.text(window.unavailable);
}
};
{"id":10109315278,"title":"Let Promise Solitaire Ring Mount","handle":"promise-solitaire-ring-mount","description":"\u003cspan\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui official.\u003c\/span\u003e","published_at":"2017-03-22T01:26:17-04:00","created_at":"2017-03-22T01:26:20-04:00","vendor":"CaratLane","type":"Ring","tags":["$500 - $600","2.4","CaratLane","Platinum","Ring"],"price":59000,"price_min":59000,"price_max":59000,"available":true,"price_varies":false,"compare_at_price":11000,"compare_at_price_min":11000,"compare_at_price_max":11000,"compare_at_price_varies":false,"variants":[{"id":37510470862,"title":"2.4 \/ Platinum","option1":"2.4","option2":"Platinum","option3":null,"sku":"SND67","requires_shipping":true,"taxable":true,"featured_image":null,"available":true,"name":"Let Promise Solitaire Ring Mount - 2.4 \/ Platinum","public_title":"2.4 \/ Platinum","options":["2.4","Platinum"],"price":59000,"weight":0,"compare_at_price":11000,"inventory_management":"shopify","barcode":""}],"images":["\/\/cdn.shopify.com\/s\/files\/1\/1811\/9385\/products\/1_5c789c84-aba2-4dbb-8992-69166a320cac.jpg?v=1496144078"],"featured_image":"\/\/cdn.shopify.com\/s\/files\/1\/1811\/9385\/products\/1_5c789c84-aba2-4dbb-8992-69166a320cac.jpg?v=1496144078","options":[{"name":"Size","position":1,"values":["2.4"]},{"name":"Material","position":2,"values":["Platinum"]}],"url":"\/products\/promise-solitaire-ring-mount"}<li class="grid__item item-row " id="product-10109315278" >
<div class="products">
<div class="product-container">
<a href="collections/jewel/products/promise-solitaire-ring-mount.html" class="grid-link">
<div class="ImageOverlayCa"></div>
<img src="images/products/1_5c789c84-aba2-4dbb-8992-69166a320cac_largecef3.jpg" class="featured-image" alt="Let Promise Solitaire Ring Mount">
</a>
<div class="product-button">
<form action="https://huge-jewelry.myshopify.com/cart/add" method="post" class="variants clearfix" id="cart-form-10109315278">
<input type="hidden" name="id" value="37510470862" />
<a class="add-cart-btn">
<i class="zmdi zmdi-shopping-cart"></i>
</a>
</form>
<div class="add-to-wishlist">
<div class="show">
<div class="default-wishbutton-promise-solitaire-ring-mount loading"><a class="add-in-wishlist-js btn" href="promise-solitaire-ring-mount.html"><i class="fa fa-heart-o"></i><span class="tooltip-label">Add to wishlist</span></a></div>
<div class="loadding-wishbutton-promise-solitaire-ring-mount loading btn" style="display: none; pointer-events: none"><a class="add_to_wishlist" href="promise-solitaire-ring-mount.html"><i class="fa fa-circle-o-notch fa-spin"></i></a></div>
<div class="added-wishbutton-promise-solitaire-ring-mount loading" style="display: none;"><a class="added-wishlist btn add_to_wishlist" href="pages/wishlist.html"><i class="fa fa-heart"></i><span class="tooltip-label">View Wishlist</span></a></div>
</div>
</div>
</div>
</div>
<div class="product-detail">
<a href="collections/jewel/products/promise-solitaire-ring-mount.html" class="grid-link__title">Let Promise Solitaire Ring Mount</a>
<p class="product-vendor">
<label>Brand:</label>
<span>CaratLane</span>
</p>
<div class="grid-link__meta">
<div class="product_price">
<div class="grid-link__org_price">
<span class=money>$590.00</span>
</div>
</div>
<span class="shopify-product-reviews-badge" data-id="10109315278"></span>
</div>
</div>
</div>
</li>
我没有在问题中显示快速框html。我的网站没有数据库，我只想在html中添加所有内容。
问题是，在所有产品中，当我单击展开图标时都显示了相同的产品图片，当我单击特定产品时，如何更改代码以显示该特定产品弹出菜单。