Shopify 产品页面幻灯片组件

安装

使用 yarn 或 npm 下载代码

yarn add baymax-shopify-product-swiper
npm install baymax-shopify-product-swiper

引入文件

将下方两个文件引入到 snippets 目录下

baymax-shopify-product-swiper\lib\snippets\ib-product-media-swiper.liquid
baymax-shopify-product-swiper\lib\snippets\ib-product-media-swiper-slide.liquid

将swiper 文件引入到 assets 目录下

baymax-shopify-product-swiper\lib\swiper\swiper-bundle.css
baymax-shopify-product-swiper\lib\swiper\swiper-bundle.min.js
baymax-shopify-product-swiper\lib\swiper\swiper-bundle.min.js.map

引入配置

将下方代码引入到 settings_schema.json 中

{
    "name": "杂货店",
    "settings":[
      {
        "type":"header",
        "content": "产品页面幻灯片"
      },
      {
        "type": "select",
        "id": "ib_product_swiper_effect",
        "label": "过渡效果",
        "default": "slide",
        "options": [
          {
            "label": "滑动",
            "value": "slide"
          },
          {
            "label": "淡化",
            "value": "fade"
          },
          {
            "label": "立方体",
            "value": "cube"
          },
          {
            "label": "翻页",
            "value": "coverflow"
          },
          {
            "label": "翻转",
            "value": "flip"
          }
        ]
      },
      {
        "type": "range",
        "id": "ib_product_swiper_speed",
        "label": "过渡时间",
        "unit": "ms",
        "min": 100,
        "max": 3000,
        "step": 50,
        "default": 300
      },
      {
        "type": "html",
        "id": "ib_product_media_swiper_left_svg",
        "label": "向左图标 SVG"
      },
      {
        "type": "html",
        "id": "ib_product_media_swiper_right_svg",
        "label": "向右图标 SVG"
      },
      {
        "type": "checkbox",
        "id": "ib_product_media_swiper_use_default_color",
        "label": "使用彩色 SVG",
        "default": false
      },
      {
        "type": "color",
        "id": "ib_product_media_swiper_btn_color",
        "label": "图标颜色",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "ib_product_media_swiper_btn_color_bg",
        "label": "切换背景颜色",
        "default": "#ffb303"
      },
      {
        "type": "color",
        "id": "ib_product_media_swiper_border_color",
        "label": "边框颜色",
        "default": "#ffb303"
      }
    ]
  }

引入 swiper 插件

  {{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}
  <script src="{{ 'swiper-bundle.min.js' | asset_url }}"></script>

注意：本组件基于 swiper 和 jquery 请确保主题引入了这两个插件

实例化产品页面幻灯片组件

在 theme.liquid 底部（正上方） 引入下方代码

{% if request.page_type == 'product' %}
<script>
	$(document).ready(function () { productMediaSlide() });
</script>
{% end %}

使用

引入片段

在产品页面对应要显示幻灯片的位置引入 ib-proudct-media-swiper 片段

{% include 'ib-proudct-media-swiper' %}

幻灯片 与 产品选项 联动

在幻灯片组件 swiper 实例为 window.ptMedioSwiper，我们可以通过 ptMedioSwiper 来操控我们的幻灯片

这里我只讲切换幻灯片的方法使用，其他方法可以查看 swiper 官方文档

切换幻灯片的方法

ptMedioSwiper.slideTo(index)
// index 是幻灯片的索引，它比我们 shopify 的 media.position 小 1
// 所以 我们 可以在 变体的选项上绑定上medio.position数据， variant.featured_media.position
// 当产品选泽发生改变时我们可以获取所选变体对应的 medio.position 数据，然后通过slideTo方法切换幻灯片
ptMedioSwiper.slideTo(position - 1)