@nosto/nosto-react 0.1.2 → 0.1.5
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/dist/index.es.client.js +195 -132
- package/dist/index.umd.client.js +2 -2
- package/package.json +1 -1
- package/src/components/Category/index.client.tsx +37 -0
- package/src/components/Checkout/index.client.tsx +34 -0
- package/src/components/Fohofo/index.client.tsx +34 -0
- package/src/components/Home/index.client.tsx +37 -0
- package/src/components/Order/index.client.tsx +43 -0
- package/src/components/Other/index.client.tsx +34 -0
- package/src/components/Placement/{index.tsx → index.client.tsx} +0 -0
- package/src/components/Product/{index.tsx → index.client.tsx} +56 -52
- package/src/components/Provider/context.client.ts +25 -0
- package/src/components/Provider/index.client.tsx +58 -0
- package/src/components/Search/index.client.tsx +37 -0
- package/src/components/Session/{index.tsx → index.client.tsx} +14 -12
- package/src/index.client.ts +17 -11
- package/src/components/Category/index.tsx +0 -32
- package/src/components/Checkout/index.tsx +0 -29
- package/src/components/Fohofo/index.tsx +0 -29
- package/src/components/Home/index.tsx +0 -29
- package/src/components/Order/index.tsx +0 -38
- package/src/components/Other/index.tsx +0 -29
- package/src/components/Provider/context.ts +0 -12
- package/src/components/Provider/index.tsx +0 -37
- package/src/components/Search/index.tsx +0 -32
package/dist/index.es.client.js
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import React__default, {
|
|
2
|
+
import React__default, { createContext, useContext, useEffect } from "react";
|
|
3
|
+
const NostoContext = createContext({
|
|
4
|
+
account: void 0,
|
|
5
|
+
currentVariation: ""
|
|
6
|
+
});
|
|
7
|
+
function useNostoContext() {
|
|
8
|
+
const context = useContext(NostoContext);
|
|
9
|
+
if (!context) {
|
|
10
|
+
throw new Error("No nosto context found");
|
|
11
|
+
}
|
|
12
|
+
return context;
|
|
13
|
+
}
|
|
3
14
|
var jsxRuntime = { exports: {} };
|
|
4
15
|
var reactJsxRuntime_production_min = {};
|
|
5
16
|
/**
|
|
@@ -14,14 +25,14 @@ var reactJsxRuntime_production_min = {};
|
|
|
14
25
|
var f = React__default, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: true, ref: true, __self: true, __source: true };
|
|
15
26
|
function q(c, a, g) {
|
|
16
27
|
var b, d = {}, e = null, h = null;
|
|
17
|
-
|
|
18
|
-
a.key
|
|
19
|
-
a.ref
|
|
28
|
+
void 0 !== g && (e = "" + g);
|
|
29
|
+
void 0 !== a.key && (e = "" + a.key);
|
|
30
|
+
void 0 !== a.ref && (h = a.ref);
|
|
20
31
|
for (b in a)
|
|
21
32
|
m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
|
|
22
33
|
if (c && c.defaultProps)
|
|
23
34
|
for (b in a = c.defaultProps, a)
|
|
24
|
-
d[b]
|
|
35
|
+
void 0 === d[b] && (d[b] = a[b]);
|
|
25
36
|
return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
|
|
26
37
|
}
|
|
27
38
|
reactJsxRuntime_production_min.Fragment = l;
|
|
@@ -34,13 +45,19 @@ const jsx = jsxRuntime.exports.jsx;
|
|
|
34
45
|
const jsxs = jsxRuntime.exports.jsxs;
|
|
35
46
|
const Fragment = jsxRuntime.exports.Fragment;
|
|
36
47
|
const NostoFohofo = () => {
|
|
48
|
+
const {
|
|
49
|
+
clientScriptLoaded,
|
|
50
|
+
currentVariation
|
|
51
|
+
} = useNostoContext();
|
|
37
52
|
useEffect(() => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
api.placements.
|
|
53
|
+
if (clientScriptLoaded) {
|
|
54
|
+
window.nostojs((api) => {
|
|
55
|
+
api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewNotFound().setPlacements(api.placements.getPlacements()).load().then((data) => {
|
|
56
|
+
api.placements.injectCampaigns(data.recommendations);
|
|
57
|
+
});
|
|
41
58
|
});
|
|
42
|
-
}
|
|
43
|
-
}, []);
|
|
59
|
+
}
|
|
60
|
+
}, [clientScriptLoaded, currentVariation]);
|
|
44
61
|
return /* @__PURE__ */ jsx(Fragment, {
|
|
45
62
|
children: /* @__PURE__ */ jsx("div", {
|
|
46
63
|
className: "nosto_page_type",
|
|
@@ -52,13 +69,19 @@ const NostoFohofo = () => {
|
|
|
52
69
|
});
|
|
53
70
|
};
|
|
54
71
|
const NostoOther = () => {
|
|
72
|
+
const {
|
|
73
|
+
clientScriptLoaded,
|
|
74
|
+
currentVariation
|
|
75
|
+
} = useNostoContext();
|
|
55
76
|
useEffect(() => {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
api.placements.
|
|
77
|
+
if (clientScriptLoaded) {
|
|
78
|
+
window.nostojs((api) => {
|
|
79
|
+
api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewOther().setPlacements(api.placements.getPlacements()).load().then((data) => {
|
|
80
|
+
api.placements.injectCampaigns(data.recommendations);
|
|
81
|
+
});
|
|
59
82
|
});
|
|
60
|
-
}
|
|
61
|
-
}, []);
|
|
83
|
+
}
|
|
84
|
+
}, [clientScriptLoaded, currentVariation]);
|
|
62
85
|
return /* @__PURE__ */ jsx(Fragment, {
|
|
63
86
|
children: /* @__PURE__ */ jsx("div", {
|
|
64
87
|
className: "nosto_page_type",
|
|
@@ -70,13 +93,19 @@ const NostoOther = () => {
|
|
|
70
93
|
});
|
|
71
94
|
};
|
|
72
95
|
const NostoCheckout = () => {
|
|
96
|
+
const {
|
|
97
|
+
clientScriptLoaded,
|
|
98
|
+
currentVariation
|
|
99
|
+
} = useNostoContext();
|
|
73
100
|
useEffect(() => {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
api.placements.
|
|
101
|
+
if (clientScriptLoaded) {
|
|
102
|
+
window.nostojs((api) => {
|
|
103
|
+
api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewCart().setPlacements(api.placements.getPlacements()).load().then((data) => {
|
|
104
|
+
api.placements.injectCampaigns(data.recommendations);
|
|
105
|
+
});
|
|
77
106
|
});
|
|
78
|
-
}
|
|
79
|
-
}, []);
|
|
107
|
+
}
|
|
108
|
+
}, [clientScriptLoaded, currentVariation]);
|
|
80
109
|
return /* @__PURE__ */ jsx(Fragment, {
|
|
81
110
|
children: /* @__PURE__ */ jsx("div", {
|
|
82
111
|
className: "nosto_page_type",
|
|
@@ -87,50 +116,23 @@ const NostoCheckout = () => {
|
|
|
87
116
|
})
|
|
88
117
|
});
|
|
89
118
|
};
|
|
90
|
-
function stringinate(obj) {
|
|
91
|
-
Object.keys(obj).forEach((property) => {
|
|
92
|
-
if (obj[property] instanceof URL) {
|
|
93
|
-
obj[property] = obj[property].toString();
|
|
94
|
-
}
|
|
95
|
-
if (typeof obj[property] === "object") {
|
|
96
|
-
stringinate(obj[property]);
|
|
97
|
-
}
|
|
98
|
-
obj[property] = obj[property];
|
|
99
|
-
});
|
|
100
|
-
return obj;
|
|
101
|
-
}
|
|
102
|
-
var snakeize = function walk(obj) {
|
|
103
|
-
if (!obj || typeof obj !== "object")
|
|
104
|
-
return obj;
|
|
105
|
-
if (isDate(obj) || isRegex(obj))
|
|
106
|
-
return obj;
|
|
107
|
-
if (Array.isArray(obj))
|
|
108
|
-
return obj.map(walk);
|
|
109
|
-
return Object.keys(obj).reduce(function(acc, key) {
|
|
110
|
-
var camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, function(m2, x) {
|
|
111
|
-
return "_" + x.toLowerCase();
|
|
112
|
-
});
|
|
113
|
-
acc[camel] = walk(obj[key]);
|
|
114
|
-
return acc;
|
|
115
|
-
}, {});
|
|
116
|
-
};
|
|
117
|
-
var isDate = function(obj) {
|
|
118
|
-
return Object.prototype.toString.call(obj) === "[object Date]";
|
|
119
|
-
};
|
|
120
|
-
var isRegex = function(obj) {
|
|
121
|
-
return Object.prototype.toString.call(obj) === "[object RegExp]";
|
|
122
|
-
};
|
|
123
119
|
const NostoProduct = ({
|
|
124
120
|
product,
|
|
125
121
|
tagging
|
|
126
122
|
}) => {
|
|
123
|
+
const {
|
|
124
|
+
clientScriptLoaded,
|
|
125
|
+
currentVariation
|
|
126
|
+
} = useNostoContext();
|
|
127
127
|
useEffect(() => {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
api.placements.
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
128
|
+
if (clientScriptLoaded) {
|
|
129
|
+
window.nostojs((api) => {
|
|
130
|
+
api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewProduct(product).setPlacements(api.placements.getPlacements()).load().then((data) => {
|
|
131
|
+
api.placements.injectCampaigns(data.recommendations);
|
|
132
|
+
});
|
|
133
|
+
}, [clientScriptLoaded, currentVariation, product]);
|
|
134
|
+
}
|
|
135
|
+
});
|
|
134
136
|
return /* @__PURE__ */ jsxs(Fragment, {
|
|
135
137
|
children: [/* @__PURE__ */ jsx("div", {
|
|
136
138
|
className: "nosto_page_type",
|
|
@@ -143,105 +145,105 @@ const NostoProduct = ({
|
|
|
143
145
|
style: {
|
|
144
146
|
display: "none"
|
|
145
147
|
},
|
|
146
|
-
children: [tagging.variationId && /* @__PURE__ */ jsx("span", {
|
|
148
|
+
children: [(tagging == null ? void 0 : tagging.variationId) && /* @__PURE__ */ jsx("span", {
|
|
147
149
|
className: "variation_id",
|
|
148
150
|
children: tagging.variationId
|
|
149
|
-
}),
|
|
151
|
+
}), product && /* @__PURE__ */ jsx("span", {
|
|
150
152
|
className: "product_id",
|
|
151
|
-
children:
|
|
152
|
-
}), tagging.name && /* @__PURE__ */ jsx("span", {
|
|
153
|
+
children: product
|
|
154
|
+
}), (tagging == null ? void 0 : tagging.name) && /* @__PURE__ */ jsx("span", {
|
|
153
155
|
className: "name",
|
|
154
156
|
children: tagging.name
|
|
155
|
-
}), tagging.url && /* @__PURE__ */ jsx("span", {
|
|
157
|
+
}), (tagging == null ? void 0 : tagging.url) && /* @__PURE__ */ jsx("span", {
|
|
156
158
|
className: "url",
|
|
157
159
|
children: tagging.url.toString()
|
|
158
|
-
}), tagging.imageUrl && /* @__PURE__ */ jsx("span", {
|
|
160
|
+
}), (tagging == null ? void 0 : tagging.imageUrl) && /* @__PURE__ */ jsx("span", {
|
|
159
161
|
className: "image_url",
|
|
160
162
|
children: tagging.imageUrl.toString()
|
|
161
|
-
}), tagging.availability && /* @__PURE__ */ jsx("span", {
|
|
163
|
+
}), (tagging == null ? void 0 : tagging.availability) && /* @__PURE__ */ jsx("span", {
|
|
162
164
|
className: "availability",
|
|
163
165
|
children: tagging.availability
|
|
164
|
-
}), tagging.price && /* @__PURE__ */ jsx("span", {
|
|
166
|
+
}), (tagging == null ? void 0 : tagging.price) && /* @__PURE__ */ jsx("span", {
|
|
165
167
|
className: "price",
|
|
166
168
|
children: tagging.price
|
|
167
|
-
}), tagging.listPrice && /* @__PURE__ */ jsx("span", {
|
|
169
|
+
}), (tagging == null ? void 0 : tagging.listPrice) && /* @__PURE__ */ jsx("span", {
|
|
168
170
|
className: "list_price",
|
|
169
171
|
children: tagging.listPrice
|
|
170
|
-
}), tagging.priceCurrencyCode && /* @__PURE__ */ jsx("span", {
|
|
172
|
+
}), (tagging == null ? void 0 : tagging.priceCurrencyCode) && /* @__PURE__ */ jsx("span", {
|
|
171
173
|
className: "price_currency_code",
|
|
172
174
|
children: tagging.priceCurrencyCode
|
|
173
|
-
}), tagging.brand && /* @__PURE__ */ jsx("span", {
|
|
175
|
+
}), (tagging == null ? void 0 : tagging.brand) && /* @__PURE__ */ jsx("span", {
|
|
174
176
|
className: "brand",
|
|
175
177
|
children: tagging.brand
|
|
176
|
-
}), tagging.description && /* @__PURE__ */ jsx("span", {
|
|
178
|
+
}), (tagging == null ? void 0 : tagging.description) && /* @__PURE__ */ jsx("span", {
|
|
177
179
|
className: "description",
|
|
178
180
|
children: tagging.description
|
|
179
|
-
}), tagging.googleCategory && /* @__PURE__ */ jsx("span", {
|
|
181
|
+
}), (tagging == null ? void 0 : tagging.googleCategory) && /* @__PURE__ */ jsx("span", {
|
|
180
182
|
className: "description",
|
|
181
183
|
children: tagging.googleCategory
|
|
182
|
-
}), tagging.condition && /* @__PURE__ */ jsx("span", {
|
|
184
|
+
}), (tagging == null ? void 0 : tagging.condition) && /* @__PURE__ */ jsx("span", {
|
|
183
185
|
className: "condition",
|
|
184
186
|
children: tagging.condition
|
|
185
|
-
}), tagging.gender && /* @__PURE__ */ jsx("span", {
|
|
187
|
+
}), (tagging == null ? void 0 : tagging.gender) && /* @__PURE__ */ jsx("span", {
|
|
186
188
|
className: "gender",
|
|
187
189
|
children: tagging.gender
|
|
188
|
-
}), tagging.ageGroup && /* @__PURE__ */ jsx("span", {
|
|
190
|
+
}), (tagging == null ? void 0 : tagging.ageGroup) && /* @__PURE__ */ jsx("span", {
|
|
189
191
|
className: "age_group",
|
|
190
192
|
children: tagging.ageGroup
|
|
191
|
-
}), tagging.gtin && /* @__PURE__ */ jsx("span", {
|
|
193
|
+
}), (tagging == null ? void 0 : tagging.gtin) && /* @__PURE__ */ jsx("span", {
|
|
192
194
|
className: "gtin",
|
|
193
195
|
children: tagging.gtin
|
|
194
|
-
}), tagging.category && tagging.category.map((category, index) => /* @__PURE__ */ jsx("span", {
|
|
196
|
+
}), (tagging == null ? void 0 : tagging.category) && (tagging == null ? void 0 : tagging.category.map((category, index) => /* @__PURE__ */ jsx("span", {
|
|
195
197
|
className: "category",
|
|
196
198
|
children: category
|
|
197
|
-
}, index)), tagging.tags1 && tagging.tags1.map((tag, index) => /* @__PURE__ */ jsx("span", {
|
|
199
|
+
}, index))), (tagging == null ? void 0 : tagging.tags1) && tagging.tags1.map((tag, index) => /* @__PURE__ */ jsx("span", {
|
|
198
200
|
className: "tag1",
|
|
199
201
|
children: tag
|
|
200
|
-
}, index)), tagging.tags2 && tagging.tags2.map((tag, index) => /* @__PURE__ */ jsx("span", {
|
|
202
|
+
}, index)), (tagging == null ? void 0 : tagging.tags2) && tagging.tags2.map((tag, index) => /* @__PURE__ */ jsx("span", {
|
|
201
203
|
className: "tag2",
|
|
202
204
|
children: tag
|
|
203
|
-
}, index)), tagging.tags3 && tagging.tags3.map((tag, index) => /* @__PURE__ */ jsx("span", {
|
|
205
|
+
}, index)), (tagging == null ? void 0 : tagging.tags3) && tagging.tags3.map((tag, index) => /* @__PURE__ */ jsx("span", {
|
|
204
206
|
className: "tag3",
|
|
205
207
|
children: tag
|
|
206
|
-
}, index)), tagging.ratingValue && /* @__PURE__ */ jsx("span", {
|
|
208
|
+
}, index)), (tagging == null ? void 0 : tagging.ratingValue) && /* @__PURE__ */ jsx("span", {
|
|
207
209
|
className: "rating_value",
|
|
208
210
|
children: tagging.ratingValue
|
|
209
|
-
}), tagging.reviewCount && /* @__PURE__ */ jsx("span", {
|
|
211
|
+
}), (tagging == null ? void 0 : tagging.reviewCount) && /* @__PURE__ */ jsx("span", {
|
|
210
212
|
className: "review_count",
|
|
211
213
|
children: tagging.reviewCount
|
|
212
|
-
}), tagging.alternateImageUrls && tagging.alternateImageUrls.map((url, index) => /* @__PURE__ */ jsx("span", {
|
|
214
|
+
}), (tagging == null ? void 0 : tagging.alternateImageUrls) && tagging.alternateImageUrls.map((url, index) => /* @__PURE__ */ jsx("span", {
|
|
213
215
|
className: "alternate_image_url",
|
|
214
216
|
children: url.toString()
|
|
215
|
-
}, index)), tagging.customFields && Object.keys(tagging.customFields).map((field, index) => tagging.customFields && tagging.customFields[field] && /* @__PURE__ */ jsx("span", {
|
|
217
|
+
}, index)), (tagging == null ? void 0 : tagging.customFields) && Object.keys(tagging.customFields).map((field, index) => tagging.customFields && tagging.customFields[field] && /* @__PURE__ */ jsx("span", {
|
|
216
218
|
className: field,
|
|
217
219
|
children: tagging.customFields[field]
|
|
218
|
-
}, index)), tagging.skus && tagging.skus.map((sku, index) => /* @__PURE__ */ jsxs("span", {
|
|
220
|
+
}, index)), (tagging == null ? void 0 : tagging.skus) && tagging.skus.map((sku, index) => /* @__PURE__ */ jsxs("span", {
|
|
219
221
|
className: "nosto_sku",
|
|
220
|
-
children: [sku.id && /* @__PURE__ */ jsx("span", {
|
|
222
|
+
children: [(sku == null ? void 0 : sku.id) && /* @__PURE__ */ jsx("span", {
|
|
221
223
|
className: "product_id",
|
|
222
224
|
children: sku.id
|
|
223
|
-
}), sku.name && /* @__PURE__ */ jsx("span", {
|
|
225
|
+
}), (sku == null ? void 0 : sku.name) && /* @__PURE__ */ jsx("span", {
|
|
224
226
|
className: "name",
|
|
225
227
|
children: sku.name
|
|
226
|
-
}), sku.price && /* @__PURE__ */ jsx("span", {
|
|
228
|
+
}), (sku == null ? void 0 : sku.price) && /* @__PURE__ */ jsx("span", {
|
|
227
229
|
className: "price",
|
|
228
230
|
children: sku.price
|
|
229
|
-
}), sku.listPrice && /* @__PURE__ */ jsx("span", {
|
|
231
|
+
}), (sku == null ? void 0 : sku.listPrice) && /* @__PURE__ */ jsx("span", {
|
|
230
232
|
className: "list_price",
|
|
231
233
|
children: sku.listPrice
|
|
232
|
-
}), sku.url && /* @__PURE__ */ jsx("span", {
|
|
234
|
+
}), (sku == null ? void 0 : sku.url) && /* @__PURE__ */ jsx("span", {
|
|
233
235
|
className: "url",
|
|
234
236
|
children: sku.url.toString()
|
|
235
|
-
}), sku.imageUrl && /* @__PURE__ */ jsx("span", {
|
|
237
|
+
}), (sku == null ? void 0 : sku.imageUrl) && /* @__PURE__ */ jsx("span", {
|
|
236
238
|
className: "image_url",
|
|
237
239
|
children: sku.imageUrl.toString()
|
|
238
|
-
}), sku.gtin && /* @__PURE__ */ jsx("span", {
|
|
240
|
+
}), (sku == null ? void 0 : sku.gtin) && /* @__PURE__ */ jsx("span", {
|
|
239
241
|
className: "gtin",
|
|
240
242
|
children: sku.gtin
|
|
241
|
-
}), sku.availability && /* @__PURE__ */ jsx("span", {
|
|
243
|
+
}), (sku == null ? void 0 : sku.availability) && /* @__PURE__ */ jsx("span", {
|
|
242
244
|
className: "availability",
|
|
243
245
|
children: sku.availability
|
|
244
|
-
}), sku.customFields && Object.keys(sku.customFields).map((field, index2) => sku.customFields && sku.customFields[field] && /* @__PURE__ */ jsx("span", {
|
|
246
|
+
}), (sku == null ? void 0 : sku.customFields) && Object.keys(sku.customFields).map((field, index2) => sku.customFields && sku.customFields[field] && /* @__PURE__ */ jsx("span", {
|
|
245
247
|
className: field,
|
|
246
248
|
children: sku.customFields[field]
|
|
247
249
|
}, index2))]
|
|
@@ -252,13 +254,19 @@ const NostoProduct = ({
|
|
|
252
254
|
const NostoCategory = ({
|
|
253
255
|
category
|
|
254
256
|
}) => {
|
|
257
|
+
const {
|
|
258
|
+
clientScriptLoaded,
|
|
259
|
+
currentVariation
|
|
260
|
+
} = useNostoContext();
|
|
255
261
|
useEffect(() => {
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
api.placements.
|
|
262
|
+
if (clientScriptLoaded) {
|
|
263
|
+
window.nostojs((api) => {
|
|
264
|
+
api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewCategory(category).setPlacements(api.placements.getPlacements()).load().then((data) => {
|
|
265
|
+
api.placements.injectCampaigns(data.recommendations);
|
|
266
|
+
});
|
|
259
267
|
});
|
|
260
|
-
}
|
|
261
|
-
}, []);
|
|
268
|
+
}
|
|
269
|
+
}, [clientScriptLoaded, category, currentVariation]);
|
|
262
270
|
return /* @__PURE__ */ jsxs(Fragment, {
|
|
263
271
|
children: [/* @__PURE__ */ jsx("div", {
|
|
264
272
|
className: "nosto_page_type",
|
|
@@ -278,13 +286,19 @@ const NostoCategory = ({
|
|
|
278
286
|
const NostoSearch = ({
|
|
279
287
|
query
|
|
280
288
|
}) => {
|
|
289
|
+
const {
|
|
290
|
+
clientScriptLoaded,
|
|
291
|
+
currentVariation
|
|
292
|
+
} = useNostoContext();
|
|
281
293
|
useEffect(() => {
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
api.placements.
|
|
294
|
+
if (clientScriptLoaded) {
|
|
295
|
+
window.nostojs((api) => {
|
|
296
|
+
api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
|
|
297
|
+
api.placements.injectCampaigns(data.recommendations);
|
|
298
|
+
});
|
|
285
299
|
});
|
|
286
|
-
}
|
|
287
|
-
}, []);
|
|
300
|
+
}
|
|
301
|
+
}, [clientScriptLoaded, currentVariation, query]);
|
|
288
302
|
return /* @__PURE__ */ jsxs(Fragment, {
|
|
289
303
|
children: [/* @__PURE__ */ jsx("div", {
|
|
290
304
|
className: "nosto_page_type",
|
|
@@ -301,16 +315,43 @@ const NostoSearch = ({
|
|
|
301
315
|
})]
|
|
302
316
|
});
|
|
303
317
|
};
|
|
318
|
+
var snakeize = function walk(obj) {
|
|
319
|
+
if (!obj || typeof obj !== "object")
|
|
320
|
+
return obj;
|
|
321
|
+
if (isDate(obj) || isRegex(obj))
|
|
322
|
+
return obj;
|
|
323
|
+
if (Array.isArray(obj))
|
|
324
|
+
return obj.map(walk);
|
|
325
|
+
return Object.keys(obj).reduce(function(acc, key) {
|
|
326
|
+
var camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, function(m2, x) {
|
|
327
|
+
return "_" + x.toLowerCase();
|
|
328
|
+
});
|
|
329
|
+
acc[camel] = walk(obj[key]);
|
|
330
|
+
return acc;
|
|
331
|
+
}, {});
|
|
332
|
+
};
|
|
333
|
+
var isDate = function(obj) {
|
|
334
|
+
return Object.prototype.toString.call(obj) === "[object Date]";
|
|
335
|
+
};
|
|
336
|
+
var isRegex = function(obj) {
|
|
337
|
+
return Object.prototype.toString.call(obj) === "[object RegExp]";
|
|
338
|
+
};
|
|
304
339
|
const NostoOrder = ({
|
|
305
340
|
order
|
|
306
341
|
}) => {
|
|
342
|
+
const {
|
|
343
|
+
clientScriptLoaded,
|
|
344
|
+
currentVariation
|
|
345
|
+
} = useNostoContext();
|
|
307
346
|
useEffect(() => {
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
api.placements.
|
|
347
|
+
if (clientScriptLoaded) {
|
|
348
|
+
window.nostojs((api) => {
|
|
349
|
+
api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").addOrder(snakeize(order)).setPlacements(api.placements.getPlacements()).load().then((data) => {
|
|
350
|
+
api.placements.injectCampaigns(data.recommendations);
|
|
351
|
+
});
|
|
311
352
|
});
|
|
312
|
-
}
|
|
313
|
-
}, []);
|
|
353
|
+
}
|
|
354
|
+
}, [clientScriptLoaded, currentVariation]);
|
|
314
355
|
return /* @__PURE__ */ jsxs(Fragment, {
|
|
315
356
|
children: [/* @__PURE__ */ jsx("div", {
|
|
316
357
|
className: "nosto_page_type",
|
|
@@ -328,13 +369,22 @@ const NostoOrder = ({
|
|
|
328
369
|
});
|
|
329
370
|
};
|
|
330
371
|
const NostoHome = () => {
|
|
372
|
+
const {
|
|
373
|
+
clientScriptLoaded,
|
|
374
|
+
currentVariation
|
|
375
|
+
} = useNostoContext();
|
|
331
376
|
useEffect(() => {
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
377
|
+
if (currentVariation) {
|
|
378
|
+
console.log("currentVariation: ", currentVariation);
|
|
379
|
+
}
|
|
380
|
+
if (clientScriptLoaded) {
|
|
381
|
+
window.nostojs((api) => {
|
|
382
|
+
api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewFrontPage().setPlacements(api.placements.getPlacements()).load().then((data) => {
|
|
383
|
+
api.placements.injectCampaigns(data.recommendations);
|
|
384
|
+
});
|
|
335
385
|
});
|
|
336
|
-
}
|
|
337
|
-
}, []);
|
|
386
|
+
}
|
|
387
|
+
}, [clientScriptLoaded, currentVariation]);
|
|
338
388
|
return /* @__PURE__ */ jsx(Fragment, {
|
|
339
389
|
children: /* @__PURE__ */ jsx("div", {
|
|
340
390
|
className: "nosto_page_type",
|
|
@@ -363,27 +413,37 @@ const NostoPlacement = ({
|
|
|
363
413
|
id
|
|
364
414
|
});
|
|
365
415
|
};
|
|
366
|
-
const NostoContext = createContext({
|
|
367
|
-
account: void 0
|
|
368
|
-
});
|
|
369
416
|
const NostoProvider = ({
|
|
370
417
|
account,
|
|
371
|
-
currentVariation,
|
|
418
|
+
currentVariation = "",
|
|
419
|
+
multiCurrency = false,
|
|
372
420
|
host,
|
|
373
421
|
children
|
|
374
422
|
}) => {
|
|
423
|
+
const [clientScriptLoadedState, setClientScriptLoadedState] = React__default.useState(false);
|
|
424
|
+
const clientScriptLoaded = React__default.useMemo(() => clientScriptLoadedState, [clientScriptLoadedState]);
|
|
425
|
+
currentVariation = multiCurrency ? currentVariation : "";
|
|
375
426
|
useEffect(() => {
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
427
|
+
if (!document.querySelectorAll("[nosto-client-script]").length) {
|
|
428
|
+
const script = document.createElement("script");
|
|
429
|
+
script.type = "text/javascript";
|
|
430
|
+
script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
|
|
431
|
+
script.async = true;
|
|
432
|
+
script.setAttribute("nosto-client-script", "");
|
|
433
|
+
script.onload = () => {
|
|
434
|
+
console.log("Nosto client script loaded");
|
|
435
|
+
setClientScriptLoadedState(true);
|
|
436
|
+
};
|
|
437
|
+
document.head.appendChild(script);
|
|
438
|
+
}
|
|
381
439
|
window.nostojs = (cb) => (window.nostojs.q = window.nostojs.q || []).push(cb);
|
|
382
440
|
window.nostojs((api) => api.setAutoLoad(false));
|
|
383
441
|
}, []);
|
|
384
442
|
return /* @__PURE__ */ jsx(NostoContext.Provider, {
|
|
385
443
|
value: {
|
|
386
|
-
account
|
|
444
|
+
account,
|
|
445
|
+
clientScriptLoaded,
|
|
446
|
+
currentVariation
|
|
387
447
|
},
|
|
388
448
|
children
|
|
389
449
|
});
|
|
@@ -492,15 +552,18 @@ const NostoSession = ({
|
|
|
492
552
|
cart,
|
|
493
553
|
customer
|
|
494
554
|
}) => {
|
|
555
|
+
const {
|
|
556
|
+
clientScriptLoaded
|
|
557
|
+
} = useNostoContext();
|
|
495
558
|
useDeepCompareEffect(() => {
|
|
496
|
-
const currentUser = customer ? customer : void 0;
|
|
497
|
-
console.debug(currentUser);
|
|
498
559
|
const currentCart = cart ? cart : void 0;
|
|
499
560
|
console.debug(currentCart);
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
561
|
+
if (clientScriptLoaded) {
|
|
562
|
+
window.nostojs((api) => {
|
|
563
|
+
api.defaultSession().setResponseMode("HTML").setCart(snakeize(currentCart)).viewOther().load();
|
|
564
|
+
});
|
|
565
|
+
}
|
|
566
|
+
}, [clientScriptLoaded, cart || [], customer || {}]);
|
|
567
|
+
return /* @__PURE__ */ jsx(Fragment, {});
|
|
505
568
|
};
|
|
506
|
-
export { NostoFohofo as Nosto404, NostoCategory, NostoCheckout, NostoHome, NostoOrder, NostoOther, NostoPlacement, NostoProduct, NostoProvider, NostoSearch, NostoSession };
|
|
569
|
+
export { NostoFohofo as Nosto404, NostoCategory, NostoCheckout, NostoContext, NostoHome, NostoOrder, NostoOther, NostoPlacement, NostoProduct, NostoProvider, NostoSearch, NostoSession, useNostoContext };
|
package/dist/index.umd.client.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(l,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],i):(l=typeof globalThis!="undefined"?globalThis:l||self,i(l["@nosto/nosto-react"]={},l.React))})(this,function(l,i){"use strict";function L(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}function O(t){if(t&&t.__esModule)return t;var e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return t&&Object.keys(t).forEach(function(n){if(n!=="default"){var r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:function(){return t[n]}})}}),e.default=t,Object.freeze(e)}var _=L(i),h=O(i);const v=i.createContext({account:void 0,currentVariation:""});function a(){const t=i.useContext(v);if(!t)throw new Error("No nosto context found");return t}var y={exports:{}},N={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.min.js
|
|
4
4
|
*
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var S=C.default,O=Symbol.for("react.element"),M=Symbol.for("react.fragment"),L=Object.prototype.hasOwnProperty,E=S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,T={key:!0,ref:!0,__self:!0,__source:!0};function N(t,e,s){var n,o={},l=null,h=null;s!==void 0&&(l=""+s),e.key!==void 0&&(l=""+e.key),e.ref!==void 0&&(h=e.ref);for(n in e)L.call(e,n)&&!T.hasOwnProperty(n)&&(o[n]=e[n]);if(t&&t.defaultProps)for(n in e=t.defaultProps,e)o[n]===void 0&&(o[n]=e[n]);return{$$typeof:O,type:t,key:l,ref:h,props:o,_owner:E.current}}f.Fragment=M,f.jsx=N,f.jsxs=N,p.exports=f;const r=p.exports.jsx,d=p.exports.jsxs,i=p.exports.Fragment,F=()=>(a.useEffect(()=>{window.nostojs(t=>{t.defaultSession().setResponseMode("HTML").viewNotFound().setPlacements(t.placements.getPlacements()).load().then(e=>{t.placements.injectCampaigns(e.recommendations)})})},[]),r(i,{children:r("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})),R=()=>(a.useEffect(()=>{window.nostojs(t=>{t.defaultSession().setResponseMode("HTML").viewOther().setPlacements(t.placements.getPlacements()).load().then(e=>{t.placements.injectCampaigns(e.recommendations)})})},[]),r(i,{children:r("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})),U=()=>(a.useEffect(()=>{window.nostojs(t=>{t.defaultSession().setResponseMode("HTML").viewCart().setPlacements(t.placements.getPlacements()).load().then(e=>{t.placements.injectCampaigns(e.recommendations)})})},[]),r(i,{children:r("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})}));function v(t){return Object.keys(t).forEach(e=>{t[e]instanceof URL&&(t[e]=t[e].toString()),typeof t[e]=="object"&&v(t[e]),t[e]=t[e]}),t}var y=function t(e){return!e||typeof e!="object"||x(e)||D(e)?e:Array.isArray(e)?e.map(t):Object.keys(e).reduce(function(s,n){var o=n[0].toLowerCase()+n.slice(1).replace(/([A-Z]+)/g,function(l,h){return"_"+h.toLowerCase()});return s[o]=t(e[n]),s},{})},x=function(t){return Object.prototype.toString.call(t)==="[object Date]"},D=function(t){return Object.prototype.toString.call(t)==="[object RegExp]"};const H=({product:t,tagging:e})=>(a.useEffect(()=>{window.nostojs(s=>{s.defaultSession().setResponseMode("HTML").viewProduct(y(v(e))).setPlacements(s.placements.getPlacements()).load().then(n=>{s.placements.injectCampaigns(n.recommendations)})})},[]),d(i,{children:[r("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),d("div",{className:"nosto_product",style:{display:"none"},children:[e.variationId&&r("span",{className:"variation_id",children:e.variationId}),e.productId&&r("span",{className:"product_id",children:e.productId}),e.name&&r("span",{className:"name",children:e.name}),e.url&&r("span",{className:"url",children:e.url.toString()}),e.imageUrl&&r("span",{className:"image_url",children:e.imageUrl.toString()}),e.availability&&r("span",{className:"availability",children:e.availability}),e.price&&r("span",{className:"price",children:e.price}),e.listPrice&&r("span",{className:"list_price",children:e.listPrice}),e.priceCurrencyCode&&r("span",{className:"price_currency_code",children:e.priceCurrencyCode}),e.brand&&r("span",{className:"brand",children:e.brand}),e.description&&r("span",{className:"description",children:e.description}),e.googleCategory&&r("span",{className:"description",children:e.googleCategory}),e.condition&&r("span",{className:"condition",children:e.condition}),e.gender&&r("span",{className:"gender",children:e.gender}),e.ageGroup&&r("span",{className:"age_group",children:e.ageGroup}),e.gtin&&r("span",{className:"gtin",children:e.gtin}),e.category&&e.category.map((s,n)=>r("span",{className:"category",children:s},n)),e.tags1&&e.tags1.map((s,n)=>r("span",{className:"tag1",children:s},n)),e.tags2&&e.tags2.map((s,n)=>r("span",{className:"tag2",children:s},n)),e.tags3&&e.tags3.map((s,n)=>r("span",{className:"tag3",children:s},n)),e.ratingValue&&r("span",{className:"rating_value",children:e.ratingValue}),e.reviewCount&&r("span",{className:"review_count",children:e.reviewCount}),e.alternateImageUrls&&e.alternateImageUrls.map((s,n)=>r("span",{className:"alternate_image_url",children:s.toString()},n)),e.customFields&&Object.keys(e.customFields).map((s,n)=>e.customFields&&e.customFields[s]&&r("span",{className:s,children:e.customFields[s]},n)),e.skus&&e.skus.map((s,n)=>d("span",{className:"nosto_sku",children:[s.id&&r("span",{className:"product_id",children:s.id}),s.name&&r("span",{className:"name",children:s.name}),s.price&&r("span",{className:"price",children:s.price}),s.listPrice&&r("span",{className:"list_price",children:s.listPrice}),s.url&&r("span",{className:"url",children:s.url.toString()}),s.imageUrl&&r("span",{className:"image_url",children:s.imageUrl.toString()}),s.gtin&&r("span",{className:"gtin",children:s.gtin}),s.availability&&r("span",{className:"availability",children:s.availability}),s.customFields&&Object.keys(s.customFields).map((o,l)=>s.customFields&&s.customFields[o]&&r("span",{className:o,children:s.customFields[o]},l))]},n))]})]})),I=({category:t})=>(a.useEffect(()=>{window.nostojs(e=>{e.defaultSession().setResponseMode("HTML").viewCategory(t).setPlacements(e.placements.getPlacements()).load().then(s=>{e.placements.injectCampaigns(s.recommendations)})})},[]),d(i,{children:[r("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),r("div",{className:"nosto_category",style:{display:"none"},children:t})]})),A=({query:t})=>(a.useEffect(()=>{window.nostojs(e=>{e.defaultSession().setResponseMode("HTML").viewSearch(t).setPlacements(e.placements.getPlacements()).load().then(s=>{e.placements.injectCampaigns(s.recommendations)})})},[]),d(i,{children:[r("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),r("div",{className:"nosto_search",style:{display:"none"},children:t})]})),z=({order:t})=>(a.useEffect(()=>{window.nostojs(e=>{e.defaultSession().setResponseMode("HTML").addOrder(y(t)).setPlacements(e.placements.getPlacements()).load().then(s=>{e.placements.injectCampaigns(s.recommendations)})})},[]),d(i,{children:[r("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),r("div",{className:"nosto_order",style:{display:"none"},children:t.purchase.number})]})),V=()=>(a.useEffect(()=>{window.nostojs(t=>{t.defaultSession().setResponseMode("HTML").viewFrontPage().setPlacements(t.placements.getPlacements()).load().then(e=>{t.placements.injectCampaigns(e.recommendations)})})},[]),r(i,{children:r("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})),b=({id:t})=>r("div",{className:"nosto_element",onClick:s=>{const n=s.target.closest("a");if(n)s.preventDefault(),location.href=n.href.toString().replace(new URL(n.href).origin,"");else return},id:t}),q=a.createContext({account:void 0}),B=({account:t,currentVariation:e,host:s,children:n})=>(a.useEffect(()=>{const o=document.createElement("script");o.type="text/javascript",o.src="//"+(s||"connect.nosto.com")+"/include/"+t,o.async=!0,document.head.appendChild(o),window.nostojs=l=>(window.nostojs.q=window.nostojs.q||[]).push(l),window.nostojs(l=>l.setAutoLoad(!1))},[]),r(q.Provider,{value:{account:t},children:n}));var _=Object.prototype.hasOwnProperty;function w(t,e,s){for(s of t.keys())if(u(s,e))return s}function u(t,e){var s,n,o;if(t===e)return!0;if(t&&e&&(s=t.constructor)===e.constructor){if(s===Date)return t.getTime()===e.getTime();if(s===RegExp)return t.toString()===e.toString();if(s===Array){if((n=t.length)===e.length)for(;n--&&u(t[n],e[n]););return n===-1}if(s===Set){if(t.size!==e.size)return!1;for(n of t)if(o=n,o&&typeof o=="object"&&(o=w(e,o),!o)||!e.has(o))return!1;return!0}if(s===Map){if(t.size!==e.size)return!1;for(n of t)if(o=n[0],o&&typeof o=="object"&&(o=w(e,o),!o)||!u(n[1],e.get(o)))return!1;return!0}if(s===ArrayBuffer)t=new Uint8Array(t),e=new Uint8Array(e);else if(s===DataView){if((n=t.byteLength)===e.byteLength)for(;n--&&t.getInt8(n)===e.getInt8(n););return n===-1}if(ArrayBuffer.isView(t)){if((n=t.byteLength)===e.byteLength)for(;n--&&t[n]===e[n];);return n===-1}if(!s||typeof t=="object"){n=0;for(s in t)if(_.call(t,s)&&++n&&!_.call(e,s)||!(s in e)||!u(t[s],e[s]))return!1;return Object.keys(e).length===n}}return t!==t&&e!==e}function G(t){var e=m.useRef(t),s=m.useRef(0);return u(t,e.current)||(e.current=t,s.current+=1),m.useMemo(function(){return e.current},[s.current])}function $(t,e){return m.useEffect(t,G(e))}const J=({cart:t,customer:e})=>($(()=>{console.debug(e||void 0);const n=t||void 0;console.debug(n),window.nostojs(o=>{o.defaultSession().setResponseMode("HTML").setCart(y(n)).viewOther().load()})},[t||[],e||{}]),r("div",{}));c.Nosto404=F,c.NostoCategory=I,c.NostoCheckout=U,c.NostoHome=V,c.NostoOrder=z,c.NostoOther=R,c.NostoPlacement=b,c.NostoProduct=H,c.NostoProvider=B,c.NostoSearch=A,c.NostoSession=J,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
9
|
+
*/var M=_.default,E=Symbol.for("react.element"),V=Symbol.for("react.fragment"),T=Object.prototype.hasOwnProperty,F=M.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,x={key:!0,ref:!0,__self:!0,__source:!0};function S(t,e,n){var r,s={},c=null,d=null;n!==void 0&&(c=""+n),e.key!==void 0&&(c=""+e.key),e.ref!==void 0&&(d=e.ref);for(r in e)T.call(e,r)&&!x.hasOwnProperty(r)&&(s[r]=e[r]);if(t&&t.defaultProps)for(r in e=t.defaultProps,e)s[r]===void 0&&(s[r]=e[r]);return{$$typeof:E,type:t,key:c,ref:d,props:s,_owner:F.current}}N.Fragment=V,N.jsx=S,N.jsxs=S,y.exports=N;const o=y.exports.jsx,u=y.exports.jsxs,p=y.exports.Fragment,R=()=>{const{clientScriptLoaded:t,currentVariation:e}=a();return i.useEffect(()=>{t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewNotFound().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})},A=()=>{const{clientScriptLoaded:t,currentVariation:e}=a();return i.useEffect(()=>{t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewOther().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})},D=()=>{const{clientScriptLoaded:t,currentVariation:e}=a();return i.useEffect(()=>{t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewCart().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})})},H=({product:t,tagging:e})=>{const{clientScriptLoaded:n,currentVariation:r}=a();return i.useEffect(()=>{n&&window.nostojs(s=>{s.defaultSession().setVariation(r).setResponseMode("HTML").viewProduct(t).setPlacements(s.placements.getPlacements()).load().then(c=>{s.placements.injectCampaigns(c.recommendations)})},[n,r,t])}),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),u("div",{className:"nosto_product",style:{display:"none"},children:[(e==null?void 0:e.variationId)&&o("span",{className:"variation_id",children:e.variationId}),t&&o("span",{className:"product_id",children:t}),(e==null?void 0:e.name)&&o("span",{className:"name",children:e.name}),(e==null?void 0:e.url)&&o("span",{className:"url",children:e.url.toString()}),(e==null?void 0:e.imageUrl)&&o("span",{className:"image_url",children:e.imageUrl.toString()}),(e==null?void 0:e.availability)&&o("span",{className:"availability",children:e.availability}),(e==null?void 0:e.price)&&o("span",{className:"price",children:e.price}),(e==null?void 0:e.listPrice)&&o("span",{className:"list_price",children:e.listPrice}),(e==null?void 0:e.priceCurrencyCode)&&o("span",{className:"price_currency_code",children:e.priceCurrencyCode}),(e==null?void 0:e.brand)&&o("span",{className:"brand",children:e.brand}),(e==null?void 0:e.description)&&o("span",{className:"description",children:e.description}),(e==null?void 0:e.googleCategory)&&o("span",{className:"description",children:e.googleCategory}),(e==null?void 0:e.condition)&&o("span",{className:"condition",children:e.condition}),(e==null?void 0:e.gender)&&o("span",{className:"gender",children:e.gender}),(e==null?void 0:e.ageGroup)&&o("span",{className:"age_group",children:e.ageGroup}),(e==null?void 0:e.gtin)&&o("span",{className:"gtin",children:e.gtin}),(e==null?void 0:e.category)&&(e==null?void 0:e.category.map((s,c)=>o("span",{className:"category",children:s},c))),(e==null?void 0:e.tags1)&&e.tags1.map((s,c)=>o("span",{className:"tag1",children:s},c)),(e==null?void 0:e.tags2)&&e.tags2.map((s,c)=>o("span",{className:"tag2",children:s},c)),(e==null?void 0:e.tags3)&&e.tags3.map((s,c)=>o("span",{className:"tag3",children:s},c)),(e==null?void 0:e.ratingValue)&&o("span",{className:"rating_value",children:e.ratingValue}),(e==null?void 0:e.reviewCount)&&o("span",{className:"review_count",children:e.reviewCount}),(e==null?void 0:e.alternateImageUrls)&&e.alternateImageUrls.map((s,c)=>o("span",{className:"alternate_image_url",children:s.toString()},c)),(e==null?void 0:e.customFields)&&Object.keys(e.customFields).map((s,c)=>e.customFields&&e.customFields[s]&&o("span",{className:s,children:e.customFields[s]},c)),(e==null?void 0:e.skus)&&e.skus.map((s,c)=>u("span",{className:"nosto_sku",children:[(s==null?void 0:s.id)&&o("span",{className:"product_id",children:s.id}),(s==null?void 0:s.name)&&o("span",{className:"name",children:s.name}),(s==null?void 0:s.price)&&o("span",{className:"price",children:s.price}),(s==null?void 0:s.listPrice)&&o("span",{className:"list_price",children:s.listPrice}),(s==null?void 0:s.url)&&o("span",{className:"url",children:s.url.toString()}),(s==null?void 0:s.imageUrl)&&o("span",{className:"image_url",children:s.imageUrl.toString()}),(s==null?void 0:s.gtin)&&o("span",{className:"gtin",children:s.gtin}),(s==null?void 0:s.availability)&&o("span",{className:"availability",children:s.availability}),(s==null?void 0:s.customFields)&&Object.keys(s.customFields).map((d,w)=>s.customFields&&s.customFields[d]&&o("span",{className:d,children:s.customFields[d]},w))]},c))]})]})},U=({category:t})=>{const{clientScriptLoaded:e,currentVariation:n}=a();return i.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").viewCategory(t).setPlacements(r.placements.getPlacements()).load().then(s=>{r.placements.injectCampaigns(s.recommendations)})})},[e,t,n]),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),o("div",{className:"nosto_category",style:{display:"none"},children:t})]})},b=({query:t})=>{const{clientScriptLoaded:e,currentVariation:n}=a();return i.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").viewSearch(t).setPlacements(r.placements.getPlacements()).load().then(s=>{r.placements.injectCampaigns(s.recommendations)})})},[e,n,t]),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),o("div",{className:"nosto_search",style:{display:"none"},children:t})]})};var j=function t(e){return!e||typeof e!="object"||I(e)||z(e)?e:Array.isArray(e)?e.map(t):Object.keys(e).reduce(function(n,r){var s=r[0].toLowerCase()+r.slice(1).replace(/([A-Z]+)/g,function(c,d){return"_"+d.toLowerCase()});return n[s]=t(e[r]),n},{})},I=function(t){return Object.prototype.toString.call(t)==="[object Date]"},z=function(t){return Object.prototype.toString.call(t)==="[object RegExp]"};const q=({order:t})=>{const{clientScriptLoaded:e,currentVariation:n}=a();return i.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").addOrder(j(t)).setPlacements(r.placements.getPlacements()).load().then(s=>{r.placements.injectCampaigns(s.recommendations)})})},[e,n]),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),o("div",{className:"nosto_order",style:{display:"none"},children:t.purchase.number})]})},B=()=>{const{clientScriptLoaded:t,currentVariation:e}=a();return i.useEffect(()=>{e&&console.log("currentVariation: ",e),t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewFrontPage().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})},G=({id:t})=>o("div",{className:"nosto_element",onClick:n=>{const r=n.target.closest("a");if(r)n.preventDefault(),location.href=r.href.toString().replace(new URL(r.href).origin,"");else return},id:t}),$=({account:t,currentVariation:e="",multiCurrency:n=!1,host:r,children:s})=>{const[c,d]=_.default.useState(!1),w=_.default.useMemo(()=>c,[c]);return e=n?e:"",i.useEffect(()=>{if(!document.querySelectorAll("[nosto-client-script]").length){const m=document.createElement("script");m.type="text/javascript",m.src="//"+(r||"connect.nosto.com")+"/include/"+t,m.async=!0,m.setAttribute("nosto-client-script",""),m.onload=()=>{console.log("Nosto client script loaded"),d(!0)},document.head.appendChild(m)}window.nostojs=m=>(window.nostojs.q=window.nostojs.q||[]).push(m),window.nostojs(m=>m.setAutoLoad(!1))},[]),o(v.Provider,{value:{account:t,clientScriptLoaded:w,currentVariation:e},children:s})};var C=Object.prototype.hasOwnProperty;function P(t,e,n){for(n of t.keys())if(f(n,e))return n}function f(t,e){var n,r,s;if(t===e)return!0;if(t&&e&&(n=t.constructor)===e.constructor){if(n===Date)return t.getTime()===e.getTime();if(n===RegExp)return t.toString()===e.toString();if(n===Array){if((r=t.length)===e.length)for(;r--&&f(t[r],e[r]););return r===-1}if(n===Set){if(t.size!==e.size)return!1;for(r of t)if(s=r,s&&typeof s=="object"&&(s=P(e,s),!s)||!e.has(s))return!1;return!0}if(n===Map){if(t.size!==e.size)return!1;for(r of t)if(s=r[0],s&&typeof s=="object"&&(s=P(e,s),!s)||!f(r[1],e.get(s)))return!1;return!0}if(n===ArrayBuffer)t=new Uint8Array(t),e=new Uint8Array(e);else if(n===DataView){if((r=t.byteLength)===e.byteLength)for(;r--&&t.getInt8(r)===e.getInt8(r););return r===-1}if(ArrayBuffer.isView(t)){if((r=t.byteLength)===e.byteLength)for(;r--&&t[r]===e[r];);return r===-1}if(!n||typeof t=="object"){r=0;for(n in t)if(C.call(t,n)&&++r&&!C.call(e,n)||!(n in e)||!f(t[n],e[n]))return!1;return Object.keys(e).length===r}}return t!==t&&e!==e}function J(t){var e=h.useRef(t),n=h.useRef(0);return f(t,e.current)||(e.current=t,n.current+=1),h.useMemo(function(){return e.current},[n.current])}function W(t,e){return h.useEffect(t,J(e))}const Y=({cart:t,customer:e})=>{const{clientScriptLoaded:n}=a();return W(()=>{const r=t||void 0;console.debug(r),n&&window.nostojs(s=>{s.defaultSession().setResponseMode("HTML").setCart(j(r)).viewOther().load()})},[n,t||[],e||{}]),o(p,{})};l.Nosto404=R,l.NostoCategory=U,l.NostoCheckout=D,l.NostoContext=v,l.NostoHome=B,l.NostoOrder=q,l.NostoOther=A,l.NostoPlacement=G,l.NostoProduct=H,l.NostoProvider=$,l.NostoSearch=b,l.NostoSession=Y,l.useNostoContext=a,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React, { useEffect } from "react";
|
|
2
|
+
import { useNostoContext } from "../Provider/context.client";
|
|
3
|
+
|
|
4
|
+
const NostoCategory: React.FC<{ category: string }> = ({ category }) => {
|
|
5
|
+
const { clientScriptLoaded, currentVariation } = useNostoContext();
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
// @ts-ignore
|
|
8
|
+
if (clientScriptLoaded) {
|
|
9
|
+
window.nostojs((api: any) => {
|
|
10
|
+
api
|
|
11
|
+
.defaultSession()
|
|
12
|
+
.setVariation(currentVariation)
|
|
13
|
+
.setResponseMode("HTML")
|
|
14
|
+
.viewCategory(category)
|
|
15
|
+
.setPlacements(api.placements.getPlacements())
|
|
16
|
+
.load()
|
|
17
|
+
.then((data: object) => {
|
|
18
|
+
// @ts-ignore
|
|
19
|
+
api.placements.injectCampaigns(data.recommendations);
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
}, [clientScriptLoaded, category, currentVariation]);
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<>
|
|
27
|
+
<div className="nosto_page_type" style={{ display: "none" }}>
|
|
28
|
+
category
|
|
29
|
+
</div>
|
|
30
|
+
<div className="nosto_category" style={{ display: "none" }}>
|
|
31
|
+
{category}
|
|
32
|
+
</div>
|
|
33
|
+
</>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export default NostoCategory;
|