zz-shopify-components 0.0.1-beta.1

package/sections/zz-video-collapse-swiper.liquid

@@ -0,0 +1,522 @@
+{% schema %}
+{
+  "name": "Video Img Collapse View",
+  "class": "zz-video-collapse-view",
+
+  "settings": [
+    {
+      "type": "image_picker",
+      "id": "logo",
+      "label": "Logo"
+    },
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#000000",
+      "label": "背景色"
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_top",
+      "label": "PC上内边距 (Padding Top)",
+      "default": 80
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_bottom",
+      "label": "PC下内边距 (Padding Bottom)",
+      "default": 80
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_top",
+      "label": "移动上内边距 (Padding Top)",
+  
+      "default": 40
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_bottom",
+      "label": "移动下内边距 (Padding Bottom)",
+      "default": 40
+    },
+    {
+      "type": "color",
+      "id": "tab_title_active_color",
+      "label": "Tab标题激活颜色",
+      "default": "#ffffff"
+    },
+    {
+      "type": "color",
+      "id": "tab_title_color",
+      "label": "Tab标题颜色",
+      "default": "#BDBDBD"
+    },
+    {
+      "type": "color",
+      "id": "collapsible_text_color",
+      "label": "可折叠文字颜色",
+      "default": "#B2B2B2"
+    },
+    {
+      "type": "color",
+      "id": "tab_bar_bg_color",
+      "label": "移动端Tab栏背景颜色",
+      "default": "#2B2B2B"
+    },
+    {
+      "type": "select",
+      "id": "collapse_button_color",
+      "label": "展开按钮颜色风格",
+      "options": [
+        { "value": "white", "label": "白色" },
+        { "value": "black", "label": "黑色" },
+      ],
+      "default": "white"
+    },
+    
+   
+  ],
+  "blocks": [
+    { 
+      "type": "title",
+      "name": "标题",
+      "settings": [
+          {
+            "type": "richtext",
+            "id": "pc_title",
+            "label": "PC标题内容 (PC Title Content)",
+            "default": "<p>这里是标题</p>"
+          },
+          {
+            "type": "richtext",
+            "id": "mb_title",
+            "label": "移动标题内容 (Mobile Title Content)",
+            
+          },
+          {
+            "type": "color",
+            "id": "text_color",
+            "label": "文字颜色",
+            "default": "#ffffff"
+          },
+          {
+            "type": "number",
+            "id": "pc_margin_bottom",
+            "label": "PC下外边距 (Margin Bottom)",
+            "default": 40
+          },
+          {
+            "type": "number",
+            "id": "mobile_margin_bottom",
+            "label": "移动下外边距 (Margin Bottom)",
+            "default": 20
+          }
+      ]
+    },
+    {
+      "type": "text_content",
+      "name": "文字内容",
+      "settings": [
+        {
+          "type": "richtext",
+          "id": "pc_text",
+          "label": "PC文字内容 (PC Text Content)",
+          "default": "<p>这里是文字内容</p>"
+        },
+        {
+          "type": "richtext",
+          "id": "mb_text",
+          "label": "移动文字内容 (Mobile Text Content)",
+          "default": "<p>这里是文字内容</p>"
+        },
+        {
+          "type": "color",
+          "id": "text_color",
+          "label": "文字颜色",
+          "default": "#ffffff"
+        },
+        {
+          "type": "number",
+          "id": "pc_margin_bottom",
+          "label": "PC下外边距 (Margin Bottom)",
+          "default": 40
+        },
+        {
+          "type": "number",
+          "id": "mobile_margin_bottom",
+          "label": "移动下外边距 (Margin Bottom)",
+          "default": 20
+        }
+      ]
+    },
+    {
+      "type": "collapsible_row",
+      "name": "可折叠行",
+      "settings": [
+        {
+          "type": "text",
+          "id": "heading",
+          "label": "标题"
+        },
+        {
+          "type": "html",
+          "id": "row_content",
+          "label": "description"
+        },
+        {
+          "type": "video",
+          "id": "video_pc",
+          "label": "Video"
+        },
+        {
+          "type": "image_picker",
+          "id": "poster_pc",
+          "label": "Poster"
+        },
+        {
+          "type": "video",
+          "id": "video_mb",
+          "label": "Video(Mobile)"
+        },
+        {
+          "type": "image_picker",
+          "id": "poster_mb",
+          "label": "Poster(Mobile)"
+        },
+      ]
+    }
+  ],
+
+  "presets": [
+    {
+      "name": "Video Img Collapse View"
+    },
+    {
+      "name": "内容折叠+视频图片",
+      "settings": {
+       
+      },
+      "blocks": [
+        {
+          "type": "title",
+          "settings": {
+            "pc_title": "<p>内容折叠+视频图片</p>",
+            "mb_title": "<p>内容折叠+视频图片</p>",
+            "text_color": "#ffffff",
+          }
+        },
+        {
+          "type": "text_content",
+          "settings": {
+            "pc_text": "<p>内容折叠+视频图片,左侧视频和图片，右边可折叠内容</p>",
+            "mb_text": "<p>内容折叠+视频图片,左侧视频和图片，右边可折叠内容</p>",
+            "text_color": "#ffffff",
+          }
+        },
+        {
+          "type": "collapsible_row",
+          "settings": {
+            "heading": "TitleOne",
+            "row_content": "<p>Capture high-speed action and slow it waaaay down, and stretch out a moment in time.</p>",
+            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster.png",
+            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster.png"
+          }
+        },
+        {
+          "type": "collapsible_row",
+          "settings": {
+            "heading": "TitleTwo",
+            "row_content": "<p>For 9:16 social content, switch to vertical orientation for scroll-stopping Ultra HD 4K@30.</p>",
+            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster_1.png",
+            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster_1.png"
+          }
+        },
+      ]
+    }
+  ]
+}
+{% endschema %}
+
+<div class='video-collapse-swiper tw-relative'>
+  {% assign non_collapsible_blocks = section.blocks | reject: 'type', 'collapsible_row' %}
+  <div class="collapse-title-desc fade-in-box tw-flex tw-flex-col tw-justify-center">
+    
+    {% for block in non_collapsible_blocks %}
+      {% case block.type %}
+        {% when 'title' %}
+          {% render 'zz-h2',
+            title: block.settings.pc_title,
+            title_mb: block.settings.mb_title,
+            title_color: block.settings.text_color,
+            class_name: 'content-title tw-text-center'
+          %}
+          <style>
+            #shopify-section-{{section.id}} .content-title {
+              margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
+            }
+            @media screen and (min-width: 1024px) {
+              #shopify-section-{{section.id}} .content-title {
+                margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+              }
+            }
+          </style>
+        {% when 'text_content' %}
+          {% render 'zz-content-text',
+            text: block.settings.pc_text,
+            mb_text: block.settings.mb_text,
+            text_color: block.settings.text_color,
+            class_name: 'content-text tw-text-center'
+          %}
+          <style>
+            
+            #shopify-section-{{section.id}} .content-text {
+              margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
+            }
+            @media screen and (min-width: 1024px) {
+              #shopify-section-{{section.id}} .content-text {
+                margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+              }
+            }
+          </style>
+
+      {% endcase %}
+    {% endfor %}
+    
+  </div>
+  <div class="max-lg:tw-hidden tw-w-[90vw] xl:tw-w-[1220px] tw-mx-auto">
+    <div class="collaspse-div yw-w-full tw-flex tw-items-center tw-justify-between">
+      <div class="tw-w-[68%]">
+        {% assign swiper_blocks = section.blocks | where: 'type', 'collapsible_row' %}
+        {% for collapsible_row in swiper_blocks %}
+          <div class='collasps-video-box tw-hidden tw-w-full tw-rounded-[16px] tw-overflow-hidden'>
+            {% comment %} pc端配置视频 {% endcomment %}
+            {% if collapsible_row.settings.video_pc != blank %}
+              {% render 'zz-video',
+                pc_video: collapsible_row.settings.video_pc,
+                pc_poster: collapsible_row.settings.poster_pc,
+                lazy: true,
+                class: 'tw-w-full tw-h-auto tw-rounded-[16px] ',
+                autoplay: true,
+                loop: true,
+                muted: true
+              %}
+            {% else %}
+              {%- if collapsible_row.settings.poster_pc != blank -%}
+                {% render 'zz-img',
+                  pc_image: collapsible_row.settings.poster_pc,
+                  image_alt: collapsible_row.settings.heading | escape,
+                  class_name: 'ratio-image',
+                %}
+              {% endif %}
+            {% endif %}
+            
+          </div>
+        {% endfor %}
+      </div>
+      <div class="tw-w-[27%]">
+        <div class="tw-daisy-join tw-daisy-join-vertical tw-w-full">
+          {% for collapsible_row in swiper_blocks %}
+            <div class="tw-daisy-collapse collapse-arrow tw-daisy-join-item ">
+              <input type="radio" name="my-accordion-{{ section.id }}" value="{{ forloop.index }}" {% if forloop.first %}checked data-last-checked="true"{% endif %} onclick="handleFAQClick(this)" style="cursor: pointer;" /> 
+              <div class="tw-daisy-collapse-title tw-py-[20px] tw-px-0  tw-text-[20px]  tw-font-[700]  tw-leading-[1]" style="color: {{ section.settings.tab_title_active_color }};">
+                {{ collapsible_row.settings.heading }}
+              </div>
+              <div class="tw-p-0  tw-daisy-collapse-content">
+                <div class="row-content tw-pb-[1rem] tw-text-[16px] tw-leading-[1.5]" style="color: {{ section.settings.collapsible_text_color }};">
+                  {{ collapsible_row.settings.row_content }}
+                </div>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+  
+    </div>
+  </div>
+  
+  <div class='tw-px-[20px] tw-py-[20px] lg:tw-hidden'>
+    {% for collapsible_row in swiper_blocks %}
+      <div class='video-box tw-hidden tw-rounded-[10px] tw-overflow-hidden'>
+        {% comment %} 移动端配置视频 {% endcomment %}
+        {% if collapsible_row.settings.video_mb != blank %}
+          {% render 'zz-video',
+            mb_video: collapsible_row.settings.video_mb,
+            mb_poster: collapsible_row.settings.poster_mb,
+            autoplay: true,
+            loop: true,
+            class: 'tw-w-full tw-h-auto tw-rounded-[10px]',
+            muted: true
+          %}
+        {% else %}
+          {%- if collapsible_row.settings.poster_mb != blank -%}
+            {% render 'zz-img',
+              mb_image: collapsible_row.settings.poster_mb,
+              image_alt: collapsible_row.settings.heading | escape,
+            %}
+          {% endif %}
+        {% endif %}
+      </div>
+    {% endfor %}
+  </div>
+
+  <div class="lg:tw-hidden">
+    <div class="tw-px-[20px] tw-py-[20px] tw-flex tw-flex-col tw-items-center tw-justify-center">
+      <div 
+        class='tabs tw-flex tw-justify-between tw-w-full tw-min-w-[320px] tw-max-w-[480px] tw-px-[16px] tw-rounded-[16px] tw-items-center tw-h-[32px] tw-mb-[12px]' 
+        style="background-color: {{ section.settings.tab_bar_bg_color }};">
+        {% for collapsible_row in swiper_blocks %}
+          <div
+            class='tab-item tw-cursor-pointer tw-text-[10px] tw-font-[500] hover:tw-border-white'
+            style="color: {{ section.settings.tab_title_color }};"
+            data-index='{{ forloop.index0 }}'
+          >
+            {{ collapsible_row.settings.heading }}
+          </div>
+        {% endfor %}
+      </div>
+    
+      <div class='video-content '>
+        {% for collapsible_row in swiper_blocks %}
+          <div 
+            class='content-item row-content tw-hidden tw-font-[500] tw-leading-[1.5] tw-text-center' data-index='{{ forloop.index0 }}'
+            style="color: {{ section.settings.collapsible_text_color }};"
+          >
+            {{ collapsible_row.settings.row_content }}
+          </div>
+        {% endfor %}
+      </div>
+  
+    </div>
+  </div>
+
+  
+  
+</div>
+
+<style>
+    #shopify-section-{{section.id}} {
+      width: 100%;
+      background: {{ section.settings.bg_color }};
+      padding-top: {{ section.settings.mobile_padding_top }}px;
+      padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
+
+    }
+    #shopify-section-{{section.id}} .tw-daisy-collapse {
+      border-bottom: 1px solid #4C4C4C;
+    }
+
+    #shopify-section-{{section.id}} .row-content a {
+      color: #378DDD;
+    }
+
+    #shopify-section-{{section.id}} .tab-item.active {
+      font-weight: 700;
+      color: {{ section.settings.tab_title_active_color }} !important;
+
+    }
+    #shopify-section-{{section.id}} .content-item.active {
+      display: block;
+    }
+    #shopify-section-{{ section.id }} .collapse-arrow > .tw-daisy-collapse-title::after {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      transition: all 0.3s;
+      content: '';
+      width: 20px;
+      height: 20px;
+      {% if section.settings.collapse_button_color == 'white' %}
+        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.34375 8.11816L10.0006 13.775L15.6575 8.11816' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E");
+      {% else %}
+        background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4.34497%208L10.0018%2013.6569L15.6587%208%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
+      {% endif %}
+      
+    }
+    #shopify-section-{{ section.id }} .collapse-arrow input[type="radio"]:checked ~ .tw-daisy-collapse-title::after {
+      transform: translateY(-50%) rotate(180deg);
+    }
+    #shopify-section-{{ section.id }} .tw-daisy-collapse:last-child {
+      border-bottom: none;
+    }
+    @media screen and (min-width: 1024px) {
+      #shopify-section-{{section.id}} {
+        padding-top: {{ section.settings.pc_padding_top }}px;
+        padding-bottom: {{ section.settings.pc_padding_bottom }}px;
+      }
+    }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const tabs = document.querySelectorAll(
+      '#shopify-section-{{section.id}} .tab-item'
+    );
+    const videos = document.querySelectorAll(
+      '#shopify-section-{{section.id}} .video-box'
+    );
+    const contents = document.querySelectorAll(
+      '#shopify-section-{{section.id}} .content-item'
+    );
+    const collapses = document.querySelectorAll(
+      '#shopify-section-{{section.id}} .collasps-video-box'
+    );
+
+    tabs.forEach((tab, index) => {
+      tab.addEventListener('click', (e) => {
+        // 清除所有激活状态
+        tabs.forEach((t) => t.classList.remove('active'));
+        videos.forEach((v) => v.classList.add('tw-hidden'));
+        contents.forEach((c) => c.classList.remove('active'));
+
+        // 激活当前选项
+        tab.classList.add('active');
+        if (videos[index]) videos[index].classList.remove('tw-hidden');
+        if (contents[index]) contents[index].classList.add('active');
+      });
+    });
+
+    // 默认激活第一个选项
+    if (tabs.length > 0) {
+      tabs[0].click();
+    }
+    // 折叠行点击事件处理
+    const collaspsRadios = document.querySelectorAll(
+      '#shopify-section-{{section.id}} input[type="radio"]'
+    );
+    console.log('collaspsRadios', collaspsRadios);
+    window.handleFAQClick = function (radio) {
+      if (radio.checked && radio.getAttribute('data-last-checked') === 'true') {
+        radio.checked = false;
+        radio.setAttribute('data-last-checked', 'false');
+      } else {
+        const radios = document.getElementsByName(radio.name);
+        radios.forEach((r) => r.setAttribute('data-last-checked', 'false'));
+        radio.setAttribute('data-last-checked', 'true');
+      }
+      // 控制 collasps-video-box 显示与隐藏
+      collapses.forEach((collapse, index) => {
+        if (radio.value == index + 1) {
+          collapse.classList.remove('tw-hidden');
+        } else {
+          collapse.classList.add('tw-hidden');
+        }
+      });
+    }
+    
+
+    // 默认显示第一个 collasps-video-box
+    if (collapses.length > 0) {
+      collapses.forEach((collapse, index) => {
+        if (index === 0) {
+          collapse.classList.remove('tw-hidden');
+        } else {
+          collapse.classList.add('tw-hidden');
+        }
+      });
+    }
+  });
+</script>