@okendo/shopify-hydrogen 0.0.5 → 0.0.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 +15 -25
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -13,16 +13,16 @@ Currently we support server side components for 2 widgets:
|
|
|
13
13
|
|
|
14
14
|
1. [What is Okendo Shopify Hydrogen](#introduction)
|
|
15
15
|
2. [Guided Installation](#installation)
|
|
16
|
-
1. [Configure Hydrogen App](#
|
|
17
|
-
2. [Expose Shopify Metafields](#
|
|
18
|
-
3. [How to Use Okendo Hydrogen Components In Your Hydrogen Apps](#
|
|
19
|
-
4. [Component Props](#
|
|
20
|
-
5. [NPM Component Terminology/Defintions](#
|
|
21
|
-
6. [View Our Okendo Sample Hydrogen App](#
|
|
16
|
+
1. [Configure Hydrogen App](#1-configure-hydrogen-app-config)
|
|
17
|
+
2. [Expose Shopify Metafields](#2-expose-shopify-metafields)
|
|
18
|
+
3. [How to Use Okendo Hydrogen Components In Your Hydrogen Apps](#3-how-to-use-okendo-hydrogen-components-in-your-hydrogen-app)
|
|
19
|
+
4. [Component Props](#component-props)
|
|
20
|
+
5. [NPM Component Terminology/Defintions](#npm-component-definitions)
|
|
21
|
+
6. [View Our Okendo Sample Hydrogen App](#view-our-okendo-sample-hydrogen-app)
|
|
22
22
|
|
|
23
23
|
<br/><br/>
|
|
24
24
|
|
|
25
|
-
# What is Okendo Shopify Hydrogen
|
|
25
|
+
# What is Okendo Shopify Hydrogen? <a id="introduction" name="introduction"></a>
|
|
26
26
|
|
|
27
27
|
Okendo Shopify Hydrogen is a React component library to be used in Shopify Hydrogen apps. This utilises [Shopify’s Hydrogen framework](https://shopify.dev/custom-storefronts/hydrogen/framework) which is used to create custom storefronts using both server-side rendered and client-side rendered React components.
|
|
28
28
|
|
|
@@ -30,7 +30,7 @@ The purpose of this library is for a Hydrogen-based React Shopify storefront to
|
|
|
30
30
|
|
|
31
31
|
<br/>
|
|
32
32
|
|
|
33
|
-
# Guided Installation <a name="installation"></a>
|
|
33
|
+
# Guided Installation <a id="installation" name="installation"></a>
|
|
34
34
|
|
|
35
35
|
The purpose of this documentation is to guide you on the following:
|
|
36
36
|
|
|
@@ -48,9 +48,7 @@ The purpose of this documentation is to guide you on the following:
|
|
|
48
48
|
|
|
49
49
|
<br/>
|
|
50
50
|
|
|
51
|
-
<a name="
|
|
52
|
-
|
|
53
|
-
## 1. Configure Hydrogen app config
|
|
51
|
+
## 1. Configure Hydrogen app config <a id="1-configure-hydrogen-app-config" name="1-configure-hydrogen-app-config"></a>
|
|
54
52
|
|
|
55
53
|
1. Open **hydrogen.config.js** in your project.
|
|
56
54
|
2. Make the following changes and save the file:
|
|
@@ -59,9 +57,7 @@ The purpose of this documentation is to guide you on the following:
|
|
|
59
57
|
|
|
60
58
|
<br/>
|
|
61
59
|
|
|
62
|
-
<a name="
|
|
63
|
-
|
|
64
|
-
## 2. Expose Shopify Metafields
|
|
60
|
+
## 2. Expose Shopify Metafields <a id="2-expose-shopify-metafields" name="2-expose-shopify-metafields"></a>
|
|
65
61
|
|
|
66
62
|
Okendo Reviews utilise Product and Shop specific [metafields](https://shopify.dev/api/examples/metafields) in order to function and provide a seamless user experience. You will need to expose these metafields so that they can be retrieved by your Hydrogen app.
|
|
67
63
|
|
|
@@ -75,7 +71,7 @@ The preferred method to expose Metafields is to [contact Okendo Support](mailto:
|
|
|
75
71
|
|
|
76
72
|
<details>
|
|
77
73
|
<summary>Learn How to Expose Metafields Via The Storefront API</summary>
|
|
78
|
-
|
|
74
|
+
|
|
79
75
|
# Exposing Metafields via GraphQL
|
|
80
76
|
|
|
81
77
|
## Using Curl
|
|
@@ -296,9 +292,7 @@ mutation {
|
|
|
296
292
|
|
|
297
293
|
<br/><br/>
|
|
298
294
|
|
|
299
|
-
<a name="
|
|
300
|
-
|
|
301
|
-
## 3. How to Use Okendo Hydrogen Components In Your Hydrogen App
|
|
295
|
+
## 3. How to Use Okendo Hydrogen Components In Your Hydrogen App <a id="3-how-to-use-okendo-hydrogen-components-in-your-hydrogen-app" name="3-how-to-use-okendo-hydrogen-components-in-your-hydrogen-app"></a>
|
|
302
296
|
|
|
303
297
|
### Installation
|
|
304
298
|
|
|
@@ -373,9 +367,7 @@ const okendoStarRating = <OkendoStarRating productId={product.id} />;
|
|
|
373
367
|
|
|
374
368
|
---
|
|
375
369
|
|
|
376
|
-
<a name="
|
|
377
|
-
|
|
378
|
-
## Component Props
|
|
370
|
+
## Component Props <a id="component-props" name="component-props"></a>
|
|
379
371
|
|
|
380
372
|
<br/>
|
|
381
373
|
|
|
@@ -412,7 +404,7 @@ const okendoStarRating = <OkendoStarRating productId={product.id} />;
|
|
|
412
404
|
|
|
413
405
|
<a name="npmdefinitions"></a>
|
|
414
406
|
|
|
415
|
-
## NPM Component Definitions
|
|
407
|
+
## NPM Component Definitions <a id="npm-component-definitions" name="npm-component-definitions"></a>
|
|
416
408
|
|
|
417
409
|
### OkendoProvider.server
|
|
418
410
|
|
|
@@ -446,9 +438,7 @@ This is the server-side rendered Reviews List widget - It then invokes the clien
|
|
|
446
438
|
|
|
447
439
|
<br/>
|
|
448
440
|
|
|
449
|
-
<a name="
|
|
450
|
-
|
|
451
|
-
## View Our Okendo Sample Hydrogen App
|
|
441
|
+
## View Our Okendo Sample Hydrogen App <a id="view-our-okendo-sample-hydrogen-app" name="view-our-okendo-sample-hydrogen-app"></a>
|
|
452
442
|
|
|
453
443
|
We have created a Shopify Hydrogen sample application with our widgets pre-installed.
|
|
454
444
|
|