需求背景

我们可以看到很多富有生活气息的独立站或者平台，都在使用这个功能，卖家可以在图片上添加按钮，将图片中的产品设置为可购买的。在这个功能的帮助下，使用富有生活气息的图片可以激发买家的购物欲望，当你的一张图片中某个产品吸引了买家的眼球，买家只需点击几下鼠标就可能将购物欲望变成了转化。
现存一些主题很多是不包含此功能的，那么这个功能加起来到底是不是那么麻烦呢？带着这些疑问我们往下看。

1. 实现原理

微信图片编辑_20220414115132.jpg
底层box将图片和商品标记框包裹起来，例如图中p1, 相对box进行绝对定位。点击商品标记框，加载出商品信息并进行展示。

需要注意的细节：

  1. 要想图片展示最佳的效果，图片展示的大小需要靠图片自身进行填充。因此商品标记框的位置也许要根据比例来进行设置才不会变。

  2. 点击之后商品信息加载显示，这个地方是比较容易踩坑的地方。

    博主现在看到很多的弹层是在设置商品的时候，直接将商品数据渲染到热点商品位置了。这种形式不是说不好，现在比如只有一个这个组件，是ok的。但是有10个或者更多的话，商品数据加载多了会间接的影响dom加载的大小，并且在后端all_products取商品的时候也会有一定的影响。因此比较推荐的是使用异步的方式进行加载，加载出来的数据加上标记，不需要重复进行加载。效果几乎和初始的时候加载数据差不多，但是避免了那些缺点。

    2. 如何实现

按照我们的实现原理只需要添加3个文件就可以实现此功能。并且这个实现和主题无关。
目前图片未添加懒加载支持，商品的quick view功能，因为不同主题的实现方式不同。笔者只是抛砖引玉，至于能做成啥样的，还是得看大家的脑洞了。
Section : shoppable-image.liquid , shoppable-ajax-product.liquid
Snippets: shoppable-image-product.liquid

  1. {%- capture hotspot_products -%}
  2. {%- for block in section.blocks -%}
  3.     {%- if block.settings.product != blank -%}
  4.     {%- render 'shoppable-image-product',
  5.       type: 'component',
  6.       productHandle: block.settings.product,
  7.       top: block.settings.top,
  8.       left: block.settings.left
  9.     -%}
  10.     {%- endif -%}
  11. {%- endfor -%}
  12. {%- endcapture -%}
  15. {%- capture shoppable_id -%}shoppable-{{ section.id }}{%- endcapture -%}
  18. <div class="shoppable-container" id="{{ shoppable_id }}">
  19.     {%- if section.settings.title != blank -%}
  20.     <div class="shoppable-head">
  21.         {{ section.settings.title }}
  22.     </div>
  23.     {%- endif -%}
  24.     <div class="shoppable-body">
  25.       <div class="shoppable-body__image">
  26.         <img src="{{ section.settings.image | img_url: 'master' }}" />
  27.       </div>
  28.       <div class="shoppable-body__products">
  29.         {{ hotspot_products }}
  30.       </div>
  31.     </div>
  32. </div>
  35. <style>
  36.   #{{ shoppable_id }} .shoppable-head {
  37.     text-align: center;
  38.     margin: 10px 0;
  39.     font-size: 20px;
  40.     font-weight: bold;
  41.   }
  42.   #{{ shoppable_id }} .shoppable-body{
  43.     position: relative;
  44.   }
  45.   #{{ shoppable_id }} .shoppable-body .shoppable-body__image {
  46.     width: 100%;
  47.   }
  48.   #{{ shoppable_id }} .shoppable-body .shoppable-body__image img {
  49.     width: 100%;
  50.   }
  51.   #{{ shoppable_id }} .shoppable-body .shoppable-body__products {
  52.     position: absolute;
  53.     top: 0;
  54.     left: 0;
  55.     width: 100%;
  56.     height: 100%;
  57.   }
  59.   #{{ shoppable_id }} .shoppable-body .shoppable-body__products .product-data {
  60.     position: absolute;
  61.     width: 30px;
  62.     height: 30px;
  63.     cursor: pointer;
  64.     background-color: #0006;
  65.     border-radius: 50%;
  66.     outline: none;
  67.     box-shadow: none;
  68.     transition: background-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1);
  69.   }
  71.   #{{ shoppable_id }} .shoppable-body .shoppable-body__products .product-data:hover {
  72.     z-index: 299;
  73.     box-sizing: border-box;
  74.     box-shadow: 0 0 0 2px #fff inset, 0 1px 4px #00000026;
  75.   }
  77.   #{{ shoppable_id }} .shoppable-body .shoppable-body__products .product-data .product-data__card{
  78.     display: none;
  79.   }
  81.   #{{ shoppable_id }} .shoppable-body .shoppable-body__products .product-data:hover .product-data__card {
  82.     display: block;
  83.     width: 200px;
  84.     background: #fff;
  85.     font-size: 12px;
  86.     position: absolute;
  87.     transform: translate( -50% ,30px);
  88.     box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  89.   }
  91.   #{{ shoppable_id }} .shoppable-body .shoppable-body__products .product-data__pointer {
  92.     position: absolute;
  93.     display: block;
  94.     bottom: 50%;
  95.     left: 50%;
  96.     width: 14px;
  97.     height: 14px;
  98.     cursor: pointer;
  99.     background-color: #fff;
  100.     border-radius: 50%;
  101.     transition: transform .15s cubic-bezier(.4,0,.2,1);
  102.     transform: translate(-50%,50%);
  103. }
  105. #{{ shoppable_id }} .view__detail {
  106.   text-align: center;
  107.   padding: 0 0 20px;
  108. }
  109. #{{ shoppable_id }} .view__image {
  110.   display: flex;
  111.   justify-content: center;
  112. }
  113. #{{ shoppable_id }} .view__detail .detail__title {
  114.   color: #000;
  115.   text-decoration: none;
  116. }
  117. #{{ shoppable_id }} .view__detail .btn-options {
  118.   background: #000;
  119.   padding: 5px;
  120.   color: #fff;
  121.   text-decoration: none;
  122. }
  124. </style>
  126. <script>
  127.   var selector = '#{{ shoppable_id }} .product-data';
  129.   function loadProduct(el) {
  130.     if ($(el).hasClass('data-loaded')) {
  131.       return;
  132.     }
  133.     var handle = $(el).attr('data-handle');
  134.     fetch(`/products/${handle}?section_id=shoppable-ajax-product`)
  135.       .then(function(response) {
  136.       return response.text();
  137.     }).then(function(html) {
  138.       var nodeHtml = $(html).find('.data-wapper').html();
  139.       $(el).find('.product-data__card').html(nodeHtml);
  140.       $(el).addClass('data-loaded');
  141.     });
  142.   }
  144.   $(selector).on('hover', function() {
  145.     loadProduct(this);
  146.   });
  148.   $(document).ready(function() {
  149.     $(selector).each(function(_, node) {
  150.       loadProduct(node);
  151.     });
  152.   });
  153. </script>
  155. {% schema %}
  156. {
  157.   "name": "Shoppable image",
  158.   "class": "shoppable-image--section",
  159.   "max_blocks": 5,
  160.   "settings": [
  161.     {
  162.       "type": "text",
  163.       "id": "title",
  164.       "label": "标题",
  165.       "default": "标题"
  166.     },
  167.     {
  168.       "type": "image_picker",
  169.       "id": "image",
  170.       "label": "图片"
  171.     }
  172.   ],
  173.   "blocks": [
  174.     {
  175.       "type": "hotspot",
  176.       "name": "配置商品",
  177.       "settings": [
  178.         {
  179.           "type": "product",
  180.           "id": "product",
  181.           "label": "Product"
  182.         },
  183.         {
  184.           "type": "range",
  185.           "id": "top",
  186.           "label": "图片距box顶部偏移位置",
  187.           "min": 0,
  188.           "max": 100,
  189.           "step": 1,
  190.           "unit": "%",
  191.           "default": 50
  192.         },
  193.         {
  194.           "type": "range",
  195.           "id": "left",
  196.           "label": "图片距离box左侧偏移位置",
  197.           "min": 0,
  198.           "max": 100,
  199.           "step": 1,
  200.           "unit": "%",
  201.           "default": 50
  202.         }
  203.       ]
  204.     }
  205.   ],
  206.   "presets": [
  207.     {
  208.       "name": "Shoppable image",
  209.       "category": "Image"
  210.     }
  211.   ]
  212. }
  214. {% endschema %}
  1. {%- render 'shoppable-image-product', product: product -%}
  1. {%- comment -%}
  2. 入参：
  3.     type: ajax 通过ajax方式加载 / component 通过组件方式加载
  4.     productHandle: 商品handle
  5.     product: 商品数据
  6.     top:  偏移box, top 位置百分比
  7.     left: 偏移box, left位置百分比
  8. {%- endcomment -%}
  10. {%- capture shoppable_product -%}
  11. <div class="data-wapper">
  12.     <div class="view__image">
  13.         <a class="grid-view-item__link grid-view-item__image" href="{{ product.url | within: collection }}">
  14.             <img src="{{ product.featured_image | img_url: '180x' }}" alt="">
  15.         </a>
  16.     </div>
  17.     <div class="view__detail">
  18.         <a href="{{ product.url | within: collection }}" class="detail__title">{{ product.title }}</a>
  19.         <div class="detail__meta">
  20.             {{ product.price | money_with_currency }}
  21.         </div>
  22.         <a class="btn-options" href="{{ product.url | within: collection }}">SELECT OPTIONS</a>
  23.     </div>
  24. </div>
  25. {%- endcapture -%}
  27. {%- if type == 'component' -%}
  28. <div class="product-data" data-handle="{{ productHandle }}" style="position:absolute; left: {{ left }}%; top: {{ top }}%" >
  29.     <div class="product-data__pointer"></div>
  30.     <div class="product-data__card"></div>
  31. </div>
  32. {%- else -%}
  33. {{ shoppable_product }}
  34. {%- endif -%}

3. 展示效果

店铺地址： https://asen-practice.myshopify.com/ 密码：test

点击查看【bilibili】

Tips: 如有引用请标注源文章地址

感谢 高帅帅 同学对本期教程的赞助！

关注我的【小红书】，第一时间掌握更新动态

你的鼓励就是我创作的动力！
zanshang.png