HTML/CSS主题编辑：解决商品图片无法跳转至对应商品链接的问题

我来帮你搞定这个商品图片点击跳转的问题，先梳理下具体情况：

问题描述 #

已解决
需求：让商品图片和下方已添加超链接的商品标题保持一致，点击图片即可跳转至对应商品页面。目前图片外层虽已设置<a>标签，但因页面存在overlay层遮挡，导致点击图片无法触发跳转。

原始代码 #

图片部分代码

<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> </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>

生成的HTML代码 #

<!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative "> <a href="/products/boxy7-t-shirt-with-roll-sleeve"> <img class="" src="//cdn.shopify.com/s/files/1/2672/5778/products/item-15_7ca55ba5-301e-4461-92ea-68c8b02e35e7_1200x1600.jpg?v=1515096104" alt="Boxy7 T-Shirt with Roll Sleeve"> </a> <div class="block2-overlay trans-0-4"> <a href="/products/boxy7-t-shirt-with-roll-sleeve" 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="Loading..." title="Add to Cart" onclick="cart.add('8772548722730', 'Boxy7 T-Shirt with Roll Sleeve');"> Add to Cart </button> </div> </div> </div> <div class="block2-txt p-t-20"> <a href="/products/boxy7-t-shirt-with-roll-sleeve" class="block2-name dis-block s-text3 p-b-5"> Boxy7 T-Shirt with Roll Sleeve </a> <span class="block2-price m-text6 p-r-5"> <span class=money>$20.00</span> </span> </div> </div>

解决方案（由Solis Ortus提供） #

核心思路是给遮挡在图片上方的block2-overlay元素添加onclick事件，让点击这个层时也能跳转到商品页面。修改后的图片区域代码如下：

<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" onclick="location.href= '{{ product.url }}'" > <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>

相关CSS说明 #

可以补充一段CSS优化交互体验，确保鼠标移到图片区域（包括overlay层）时显示指针样式，让用户明确这是可点击区域：

.block2-overlay {
    cursor: pointer;
}

内容的提问来源于stack exchange，提问作者John Henderson