hasting-swatchcart-module 1.0.1 → 1.0.3
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 +41 -20
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,8 +18,8 @@ import { SwatchModule } from 'hasting-swatchcart-module';
|
|
|
18
18
|
|
|
19
19
|
<SwatchModule
|
|
20
20
|
isOpen={isOpenModule}
|
|
21
|
-
uiDataType={
|
|
22
|
-
data={
|
|
21
|
+
uiDataType={'UI' or 'DATA_INPUT' or 'DATA_ALL_PRODUCT'}
|
|
22
|
+
data={data}
|
|
23
23
|
onToggleSidebar={handleOpenSidebar}
|
|
24
24
|
onSendData={handleSetData}
|
|
25
25
|
/>;
|
|
@@ -37,17 +37,22 @@ import { SwatchModule } from 'hasting-swatchcart-module';
|
|
|
37
37
|
<script type="module">
|
|
38
38
|
import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
|
|
39
39
|
|
|
40
|
-
const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
|
|
41
|
-
const mockData = await fetch(jsonUrl).then((r) => r.json());
|
|
42
|
-
|
|
43
40
|
const rootElement = document.getElementById('root');
|
|
44
41
|
|
|
42
|
+
const handleToggleSidebar = () => {
|
|
43
|
+
// handleToggleSidebar
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
const handleSendData = (selectedData) => {
|
|
47
|
+
// handleSendData
|
|
48
|
+
}
|
|
49
|
+
|
|
45
50
|
mountSwatchModule(rootElement, {
|
|
46
51
|
isOpen: true,
|
|
47
|
-
uiDataType: 'UI',
|
|
48
|
-
data:
|
|
49
|
-
onToggleSidebar:
|
|
50
|
-
onSendData:
|
|
52
|
+
uiDataType: 'UI' or 'DATA_INPUT' or 'DATA_ALL_PRODUCT',
|
|
53
|
+
data: data,
|
|
54
|
+
onToggleSidebar: handleToggleSidebar,
|
|
55
|
+
onSendData: handleSendData,
|
|
51
56
|
});
|
|
52
57
|
</script>
|
|
53
58
|
</body>
|
|
@@ -148,19 +153,26 @@ npm run build:cdn
|
|
|
148
153
|
```html
|
|
149
154
|
<link rel="stylesheet" href="../dist/cdn/main.css" />
|
|
150
155
|
<script type="module">
|
|
151
|
-
import { mountSwatchModule } from '
|
|
156
|
+
import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
|
|
152
157
|
|
|
158
|
+
const rootElement = document.getElementById('root');
|
|
153
159
|
const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
|
|
154
160
|
const mockData = await fetch(jsonUrl).then((r) => r.json());
|
|
155
161
|
|
|
156
|
-
const
|
|
162
|
+
const handleToggleSidebar = () => {
|
|
163
|
+
console.log("handleToggleSidebar is working");
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
const handleSendData = (selectedData) => {
|
|
167
|
+
console.log("handleSendData is working", selectedData);
|
|
168
|
+
}
|
|
157
169
|
|
|
158
170
|
mountSwatchModule(rootElement, {
|
|
159
171
|
isOpen: true,
|
|
160
|
-
uiDataType: 'UI',
|
|
172
|
+
uiDataType: 'UI' or 'DATA_INPUT' or 'DATA_ALL_PRODUCT',
|
|
161
173
|
data: mockData,
|
|
162
|
-
onToggleSidebar:
|
|
163
|
-
onSendData:
|
|
174
|
+
onToggleSidebar: handleToggleSidebar,
|
|
175
|
+
onSendData: handleSendData,
|
|
164
176
|
});
|
|
165
177
|
</script>
|
|
166
178
|
```
|
|
@@ -175,17 +187,26 @@ npm run build:cdn
|
|
|
175
187
|
<script type="module">
|
|
176
188
|
import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
|
|
177
189
|
|
|
190
|
+
// local JSON data
|
|
178
191
|
const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
|
|
179
192
|
const mockData = await fetch(jsonUrl).then((r) => r.json());
|
|
180
193
|
|
|
181
194
|
const rootElement = document.getElementById('root');
|
|
182
195
|
|
|
196
|
+
const handleToggleSidebar = () => {
|
|
197
|
+
console.log("handleToggleSidebar is working");
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
const handleSendData = (selectedData) => {
|
|
201
|
+
console.log("handleSendData is working", selectedData);
|
|
202
|
+
}
|
|
203
|
+
|
|
183
204
|
mountSwatchModule(rootElement, {
|
|
184
205
|
isOpen: true,
|
|
185
|
-
uiDataType: 'UI',
|
|
186
|
-
data: mockData,
|
|
187
|
-
onToggleSidebar:
|
|
188
|
-
onSendData: (payload) =>
|
|
206
|
+
uiDataType: 'UI' or 'DATA_INPUT' or 'DATA_ALL_PRODUCT',
|
|
207
|
+
data: mockData, // or your data
|
|
208
|
+
onToggleSidebar: handleToggleSidebar,
|
|
209
|
+
onSendData: (payload) => handleSendData(selectedData),
|
|
189
210
|
});
|
|
190
211
|
</script>
|
|
191
212
|
```
|
|
@@ -211,8 +232,8 @@ import { SwatchModule } from '../../dist/main'; // build module
|
|
|
211
232
|
```js
|
|
212
233
|
<SwatchModule
|
|
213
234
|
isOpen={isOpenModule}
|
|
214
|
-
uiDataType={
|
|
215
|
-
data={
|
|
235
|
+
uiDataType={'UI' or 'DATA_INPUT' or 'DATA_ALL_PRODUCT'}
|
|
236
|
+
data={data}
|
|
216
237
|
onToggleSidebar={handleOpenSidebar}
|
|
217
238
|
onSendData={handleSetData}
|
|
218
239
|
/>
|