0
Shopifyのホストされたウェブサイトには、いくつかの色を持つ製品があります。私は選択された色を除いて、すべてのサムネイルが隠されるようにコードを変更しようとしています。以下にコードを示します。ただし、選択した色が変更されたときにメイン画像が変わることはありません。助言がありますか？あなたのコードでhttps://www.palmettowoodshop.com/collections/featured/products/docking-station-cherry?variant=33412918350 Shopifyのバリアントイメージの変更
{% assign option_name = 'Color' %}
{% if product.options contains option_name %}
<script>
// Grabbing product thumbnails
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard and many more.
var thumbnails = jQuery('img[src*="/products/"]') /* All product images */
.not('#related-products img') /* Except related products, thumbnails not clickable */
.not('a[href^="/collections/"] img') /* Except related products */
.not('a[href^="/products/"] img') /* Except mini-cart products */
.not('header img') /* Except mini-cart products, thumbnails not clickable */
.not('#drawer img') /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
.not(':first'); /* Except first one, i.e the main image */
var optionSelect;
{% assign option_index = 0 %}
{% for option in product.options %}
{% if option == option_name %}
{% assign option_index = forloop.index0 %}
{% endif %}
{% endfor %}
{% if product.options.size == 1 %}
optionSelect = '.single-option-selector';
{% else %}
optionSelect = 'label:contains({{ option_name }}) + .single-option-selector';
{% endif %}
jQuery('form[action="/cart/add"]').on('change', optionSelect, function() {
var optionValue = $(this).val();
thumbnails.each(function() {
var wrapper = $(this);
while (wrapper.parent().children().length === 1) {
wrapper = wrapper.parent();
}
if (jQuery(this).attr('alt') === optionValue) {
wrapper.show();
}
else {
wrapper.hide();
}
});
});
</script>
{% endif %}