shopify通过菜单筛选进入列表后自动调取菜单名字对应的产品变体-手机壳

释放双眼,带上耳机,听听看~!

客户shopify网站手机壳比较丰富,一个手机壳有很多个变体。

现在是通过菜单就行分类,当用户通过菜单进入分类后列出的产品变体默认是这个产品第一个变体。

客户点进产品详情页后还需要重新选择变体,操作比较不方便。

这里我们结合筛选与菜单名字自动筛选出对应的变体,客户进入产品页后自动选中对应的变体,大大提搞了效率,提升用体验

shopify通过菜单筛选进入列表后自动调取菜单名字对应的产品变体-手机壳

 

这里是代码记录参考,代码大概解释。获取当前分类的名字、筛选项目名字,如果2个相同,则通过js自动点击当前筛选项,筛选出对应的变体商品(不同主题稍做修改)

<input type="checkbox" id="Filter-{{ filter.param_name }}-{{ forloop.index }}">
<span>{{ filter_value.label }}</span>
<span>{{ filter_value.count }}</span>
{% assign collection_title = collection.title | downcase %}
{% assign filter_value_label = filter_value.label | downcase %}                              
{% if collection_title == filter_value_label %}
  <script>
    // 在页面加载后自动点击(选中)复选框
    window.onload = function() {
      var checkedInput = document.getElementById('Filter-{{ filter.param_name }}-{{ forloop.index }}');
      checkedInput.click(); // 触发点击事件
    };
  </script>  
{%- endif %}

 

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
Shopify主题开发Shopify功能开发

shopify筛选选项添加图标

2023-12-27 22:00:13

Shopify主题开发Shopify功能开发独立站教程

使用自定义app调用shopify搜索代码

2024-1-3 15:36:43

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索