zz-shopify-components 0.16.3-beta.9 → 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 +2 -2
  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) {
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.9",
3
+ "version": "0.17.0",
4
4
  "description": "Reusable Shopify components for theme projects",
5
5
  "keywords": [
6
6
  "shopify",