【问题标题】:Changing variant image in Shopify在 Shopify 中更改变体图像
【发布时间】:2016-12-30 13:25:42
【问题描述】:

我在 Shopify 托管网站上有一个产品,它有多种颜色。我正在尝试更改代码,以便隐藏所有缩略图,但选择的颜色除外。代码如下所示,并且可以正常工作,只是在更改所选颜色时主图像不会更改。有什么建议么? 这是实时页面:https://www.palmettowoodshop.com/collections/featured/products/docking-station-cherry?variant=33412918350

{% 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 %}

【问题讨论】:

    标签: shopify


    【解决方案1】:

    在您的代码中,将 .not(':first'); 更改为 .not('.feature-row__image') 或您的特色图片的任何类名。

    【讨论】:

      猜你喜欢
      • 2020-05-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-10-19
      • 2015-02-05
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多