如何用Alpine JS在Shopify中创建可后台管理的选项卡区块

实现可后台编辑的选项卡区块 #

将静态选项卡改为Shopify Section，通过blocks实现后台添加/删除选项卡的功能。创建sections/tabs-with-swiper.liquid文件，代码如下：

<div class="tab-wrapper" x-data="{ activeTab: 0 }">
  <!-- 选项卡导航 -->
  <div class="flex tab-nav">
    {% for block in section.blocks %}
      <label
        @click="activeTab = {{ forloop.index0 }}"
        class="tab-control"
        :class="{ 'active': activeTab === {{ forloop.index0 }} }"
      >
        {{ block.settings.tab_title }}
      </label>
    {% endfor %}
  </div>

  <!-- 选项卡面板 -->
  <div class="tab-panels">
    {% for block in section.blocks %}
      <div 
        class="tab-panel" 
        :class="{ 'active': activeTab === {{ forloop.index0 }} }"
        x-show.transition.in.opacity.duration.600="activeTab === {{ forloop.index0 }}"
      >
        {{ block.settings.tab_content }}
        
        <!-- 启用轮播时渲染Swiper结构 -->
        {% if block.settings.enable_swiper %}
          <div class="swiper mySwiper">
            <div class="swiper-wrapper">
              {% for slide in block.settings.swiper_slides %}
                <div class="swiper-slide">
                  <img src="{{ slide.image | img_url: 'medium' }}" alt="{{ slide.alt_text }}">
                  {% if slide.caption %}
                    <p class="slide-caption">{{ slide.caption }}</p>
                  {% endif %}
                </div>
              {% endfor %}
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>
</div>

{% schema %}
{
  "name": "可编辑选项卡（支持轮播）",
  "blocks": [
    {
      "type": "tab",
      "name": "选项卡",
      "settings": [
        {
          "type": "text",
          "id": "tab_title",
          "label": "选项卡名称",
          "default": "Tab Title"
        },
        {
          "type": "richtext",
          "id": "tab_content",
          "label": "选项卡内容",
          "default": "<p>选项卡内容</p>"
        },
        {
          "type": "checkbox",
          "id": "enable_swiper",
          "label": "启用Swiper轮播",
          "default": false
        },
        {
          "type": "repeater",
          "id": "swiper_slides",
          "label": "轮播幻灯片",
          "settings": [
            {
              "type": "image_picker",
              "id": "image",
              "label": "幻灯片图片"
            },
            {
              "type": "text",
              "id": "alt_text",
              "label": "图片替代文本"
            },
            {
              "type": "text",
              "id": "caption",
              "label": "幻灯片标题/说明"
            }
          ],
          "visible": true,
          "condition": {
            "enable_swiper": true
          }
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "可编辑选项卡（支持轮播）",
      "category": "内容"
    }
  ]
}
{% endschema %}

{% style %}
.tab-nav {
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.tab-control {
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}
.tab-control.active {
  background-color: #f3f4f6;
  border-color: #3b82f6;
}
.tab-panel {
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}
.tab-panel:not(.active) {
  display: none;
}
/* Swiper基础样式 */
.swiper {
  width: 100%;
  height: 300px;
  margin: 1.5rem 0;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide-caption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: white;
  background-color: rgba(0,0,0,0.5);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}
{% endstyle %}

集成Swiper功能 #

1. 引入Swiper资源：在theme.liquid文件的<head>中添加Swiper的CSS和JS：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

2. 初始化Swiper：在theme.liquid的</body>前添加初始化代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.mySwiper').forEach(swiperEl => {
    new Swiper(swiperEl, {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      loop: true,
    });
  });
});
</script>

后台操作说明 #

1. 进入Shopify后台 → 在线商店 → 主题 → 自定义
2. 在目标页面添加「可编辑选项卡（支持轮播）」section
3. 点击「添加选项卡」新增项，点击区块右上角删除按钮移除选项卡
4. 编辑选项卡名称、内容，勾选「启用Swiper轮播」后可添加轮播幻灯片

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