显示设置中的图像=>作为变体上传的文件

时间:2018-08-20 21:36:21

标签: javascript shopify liquid

我已将一张图片上传到设置=>文件,并希望将其作为可点击的变体形式出现在每个产品页面中。我已经成功地使它能够显示为每个产品的变体,但是当我单击它来替换特色图像时,它不会显示。

 <!-- Begin #product-image -->

              <div id="product-image" class="col-sm-5 product-image">
                <div class="product-image-inner row">
                  {% if product.images.size > 0 %} 

                  {% assign featured_image = 
             product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
                  <a href="{{ featured_image | product_img_url: 'original' }}" class="featured-image elevatezoom">
                    <img id="product-featured-image" class="magniflier zoom-image" src="{{ featured_image | product_img_url: '1024x1024' }}" data-zoom-image="{{ featured_image | product_img_url: 'original' }}" alt="{{ product.title | escape }}" />
                  </a>



                  <div class="more-view-image">
                    <ul id="gallery-image" class="gallery-image-thumb">
                      {% for image in product.images %}
                      <li>
                        <a class="thumb-img{% if forloop.index == 1 %} active{% endif %}" data-image="{{ image | product_img_url: '1024x1024' }}" data-zoom-image="{{ image | product_img_url: 'original' }}">
                          <img src="{{ image.src | product_img_url: 'small' }}" alt="{{ product.title | escape }}">

                        </a>

                      </li>
                      {% endfor %}

                      <li><a data-image="{{ '1.jpg' | product_img_url: '1024x1024' }}" data-zoom-image="{{ image | product_img_url: 'original' }}">
                        <img src=" {{ '1.jpg' | file_url }}" alt="{{ product.title | escape }}">

                        </a></li>

                    </ul>
                  </div>

                  {% else %}

                  <img src="{{ 'default-image.jpg' | asset_url }}" />

                  {% endif %}
                </div>
              </div>

              <!-- End #product-image /- -->

0 个答案:

没有答案