@okendo/shopify-hydrogen 1.2.0 → 1.2.1
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/LICENSE.txt +2 -2
- package/README.md +628 -628
- package/dist/esnext/client-components/OkendoClientStarRating.client.js +2 -3
- package/dist/esnext/client-components/OkendoWidget.client.js +7 -4
- package/dist/esnext/components/OkendoProvider.server.js +11 -12
- package/dist/esnext/components/OkendoReviewsWidget.server.js +16 -17
- package/dist/esnext/components/OkendoStarRating.server.js +9 -10
- package/dist/esnext/fragments/index.js +9 -9
- package/dist/esnext/framework/plugins/plugin.js +0 -2
- package/dist/node/framework/plugins/plugin.js +0 -2
- package/package.json +58 -61
- package/plugin.cjs +1 -1
- package/dist/esnext/framework/plugins/extendViteOptimizeDeps.d.ts +0 -2
- package/dist/esnext/framework/plugins/extendViteOptimizeDeps.js +0 -10
- package/dist/node/framework/plugins/extendViteOptimizeDeps.d.ts +0 -2
- package/dist/node/framework/plugins/extendViteOptimizeDeps.js +0 -14
|
@@ -14,11 +14,10 @@ export const OkendoClientStarRating = (props) => {
|
|
|
14
14
|
}
|
|
15
15
|
const dataAttributes = {
|
|
16
16
|
'data-oke-star-rating': '',
|
|
17
|
-
'data-oke-reviews-product-id': okendoProductId
|
|
18
|
-
'data-oke-scroll-disabled': 'true'
|
|
17
|
+
'data-oke-reviews-product-id': okendoProductId
|
|
19
18
|
};
|
|
20
19
|
if (okendoStarRatingSnippet?.value) {
|
|
21
|
-
dataAttributes['data-oke-rendered'] =
|
|
20
|
+
dataAttributes['data-oke-rendered'] = '';
|
|
22
21
|
}
|
|
23
22
|
return (React.createElement(OkendoWidgetClient, { dataAttributes: dataAttributes, metafieldContent: okendoStarRatingSnippet?.value }));
|
|
24
23
|
};
|
|
@@ -2,18 +2,21 @@ import React, { useEffect, useRef } from 'react';
|
|
|
2
2
|
export const OkendoWidgetClient = (props) => {
|
|
3
3
|
const { dataAttributes, metafieldContent = '' } = props;
|
|
4
4
|
const widgetContainer = useRef(null);
|
|
5
|
-
const
|
|
5
|
+
const initializeReviewsWidget = () => {
|
|
6
6
|
if (widgetContainer.current) {
|
|
7
7
|
window.okeWidgetApi.initWidget(widgetContainer.current);
|
|
8
8
|
}
|
|
9
9
|
};
|
|
10
10
|
useEffect(() => {
|
|
11
|
-
if (window.okeWidgetApi) {
|
|
12
|
-
|
|
11
|
+
if (window.okeWidgetApi && widgetContainer.current) {
|
|
12
|
+
initializeReviewsWidget();
|
|
13
13
|
}
|
|
14
14
|
else {
|
|
15
|
-
|
|
15
|
+
document.addEventListener('oke-script-loaded', initializeReviewsWidget);
|
|
16
16
|
}
|
|
17
|
+
return () => {
|
|
18
|
+
document.removeEventListener('oke-script-loaded', initializeReviewsWidget);
|
|
19
|
+
};
|
|
17
20
|
}, []);
|
|
18
21
|
return (React.createElement("div", { ref: widgetContainer, ...dataAttributes, dangerouslySetInnerHTML: { __html: metafieldContent } }));
|
|
19
22
|
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import parse from 'html-react-parser';
|
|
3
2
|
import { fetchSync, useShopQuery, gql, CacheShort } from '@shopify/hydrogen';
|
|
4
3
|
import { Head } from '@shopify/hydrogen';
|
|
5
4
|
import { okendoError } from '../shared/errorUtils';
|
|
@@ -37,20 +36,20 @@ export const OkendoProvider = (props) => {
|
|
|
37
36
|
? `/products/${product.productHandle}/${product.variantId ? '?variantId=' + product.variantId : ''}`
|
|
38
37
|
: undefined;
|
|
39
38
|
// Get pre-rendered style settings.
|
|
40
|
-
const query = gql `
|
|
41
|
-
query metafields {
|
|
42
|
-
shop {
|
|
43
|
-
widgetPreRenderStyleTags: metafield(namespace: "okendo", key: "WidgetPreRenderStyleTags") {
|
|
44
|
-
value
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
39
|
+
const query = gql `
|
|
40
|
+
query metafields {
|
|
41
|
+
shop {
|
|
42
|
+
widgetPreRenderStyleTags: metafield(namespace: "okendo", key: "WidgetPreRenderStyleTags") {
|
|
43
|
+
value
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
48
47
|
`;
|
|
49
48
|
const { data: { shop: { widgetPreRenderStyleTags } } } = useShopQuery({
|
|
50
49
|
query: query,
|
|
51
50
|
preload: true
|
|
52
51
|
});
|
|
53
|
-
const preRenderStyleTags = widgetPreRenderStyleTags?.value
|
|
52
|
+
const preRenderStyleTags = widgetPreRenderStyleTags?.value ?? '';
|
|
54
53
|
if (!preRenderStyleTags) {
|
|
55
54
|
console.warn(okendoError('Failed to retrieve pre-rendered widget style settings.'));
|
|
56
55
|
}
|
|
@@ -62,7 +61,7 @@ export const OkendoProvider = (props) => {
|
|
|
62
61
|
React.createElement("meta", { name: "oke:subscriber_id", content: subscriberId }),
|
|
63
62
|
React.createElement("script", null, initScriptContents),
|
|
64
63
|
productUrlFormatter && React.createElement("script", { type: "text/javascript" }, `window.okeProductUrlFormatter = ${productUrlFormatter}`)),
|
|
65
|
-
preRenderStyleTags,
|
|
66
|
-
|
|
64
|
+
preRenderStyleTags && React.createElement("div", { dangerouslySetInnerHTML: { __html: preRenderStyleTags } }),
|
|
65
|
+
React.createElement("div", { dangerouslySetInnerHTML: { __html: starSymbols } }),
|
|
67
66
|
children));
|
|
68
67
|
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import parse from 'html-react-parser';
|
|
3
2
|
import { useShopQuery, gql } from '@shopify/hydrogen';
|
|
4
3
|
import { OkendoWidgetClient } from '../client-components/OkendoWidget.client';
|
|
5
4
|
import { widgetMetafieldError } from '../shared/errorUtils';
|
|
@@ -12,23 +11,23 @@ export const OkendoReviewsWidget = (props) => {
|
|
|
12
11
|
}
|
|
13
12
|
const { productId } = props;
|
|
14
13
|
const productQuery = productId
|
|
15
|
-
? `
|
|
16
|
-
product(id: $productId) {
|
|
17
|
-
reviewsWidgetSnippet: metafield(namespace: "okendo", key: "ReviewsWidgetSnippet") {
|
|
18
|
-
value
|
|
19
|
-
}
|
|
20
|
-
}
|
|
14
|
+
? `
|
|
15
|
+
product(id: $productId) {
|
|
16
|
+
reviewsWidgetSnippet: metafield(namespace: "okendo", key: "ReviewsWidgetSnippet") {
|
|
17
|
+
value
|
|
18
|
+
}
|
|
19
|
+
}
|
|
21
20
|
`
|
|
22
21
|
: '';
|
|
23
|
-
const query = gql `
|
|
24
|
-
query metafields${productId ? '($productId: ID!)' : ''} {
|
|
25
|
-
${productQuery}
|
|
26
|
-
shop {
|
|
27
|
-
widgetPreRenderBodyStyleTags: metafield(namespace: "okendo", key: "WidgetPreRenderBodyStyleTags") {
|
|
28
|
-
value
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
22
|
+
const query = gql `
|
|
23
|
+
query metafields${productId ? '($productId: ID!)' : ''} {
|
|
24
|
+
${productQuery}
|
|
25
|
+
shop {
|
|
26
|
+
widgetPreRenderBodyStyleTags: metafield(namespace: "okendo", key: "WidgetPreRenderBodyStyleTags") {
|
|
27
|
+
value
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
32
31
|
`;
|
|
33
32
|
const { data: { product, shop } } = useShopQuery({
|
|
34
33
|
query: query,
|
|
@@ -53,7 +52,7 @@ export const OkendoReviewsWidget = (props) => {
|
|
|
53
52
|
}
|
|
54
53
|
}
|
|
55
54
|
return (React.createElement(React.Fragment, null,
|
|
56
|
-
|
|
55
|
+
React.createElement("div", { dangerouslySetInnerHTML: { __html: shop?.widgetPreRenderBodyStyleTags?.value ?? '' } }),
|
|
57
56
|
React.createElement(OkendoWidgetClient, { dataAttributes: dataAttributes, metafieldContent: product?.reviewsWidgetSnippet?.value ?? '' })));
|
|
58
57
|
};
|
|
59
58
|
export default OkendoReviewsWidget;
|
|
@@ -15,14 +15,14 @@ export const OkendoStarRating = (props) => {
|
|
|
15
15
|
console.error(widgetConfigurationError('OkendoStarRating', 'productId was not provided'));
|
|
16
16
|
return null;
|
|
17
17
|
}
|
|
18
|
-
const query = gql `
|
|
19
|
-
query metafields($productId: ID!) {
|
|
20
|
-
product(id: $productId) {
|
|
21
|
-
starRatingSnippet: metafield(namespace: "okendo", key: "StarRatingSnippet") {
|
|
22
|
-
value
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
18
|
+
const query = gql `
|
|
19
|
+
query metafields($productId: ID!) {
|
|
20
|
+
product(id: $productId) {
|
|
21
|
+
starRatingSnippet: metafield(namespace: "okendo", key: "StarRatingSnippet") {
|
|
22
|
+
value
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
26
|
`;
|
|
27
27
|
const { data: { product: { starRatingSnippet } } } = useShopQuery({
|
|
28
28
|
query: query,
|
|
@@ -36,8 +36,7 @@ export const OkendoStarRating = (props) => {
|
|
|
36
36
|
}
|
|
37
37
|
const dataAttributes = {
|
|
38
38
|
'data-oke-star-rating': '',
|
|
39
|
-
'data-oke-reviews-product-id': okendoProductId
|
|
40
|
-
'data-oke-scroll-disabled': 'true'
|
|
39
|
+
'data-oke-reviews-product-id': okendoProductId
|
|
41
40
|
};
|
|
42
41
|
return (React.createElement(OkendoWidgetClient, { dataAttributes: dataAttributes, metafieldContent: starRatingSnippet?.value }));
|
|
43
42
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { gql } from '@shopify/hydrogen';
|
|
2
|
-
export const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = gql `
|
|
3
|
-
fragment OkendoStarRatingSnippet on Product {
|
|
4
|
-
okendoStarRatingSnippet: metafield(
|
|
5
|
-
namespace: "okendo"
|
|
6
|
-
key: "StarRatingSnippet"
|
|
7
|
-
) {
|
|
8
|
-
value
|
|
9
|
-
}
|
|
10
|
-
}
|
|
2
|
+
export const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = gql `
|
|
3
|
+
fragment OkendoStarRatingSnippet on Product {
|
|
4
|
+
okendoStarRatingSnippet: metafield(
|
|
5
|
+
namespace: "okendo"
|
|
6
|
+
key: "StarRatingSnippet"
|
|
7
|
+
) {
|
|
8
|
+
value
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
11
|
`;
|
|
@@ -2,11 +2,9 @@
|
|
|
2
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
|
-
const extendViteOptimizeDeps_1 = require("./extendViteOptimizeDeps");
|
|
6
5
|
const suppressModuleWarning_1 = __importDefault(require("./suppressModuleWarning"));
|
|
7
6
|
const okendoPlugin = () => {
|
|
8
7
|
return [
|
|
9
|
-
(0, extendViteOptimizeDeps_1.extendViteOptimizeDeps)(),
|
|
10
8
|
(0, suppressModuleWarning_1.default)()
|
|
11
9
|
];
|
|
12
10
|
};
|
package/package.json
CHANGED
|
@@ -1,61 +1,58 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@okendo/shopify-hydrogen",
|
|
3
|
-
"version": "1.2.
|
|
4
|
-
"description": "A component library containing Okendo Reviews React components.",
|
|
5
|
-
"main": "dist/esnext/index.js",
|
|
6
|
-
"engines": {
|
|
7
|
-
"node": ">=14"
|
|
8
|
-
},
|
|
9
|
-
"exports": {
|
|
10
|
-
".": "./dist/esnext/index.js",
|
|
11
|
-
"./plugin": {
|
|
12
|
-
"import": "./dist/esnext/framework/plugins/plugin.js",
|
|
13
|
-
"require": "./dist/node/framework/plugins/plugin.js"
|
|
14
|
-
},
|
|
15
|
-
"./client": {
|
|
16
|
-
"import": {
|
|
17
|
-
"types": "./dist/esnext/client.d.ts",
|
|
18
|
-
"default": "./dist/esnext/client.js"
|
|
19
|
-
},
|
|
20
|
-
"node": {
|
|
21
|
-
"types": "./dist/esnext/client.d.ts",
|
|
22
|
-
"default": "./dist/esnext/client.js"
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
"./plugin.cjs": "./plugin.cjs",
|
|
26
|
-
"./package.json": "./package.json",
|
|
27
|
-
"./*": "./dist/esnext/*.js"
|
|
28
|
-
},
|
|
29
|
-
"types": "dist/esnext/index.d.ts",
|
|
30
|
-
"files": [
|
|
31
|
-
"dist",
|
|
32
|
-
"plugin.cjs"
|
|
33
|
-
],
|
|
34
|
-
"scripts": {
|
|
35
|
-
"build": "rimraf dist/ && npm run build:esm && npm run build:plugin:cjs",
|
|
36
|
-
"build:plugin:cjs": "tsc --p tsconfig.plugin.cjs.json",
|
|
37
|
-
"build:esm": "tsc --p tsconfig.esm.json",
|
|
38
|
-
"prepublishOnly": "npm run build"
|
|
39
|
-
},
|
|
40
|
-
"author": "Okendo",
|
|
41
|
-
"license": "SEE LICENSE IN LICENSE.txt",
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"@
|
|
47
|
-
"@
|
|
48
|
-
"@
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
"
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
"@shopify/hydrogen": "1.2.x"
|
|
60
|
-
}
|
|
61
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@okendo/shopify-hydrogen",
|
|
3
|
+
"version": "1.2.1",
|
|
4
|
+
"description": "A component library containing Okendo Reviews React components.",
|
|
5
|
+
"main": "dist/esnext/index.js",
|
|
6
|
+
"engines": {
|
|
7
|
+
"node": ">=14"
|
|
8
|
+
},
|
|
9
|
+
"exports": {
|
|
10
|
+
".": "./dist/esnext/index.js",
|
|
11
|
+
"./plugin": {
|
|
12
|
+
"import": "./dist/esnext/framework/plugins/plugin.js",
|
|
13
|
+
"require": "./dist/node/framework/plugins/plugin.js"
|
|
14
|
+
},
|
|
15
|
+
"./client": {
|
|
16
|
+
"import": {
|
|
17
|
+
"types": "./dist/esnext/client.d.ts",
|
|
18
|
+
"default": "./dist/esnext/client.js"
|
|
19
|
+
},
|
|
20
|
+
"node": {
|
|
21
|
+
"types": "./dist/esnext/client.d.ts",
|
|
22
|
+
"default": "./dist/esnext/client.js"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"./plugin.cjs": "./plugin.cjs",
|
|
26
|
+
"./package.json": "./package.json",
|
|
27
|
+
"./*": "./dist/esnext/*.js"
|
|
28
|
+
},
|
|
29
|
+
"types": "dist/esnext/index.d.ts",
|
|
30
|
+
"files": [
|
|
31
|
+
"dist",
|
|
32
|
+
"plugin.cjs"
|
|
33
|
+
],
|
|
34
|
+
"scripts": {
|
|
35
|
+
"build": "rimraf dist/ && npm run build:esm && npm run build:plugin:cjs",
|
|
36
|
+
"build:plugin:cjs": "tsc --p tsconfig.plugin.cjs.json",
|
|
37
|
+
"build:esm": "tsc --p tsconfig.esm.json",
|
|
38
|
+
"prepublishOnly": "npm run build"
|
|
39
|
+
},
|
|
40
|
+
"author": "Okendo",
|
|
41
|
+
"license": "SEE LICENSE IN LICENSE.txt",
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@okendo/reviews-widget-plus": "^0.49.0",
|
|
44
|
+
"@okendo/tsconfig": "0.0.2",
|
|
45
|
+
"@shopify/hydrogen": "^1.2.0",
|
|
46
|
+
"@types/node": "^17.0.35",
|
|
47
|
+
"@types/react": "^18.0.14",
|
|
48
|
+
"@types/react-dom": "^18.0.5",
|
|
49
|
+
"dotenv": "^16.0.1",
|
|
50
|
+
"ncp": "^2.0.0",
|
|
51
|
+
"rimraf": "^3.0.2",
|
|
52
|
+
"typescript": "^4.7.4",
|
|
53
|
+
"vite": "^2.9.0"
|
|
54
|
+
},
|
|
55
|
+
"peerDependencies": {
|
|
56
|
+
"@shopify/hydrogen": "1.2.x"
|
|
57
|
+
}
|
|
58
|
+
}
|
package/plugin.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports = require('./dist/node/framework/plugin');
|
|
1
|
+
module.exports = require('./dist/node/framework/plugin');
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.extendViteOptimizeDeps = void 0;
|
|
4
|
-
const extendViteOptimizeDeps = () => ({
|
|
5
|
-
name: 'vite-plugin-okendo-extend-optimize-deps',
|
|
6
|
-
config: () => ({
|
|
7
|
-
optimizeDeps: {
|
|
8
|
-
include: [
|
|
9
|
-
'@okendo/shopify-hydrogen > html-react-parser'
|
|
10
|
-
]
|
|
11
|
-
}
|
|
12
|
-
})
|
|
13
|
-
});
|
|
14
|
-
exports.extendViteOptimizeDeps = extendViteOptimizeDeps;
|