shopify中的可点击产品图片

时间:2018-08-13 09:10:44

标签: shopify shopify-template

我正在处理shopify主题,我正在尝试进行编辑,以便可以单击产品图像并将您带到“ product.url”。只有图像下方的“添加到购物车”按钮和文本是可单击的,但是希望实际图像也可以。(网站示例:http://www.lit-af.co.uk)我们将不胜感激!

{% unless current_collection %}
{% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available  %}
{% assign sold_out = false %}
{% endif %}
{% assign img_size = settings.img_size_grid %}
<!-- Block2 -->
<div class="block2">
  {% assign product_created_at = product.created_at | date: '%s' %}
  {% assign time_ago = 'now' | date: '%s' | minus: product_created_at | divided_by: 86400 %}
  {% assign product_new_time = settings.product_new_time | times: 1 %}

    <div class="block2-img wrap-pic-w of-hidden pos-relative {% if time_ago < product_new_time %}block2-labelnew{% endif %} {% if on_sale %} block2-labelsale{% endif %}">
      <a href="{{ product.url| within: collection }}">
        <img class="" src="{{ product.featured_image.src | img_url: img_size }}" alt="{{ product.featured_image.alt | escape }}">
      </a> 
    <div class="block2-overlay trans-0-4">
      <a href="{{ product.url }}" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i>
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="{{ 'products.product.loading' | t }}" title="{{ 'products.product.add_to_cart' | t }}" onclick="cart.add('{{ product.variants.first.id }}', '{{ product.title }}');">
          {{ 'products.product.add_to_cart' | t }}
        </button>
        </div>
    </div>
  </div>
  <div class="block2-txt p-t-20">
    <a href="{{ product.url | within: collection }}" class="block2-name dis-block s-text3 p-b-5">
      {{ product.title}}
    </a>
    {% if product.compare_at_price > product.price %}
    <span class="block2-oldprice m-text7 p-r-5">
      {{ product.compare_at_price_max | money }}
    </span>
    <span class="block2-newprice m-text8 p-r-5">
      {{ product.price | money }}
    </span>
    {% else %}
    <span class="block2-price m-text6 p-r-5">
      {{ product.price | money }}
    </span>
    {% endif %}
  </div>
</div>

0 个答案:

没有答案