hasting-swatchcart-module 1.0.8 → 1.0.9

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.
package/README.md CHANGED
@@ -16,11 +16,11 @@ npm i hasting-swatchcart-module
16
16
  ### UI (attributes from outside )
17
17
 
18
18
  ```js
19
- import { SwatchModule } from 'hasting-swatchcart-module';
19
+ import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
20
20
 
21
21
  <SwatchModule
22
22
  isOpen={isOpenModule}
23
- uiDataType={'UI'}
23
+ uiDataType={EDataInputType.UI}
24
24
  data={data}
25
25
  onToggleSidebar={handleOpenSidebar}
26
26
  onSendData={handleSetData}
@@ -30,11 +30,11 @@ import { SwatchModule } from 'hasting-swatchcart-module';
30
30
  ### Fetch product
31
31
 
32
32
  ```js
33
- import { SwatchModule } from 'hasting-swatchcart-module';
33
+ import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
34
34
 
35
35
  <SwatchModule
36
36
  isOpen={isOpenModule}
37
- uiDataType={'FETCH_DATA_PRODUCT'}
37
+ uiDataType={EDataInputType.FETCH_DATA_PRODUCT}
38
38
  assetId={'asset_id'}
39
39
  onToggleSidebar={handleOpenSidebar}
40
40
  onSendData={handleSetData}
@@ -44,11 +44,11 @@ import { SwatchModule } from 'hasting-swatchcart-module';
44
44
  ### Fetch product all
45
45
 
46
46
  ```js
47
- import { SwatchModule } from 'hasting-swatchcart-module';
47
+ import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
48
48
 
49
49
  <SwatchModule
50
50
  isOpen={isOpenModule}
51
- uiDataType={'FETCH_DATA_PRODUCT_All'}
51
+ uiDataType={EDataInputType.FETCH_DATA_ALL}
52
52
  onToggleSidebar={handleOpenSidebar}
53
53
  onSendData={handleSetData}
54
54
  />;
@@ -65,7 +65,10 @@ import { SwatchModule } from 'hasting-swatchcart-module';
65
65
  <div id="root"></div>
66
66
 
67
67
  <script type="module">
68
- import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
68
+ import {
69
+ mountSwatchModule,
70
+ EDataInputType,
71
+ } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
69
72
 
70
73
  // local MOCK JSON data or your real data
71
74
  const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
@@ -82,27 +85,27 @@ import { SwatchModule } from 'hasting-swatchcart-module';
82
85
  };
83
86
 
84
87
  // UI (attributes from outside) - single product
85
- // mountSwatchModule(rootElement, {
86
- // isOpen: true,
87
- // uiDataType: 'UI',
88
- // data: mockData, // or your data
89
- // onToggleSidebar: handleToggleSidebar,
90
- // onSendData: handleSendData,
91
- // });
88
+ mountSwatchModule(rootElement, {
89
+ isOpen: true,
90
+ uiDataType: EDataInputType.UI,
91
+ data: mockData, // or your data
92
+ onToggleSidebar: handleToggleSidebar,
93
+ onSendData: handleSendData,
94
+ });
92
95
 
93
96
  // Fetch product data - single product
94
- // mountSwatchModule(rootElement, {
95
- // isOpen: true,
96
- // uiDataType: 'FETCH_DATA_PRODUCT',
97
- // assetId: '67119b1c-36ba-42c1-bcd1-2d21cf44df55',
98
- // onToggleSidebar: handleToggleSidebar,
99
- // onSendData: handleSendData,
100
- // });
97
+ mountSwatchModule(rootElement, {
98
+ isOpen: true,
99
+ uiDataType: EDataInputType.FETCH_DATA_PRODUCT,
100
+ assetId: 'assetId',
101
+ onToggleSidebar: handleToggleSidebar,
102
+ onSendData: handleSendData,
103
+ });
101
104
 
102
105
  // Fetch product all data - multi product
103
106
  mountSwatchModule(rootElement, {
104
107
  isOpen: true,
105
- uiDataType: 'FETCH_DATA_PRODUCT_All',
108
+ uiDataType: EDataInputType.FETCH_DATA_ALL,
106
109
  onToggleSidebar: handleToggleSidebar,
107
110
  onSendData: handleSendData,
108
111
  });
@@ -227,24 +230,44 @@ npm run build:cdn
227
230
  <link rel="stylesheet" href="../dist/cdn/main.css" />
228
231
  <script type="module">
229
232
  // Test locally
230
- import { mountSwatchModule } from '../dist/cdn/main.js';
233
+ import { mountSwatchModule, EDataInputType } from '../dist/cdn/main.js';
231
234
 
232
235
  const rootElement = document.getElementById('root');
233
236
  const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
234
237
  const mockData = await fetch(jsonUrl).then((r) => r.json());
235
238
 
236
239
  const handleToggleSidebar = () => {
237
- console.log("handleToggleSidebar is working");
238
- }
240
+ console.log('handleToggleSidebar is working');
241
+ };
239
242
 
240
243
  const handleSendData = (selectedData) => {
241
- console.log("handleSendData is working", selectedData);
242
- }
244
+ console.log('handleSendData is working', selectedData);
245
+ };
246
+
247
+ // Chose one of these possible options
248
+
249
+ // UI (attributes from outside) - single product
250
+ mountSwatchModule(rootElement, {
251
+ isOpen: true,
252
+ uiDataType: EDataInputType.UI,
253
+ data: mockData, // or your data
254
+ onToggleSidebar: handleToggleSidebar,
255
+ onSendData: handleSendData,
256
+ });
243
257
 
258
+ // Fetch product data - single product
244
259
  mountSwatchModule(rootElement, {
245
260
  isOpen: true,
246
- uiDataType: 'UI' or 'FETCH_DATA_PRODUCT' or 'FETCH_DATA_PRODUCT_All',
247
- data: mockData,
261
+ uiDataType: EDataInputType.FETCH_DATA_PRODUCT,
262
+ assetId: 'assetId',
263
+ onToggleSidebar: handleToggleSidebar,
264
+ onSendData: handleSendData,
265
+ });
266
+
267
+ // Fetch product all data - multi product
268
+ mountSwatchModule(rootElement, {
269
+ isOpen: true,
270
+ uiDataType: EDataInputType.FETCH_DATA_ALL,
248
271
  onToggleSidebar: handleToggleSidebar,
249
272
  onSendData: handleSendData,
250
273
  });
@@ -290,12 +313,12 @@ npm run build:cdn
290
313
  console.log('handleSendData', selectedData);
291
314
  };
292
315
 
293
- // Chose one of the possible options
316
+ // Chose one of these possible options
294
317
 
295
318
  // UI (attributes from outside) - single product
296
319
  mountSwatchModule(rootElement, {
297
320
  isOpen: true,
298
- uiDataType: 'UI',
321
+ uiDataType: EDataInputType.UI,
299
322
  data: mockData, // or your data
300
323
  onToggleSidebar: handleToggleSidebar,
301
324
  onSendData: handleSendData,
@@ -304,17 +327,16 @@ npm run build:cdn
304
327
  // Fetch product data - single product
305
328
  mountSwatchModule(rootElement, {
306
329
  isOpen: true,
307
- uiDataType: 'FETCH_DATA_PRODUCT',
308
- assetId: '67119b1c-36ba-42c1-bcd1-2d21cf44df55',
330
+ uiDataType: EDataInputType.FETCH_DATA_PRODUCT,
331
+ assetId: 'assetId',
309
332
  onToggleSidebar: handleToggleSidebar,
310
333
  onSendData: handleSendData,
311
334
  });
312
335
 
313
-
314
336
  // Fetch product all data - multi product
315
337
  mountSwatchModule(rootElement, {
316
338
  isOpen: true,
317
- uiDataType: 'FETCH_DATA_PRODUCT_All',
339
+ uiDataType: EDataInputType.FETCH_DATA_ALL,
318
340
  onToggleSidebar: handleToggleSidebar,
319
341
  onSendData: handleSendData,
320
342
  });