通过单击样本更改产品图片 - Shopify答案

【问题标题】：Change product image by clicking on swatch - Shopify通过单击样本更改产品图片 - Shopify
【发布时间】：2018-02-26 05:58:09
【问题描述】：

单击样本时，我正在尝试更改我的 shopify 页面上的产品图片。但我无法让它工作......

这是我写的代码（如果是初级的，我很抱歉）：

<div class="product grid__item {{ grid_item_width }} slide-up-animation 
animated" role="listitem">
  <a href="{{ product.url | within: collection }}" class="product__image" 
    title="{{ product.title | escape }}">
    <img class="theImage" src="{{ product.featured_image.src | img_url: 'grande' 
}}" alt="{{ product.featured_image.alt | escape }}">
  </a>

<div class="product__title text-center">
  <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
</div>

{% if settings.vendor_show %}
<div class="product__vendor text-center">
  {{ product.vendor }}
</div>
{% endif %}    

<!-- COLOR SWATCH -->
<script>
theButton.onclick = function pictureChange()
{
  document.getElementsByClassName("theImage").src="{{% assign featured_image = current_variant.featured_image %}}";
}
</script>
<div class="product__prices text-center">
{% for option in product.options %}
 {% if option == 'Color' %}
  {% assign index = forloop.index0 %}
  {% assign colorlist = '' %}
  {% assign color = '' %}
  {% for variant in product.variants %}
    {% capture color %}{{ variant.options[index] }}{% endcapture %}
    {% unless colorlist contains color %}
      <img class="theButton" src="{{ color | downcase | append: '.gif' | asset_url }}" alt="{{ color }}" width="16" height="16" onclick="pictureChange()" />
      {% capture tempList %}{{colorlist | append: color | append: ‘ ‘}}{% endcapture %}
      {% assign colorlist = tempList %}
    {% endunless %}
  {% endfor %}
{% endif %}
{% endfor %} 
<br/>

有人指点一下吗？

当我打开控制台时，它显示“未定义按钮”。

谢谢，请帮忙！

【问题讨论】：

标签： javascript jquery shopify liquid

【解决方案1】：

我也遇到了这个问题，我已经为我的商店整理了这个问题。随着 shopify 改变其结构（分段主题），许多人面临selectCallback 功能的问题。请按照以下步骤在分段主题中添加色板 -

在 sn-p 中创建 swatch.liquid 文件。复制下面的代码 -

{% comment %}
  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}

{% assign file_extension = 'png' %}

{% if swatch == blank %}
<div class="swatch error">
  <p>You must include the snippet swatch.liquid with the name of a product option.</p> 
  <p>Use: <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
</div>
{% else %}

{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}

{% for option in product.options %}
  {% if option == swatch %}
    {% assign found_option = true %}
    {% assign option_index = forloop.index0 %}
    <style>
      label[for="product-select-option-{{ option_index }}"] { display: none; }
      #product-select-option-{{ option_index }} { display: none; }
      #product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
    </style>
    <script>jQuery(document).ready(function() { jQuery('.selector-wrapper:eq({{ option_index }})').hide(); });</script>
    {% assign downcased_option = swatch | downcase %}
    {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
      {% assign is_color = true %}
    {% endif %}
  {% endif %}
{% endfor %}

{% unless found_option %}
<div class="swatch error">
  <p>You included the snippet swatch.liquid with the name of a product option — <code>'{{ swatch }}'</code> — that does not belong to your product.</p>
  <p>Use <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
  <p><strong>This is case-sensitive!</strong> Do not put in <code>'color'</code> if your product option name is <code>'Color'</code>.</p>
</div>
{% else %}
<div class="swatch clearfix" data-option-index="{{ option_index }}">
  <div class="header">{{ swatch }}</div>
  {% assign values = '' %}
  {% for variant in product.variants %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
      {% assign values = values | join: ',' %}
      {% assign values = values | append: ',' | append: value %} 
      {% assign values = values | split: ',' %}
      <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
        {% if is_color %}
        <div class="tooltip">{{ value }}</div>
        {% endif %}
        <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
        {% if is_color %}
        <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }})">
          <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
        </label>
        {% else %}
        <label for="swatch-{{ option_index }}-{{ value | handle }}">
          {{ value }}
          <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
        </label>
        {% endif %}
      </div>
    {% endunless %}
    {% if variant.available %}
    <script>
      jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
    </script>
    {% endif %}
  {% endfor %}
</div>

{% endunless %}

{% endif %}

现在在<script> 标记的theme.liquid 文件中添加jquery 代码，就在底部关闭的</body> 标记上方。请参阅下面的代码 -

    jQuery(function() {
      jQuery('.swatch :radio').change(function() {
        var optionIndex = jQuery(this).closest('.swatch').attr('data-option-index');
        var optionValue = jQuery(this).val();
        jQuery(this)
        .closest('form')
        .find('.single-option-selector')
        .eq(optionIndex)
        .val(optionValue)
        .trigger('change');
      });

      jQuery('.single-option-selector').change(function() {
        var optionValue = jQuery(this).val();
        jQuery(this).closest('form').find('.swatch').each(function( index ) {
          jQuery(this).find(':radio').each(function( index ) {
            if(jQuery(this).val() == optionValue ){
              $(this).siblings(':radio').prop('checked', false);
                $(this).prop('checked', true);     
            }   
          });
        });
      });
    });

现在在{% schema %} 上方的product-template.liquid 部分中添加jquery 代码。请参阅下面的代码 -

{% if product.variants.size > 1 %}
    <script>
      var variantImages = {},
        thumbnails,
        variant,
        variantImage,
        optionValue,
        productOptions = [];
        {% for variant in product.variants %}
           variant = {{ variant | json }};
           if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
             variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
             variantImages[variantImage] = variantImages[variantImage] || {};
             {% for option in product.options %}

               {% assign option_value = variant.options[forloop.index0] %}
               {% assign option_key = 'option-' | append: forloop.index0 %}

               if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
                 variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
               }
               else {
                 var oldValue = variantImages[variantImage][{{ option_key | json }}];
                 if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
                   variantImages[variantImage][{{ option_key | json }}] = null;
                 }
               }
             {% endfor %}
           }
           productOptions.push(variant);
        {% endfor %}
    </script> 
    {% endif %}

现在在</select> 字段下方的表单中的product-template.liquid 部分中包含色板-

{% if product.available and product.variants.size > 1 %}
              {% for option in product.options %}
                {% include 'swatch' with option %}
              {% endfor %}
            {% endif %}

最后一步是为色板添加 css。将 css 添加到 theme.scss.liquid -

/* 色板样式 */

{% assign width = '50px' %}
{% assign height = '35px' %}
.swatch { 
  margin:1em 0; 
  width: 100%;
  display: inline-block;
}
/* Label */
.swatch .header {
  margin: 0.5em 0;
}
/* Hide radio buttons.*/
.swatch input { 
  display:none;
}
.swatch label {
  /* Rounded corners */
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  /* To give width and height */
  float:left;
  /* Color swatches contain no text so they need to have a width. */
  min-width:{{ width }} !important; 
  height:{{ height }} !important;
  /* No extra spacing between them */
  margin:0;
  /* The border when the button is not selected */
  border:#ccc 1px solid;
  /* Background color */
  background-color:#ddd;
  /* Styling text */
  font-size:13px;
  text-align:center;
  line-height:{{ height }};
  white-space:nowrap;
  text-transform:uppercase;
}
.swatch-element label { padding:0 10px; }
.color.swatch-element label { padding:0; }
/* Styling selected swatch */
/* Slightly raised */
.swatch input:checked + label {
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.8);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.8);
  box-shadow:0px 1px 2px rgba(0,0,0,0.8);
  border-color:transparent;
} 
.swatch .swatch-element {
  float:left;
  -webkit-transform:translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing:antialiased; /* webkit text rendering fix */
  /* Spacing between buttons */
  margin:0px 10px 10px 0;
  /* To position the sold out graphic and tooltip */
  position:relative;
}
.color.swatch-element label {
  padding: 0;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 100%;
}
/* Image with the cross in it */
.crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; }
.swatch .swatch-element .crossed-out { display:none; }
.swatch .swatch-element.soldout .crossed-out { display:block; }
.swatch .swatch-element.soldout label {
  filter: alpha(opacity=60); /* internet explorer */
  -khtml-opacity: 0.6;      /* khtml, old safari */
  -moz-opacity: 0.6;       /* mozilla, netscape */
  opacity: 0.6;           /* fx, safari, opera */
}
/* Tooltips */
.swatch .tooltip {
  text-align:center;
  background:gray;
  color:#fff;
  bottom:100%;
  padding: 10px;
  display:block;
  position:absolute;
  width:100px;
  left:{{ width | remove: 'px' | to_number | divided_by: 2 | minus: 50 | plus: 2 }}px;
  margin-bottom:15px;
  /* Make it invisible by default */
  filter:alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity:0;
  visibility:hidden;
  /* Animations */
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  z-index: 10000;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
  box-sizing:border-box;
}
.swatch .tooltip:before {
  bottom:-20px;
  content:" ";
  display:block;
  height:20px;
  left:0;
  position:absolute;
  width:100%;
}
/* CSS triangle */
.swatch .tooltip:after {
  border-left:solid transparent 10px;
  border-right:solid transparent 10px;
  border-top:solid gray 10px;
  bottom:-10px;
  content:" ";
  height:0;
  left:50%;
  margin-left:-13px;
  position:absolute;
  width:0;
}
.swatch .swatch-element:hover .tooltip {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
  visibility:visible;
  -webkit-transform:translateY(0px);
  -moz-transform:translateY(0px);
  -ms-transform:translateY(0px);
  -o-transform:translateY(0px);
  transform:translateY(0px);
}
.swatch.error {
  background-color:#E8D2D2!important;
  color:#333!important;
  padding:1em;
  border-radius:5px;
}
.swatch.error p {
  margin:0.7em 0;
}
.swatch.error p:first-child {
  margin-top:0;
}
.swatch.error p:last-child {
  margin-bottom:0;
}
.swatch.error code {
  font-family:monospace;
}
.product-form__cart-submit {
  width: auto;
  padding-left: 30px;
  padding-right: 30px;
}

.swatch .color.swatch-element input:checked+label {
  -webkit-box-shadow: 0px 0 5px rgba(0,0,0,1);
  -moz-box-shadow: 0px 0 5px rgba(0,0,0,1);
  box-shadow: 0px 0 5px rgba(0,0,0,1);
}

【讨论】：

我得到了这个半工作 - 在产品页面上它工作得很好！但是，我希望不是在产品页面上而是在客户浏览的页面上使用它。我最初有样本，但我通过热图注意到人们在点击产品之前点击它们以查看变化。