@okendo/shopify-hydrogen 2.1.5 → 2.1.6
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 +268 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,7 +9,6 @@ This package brings [Okendo's review widgets](https://www.okendo.io/blog/widget-
|
|
|
9
9
|
- A Shopify store with the [**Okendo: Product Reviews & UCG**](https://apps.shopify.com/okendo-reviews) app installed and configured.
|
|
10
10
|
- For existing merchants, your store must be upgraded to Okendo's Widget Plus widgets. It is free to upgrade. For more information please [contact Okendo Support](mailto:support@okendo.io).
|
|
11
11
|
- A current Okendo subscription.
|
|
12
|
-
- A [Storefront access token](https://github.com/okendo/okendo-shopify-hydrogen-demo/wiki/Configure-Shopify-Storefront-API).
|
|
13
12
|
- A [Shopify Hydrogen](https://hydrogen.shopify.dev/) app.
|
|
14
13
|
|
|
15
14
|
## Demo Store
|
|
@@ -36,20 +35,269 @@ Okendo Reviews use Product and Shop [metafields](https://shopify.dev/api/example
|
|
|
36
35
|
At the moment, Shopify does not have a way of exposing Shop Metafields through their admin UI, so the preferred method is to [contact Okendo Support](mailto:support@okendo.io).
|
|
37
36
|
|
|
38
37
|
<details>
|
|
39
|
-
|
|
38
|
+
|
|
39
|
+
<summary>If you're a technical user however, you can click here and follow the method to expose the metafields via the storefront API.</summary>
|
|
40
40
|
|
|
41
41
|
### Exposing Metafields via GraphQL
|
|
42
42
|
|
|
43
|
+
You will need a **Storefront access token** with the following API access scopes:
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
unauthenticated_read_content
|
|
47
|
+
unauthenticated_read_customers
|
|
48
|
+
unauthenticated_read_product_listings
|
|
49
|
+
unauthenticated_read_product_inventory
|
|
50
|
+
unauthenticated_read_product_pickup_locations
|
|
51
|
+
unauthenticated_read_product_tags
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Follow the instructions on [this page](https://help.shopify.com/en/manual/apps/app-types/custom-apps#create-and-install-a-custom-app) to create it.
|
|
55
|
+
|
|
56
|
+
#### Note
|
|
57
|
+
|
|
58
|
+
Shopify is in the process of deprecating `metafieldStorefrontVisibilityCreate` in favour of `metafieldDefinitionCreate`. The following method uses `metafieldDefinitionCreate`. If you're having trouble with it, you will find below the deprecated method using `metafieldStorefrontVisibilityCreate`.
|
|
59
|
+
|
|
43
60
|
#### Using Curl
|
|
44
61
|
|
|
45
|
-
|
|
62
|
+
Open a new terminal or PowerShell window, then:
|
|
63
|
+
|
|
64
|
+
1. Run the following command to expose the `WidgetPreRenderStyleTags` shop metafield:
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
curl -X POST \
|
|
68
|
+
https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
|
|
69
|
+
-H 'Content-Type: application/graphql' \
|
|
70
|
+
-H 'X-Shopify-Access-Token: {access_token}' \
|
|
71
|
+
-d '
|
|
72
|
+
mutation {
|
|
73
|
+
metafieldDefinitionCreate(
|
|
74
|
+
definition: {
|
|
75
|
+
name: "WidgetPreRenderStyleTags"
|
|
76
|
+
namespace: "okendo"
|
|
77
|
+
key: "WidgetPreRenderStyleTags"
|
|
78
|
+
type: "multi_line_text_field"
|
|
79
|
+
ownerType: SHOP
|
|
80
|
+
visibleToStorefrontApi: true
|
|
81
|
+
}
|
|
82
|
+
) {
|
|
83
|
+
createdDefinition { id name }
|
|
84
|
+
userErrors { field message code }
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
'
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
2. Run the following command to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
curl -X POST \
|
|
94
|
+
https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
|
|
95
|
+
-H 'Content-Type: application/graphql' \
|
|
96
|
+
-H 'X-Shopify-Access-Token: {access_token}' \
|
|
97
|
+
-d '
|
|
98
|
+
mutation {
|
|
99
|
+
metafieldDefinitionCreate(
|
|
100
|
+
definition: {
|
|
101
|
+
name: "WidgetPreRenderBodyStyleTags"
|
|
102
|
+
namespace: "okendo"
|
|
103
|
+
key: "WidgetPreRenderBodyStyleTags"
|
|
104
|
+
type: "multi_line_text_field"
|
|
105
|
+
ownerType: SHOP
|
|
106
|
+
visibleToStorefrontApi: true
|
|
107
|
+
}
|
|
108
|
+
) {
|
|
109
|
+
createdDefinition { id name }
|
|
110
|
+
userErrors { field message code }
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
'
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
3. Run the following command to expose the `ReviewsWidgetSnippet` product metafield:
|
|
46
117
|
|
|
47
|
-
|
|
48
|
-
|
|
118
|
+
```bash
|
|
119
|
+
curl -X POST \
|
|
120
|
+
https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
|
|
121
|
+
-H 'Content-Type: application/graphql' \
|
|
122
|
+
-H 'X-Shopify-Access-Token: {access_token}' \
|
|
123
|
+
-d '
|
|
124
|
+
mutation {
|
|
125
|
+
metafieldDefinitionCreate(
|
|
126
|
+
definition: {
|
|
127
|
+
name: "ReviewsWidgetSnippet"
|
|
128
|
+
namespace: "okendo"
|
|
129
|
+
key: "ReviewsWidgetSnippet"
|
|
130
|
+
type: "multi_line_text_field"
|
|
131
|
+
ownerType: PRODUCT
|
|
132
|
+
visibleToStorefrontApi: true
|
|
133
|
+
}
|
|
134
|
+
) {
|
|
135
|
+
createdDefinition { id name }
|
|
136
|
+
userErrors { field message code }
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
'
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
4. Run the following command to expose the `StarRatingSnippet` the product metafield:
|
|
49
143
|
|
|
50
144
|
```bash
|
|
51
145
|
curl -X POST \
|
|
52
|
-
https://{shop}.myshopify.com/admin/api/
|
|
146
|
+
https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
|
|
147
|
+
-H 'Content-Type: application/graphql' \
|
|
148
|
+
-H 'X-Shopify-Access-Token: {access_token}' \
|
|
149
|
+
-d '
|
|
150
|
+
mutation {
|
|
151
|
+
metafieldDefinitionCreate(
|
|
152
|
+
definition: {
|
|
153
|
+
name: "StarRatingSnippet"
|
|
154
|
+
namespace: "okendo"
|
|
155
|
+
key: "StarRatingSnippet"
|
|
156
|
+
type: "multi_line_text_field"
|
|
157
|
+
ownerType: PRODUCT
|
|
158
|
+
visibleToStorefrontApi: true
|
|
159
|
+
}
|
|
160
|
+
) {
|
|
161
|
+
createdDefinition { id name }
|
|
162
|
+
userErrors { field message code }
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
'
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
### Using GraphQL IDE
|
|
169
|
+
|
|
170
|
+
Open your GraphQL IDE (such as Postman) and make `POST` requests with the following details:
|
|
171
|
+
|
|
172
|
+
- **URL:** https://{shop}.myshopify.com/admin/api/2023-07/graphql.json
|
|
173
|
+
- **Headers:** - X-Shopify-Access-Token: {access_token} - Content-Type: application/json
|
|
174
|
+
|
|
175
|
+
1. Execute the following request to expose the `WidgetPreRenderStyleTags` shop metafield:
|
|
176
|
+
|
|
177
|
+
```graphql
|
|
178
|
+
mutation {
|
|
179
|
+
metafieldDefinitionCreate(
|
|
180
|
+
definition: {
|
|
181
|
+
name: "WidgetPreRenderStyleTags"
|
|
182
|
+
namespace: "okendo"
|
|
183
|
+
key: "WidgetPreRenderStyleTags"
|
|
184
|
+
type: "multi_line_text_field"
|
|
185
|
+
ownerType: SHOP
|
|
186
|
+
visibleToStorefrontApi: true
|
|
187
|
+
}
|
|
188
|
+
) {
|
|
189
|
+
createdDefinition {
|
|
190
|
+
id
|
|
191
|
+
name
|
|
192
|
+
}
|
|
193
|
+
userErrors {
|
|
194
|
+
field
|
|
195
|
+
message
|
|
196
|
+
code
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
2. Execute the following request to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
|
|
203
|
+
|
|
204
|
+
```graphql
|
|
205
|
+
mutation {
|
|
206
|
+
metafieldDefinitionCreate(
|
|
207
|
+
definition: {
|
|
208
|
+
name: "WidgetPreRenderBodyStyleTags"
|
|
209
|
+
namespace: "okendo"
|
|
210
|
+
key: "WidgetPreRenderBodyStyleTags"
|
|
211
|
+
type: "multi_line_text_field"
|
|
212
|
+
ownerType: SHOP
|
|
213
|
+
visibleToStorefrontApi: true
|
|
214
|
+
}
|
|
215
|
+
) {
|
|
216
|
+
createdDefinition {
|
|
217
|
+
id
|
|
218
|
+
name
|
|
219
|
+
}
|
|
220
|
+
userErrors {
|
|
221
|
+
field
|
|
222
|
+
message
|
|
223
|
+
code
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
3. Execute the following request to expose the `ReviewsWidgetSnippet` product metafield:
|
|
230
|
+
|
|
231
|
+
```graphql
|
|
232
|
+
mutation {
|
|
233
|
+
metafieldDefinitionCreate(
|
|
234
|
+
definition: {
|
|
235
|
+
name: "ReviewsWidgetSnippet"
|
|
236
|
+
namespace: "okendo"
|
|
237
|
+
key: "ReviewsWidgetSnippet"
|
|
238
|
+
type: "multi_line_text_field"
|
|
239
|
+
ownerType: PRODUCT
|
|
240
|
+
visibleToStorefrontApi: true
|
|
241
|
+
}
|
|
242
|
+
) {
|
|
243
|
+
createdDefinition {
|
|
244
|
+
id
|
|
245
|
+
name
|
|
246
|
+
}
|
|
247
|
+
userErrors {
|
|
248
|
+
field
|
|
249
|
+
message
|
|
250
|
+
code
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
4. Execute the following request to expose the `StarRatingSnippet` the product metafield:
|
|
257
|
+
|
|
258
|
+
```graphql
|
|
259
|
+
mutation {
|
|
260
|
+
metafieldDefinitionCreate(
|
|
261
|
+
definition: {
|
|
262
|
+
name: "StarRatingSnippet"
|
|
263
|
+
namespace: "okendo"
|
|
264
|
+
key: "StarRatingSnippet"
|
|
265
|
+
type: "multi_line_text_field"
|
|
266
|
+
ownerType: PRODUCT
|
|
267
|
+
visibleToStorefrontApi: true
|
|
268
|
+
}
|
|
269
|
+
) {
|
|
270
|
+
createdDefinition {
|
|
271
|
+
id
|
|
272
|
+
name
|
|
273
|
+
}
|
|
274
|
+
userErrors {
|
|
275
|
+
field
|
|
276
|
+
message
|
|
277
|
+
code
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
**References**
|
|
284
|
+
|
|
285
|
+
- [https://shopify.dev/api/examples/metafields#step-1-expose-metafields](https://shopify.dev/api/examples/metafields#step-1-expose-metafields)
|
|
286
|
+
- [https://shopify.dev/api/admin-graphql/2023-07/mutations/metafieldDefinitionCreate](https://shopify.dev/api/admin-graphql/2023-07/mutations/metafieldDefinitionCreate)
|
|
287
|
+
|
|
288
|
+
<details>
|
|
289
|
+
|
|
290
|
+
<summary>If you're having trouble with `metafieldDefinitionCreate`, click here to see the deprecated method, using `metafieldStorefrontVisibilityCreate`.</summary>
|
|
291
|
+
|
|
292
|
+
#### Using Curl
|
|
293
|
+
|
|
294
|
+
Open a new terminal or PowerShell window, then:
|
|
295
|
+
|
|
296
|
+
1. Run the following command to expose the `WidgetPreRenderStyleTags` shop metafield:
|
|
297
|
+
|
|
298
|
+
```bash
|
|
299
|
+
curl -X POST \
|
|
300
|
+
https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
|
|
53
301
|
-H 'Content-Type: application/graphql' \
|
|
54
302
|
-H 'X-Shopify-Access-Token: {access_token}' \
|
|
55
303
|
-d '
|
|
@@ -73,11 +321,11 @@ mutation {
|
|
|
73
321
|
'
|
|
74
322
|
```
|
|
75
323
|
|
|
76
|
-
|
|
324
|
+
2. Run the following command to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
|
|
77
325
|
|
|
78
326
|
```bash
|
|
79
327
|
curl -X POST \
|
|
80
|
-
https://{shop}.myshopify.com/admin/api/
|
|
328
|
+
https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
|
|
81
329
|
-H 'Content-Type: application/graphql' \
|
|
82
330
|
-H 'X-Shopify-Access-Token: {access_token}' \
|
|
83
331
|
-d '
|
|
@@ -101,11 +349,11 @@ mutation {
|
|
|
101
349
|
'
|
|
102
350
|
```
|
|
103
351
|
|
|
104
|
-
|
|
352
|
+
3. Run the following command to expose the `ReviewsWidgetSnippet` product metafield:
|
|
105
353
|
|
|
106
354
|
```bash
|
|
107
355
|
curl -X POST \
|
|
108
|
-
https://{shop}.myshopify.com/admin/api/
|
|
356
|
+
https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
|
|
109
357
|
-H 'Content-Type: application/graphql' \
|
|
110
358
|
-H 'X-Shopify-Access-Token: {access_token}' \
|
|
111
359
|
-d '
|
|
@@ -129,11 +377,11 @@ mutation {
|
|
|
129
377
|
'
|
|
130
378
|
```
|
|
131
379
|
|
|
132
|
-
|
|
380
|
+
4. Run the following command to expose the `StarRatingSnippet` the product metafield:
|
|
133
381
|
|
|
134
382
|
```bash
|
|
135
383
|
curl -X POST \
|
|
136
|
-
https://{shop}.myshopify.com/admin/api/
|
|
384
|
+
https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
|
|
137
385
|
-H 'Content-Type: application/graphql' \
|
|
138
386
|
-H 'X-Shopify-Access-Token: {access_token}' \
|
|
139
387
|
-d '
|
|
@@ -159,12 +407,12 @@ mutation {
|
|
|
159
407
|
|
|
160
408
|
### Using GraphQL IDE
|
|
161
409
|
|
|
162
|
-
|
|
410
|
+
Open your GraphQL IDE (such as Postman) and make `POST` requests with the following details:
|
|
163
411
|
|
|
164
|
-
- **URL:** https://{shop}.myshopify.com/admin/api/
|
|
412
|
+
- **URL:** https://{shop}.myshopify.com/admin/api/2023-07/graphql.json
|
|
165
413
|
- **Headers:** - X-Shopify-Access-Token: {access_token} - Content-Type: application/json
|
|
166
414
|
|
|
167
|
-
|
|
415
|
+
1. Execute the following request to expose the `WidgetPreRenderStyleTags` shop metafield:
|
|
168
416
|
|
|
169
417
|
```graphql
|
|
170
418
|
mutation {
|
|
@@ -186,7 +434,7 @@ mutation {
|
|
|
186
434
|
}
|
|
187
435
|
```
|
|
188
436
|
|
|
189
|
-
|
|
437
|
+
2. Execute the following request to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
|
|
190
438
|
|
|
191
439
|
```graphql
|
|
192
440
|
mutation {
|
|
@@ -208,7 +456,7 @@ mutation {
|
|
|
208
456
|
}
|
|
209
457
|
```
|
|
210
458
|
|
|
211
|
-
|
|
459
|
+
3. Execute the following request to expose the `ReviewsWidgetSnippet` product metafield:
|
|
212
460
|
|
|
213
461
|
```graphql
|
|
214
462
|
mutation {
|
|
@@ -230,7 +478,7 @@ mutation {
|
|
|
230
478
|
}
|
|
231
479
|
```
|
|
232
480
|
|
|
233
|
-
|
|
481
|
+
4. Execute the following request to expose the `StarRatingSnippet` the product metafield:
|
|
234
482
|
|
|
235
483
|
```graphql
|
|
236
484
|
mutation {
|
|
@@ -248,10 +496,8 @@ mutation {
|
|
|
248
496
|
}
|
|
249
497
|
```
|
|
250
498
|
|
|
251
|
-
|
|
499
|
+
</details>
|
|
252
500
|
|
|
253
|
-
- [https://shopify.dev/api/examples/metafields#step-1-expose-metafields](https://shopify.dev/api/examples/metafields#step-1-expose-metafields)
|
|
254
|
-
- [https://shopify.dev/api/admin-graphql/2022-04/mutations/metafieldstorefrontvisibilitycreate](https://shopify.dev/api/admin-graphql/2022-04/mutations/metafieldstorefrontvisibilitycreate)
|
|
255
501
|
</details>
|
|
256
502
|
|
|
257
503
|
## Installation
|
|
@@ -350,7 +596,7 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
|
|
|
350
596
|
"'self'",
|
|
351
597
|
"https://d3hw6dc1ow8pp2.cloudfront.net",
|
|
352
598
|
"https://d3g5hqndtiniji.cloudfront.net",
|
|
353
|
-
"https://cdn-static.okendo.io"
|
|
599
|
+
"https://cdn-static.okendo.io",
|
|
354
600
|
],
|
|
355
601
|
styleSrcElem: [
|
|
356
602
|
"'self'",
|