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 +57 -35
- package/dist/assets/index.css +1 -1
- package/dist/cdn/lib/main.d.ts +0 -2
- package/dist/cdn/main.css +1 -1
- package/dist/cdn/main.js +554 -556
- package/dist/cdn/src/features/DataAdapter/utils/types.d.ts +0 -2
- package/dist/main.cjs +89 -89
- package/dist/main.cjs.map +1 -1
- package/dist/main.d.ts +0 -2
- package/dist/main.js +1589 -1591
- package/dist/main.js.map +1 -1
- package/package.json +1 -1
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={
|
|
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={
|
|
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={
|
|
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 {
|
|
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
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
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
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
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:
|
|
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(
|
|
238
|
-
}
|
|
240
|
+
console.log('handleToggleSidebar is working');
|
|
241
|
+
};
|
|
239
242
|
|
|
240
243
|
const handleSendData = (selectedData) => {
|
|
241
|
-
console.log(
|
|
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:
|
|
247
|
-
|
|
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
|
|
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:
|
|
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:
|
|
308
|
-
assetId: '
|
|
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:
|
|
339
|
+
uiDataType: EDataInputType.FETCH_DATA_ALL,
|
|
318
340
|
onToggleSidebar: handleToggleSidebar,
|
|
319
341
|
onSendData: handleSendData,
|
|
320
342
|
});
|