@shopify/shop-minis-cli 0.0.109 → 0.0.111
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/build/commands/create-extension/constants.js +4 -1
- package/build/commands/create-extension/constants.js.map +1 -1
- package/build/constants/extensions.d.ts +2 -1
- package/build/constants/extensions.js +1 -0
- package/build/constants/extensions.js.map +1 -1
- package/package.json +1 -1
- package/templates/extensions/components/__template_bundle-collection/render.tsx +32 -0
- package/templates/extensions/components/__template_bundle-collection/seed.ts +26 -0
- package/templates/extensions/components/__template_bundle-selector/render.tsx +7 -6
- package/templates/extensions/components/__template_bundle-selector/seed.ts +41 -35
|
@@ -11,11 +11,14 @@ export const EXTENSION_TYPE_CONFIG = {
|
|
|
11
11
|
[ExtensionType.BUNDLE_SELECTOR]: {
|
|
12
12
|
label: 'Bundle Selector',
|
|
13
13
|
},
|
|
14
|
+
[ExtensionType.BUNDLE_COLLECTION]: {
|
|
15
|
+
label: 'Bundle Collection',
|
|
16
|
+
},
|
|
14
17
|
};
|
|
15
18
|
// Add to this as new templates are created and they will appear in the CLI as options automatically
|
|
16
19
|
export const EXTENSION_PAGE_CONFIG = {
|
|
17
20
|
[ExtensionPage.PRODUCT_PAGE]: {
|
|
18
|
-
templates: [ExtensionType.BUNDLE_SELECTOR],
|
|
21
|
+
templates: [ExtensionType.BUNDLE_SELECTOR, ExtensionType.BUNDLE_COLLECTION],
|
|
19
22
|
},
|
|
20
23
|
[ExtensionPage.STORE_PAGE]: {
|
|
21
24
|
templates: [],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/commands/create-extension/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,aAAa,EAAC,MAAM,+BAA+B,CAAA;AAE5E,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAA;AAExC,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAA;AAE/C,MAAM,CAAC,MAAM,qBAAqB,GAA2C;IAC3E,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE;QAChC,KAAK,EAAE,kBAAkB;KAC1B;IACD,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE;QAChC,KAAK,EAAE,kBAAkB;KAC1B;IACD,CAAC,aAAa,CAAC,eAAe,CAAC,EAAE;QAC/B,KAAK,EAAE,iBAAiB;KACzB;CACF,CAAA;AAED,oGAAoG;AACpG,MAAM,CAAC,MAAM,qBAAqB,GAG9B;IACF,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE;QAC5B,SAAS,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/commands/create-extension/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,aAAa,EAAC,MAAM,+BAA+B,CAAA;AAE5E,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAA;AAExC,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAA;AAE/C,MAAM,CAAC,MAAM,qBAAqB,GAA2C;IAC3E,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE;QAChC,KAAK,EAAE,kBAAkB;KAC1B;IACD,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE;QAChC,KAAK,EAAE,kBAAkB;KAC1B;IACD,CAAC,aAAa,CAAC,eAAe,CAAC,EAAE;QAC/B,KAAK,EAAE,iBAAiB;KACzB;IACD,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE;QACjC,KAAK,EAAE,mBAAmB;KAC3B;CACF,CAAA;AAED,oGAAoG;AACpG,MAAM,CAAC,MAAM,qBAAqB,GAG9B;IACF,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE;QAC5B,SAAS,EAAE,CAAC,aAAa,CAAC,eAAe,EAAE,aAAa,CAAC,iBAAiB,CAAC;KAC5E;IACD,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE;QAC1B,SAAS,EAAE,EAAE;KACd;CACF,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,CAAC,eAAe,CAAC,qCAAqC,CAAC,CAAC,EAAE;QACxD,KAAK,EAAE,uCAAuC;QAC9C,IAAI,EAAE,aAAa,CAAC,YAAY;KACjC;CAC0E,CAAA;AAE7E,MAAM,CAAC,MAAM,gCAAgC,GAGzC,MAAM,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;IACvE,IAAI,qBAAqB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;QAC1D,GAAG,CAAC,GAAsB,CAAC,GAAG,KAAK,CAAA;KACpC;IACD,OAAO,GAAG,CAAA;AACZ,CAAC,EAAE,EAAmE,CAAC,CAAA;AAEvE,MAAM,CAAC,MAAM,qCAAqC,GAAG,MAAM,CAAC,IAAI,CAC9D,gCAAgC,CACZ,CAAA"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export declare enum ExtensionType {
|
|
2
2
|
VIDEO_COLLECTION = "video-collection",
|
|
3
3
|
IMAGE_COLLECTION = "image-collection",
|
|
4
|
-
BUNDLE_SELECTOR = "bundle-selector"
|
|
4
|
+
BUNDLE_SELECTOR = "bundle-selector",
|
|
5
|
+
BUNDLE_COLLECTION = "bundle-collection"
|
|
5
6
|
}
|
|
6
7
|
export declare enum ExtensionTarget {
|
|
7
8
|
/**
|
|
@@ -3,6 +3,7 @@ export var ExtensionType;
|
|
|
3
3
|
ExtensionType["VIDEO_COLLECTION"] = "video-collection";
|
|
4
4
|
ExtensionType["IMAGE_COLLECTION"] = "image-collection";
|
|
5
5
|
ExtensionType["BUNDLE_SELECTOR"] = "bundle-selector";
|
|
6
|
+
ExtensionType["BUNDLE_COLLECTION"] = "bundle-collection";
|
|
6
7
|
})(ExtensionType || (ExtensionType = {}));
|
|
7
8
|
// copy and paste from minis sdk
|
|
8
9
|
// TODO: import from a single source of truth
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"extensions.js","sourceRoot":"","sources":["../../src/constants/extensions.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,
|
|
1
|
+
{"version":3,"file":"extensions.js","sourceRoot":"","sources":["../../src/constants/extensions.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,sDAAqC,CAAA;IACrC,sDAAqC,CAAA;IACrC,oDAAmC,CAAA;IACnC,wDAAuC,CAAA;AACzC,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB;AAED,gCAAgC;AAChC,6CAA6C;AAC7C,MAAM,CAAN,IAAY,eAcX;AAdD,WAAY,eAAe;IACzB;;OAEG;IACH,gDAA+B,CAAA;IAE/B,8FAA6E,CAAA;IAE7E,4FAA2E,CAAA;IAE3E;;OAEG;IACH,4CAA2B,CAAA;AAC7B,CAAC,EAdW,eAAe,KAAf,eAAe,QAc1B;AAED,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CACzD,eAAe,CAChB,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,GAAG,KAAK,cAAc,CAAC,CAAA;AAE1E,MAAM,CAAC,MAAM,4BAA4B,GAAG,MAAM,CAAC,MAAM,CACvD,eAAe,CAChB,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,GAAG,KAAK,YAAY,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import {BundleCollection} from '@shopify/shop-minis-ui-extensions'
|
|
2
|
+
import {useExtensionShopActions} from '@shopify/shop-minis-platform-sdk/actions'
|
|
3
|
+
|
|
4
|
+
import type {__QUERY_NAME__QueryData} from './input.graphql'
|
|
5
|
+
import seedData from './seed'
|
|
6
|
+
|
|
7
|
+
export function Render({
|
|
8
|
+
extensionData,
|
|
9
|
+
}: {
|
|
10
|
+
extensionData: __QUERY_NAME__QueryData | null
|
|
11
|
+
}) {
|
|
12
|
+
const {openMiniViewer} = useExtensionShopActions()
|
|
13
|
+
|
|
14
|
+
// Here we are using seed data to populate the initial state of the bundle selector.
|
|
15
|
+
// You can replace this with the actual data from `extensionData`
|
|
16
|
+
__EXAMPLE_QUERY_DATA_USE__
|
|
17
|
+
const {bundles: initialBundles, title} = seedData
|
|
18
|
+
|
|
19
|
+
const bundles = initialBundles.map(initialBundle => {
|
|
20
|
+
return {
|
|
21
|
+
...initialBundle,
|
|
22
|
+
onActionButtonPress: () => {
|
|
23
|
+
openMiniViewer(initialBundle)
|
|
24
|
+
},
|
|
25
|
+
}
|
|
26
|
+
})
|
|
27
|
+
const [bundles, setBundles] = useState(initialBundles)
|
|
28
|
+
|
|
29
|
+
if (!bundles) return null
|
|
30
|
+
|
|
31
|
+
return <BundleCollection title={title} bundles={bundles} />
|
|
32
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
const DEMO_IMAGE_URL =
|
|
2
|
+
'https://cdn.shopify.com/s/files/1/1232/1472/products/StudioRender_-_Lovelace_Black_620x.jpg?v=1511325136'
|
|
3
|
+
const data = {
|
|
4
|
+
bundles: [
|
|
5
|
+
{
|
|
6
|
+
title: 'Mix and match bundle',
|
|
7
|
+
subtitle: 'Add a t-shirt and save 25%',
|
|
8
|
+
badgeText: 'Save 25%',
|
|
9
|
+
imageUrls: [
|
|
10
|
+
DEMO_IMAGE_URL,
|
|
11
|
+
DEMO_IMAGE_URL,
|
|
12
|
+
DEMO_IMAGE_URL,
|
|
13
|
+
DEMO_IMAGE_URL,
|
|
14
|
+
],
|
|
15
|
+
actionButtonText: 'Add to bundle',
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
title: 'Frequently bought together',
|
|
19
|
+
imageUrls: [DEMO_IMAGE_URL, DEMO_IMAGE_URL],
|
|
20
|
+
actionButtonText: 'Add to bundle',
|
|
21
|
+
},
|
|
22
|
+
],
|
|
23
|
+
title: 'Mix and Match',
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export default data
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import {useEffect, useState} from 'react'
|
|
2
|
+
import {
|
|
3
|
+
BundleSelector,
|
|
4
|
+
BundleSelectorItem,
|
|
5
|
+
} from '@shopify/shop-minis-ui-extensions'
|
|
3
6
|
import {useExtensionShopActions} from '@shopify/shop-minis-platform-sdk/actions'
|
|
4
7
|
|
|
5
8
|
import type {__QUERY_NAME__QueryData} from './input.graphql'
|
|
6
9
|
import seedData from './seed'
|
|
7
10
|
|
|
8
|
-
type BundleSelectorItems = ComponentProps<typeof BundleSelector>['items']
|
|
9
|
-
|
|
10
11
|
export function Render({
|
|
11
12
|
extensionData,
|
|
12
13
|
}: {
|
|
@@ -15,7 +16,7 @@ export function Render({
|
|
|
15
16
|
// Here we are using seed data to populate the initial state of the bundle selector.
|
|
16
17
|
// You can replace this with the actual data from `extensionData`
|
|
17
18
|
__EXAMPLE_QUERY_DATA_USE__
|
|
18
|
-
const initialBundleSelectorItems:
|
|
19
|
+
const initialBundleSelectorItems: BundleSelectorItem[] = seedData
|
|
19
20
|
const [bundleSelectorItems, setBundleSelectorItems] = useState(
|
|
20
21
|
initialBundleSelectorItems
|
|
21
22
|
)
|
|
@@ -26,7 +27,7 @@ export function Render({
|
|
|
26
27
|
if (!bundleSelectorItems) return
|
|
27
28
|
|
|
28
29
|
const lineItemAttributes = bundleSelectorItems.map(
|
|
29
|
-
item => item.options.find(option => option.selected)?.
|
|
30
|
+
item => item.options.find(option => option.selected)?.value
|
|
30
31
|
)
|
|
31
32
|
|
|
32
33
|
updateLineItemAttributes({
|
|
@@ -1,36 +1,39 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {BundleSelector} from '@shopify/shop-minis-ui-extensions'
|
|
1
|
+
import {BundleSelectorItem} from '@shopify/shop-minis-ui-extensions'
|
|
3
2
|
|
|
4
|
-
const seedData:
|
|
3
|
+
const seedData: BundleSelectorItem[] = [
|
|
5
4
|
{
|
|
6
5
|
title: 'Main Snowboard',
|
|
7
6
|
options: [
|
|
8
7
|
{
|
|
9
|
-
|
|
10
|
-
value: '
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
title: 'Mr. Huebert Hydroxy Snowboard',
|
|
9
|
+
value: 'gid://shopify/ProductVariant/44887116906751',
|
|
10
|
+
imageUrl:
|
|
11
|
+
'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a.jpg?v=1671634025',
|
|
12
|
+
availability: 'Available',
|
|
13
13
|
selected: false,
|
|
14
14
|
},
|
|
15
15
|
{
|
|
16
|
-
|
|
17
|
-
value: '
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
title: 'The H2 Snowboard',
|
|
17
|
+
value: 'gid://shopify/ProductVariant/43698709922047',
|
|
18
|
+
imageUrl:
|
|
19
|
+
'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_0a40b01b-5021-48c1-80d1-aa8ab4876d3d.jpg?v=1671634609',
|
|
20
|
+
availability: 'Available',
|
|
21
|
+
selected: false,
|
|
21
22
|
},
|
|
22
23
|
{
|
|
23
|
-
|
|
24
|
-
value: '
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
title: 'The Hosted Snowboard',
|
|
25
|
+
value: 'gid://shopify/ProductVariant/43698640978175',
|
|
26
|
+
imageUrl:
|
|
27
|
+
'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_b9e0da7f-db89-4d41-83f0-7f417b02831d.jpg?v=1671632927',
|
|
28
|
+
availability: 'Available',
|
|
29
|
+
selected: true,
|
|
28
30
|
},
|
|
29
31
|
{
|
|
30
|
-
|
|
31
|
-
value: '
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
title: 'The Hydrogen Snowboard',
|
|
33
|
+
value: 'gid://shopify/ProductVariant/43698681938175',
|
|
34
|
+
imageUrl:
|
|
35
|
+
'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main.jpg?v=1671633869',
|
|
36
|
+
availability: 'Available',
|
|
34
37
|
selected: false,
|
|
35
38
|
},
|
|
36
39
|
],
|
|
@@ -39,24 +42,27 @@ const seedData: ComponentProps<typeof BundleSelector>['items'] = [
|
|
|
39
42
|
title: 'Second snowboard',
|
|
40
43
|
options: [
|
|
41
44
|
{
|
|
42
|
-
|
|
43
|
-
value: '
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
title: 'The Oxygen Snowboard',
|
|
46
|
+
value: 'gid://shopify/ProductVariant/43698704318719',
|
|
47
|
+
imageUrl:
|
|
48
|
+
'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_d624f226-0a89-4fe1-b333-0d1548b43c06.jpg?v=1671634432',
|
|
49
|
+
availability: 'Available',
|
|
50
|
+
selected: false,
|
|
47
51
|
},
|
|
48
52
|
{
|
|
49
|
-
|
|
50
|
-
value: '
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
53
|
+
title: 'The S-Series Snowboard',
|
|
54
|
+
value: 'gid://shopify/ProductVariant/43698713526527',
|
|
55
|
+
imageUrl:
|
|
56
|
+
'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_589fc064-24a2-4236-9eaf-13b2bd35d21d.jpg?v=1671634723',
|
|
57
|
+
availability: 'Available',
|
|
58
|
+
selected: true,
|
|
54
59
|
},
|
|
55
60
|
{
|
|
56
|
-
|
|
57
|
-
value: '
|
|
58
|
-
|
|
59
|
-
|
|
61
|
+
title: 'The Toggle Snowboard',
|
|
62
|
+
value: 'gid://shopify/ProductVariant/43698707857663',
|
|
63
|
+
imageUrl:
|
|
64
|
+
'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_f44a9605-cd62-464d-b095-d45cdaa0d0d7.jpg?v=1671634521',
|
|
65
|
+
availability: 'Available',
|
|
60
66
|
selected: false,
|
|
61
67
|
},
|
|
62
68
|
],
|