zz-shopify-components 0.16.3-beta.8 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/zz-world-video-list.js +42 -17
  2. package/blocks/zz-normal-swiper.liquid +13 -5
  3. package/blocks/zz-world-video.liquid +37 -20
  4. package/package.json +1 -1
package/assets/zz-world-video-list.js CHANGED
@@ -27,6 +27,9 @@ class WorldVideoList extends HTMLElement {
27
27
 
28
28
  init() {
29
29
  document.addEventListener('DOMContentLoaded', (event) => {
30
+ if (this.shopSelect === 'JP') {
31
+ this.productType = 3;
32
+ }
30
33
  this.initData();
31
34
  // 初始化切换
32
35
  this.initSwitch();
@@ -85,12 +88,19 @@ class WorldVideoList extends HTMLElement {
85
88
  initSwitch() {
86
89
  const btnPro = this.querySelector('#switch-pro');
87
90
  const btnX1 = this.querySelector('#switch-x1');
91
+ const btnX1Smart = this.querySelector('#switch-x1-smart');
88
92
  btnPro.addEventListener('click', (event) => {
89
93
  event.stopPropagation();
90
94
  btnPro.classList.add('tw-bg-black', 'tw-text-white');
91
95
  btnPro.classList.remove('tw-bg-transparent', 'tw-text-black');
92
- btnX1.classList.add('tw-bg-transparent', 'tw-text-black');
93
- btnX1.classList.remove('tw-bg-black', 'tw-text-white');
96
+ if(btnX1) {
97
+ btnX1.classList.add('tw-bg-transparent', 'tw-text-black');
98
+ btnX1.classList.remove('tw-bg-black', 'tw-text-white');
99
+ }
100
+ if(btnX1Smart) {
101
+ btnX1Smart.classList.add('tw-bg-transparent', 'tw-text-black');
102
+ btnX1Smart.classList.remove('tw-bg-black', 'tw-text-white');
103
+ }
94
104
  // 这里可以加你切换到 PRO&PROMAX 的逻辑
95
105
  if (this.productType !== 4) {
96
106
  this.productType = 4;
@@ -99,23 +109,38 @@ class WorldVideoList extends HTMLElement {
99
109
  }
100
110
  });
101
111
 
102
- btnX1.addEventListener('click', (event) => {
103
- event.stopPropagation();
104
- btnX1.classList.add('tw-bg-black', 'tw-text-white');
105
- btnX1.classList.remove('tw-bg-transparent', 'tw-text-black');
106
- btnPro.classList.add('tw-bg-transparent', 'tw-text-black');
107
- btnPro.classList.remove('tw-bg-black', 'tw-text-white');
108
- // 这里可以加你切换到 X1 的逻辑
109
- if (this.productType !== 1) {
110
- if (this.shopSelect === 'JP') {
111
- this.productType = 3;
112
- } else {
112
+ if(btnX1) {
113
+ btnX1.addEventListener('click', (event) => {
114
+ event.stopPropagation();
115
+ btnX1.classList.add('tw-bg-black', 'tw-text-white');
116
+ btnX1.classList.remove('tw-bg-transparent', 'tw-text-black');
117
+ btnPro.classList.add('tw-bg-transparent', 'tw-text-black');
118
+ btnPro.classList.remove('tw-bg-black', 'tw-text-white');
119
+ // 这里可以加你切换到 X1 的逻辑
120
+ if (this.productType !== 1) {
113
121
  this.productType = 1;
122
+ this.page = 1;
123
+ this.loadMoreData();
114
124
  }
115
- this.page = 1;
116
- this.loadMoreData();
117
- }
118
- });
125
+ });
126
+ }
127
+
128
+ if(btnX1Smart) {
129
+ btnX1Smart.addEventListener('click', (event) => {
130
+ event.stopPropagation();
131
+ btnX1Smart.classList.add('tw-bg-black', 'tw-text-white');
132
+ btnX1Smart.classList.remove('tw-bg-transparent', 'tw-text-black');
133
+ btnPro.classList.add('tw-bg-transparent', 'tw-text-black');
134
+ btnPro.classList.remove('tw-bg-black', 'tw-text-white');
135
+ // 这里可以加你切换到 X1 的逻辑
136
+ if (this.productType !== 3) {
137
+ this.productType = 3;
138
+ this.page = 1;
139
+ this.loadMoreData();
140
+ }
141
+ });
142
+
143
+ }
119
144
  }
120
145
  initDataLayer() {
121
146
  let startTime = 0;
package/blocks/zz-normal-swiper.liquid CHANGED
@@ -20,13 +20,13 @@
20
20
  {% if block.settings.right_to_edge == true %}
21
21
  @media (min-width: 1280px) {
22
22
  #shopify-block-{{block.id}} .zz-normal-swiper {
23
- padding-left: calc((100% - {{ block.settings.pc_xl_width }}px) / 2);
23
+ padding: 0 calc((100% - {{ block.settings.pc_xl_width }}px) / 2);
24
24
  }
25
25
  }
26
26
 
27
27
  @media (min-width: 1024px) and (max-width: 1279px) {
28
28
  #shopify-block-{{block.id}} .zz-normal-swiper {
29
- padding-left: calc((100% - {{ block.settings.pc_lg_width }}vw) / 2);
29
+ padding: 0 calc((100% - {{ block.settings.pc_lg_width }}vw) / 2);
30
30
  }
31
31
  }
32
32
  @media (max-width: 1024px) {
@@ -192,7 +192,9 @@
192
192
  {% endif %}
193
193
 
194
194
  {% if block.settings.pagination_type != 'none' %}
195
- <div class='swiper-pagination {% if block.settings.pagination_type == "segments" %} zz-pagination-segments {% endif %}'></div>
195
+ <div
196
+ class='swiper-pagination {% if block.settings.pagination_type == "segments" %} zz-pagination-segments {% endif %}'
197
+ ></div>
196
198
  {% endif %}
197
199
  </div>
198
200
 
@@ -235,6 +237,7 @@
235
237
  pauseOnMouseEnter: true,
236
238
  },
237
239
  {% endif %}
240
+ initialSlide: {{ block.settings.pre_show_index | default: 0 }},
238
241
  breakpoints: {
239
242
  0: {
240
243
  slidesPerView: {{ block.settings.slides_per_view_mb | default: 1 }},
@@ -310,6 +313,13 @@
310
313
  "label": "居中显示",
311
314
  "default": false
312
315
  },
316
+ {
317
+ "type": "number",
318
+ "id": "pre_show_index",
319
+ "label": "预先展示的内容序号(0开始)",
320
+ "default": 0,
321
+ "info": "0表示预先展示第一张，1表示预先展示第二张，以此类推"
322
+ },
313
323
  {
314
324
  "type": "checkbox",
315
325
  "id": "auto_height",
@@ -337,8 +347,6 @@
337
347
  "visible_if": "{{ block.settings.right_to_edge == true }}"
338
348
  },
339
349
 
340
-
341
-
342
350
  {
343
351
  "type": "checkbox",
344
352
  "id": "autoplay",
package/blocks/zz-world-video.liquid CHANGED
@@ -96,26 +96,43 @@
96
96
  data-shop-select='{{ block.settings.shop_select }}'
97
97
  >
98
98
  <div class='tw-flex tw-justify-center tw-items-center tw-my-[30px] lg:tw-my-[80px]'>
99
- <div class='world-video-switch tw-flex tw-w-[336px] lg:tw-w-[360px] tw-h-[42px] tw-bg-[#F3F3F3] tw-rounded-[21px] tw-overflow-hidden '>
100
- <button
101
- id='switch-pro'
102
- class='tw-flex-1 tw-border-none tw-h-full tw-text-[13px] lg:tw-text-[16px] tw-bg-black tw-text-white tw-rounded-[21px] tw-transition-colors'
103
- style='font-size: 16px;'
104
- >
105
- X1 PRO&PROMAX
106
- </button>
107
- <button
108
- id='switch-x1'
109
- class='tw-flex-1 tw-border-none tw-h-full tw-rounded-[21px] tw-text-[13px] lg:tw-text-[16px] tw-bg-transparent tw-text-black tw-transition-colors'
110
- style='font-size: 16px;'
111
- >
112
- {% if block.settings.shop_select == 'JP' %}
113
- X1 Smart
114
- {% else %}
115
- X1
116
- {% endif %}
117
- </button>
118
- </div>
99
+
100
+ {% if block.settings.shop_select == 'JP' %}
101
+ <div class='world-video-switch tw-flex tw-w-[336px] lg:tw-w-[360px] tw-h-[42px] tw-bg-[#F3F3F3] tw-rounded-[21px] tw-overflow-hidden '>
102
+
103
+ <button
104
+ id='switch-x1-smart'
105
+ class='tw-flex-1 tw-border-none tw-h-full tw-text-[13px] lg:tw-text-[16px] tw-bg-black tw-text-white tw-rounded-[21px] tw-transition-colors'
106
+ style='font-size: 16px;'
107
+ >
108
+ X1 Smart
109
+ </button>
110
+ <button
111
+ id='switch-pro'
112
+ class='tw-flex-1 tw-border-none tw-h-full tw-rounded-[21px] tw-text-[13px] lg:tw-text-[16px] tw-bg-transparent tw-text-black tw-transition-colors'
113
+ style='font-size: 16px;'
114
+ >
115
+ X1 PRO&PROMAX
116
+ </button>
117
+ </div>
118
+ {% else %}
119
+ <div class='world-video-switch tw-flex tw-w-[336px] lg:tw-w-[360px] tw-h-[42px] tw-bg-[#F3F3F3] tw-rounded-[21px] tw-overflow-hidden '>
120
+ <button
121
+ id='switch-pro'
122
+ class='tw-flex-1 tw-border-none tw-h-full tw-text-[13px] lg:tw-text-[16px] tw-bg-black tw-text-white tw-rounded-[21px] tw-transition-colors'
123
+ style='font-size: 16px;'
124
+ >
125
+ X1 PRO&PROMAX
126
+ </button>
127
+ <button
128
+ id='switch-x1'
129
+ class='tw-flex-1 tw-border-none tw-h-full tw-rounded-[21px] tw-text-[13px] lg:tw-text-[16px] tw-bg-transparent tw-text-black tw-transition-colors'
130
+ style='font-size: 16px;'
131
+ >
132
+ X1
133
+ </button>
134
+ </div>
135
+ {% endif %}
119
136
  </div>
120
137
  <div class='tw-relative tw-w-full'>
121
138
  <div
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zz-shopify-components",
3
- "version": "0.16.3-beta.8",
3
+ "version": "0.17.0",
4
4
  "description": "Reusable Shopify components for theme projects",
5
5
  "keywords": [
6
6
  "shopify",