@okendo/shopify-hydrogen 2.1.1 → 2.1.2
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 +58 -16
- package/dist/cjs/types/components/OkendoReviews/OkendoReviews.d.ts +2 -2
- package/dist/cjs/types/components/OkendoStarRating/OkendoStarRating.d.ts +2 -2
- package/dist/cjs/types/fragments/fragments.d.ts +2 -2
- package/dist/esm/types/components/OkendoReviews/OkendoReviews.d.ts +2 -2
- package/dist/esm/types/components/OkendoStarRating/OkendoStarRating.d.ts +2 -2
- package/dist/esm/types/fragments/fragments.d.ts +2 -2
- package/dist/index.d.ts +6 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -256,7 +256,7 @@ mutation {
|
|
|
256
256
|
|
|
257
257
|
## Installation
|
|
258
258
|
|
|
259
|
-
> The code examples provided in this section are based on the
|
|
259
|
+
> The code examples provided in this section are based on the Shopify template store created by running `npm create @shopify/hydrogen@latest` (see [Shopify's documentation](https://shopify.dev/docs/custom-storefronts/hydrogen/getting-started)). You will find the following steps already done in [our demo store](https://github.com/okendo/okendo-shopify-hydrogen-demo).
|
|
260
260
|
|
|
261
261
|
Run:
|
|
262
262
|
|
|
@@ -275,16 +275,18 @@ import {
|
|
|
275
275
|
} from "@okendo/shopify-hydrogen";
|
|
276
276
|
```
|
|
277
277
|
|
|
278
|
-
Locate the `loader` function, append
|
|
278
|
+
Locate the `loader` function, append `okendoProviderData` to the returned data as shown below, and set `subscriberId` to your Okendo subscriber ID:
|
|
279
279
|
|
|
280
280
|
```ts
|
|
281
|
-
return defer(
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
})
|
|
281
|
+
return defer(
|
|
282
|
+
{
|
|
283
|
+
...
|
|
284
|
+
okendoProviderData: await getOkendoProviderData({
|
|
285
|
+
context,
|
|
286
|
+
subscriberId: "<your-okendo-subscriber-id>",
|
|
287
|
+
}),
|
|
288
|
+
}
|
|
289
|
+
);
|
|
288
290
|
```
|
|
289
291
|
|
|
290
292
|
Locate the `App` function, add the `meta` tag `oke:subscriber_id` to `head`, and place your Okendo subscriber ID in its content:
|
|
@@ -357,13 +359,27 @@ Add the following imports:
|
|
|
357
359
|
|
|
358
360
|
```ts
|
|
359
361
|
import {
|
|
360
|
-
OKENDO_PRODUCT_STAR_RATING_FRAGMENT,
|
|
361
362
|
OkendoStarRating,
|
|
362
|
-
WithOkendoStarRatingSnippet,
|
|
363
|
+
type WithOkendoStarRatingSnippet,
|
|
363
364
|
} from "@okendo/shopify-hydrogen";
|
|
364
365
|
```
|
|
365
366
|
|
|
366
|
-
|
|
367
|
+
Add the following block just before the `RECOMMENDED_PRODUCTS_QUERY` GraphQL query:
|
|
368
|
+
|
|
369
|
+
```ts
|
|
370
|
+
const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = `#graphql
|
|
371
|
+
fragment OkendoStarRatingSnippet on Product {
|
|
372
|
+
okendoStarRatingSnippet: metafield(
|
|
373
|
+
namespace: "okendo"
|
|
374
|
+
key: "StarRatingSnippet"
|
|
375
|
+
) {
|
|
376
|
+
value
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
` as const;
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
Then append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}` and `...OkendoStarRatingSnippet` to `RECOMMENDED_PRODUCTS_QUERY`:
|
|
367
383
|
|
|
368
384
|
```ts
|
|
369
385
|
const RECOMMENDED_PRODUCTS_QUERY = `#graphql
|
|
@@ -408,7 +424,7 @@ products: Promise<{
|
|
|
408
424
|
nodes: (RecommendedProductsQuery['products']['nodes'][0] &
|
|
409
425
|
WithOkendoStarRatingSnippet)[];
|
|
410
426
|
};
|
|
411
|
-
}
|
|
427
|
+
}>;
|
|
412
428
|
```
|
|
413
429
|
|
|
414
430
|
Add `OkendoStarRating` to `RecommendedProducts`:
|
|
@@ -452,12 +468,38 @@ import {
|
|
|
452
468
|
OKENDO_PRODUCT_STAR_RATING_FRAGMENT,
|
|
453
469
|
OkendoReviews,
|
|
454
470
|
OkendoStarRating,
|
|
455
|
-
WithOkendoReviewsSnippet,
|
|
456
|
-
WithOkendoStarRatingSnippet,
|
|
471
|
+
type WithOkendoReviewsSnippet,
|
|
472
|
+
type WithOkendoStarRatingSnippet,
|
|
457
473
|
} from "@okendo/shopify-hydrogen";
|
|
458
474
|
```
|
|
459
475
|
|
|
460
|
-
|
|
476
|
+
Add the following block just before the `RECOMMENDED_PRODUCTS_QUERY` GraphQL query:
|
|
477
|
+
|
|
478
|
+
```ts
|
|
479
|
+
const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = `#graphql
|
|
480
|
+
fragment OkendoStarRatingSnippet on Product {
|
|
481
|
+
okendoStarRatingSnippet: metafield(
|
|
482
|
+
namespace: "okendo"
|
|
483
|
+
key: "StarRatingSnippet"
|
|
484
|
+
) {
|
|
485
|
+
value
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
` as const;
|
|
489
|
+
|
|
490
|
+
const OKENDO_PRODUCT_REVIEWS_FRAGMENT = `#graphql
|
|
491
|
+
fragment OkendoReviewsSnippet on Product {
|
|
492
|
+
okendoReviewsSnippet: metafield(
|
|
493
|
+
namespace: "okendo"
|
|
494
|
+
key: "ReviewsWidgetSnippet"
|
|
495
|
+
) {
|
|
496
|
+
value
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
` as const;
|
|
500
|
+
```
|
|
501
|
+
|
|
502
|
+
Then append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}`, `${OKENDO_PRODUCT_REVIEWS_FRAGMENT}`, `...OkendoStarRatingSnippet`, and `...OkendoReviewsSnippet` to `PRODUCT_FRAGMENT`:
|
|
461
503
|
|
|
462
504
|
```ts
|
|
463
505
|
const PRODUCT_FRAGMENT = `#graphql
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { type FC } from "react";
|
|
2
2
|
import { type MetafieldValue } from "../../internal/types";
|
|
3
3
|
export interface WithOkendoReviewsSnippet {
|
|
4
|
-
okendoReviewsSnippet
|
|
4
|
+
okendoReviewsSnippet?: MetafieldValue | null;
|
|
5
5
|
}
|
|
6
6
|
interface OkendoReviewsProps {
|
|
7
7
|
productId: string;
|
|
8
|
-
okendoReviewsSnippet?: MetafieldValue;
|
|
8
|
+
okendoReviewsSnippet?: MetafieldValue | null;
|
|
9
9
|
}
|
|
10
10
|
export declare const OkendoReviews: FC<OkendoReviewsProps>;
|
|
11
11
|
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { type FC } from "react";
|
|
2
2
|
import { type MetafieldValue } from "../../internal/types";
|
|
3
3
|
export interface WithOkendoStarRatingSnippet {
|
|
4
|
-
okendoStarRatingSnippet
|
|
4
|
+
okendoStarRatingSnippet?: MetafieldValue | null;
|
|
5
5
|
}
|
|
6
6
|
interface OkendoStarRatingProps {
|
|
7
7
|
productId: string;
|
|
8
|
-
okendoStarRatingSnippet?: MetafieldValue;
|
|
8
|
+
okendoStarRatingSnippet?: MetafieldValue | null;
|
|
9
9
|
}
|
|
10
10
|
export declare const OkendoStarRating: FC<OkendoStarRatingProps>;
|
|
11
11
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT
|
|
2
|
-
export declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT
|
|
1
|
+
export declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT: "#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: \"okendo\"\n\t\t\tkey: \"StarRatingSnippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
|
|
2
|
+
export declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT: "#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: \"okendo\"\n\t\t\tkey: \"ReviewsWidgetSnippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { type FC } from "react";
|
|
2
2
|
import { type MetafieldValue } from "../../internal/types";
|
|
3
3
|
export interface WithOkendoReviewsSnippet {
|
|
4
|
-
okendoReviewsSnippet
|
|
4
|
+
okendoReviewsSnippet?: MetafieldValue | null;
|
|
5
5
|
}
|
|
6
6
|
interface OkendoReviewsProps {
|
|
7
7
|
productId: string;
|
|
8
|
-
okendoReviewsSnippet?: MetafieldValue;
|
|
8
|
+
okendoReviewsSnippet?: MetafieldValue | null;
|
|
9
9
|
}
|
|
10
10
|
export declare const OkendoReviews: FC<OkendoReviewsProps>;
|
|
11
11
|
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { type FC } from "react";
|
|
2
2
|
import { type MetafieldValue } from "../../internal/types";
|
|
3
3
|
export interface WithOkendoStarRatingSnippet {
|
|
4
|
-
okendoStarRatingSnippet
|
|
4
|
+
okendoStarRatingSnippet?: MetafieldValue | null;
|
|
5
5
|
}
|
|
6
6
|
interface OkendoStarRatingProps {
|
|
7
7
|
productId: string;
|
|
8
|
-
okendoStarRatingSnippet?: MetafieldValue;
|
|
8
|
+
okendoStarRatingSnippet?: MetafieldValue | null;
|
|
9
9
|
}
|
|
10
10
|
export declare const OkendoStarRating: FC<OkendoStarRatingProps>;
|
|
11
11
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT
|
|
2
|
-
export declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT
|
|
1
|
+
export declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT: "#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: \"okendo\"\n\t\t\tkey: \"StarRatingSnippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
|
|
2
|
+
export declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT: "#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: \"okendo\"\n\t\t\tkey: \"ReviewsWidgetSnippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
|
package/dist/index.d.ts
CHANGED
|
@@ -48,24 +48,24 @@ interface MetafieldValue {
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
interface WithOkendoReviewsSnippet {
|
|
51
|
-
okendoReviewsSnippet
|
|
51
|
+
okendoReviewsSnippet?: MetafieldValue | null;
|
|
52
52
|
}
|
|
53
53
|
interface OkendoReviewsProps {
|
|
54
54
|
productId: string;
|
|
55
|
-
okendoReviewsSnippet?: MetafieldValue;
|
|
55
|
+
okendoReviewsSnippet?: MetafieldValue | null;
|
|
56
56
|
}
|
|
57
57
|
declare const OkendoReviews: FC<OkendoReviewsProps>;
|
|
58
58
|
|
|
59
59
|
interface WithOkendoStarRatingSnippet {
|
|
60
|
-
okendoStarRatingSnippet
|
|
60
|
+
okendoStarRatingSnippet?: MetafieldValue | null;
|
|
61
61
|
}
|
|
62
62
|
interface OkendoStarRatingProps {
|
|
63
63
|
productId: string;
|
|
64
|
-
okendoStarRatingSnippet?: MetafieldValue;
|
|
64
|
+
okendoStarRatingSnippet?: MetafieldValue | null;
|
|
65
65
|
}
|
|
66
66
|
declare const OkendoStarRating: FC<OkendoStarRatingProps>;
|
|
67
67
|
|
|
68
|
-
declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT
|
|
69
|
-
declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT
|
|
68
|
+
declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT: "#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: \"okendo\"\n\t\t\tkey: \"StarRatingSnippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
|
|
69
|
+
declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT: "#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: \"okendo\"\n\t\t\tkey: \"ReviewsWidgetSnippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
|
|
70
70
|
|
|
71
71
|
export { OKENDO_PRODUCT_REVIEWS_FRAGMENT, OKENDO_PRODUCT_STAR_RATING_FRAGMENT, OkendoProvider, OkendoReviews, OkendoStarRating, type WithOkendoReviewsSnippet, type WithOkendoStarRatingSnippet, getOkendoProviderData };
|