@nosto/nosto-react 0.1.2 → 0.1.3

package/dist/index.es.client.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React__default, { useEffect, createContext } from "react";
+import React__default, { useEffect, createContext, useContext } from "react";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -87,50 +87,34 @@ const NostoCheckout = () => {
     })
   });
 };
-function stringinate(obj) {
-  Object.keys(obj).forEach((property) => {
-    if (obj[property] instanceof URL) {
-      obj[property] = obj[property].toString();
-    }
-    if (typeof obj[property] === "object") {
-      stringinate(obj[property]);
-    }
-    obj[property] = obj[property];
-  });
-  return obj;
+const NostoContext = createContext({
+  account: void 0,
+  currentVariation: ""
+});
+function useNostoContext() {
+  const context = useContext(NostoContext);
+  if (!context) {
+    throw new Error("No nosto context found");
+  }
+  return context;
 }
-var snakeize = function walk(obj) {
-  if (!obj || typeof obj !== "object")
-    return obj;
-  if (isDate(obj) || isRegex(obj))
-    return obj;
-  if (Array.isArray(obj))
-    return obj.map(walk);
-  return Object.keys(obj).reduce(function(acc, key) {
-    var camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, function(m2, x) {
-      return "_" + x.toLowerCase();
-    });
-    acc[camel] = walk(obj[key]);
-    return acc;
-  }, {});
-};
-var isDate = function(obj) {
-  return Object.prototype.toString.call(obj) === "[object Date]";
-};
-var isRegex = function(obj) {
-  return Object.prototype.toString.call(obj) === "[object RegExp]";
-};
 const NostoProduct = ({
   product,
   tagging
 }) => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").viewProduct(snakeize(stringinate(tagging))).setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewProduct(product).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          api.placements.injectCampaigns(data.recommendations);
+        });
       });
-    });
-  }, []);
+    }
+  }, [clientScriptLoaded, currentVariation]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -143,105 +127,105 @@ const NostoProduct = ({
       style: {
         display: "none"
       },
-      children: [tagging.variationId && /* @__PURE__ */ jsx("span", {
+      children: [(tagging == null ? void 0 : tagging.variationId) && /* @__PURE__ */ jsx("span", {
         className: "variation_id",
         children: tagging.variationId
-      }), tagging.productId && /* @__PURE__ */ jsx("span", {
+      }), product && /* @__PURE__ */ jsx("span", {
         className: "product_id",
-        children: tagging.productId
-      }), tagging.name && /* @__PURE__ */ jsx("span", {
+        children: product
+      }), (tagging == null ? void 0 : tagging.name) && /* @__PURE__ */ jsx("span", {
         className: "name",
         children: tagging.name
-      }), tagging.url && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.url) && /* @__PURE__ */ jsx("span", {
         className: "url",
         children: tagging.url.toString()
-      }), tagging.imageUrl && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.imageUrl) && /* @__PURE__ */ jsx("span", {
         className: "image_url",
         children: tagging.imageUrl.toString()
-      }), tagging.availability && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.availability) && /* @__PURE__ */ jsx("span", {
         className: "availability",
         children: tagging.availability
-      }), tagging.price && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.price) && /* @__PURE__ */ jsx("span", {
         className: "price",
         children: tagging.price
-      }), tagging.listPrice && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.listPrice) && /* @__PURE__ */ jsx("span", {
         className: "list_price",
         children: tagging.listPrice
-      }), tagging.priceCurrencyCode && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.priceCurrencyCode) && /* @__PURE__ */ jsx("span", {
         className: "price_currency_code",
         children: tagging.priceCurrencyCode
-      }), tagging.brand && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.brand) && /* @__PURE__ */ jsx("span", {
         className: "brand",
         children: tagging.brand
-      }), tagging.description && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.description) && /* @__PURE__ */ jsx("span", {
         className: "description",
         children: tagging.description
-      }), tagging.googleCategory && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.googleCategory) && /* @__PURE__ */ jsx("span", {
         className: "description",
         children: tagging.googleCategory
-      }), tagging.condition && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.condition) && /* @__PURE__ */ jsx("span", {
         className: "condition",
         children: tagging.condition
-      }), tagging.gender && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.gender) && /* @__PURE__ */ jsx("span", {
         className: "gender",
         children: tagging.gender
-      }), tagging.ageGroup && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.ageGroup) && /* @__PURE__ */ jsx("span", {
         className: "age_group",
         children: tagging.ageGroup
-      }), tagging.gtin && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.gtin) && /* @__PURE__ */ jsx("span", {
         className: "gtin",
         children: tagging.gtin
-      }), tagging.category && tagging.category.map((category, index) => /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.category) && (tagging == null ? void 0 : tagging.category.map((category, index) => /* @__PURE__ */ jsx("span", {
         className: "category",
         children: category
-      }, index)), tagging.tags1 && tagging.tags1.map((tag, index) => /* @__PURE__ */ jsx("span", {
+      }, index))), (tagging == null ? void 0 : tagging.tags1) && tagging.tags1.map((tag, index) => /* @__PURE__ */ jsx("span", {
         className: "tag1",
         children: tag
-      }, index)), tagging.tags2 && tagging.tags2.map((tag, index) => /* @__PURE__ */ jsx("span", {
+      }, index)), (tagging == null ? void 0 : tagging.tags2) && tagging.tags2.map((tag, index) => /* @__PURE__ */ jsx("span", {
         className: "tag2",
         children: tag
-      }, index)), tagging.tags3 && tagging.tags3.map((tag, index) => /* @__PURE__ */ jsx("span", {
+      }, index)), (tagging == null ? void 0 : tagging.tags3) && tagging.tags3.map((tag, index) => /* @__PURE__ */ jsx("span", {
         className: "tag3",
         children: tag
-      }, index)), tagging.ratingValue && /* @__PURE__ */ jsx("span", {
+      }, index)), (tagging == null ? void 0 : tagging.ratingValue) && /* @__PURE__ */ jsx("span", {
         className: "rating_value",
         children: tagging.ratingValue
-      }), tagging.reviewCount && /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.reviewCount) && /* @__PURE__ */ jsx("span", {
         className: "review_count",
         children: tagging.reviewCount
-      }), tagging.alternateImageUrls && tagging.alternateImageUrls.map((url, index) => /* @__PURE__ */ jsx("span", {
+      }), (tagging == null ? void 0 : tagging.alternateImageUrls) && tagging.alternateImageUrls.map((url, index) => /* @__PURE__ */ jsx("span", {
         className: "alternate_image_url",
         children: url.toString()
-      }, index)), tagging.customFields && Object.keys(tagging.customFields).map((field, index) => tagging.customFields && tagging.customFields[field] && /* @__PURE__ */ jsx("span", {
+      }, index)), (tagging == null ? void 0 : tagging.customFields) && Object.keys(tagging.customFields).map((field, index) => tagging.customFields && tagging.customFields[field] && /* @__PURE__ */ jsx("span", {
         className: field,
         children: tagging.customFields[field]
-      }, index)), tagging.skus && tagging.skus.map((sku, index) => /* @__PURE__ */ jsxs("span", {
+      }, index)), (tagging == null ? void 0 : tagging.skus) && tagging.skus.map((sku, index) => /* @__PURE__ */ jsxs("span", {
         className: "nosto_sku",
-        children: [sku.id && /* @__PURE__ */ jsx("span", {
+        children: [(sku == null ? void 0 : sku.id) && /* @__PURE__ */ jsx("span", {
           className: "product_id",
           children: sku.id
-        }), sku.name && /* @__PURE__ */ jsx("span", {
+        }), (sku == null ? void 0 : sku.name) && /* @__PURE__ */ jsx("span", {
           className: "name",
           children: sku.name
-        }), sku.price && /* @__PURE__ */ jsx("span", {
+        }), (sku == null ? void 0 : sku.price) && /* @__PURE__ */ jsx("span", {
           className: "price",
           children: sku.price
-        }), sku.listPrice && /* @__PURE__ */ jsx("span", {
+        }), (sku == null ? void 0 : sku.listPrice) && /* @__PURE__ */ jsx("span", {
           className: "list_price",
           children: sku.listPrice
-        }), sku.url && /* @__PURE__ */ jsx("span", {
+        }), (sku == null ? void 0 : sku.url) && /* @__PURE__ */ jsx("span", {
           className: "url",
           children: sku.url.toString()
-        }), sku.imageUrl && /* @__PURE__ */ jsx("span", {
+        }), (sku == null ? void 0 : sku.imageUrl) && /* @__PURE__ */ jsx("span", {
           className: "image_url",
           children: sku.imageUrl.toString()
-        }), sku.gtin && /* @__PURE__ */ jsx("span", {
+        }), (sku == null ? void 0 : sku.gtin) && /* @__PURE__ */ jsx("span", {
           className: "gtin",
           children: sku.gtin
-        }), sku.availability && /* @__PURE__ */ jsx("span", {
+        }), (sku == null ? void 0 : sku.availability) && /* @__PURE__ */ jsx("span", {
           className: "availability",
           children: sku.availability
-        }), sku.customFields && Object.keys(sku.customFields).map((field, index2) => sku.customFields && sku.customFields[field] && /* @__PURE__ */ jsx("span", {
+        }), (sku == null ? void 0 : sku.customFields) && Object.keys(sku.customFields).map((field, index2) => sku.customFields && sku.customFields[field] && /* @__PURE__ */ jsx("span", {
           className: field,
           children: sku.customFields[field]
         }, index2))]
@@ -252,13 +236,19 @@ const NostoProduct = ({
 const NostoCategory = ({
   category
 }) => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").viewCategory(category).setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewCategory(category).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          api.placements.injectCampaigns(data.recommendations);
+        });
       });
-    });
-  }, []);
+    }
+  }, [clientScriptLoaded, category, currentVariation]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -301,6 +291,27 @@ const NostoSearch = ({
     })]
   });
 };
+var snakeize = function walk(obj) {
+  if (!obj || typeof obj !== "object")
+    return obj;
+  if (isDate(obj) || isRegex(obj))
+    return obj;
+  if (Array.isArray(obj))
+    return obj.map(walk);
+  return Object.keys(obj).reduce(function(acc, key) {
+    var camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, function(m2, x) {
+      return "_" + x.toLowerCase();
+    });
+    acc[camel] = walk(obj[key]);
+    return acc;
+  }, {});
+};
+var isDate = function(obj) {
+  return Object.prototype.toString.call(obj) === "[object Date]";
+};
+var isRegex = function(obj) {
+  return Object.prototype.toString.call(obj) === "[object RegExp]";
+};
 const NostoOrder = ({
   order
 }) => {
@@ -328,13 +339,22 @@ const NostoOrder = ({
   });
 };
 const NostoHome = () => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").viewFrontPage().setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (currentVariation) {
+      console.log("currentVariation: ", currentVariation);
+    }
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewFrontPage().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          api.placements.injectCampaigns(data.recommendations);
+        });
       });
-    });
-  }, []);
+    }
+  }, [clientScriptLoaded, currentVariation]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -363,27 +383,37 @@ const NostoPlacement = ({
     id
   });
 };
-const NostoContext = createContext({
-  account: void 0
-});
 const NostoProvider = ({
   account,
-  currentVariation,
+  currentVariation = "",
+  multiCurrency = false,
   host,
   children
 }) => {
+  const [clientScriptLoadedState, setClientScriptLoadedState] = React__default.useState(false);
+  const clientScriptLoaded = React__default.useMemo(() => clientScriptLoadedState, [clientScriptLoadedState]);
+  currentVariation = multiCurrency ? currentVariation : "";
   useEffect(() => {
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
-    script.async = true;
-    document.head.appendChild(script);
+    if (!document.querySelectorAll("[nosto-client-script]").length) {
+      const script = document.createElement("script");
+      script.type = "text/javascript";
+      script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
+      script.async = true;
+      script.setAttribute("nosto-client-script", "");
+      script.onload = () => {
+        console.log("Nosto client script loaded");
+        setClientScriptLoadedState(true);
+      };
+      document.head.appendChild(script);
+    }
     window.nostojs = (cb) => (window.nostojs.q = window.nostojs.q || []).push(cb);
     window.nostojs((api) => api.setAutoLoad(false));
   }, []);
   return /* @__PURE__ */ jsx(NostoContext.Provider, {
     value: {
-      account
+      account,
+      clientScriptLoaded,
+      currentVariation
     },
     children
   });
@@ -503,4 +533,4 @@ const NostoSession = ({
   }, [cart || [], customer || {}]);
   return /* @__PURE__ */ jsx("div", {});
 };
-export { NostoFohofo as Nosto404, NostoCategory, NostoCheckout, NostoHome, NostoOrder, NostoOther, NostoPlacement, NostoProduct, NostoProvider, NostoSearch, NostoSession };
+export { NostoFohofo as Nosto404, NostoCategory, NostoCheckout, NostoContext, NostoHome, NostoOrder, NostoOther, NostoPlacement, NostoProduct, NostoProvider, NostoSearch, NostoSession, useNostoContext };

package/dist/index.umd.client.js

@@ -1,4 +1,4 @@
-(function(c,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],a):(c=typeof globalThis!="undefined"?globalThis:c||self,a(c["@nosto/nosto-react"]={},c.React))})(this,function(c,a){"use strict";function P(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}function j(t){if(t&&t.__esModule)return t;var e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return t&&Object.keys(t).forEach(function(s){if(s!=="default"){var n=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(e,s,n.get?n:{enumerable:!0,get:function(){return t[s]}})}}),e.default=t,Object.freeze(e)}var C=P(a),m=j(a),p={exports:{}},f={};/**
+(function(l,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],a):(l=typeof globalThis!="undefined"?globalThis:l||self,a(l["@nosto/nosto-react"]={},l.React))})(this,function(l,a){"use strict";function O(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}function L(s){if(s&&s.__esModule)return s;var e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return s&&Object.keys(s).forEach(function(n){if(n!=="default"){var r=Object.getOwnPropertyDescriptor(s,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:function(){return s[n]}})}}),e.default=s,Object.freeze(e)}var v=O(a),f=L(a),h={exports:{}},y={};/**
  * @license React
  * react-jsx-runtime.production.min.js
  *
@@ -6,4 +6,4 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */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"}})});
+ */var M=v.default,E=Symbol.for("react.element"),T=Symbol.for("react.fragment"),F=Object.prototype.hasOwnProperty,x=M.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,R={key:!0,ref:!0,__self:!0,__source:!0};function S(s,e,n){var r,t={},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)F.call(e,r)&&!R.hasOwnProperty(r)&&(t[r]=e[r]);if(s&&s.defaultProps)for(r in e=s.defaultProps,e)t[r]===void 0&&(t[r]=e[r]);return{$$typeof:E,type:s,key:c,ref:d,props:t,_owner:x.current}}y.Fragment=T,y.jsx=S,y.jsxs=S,h.exports=y;const o=h.exports.jsx,p=h.exports.jsxs,m=h.exports.Fragment,U=()=>(a.useEffect(()=>{window.nostojs(s=>{s.defaultSession().setResponseMode("HTML").viewNotFound().setPlacements(s.placements.getPlacements()).load().then(e=>{s.placements.injectCampaigns(e.recommendations)})})},[]),o(m,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})),A=()=>(a.useEffect(()=>{window.nostojs(s=>{s.defaultSession().setResponseMode("HTML").viewOther().setPlacements(s.placements.getPlacements()).load().then(e=>{s.placements.injectCampaigns(e.recommendations)})})},[]),o(m,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})),b=()=>(a.useEffect(()=>{window.nostojs(s=>{s.defaultSession().setResponseMode("HTML").viewCart().setPlacements(s.placements.getPlacements()).load().then(e=>{s.placements.injectCampaigns(e.recommendations)})})},[]),o(m,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})})),_=a.createContext({account:void 0,currentVariation:""});function N(){const s=a.useContext(_);if(!s)throw new Error("No nosto context found");return s}const D=({product:s,tagging:e})=>{const{clientScriptLoaded:n,currentVariation:r}=N();return a.useEffect(()=>{n&&window.nostojs(t=>{t.defaultSession().setVariation(r).setResponseMode("HTML").viewProduct(s).setPlacements(t.placements.getPlacements()).load().then(c=>{t.placements.injectCampaigns(c.recommendations)})})},[n,r]),p(m,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),p("div",{className:"nosto_product",style:{display:"none"},children:[(e==null?void 0:e.variationId)&&o("span",{className:"variation_id",children:e.variationId}),s&&o("span",{className:"product_id",children:s}),(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((t,c)=>o("span",{className:"category",children:t},c))),(e==null?void 0:e.tags1)&&e.tags1.map((t,c)=>o("span",{className:"tag1",children:t},c)),(e==null?void 0:e.tags2)&&e.tags2.map((t,c)=>o("span",{className:"tag2",children:t},c)),(e==null?void 0:e.tags3)&&e.tags3.map((t,c)=>o("span",{className:"tag3",children:t},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((t,c)=>o("span",{className:"alternate_image_url",children:t.toString()},c)),(e==null?void 0:e.customFields)&&Object.keys(e.customFields).map((t,c)=>e.customFields&&e.customFields[t]&&o("span",{className:t,children:e.customFields[t]},c)),(e==null?void 0:e.skus)&&e.skus.map((t,c)=>p("span",{className:"nosto_sku",children:[(t==null?void 0:t.id)&&o("span",{className:"product_id",children:t.id}),(t==null?void 0:t.name)&&o("span",{className:"name",children:t.name}),(t==null?void 0:t.price)&&o("span",{className:"price",children:t.price}),(t==null?void 0:t.listPrice)&&o("span",{className:"list_price",children:t.listPrice}),(t==null?void 0:t.url)&&o("span",{className:"url",children:t.url.toString()}),(t==null?void 0:t.imageUrl)&&o("span",{className:"image_url",children:t.imageUrl.toString()}),(t==null?void 0:t.gtin)&&o("span",{className:"gtin",children:t.gtin}),(t==null?void 0:t.availability)&&o("span",{className:"availability",children:t.availability}),(t==null?void 0:t.customFields)&&Object.keys(t.customFields).map((d,w)=>t.customFields&&t.customFields[d]&&o("span",{className:d,children:t.customFields[d]},w))]},c))]})]})},H=({category:s})=>{const{clientScriptLoaded:e,currentVariation:n}=N();return a.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").viewCategory(s).setPlacements(r.placements.getPlacements()).load().then(t=>{r.placements.injectCampaigns(t.recommendations)})})},[e,s,n]),p(m,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),o("div",{className:"nosto_category",style:{display:"none"},children:s})]})},V=({query:s})=>(a.useEffect(()=>{window.nostojs(e=>{e.defaultSession().setResponseMode("HTML").viewSearch(s).setPlacements(e.placements.getPlacements()).load().then(n=>{e.placements.injectCampaigns(n.recommendations)})})},[]),p(m,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),o("div",{className:"nosto_search",style:{display:"none"},children:s})]}));var j=function s(e){return!e||typeof e!="object"||I(e)||z(e)?e:Array.isArray(e)?e.map(s):Object.keys(e).reduce(function(n,r){var t=r[0].toLowerCase()+r.slice(1).replace(/([A-Z]+)/g,function(c,d){return"_"+d.toLowerCase()});return n[t]=s(e[r]),n},{})},I=function(s){return Object.prototype.toString.call(s)==="[object Date]"},z=function(s){return Object.prototype.toString.call(s)==="[object RegExp]"};const q=({order:s})=>(a.useEffect(()=>{window.nostojs(e=>{e.defaultSession().setResponseMode("HTML").addOrder(j(s)).setPlacements(e.placements.getPlacements()).load().then(n=>{e.placements.injectCampaigns(n.recommendations)})})},[]),p(m,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),o("div",{className:"nosto_order",style:{display:"none"},children:s.purchase.number})]})),B=()=>{const{clientScriptLoaded:s,currentVariation:e}=N();return a.useEffect(()=>{e&&console.log("currentVariation: ",e),s&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewFrontPage().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[s,e]),o(m,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})},G=({id:s})=>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:s}),$=({account:s,currentVariation:e="",multiCurrency:n=!1,host:r,children:t})=>{const[c,d]=v.default.useState(!1),w=v.default.useMemo(()=>c,[c]);return e=n?e:"",a.useEffect(()=>{if(!document.querySelectorAll("[nosto-client-script]").length){const i=document.createElement("script");i.type="text/javascript",i.src="//"+(r||"connect.nosto.com")+"/include/"+s,i.async=!0,i.setAttribute("nosto-client-script",""),i.onload=()=>{console.log("Nosto client script loaded"),d(!0)},document.head.appendChild(i)}window.nostojs=i=>(window.nostojs.q=window.nostojs.q||[]).push(i),window.nostojs(i=>i.setAutoLoad(!1))},[]),o(_.Provider,{value:{account:s,clientScriptLoaded:w,currentVariation:e},children:t})};var C=Object.prototype.hasOwnProperty;function P(s,e,n){for(n of s.keys())if(u(n,e))return n}function u(s,e){var n,r,t;if(s===e)return!0;if(s&&e&&(n=s.constructor)===e.constructor){if(n===Date)return s.getTime()===e.getTime();if(n===RegExp)return s.toString()===e.toString();if(n===Array){if((r=s.length)===e.length)for(;r--&&u(s[r],e[r]););return r===-1}if(n===Set){if(s.size!==e.size)return!1;for(r of s)if(t=r,t&&typeof t=="object"&&(t=P(e,t),!t)||!e.has(t))return!1;return!0}if(n===Map){if(s.size!==e.size)return!1;for(r of s)if(t=r[0],t&&typeof t=="object"&&(t=P(e,t),!t)||!u(r[1],e.get(t)))return!1;return!0}if(n===ArrayBuffer)s=new Uint8Array(s),e=new Uint8Array(e);else if(n===DataView){if((r=s.byteLength)===e.byteLength)for(;r--&&s.getInt8(r)===e.getInt8(r););return r===-1}if(ArrayBuffer.isView(s)){if((r=s.byteLength)===e.byteLength)for(;r--&&s[r]===e[r];);return r===-1}if(!n||typeof s=="object"){r=0;for(n in s)if(C.call(s,n)&&++r&&!C.call(e,n)||!(n in e)||!u(s[n],e[n]))return!1;return Object.keys(e).length===r}}return s!==s&&e!==e}function J(s){var e=f.useRef(s),n=f.useRef(0);return u(s,e.current)||(e.current=s,n.current+=1),f.useMemo(function(){return e.current},[n.current])}function W(s,e){return f.useEffect(s,J(e))}const Y=({cart:s,customer:e})=>(W(()=>{console.debug(e||void 0);const r=s||void 0;console.debug(r),window.nostojs(t=>{t.defaultSession().setResponseMode("HTML").setCart(j(r)).viewOther().load()})},[s||[],e||{}]),o("div",{}));l.Nosto404=U,l.NostoCategory=H,l.NostoCheckout=b,l.NostoContext=_,l.NostoHome=B,l.NostoOrder=q,l.NostoOther=A,l.NostoPlacement=G,l.NostoProduct=D,l.NostoProvider=$,l.NostoSearch=V,l.NostoSession=Y,l.useNostoContext=N,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nosto/nosto-react",
   "description": "Component library to simply implementing Nosto on React.",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Mridang Agarwalla, Dominik Gilg",
   "license": "ISC",
   "repository": {

package/src/components/Category/index.client.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
+
+const NostoCategory: React.FC<{ category: string }> = ({ category }) => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  useEffect(() => {
+    // @ts-ignore
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .viewCategory(category)
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, category, currentVariation]);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        category
+      </div>
+      <div className="nosto_category" style={{ display: "none" }}>
+        {category}
+      </div>
+    </>
+  );
+};
+
+export default NostoCategory;

package/src/components/Home/index.client.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
+
+const NostoHome: React.FC = () => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  useEffect(() => {
+    if (currentVariation) {
+      console.log("currentVariation: ", currentVariation);
+    }
+    // @ts-ignore
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .viewFrontPage()
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        front
+      </div>
+    </>
+  );
+};
+
+export default NostoHome;

package/src/components/Product/{index.tsx → index.client.tsx}

@@ -1,27 +1,30 @@
 import { Product } from "../../types";
-import stringinate from "../../utils/stringinate";
 import React, { useEffect } from "react";
-import snakeize from "snakeize";
+import { useNostoContext } from "../Provider/context.client";
 
 const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
   product,
   tagging,
 }) => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   useEffect(() => {
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .viewProduct(snakeize(stringinate(tagging)))
-        .setPlacements(api.placements.getPlacements())
-        .load()
-        .then((data: object) => {
-          // @ts-ignore
-          api.placements.injectCampaigns(data.recommendations);
-        });
-    });
-  }, []);
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .viewProduct(product)
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
 
   return (
     <>
@@ -29,81 +32,79 @@ const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
         product
       </div>
       <div className="nosto_product" style={{ display: "none" }}>
-        {tagging.variationId && (
+        {tagging?.variationId && (
           <span className="variation_id">{tagging.variationId}</span>
         )}
-        {tagging.productId && (
-          <span className="product_id">{tagging.productId}</span>
-        )}
-        {tagging.name && <span className="name">{tagging.name}</span>}
-        {tagging.url && <span className="url">{tagging.url.toString()}</span>}
-        {tagging.imageUrl && (
+        {product && <span className="product_id">{product}</span>}
+        {tagging?.name && <span className="name">{tagging.name}</span>}
+        {tagging?.url && <span className="url">{tagging.url.toString()}</span>}
+        {tagging?.imageUrl && (
           <span className="image_url">{tagging.imageUrl.toString()}</span>
         )}
-        {tagging.availability && (
+        {tagging?.availability && (
           <span className="availability">{tagging.availability}</span>
         )}
-        {tagging.price && <span className="price">{tagging.price}</span>}
-        {tagging.listPrice && (
+        {tagging?.price && <span className="price">{tagging.price}</span>}
+        {tagging?.listPrice && (
           <span className="list_price">{tagging.listPrice}</span>
         )}
-        {tagging.priceCurrencyCode && (
+        {tagging?.priceCurrencyCode && (
           <span className="price_currency_code">
             {tagging.priceCurrencyCode}
           </span>
         )}
-        {tagging.brand && <span className="brand">{tagging.brand}</span>}
-        {tagging.description && (
+        {tagging?.brand && <span className="brand">{tagging.brand}</span>}
+        {tagging?.description && (
           <span className="description">{tagging.description}</span>
         )}
-        {tagging.googleCategory && (
+        {tagging?.googleCategory && (
           <span className="description">{tagging.googleCategory}</span>
         )}
-        {tagging.condition && (
+        {tagging?.condition && (
           <span className="condition">{tagging.condition}</span>
         )}
-        {tagging.gender && <span className="gender">{tagging.gender}</span>}
-        {tagging.ageGroup && (
+        {tagging?.gender && <span className="gender">{tagging.gender}</span>}
+        {tagging?.ageGroup && (
           <span className="age_group">{tagging.ageGroup}</span>
         )}
-        {tagging.gtin && <span className="gtin">{tagging.gtin}</span>}
-        {tagging.category &&
-          tagging.category.map((category, index) => (
+        {tagging?.gtin && <span className="gtin">{tagging.gtin}</span>}
+        {tagging?.category &&
+          tagging?.category.map((category, index) => (
             <span className="category" key={index}>
               {category}
             </span>
           ))}
-        {tagging.tags1 &&
+        {tagging?.tags1 &&
           tagging.tags1.map((tag, index) => (
             <span className="tag1" key={index}>
               {tag}
             </span>
           ))}
-        {tagging.tags2 &&
+        {tagging?.tags2 &&
           tagging.tags2.map((tag, index) => (
             <span className="tag2" key={index}>
               {tag}
             </span>
           ))}
-        {tagging.tags3 &&
+        {tagging?.tags3 &&
           tagging.tags3.map((tag, index) => (
             <span className="tag3" key={index}>
               {tag}
             </span>
           ))}
-        {tagging.ratingValue && (
+        {tagging?.ratingValue && (
           <span className="rating_value">{tagging.ratingValue}</span>
         )}
-        {tagging.reviewCount && (
+        {tagging?.reviewCount && (
           <span className="review_count">{tagging.reviewCount}</span>
         )}
-        {tagging.alternateImageUrls &&
+        {tagging?.alternateImageUrls &&
           tagging.alternateImageUrls.map((url, index) => (
             <span className="alternate_image_url" key={index}>
               {url.toString()}
             </span>
           ))}
-        {tagging.customFields &&
+        {tagging?.customFields &&
           Object.keys(tagging.customFields).map(
             (field, index) =>
               tagging.customFields &&
@@ -113,24 +114,24 @@ const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
                 </span>
               )
           )}
-        {tagging.skus &&
+        {tagging?.skus &&
           tagging.skus.map((sku, index) => (
             <span className="nosto_sku" key={index}>
-              {sku.id && <span className="product_id">{sku.id}</span>}
-              {sku.name && <span className="name">{sku.name}</span>}
-              {sku.price && <span className="price">{sku.price}</span>}
-              {sku.listPrice && (
+              {sku?.id && <span className="product_id">{sku.id}</span>}
+              {sku?.name && <span className="name">{sku.name}</span>}
+              {sku?.price && <span className="price">{sku.price}</span>}
+              {sku?.listPrice && (
                 <span className="list_price">{sku.listPrice}</span>
               )}
-              {sku.url && <span className="url">{sku.url.toString()}</span>}
-              {sku.imageUrl && (
+              {sku?.url && <span className="url">{sku.url.toString()}</span>}
+              {sku?.imageUrl && (
                 <span className="image_url">{sku.imageUrl.toString()}</span>
               )}
-              {sku.gtin && <span className="gtin">{sku.gtin}</span>}
-              {sku.availability && (
+              {sku?.gtin && <span className="gtin">{sku.gtin}</span>}
+              {sku?.availability && (
                 <span className="availability">{sku.availability}</span>
               )}
-              {sku.customFields &&
+              {sku?.customFields &&
                 Object.keys(sku.customFields).map(
                   (field, index) =>
                     sku.customFields &&

package/src/components/Provider/context.client.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from "react";
+
+export interface NostoInterface {
+  account: string;
+  clientScriptLoaded: boolean;
+  currentVariation: string;
+}
+
+/* tslint:disable:no-empty */
+export const NostoContext = createContext<NostoInterface>({
+  // @ts-ignore
+  account: undefined,
+  currentVariation: "",
+});
+
+/* tslint:enable:no-empty */
+export function useNostoContext() {
+  const context = useContext(NostoContext);
+
+  if (!context) {
+    throw new Error("No nosto context found");
+  }
+
+  return context;
+}

package/src/components/Provider/index.client.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from "react";
+import { NostoContext } from "./context.client";
+
+interface NostoProviderProps {
+  account: string;
+  currentVariation: string;
+  host: string;
+  children: React.ReactElement;
+  multiCurrency: boolean;
+}
+
+const NostoProvider: React.FC<NostoProviderProps> = ({
+  account,
+  currentVariation = "",
+  multiCurrency = false,
+  host,
+  children,
+}) => {
+  const [clientScriptLoadedState, setClientScriptLoadedState] =
+    React.useState(false);
+  const clientScriptLoaded = React.useMemo(
+    () => clientScriptLoadedState,
+    [clientScriptLoadedState]
+  );
+
+  //Pass currentVariation as empty string if multiCurrency is disabled
+  currentVariation = multiCurrency ? currentVariation : "";
+
+  useEffect(() => {
+    if (!document.querySelectorAll("[nosto-client-script]").length) {
+      const script = document.createElement("script");
+      script.type = "text/javascript";
+      script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
+      script.async = true;
+      script.setAttribute("nosto-client-script", "");
+      script.onload = () => {
+        console.log("Nosto client script loaded");
+        setClientScriptLoadedState(true);
+      };
+      document.head.appendChild(script);
+    }
+
+    window.nostojs = (cb: Function) =>
+      (window.nostojs.q = window.nostojs.q || []).push(cb);
+    // @ts-ignore
+    window.nostojs((api) => api.setAutoLoad(false));
+  }, []);
+
+  return (
+    <NostoContext.Provider
+      value={{ account, clientScriptLoaded, currentVariation }}
+    >
+      {children}
+    </NostoContext.Provider>
+  );
+};
+
+export default NostoProvider;

package/src/index.client.ts

@@ -8,24 +8,30 @@ declare global {
 
 export * from "./types";
 // noinspection JSUnusedGlobalSymbols
-export { default as Nosto404 } from "./components/Fohofo";
+export { default as Nosto404 } from "./components/Fohofo/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoOther } from "./components/Other";
+export { default as NostoOther } from "./components/Other/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoCheckout } from "./components/Checkout";
+export { default as NostoCheckout } from "./components/Checkout/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoProduct } from "./components/Product";
+export { default as NostoProduct } from "./components/Product/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoCategory } from "./components/Category";
+export { default as NostoCategory } from "./components/Category/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoSearch } from "./components/Search";
+export { default as NostoSearch } from "./components/Search/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoOrder } from "./components/Order";
+export { default as NostoOrder } from "./components/Order/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoHome } from "./components/Home";
+export { default as NostoHome } from "./components/Home/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoPlacement } from "./components/Placement";
+export { default as NostoPlacement } from "./components/Placement/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoProvider } from "./components/Provider";
+export { default as NostoProvider } from "./components/Provider/index.client";
 // noinspection JSUnusedGlobalSymbols
-export { default as NostoSession } from "./components/Session";
+export {
+  NostoContext,
+  useNostoContext,
+} from "./components/Provider/context.client";
+// noinspection JSUnusedGlobalSymbols
+export { default as NostoSession } from "./components/Session/index.client";
+//

package/src/components/Category/index.tsx

@@ -1,32 +0,0 @@
-import React, { useEffect } from "react";
-
-const NostoCategory: React.FC<{ category: string }> = ({ category }) => {
-  useEffect(() => {
-    // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .viewCategory(category)
-        .setPlacements(api.placements.getPlacements())
-        .load()
-        .then((data: object) => {
-          // @ts-ignore
-          api.placements.injectCampaigns(data.recommendations);
-        });
-    });
-  }, []);
-
-  return (
-    <>
-      <div className="nosto_page_type" style={{ display: "none" }}>
-        category
-      </div>
-      <div className="nosto_category" style={{ display: "none" }}>
-        {category}
-      </div>
-    </>
-  );
-};
-
-export default NostoCategory;

package/src/components/Home/index.tsx

@@ -1,29 +0,0 @@
-import React, { useEffect } from "react";
-
-const NostoHome: React.FC = () => {
-  useEffect(() => {
-    // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .viewFrontPage()
-        .setPlacements(api.placements.getPlacements())
-        .load()
-        .then((data: object) => {
-          // @ts-ignore
-          api.placements.injectCampaigns(data.recommendations);
-        });
-    });
-  }, []);
-
-  return (
-    <>
-      <div className="nosto_page_type" style={{ display: "none" }}>
-        front
-      </div>
-    </>
-  );
-};
-
-export default NostoHome;

package/src/components/Provider/context.ts

@@ -1,12 +0,0 @@
-import { createContext } from "react";
-
-export interface NostoInterface {
-  account: string;
-}
-
-/* tslint:disable:no-empty */
-export const NostoContext = createContext<NostoInterface>({
-  // @ts-ignore
-  account: undefined
-});
-/* tslint:enable:no-empty */

package/src/components/Provider/index.tsx

@@ -1,37 +0,0 @@
-import React, { useEffect } from "react";
-import { NostoContext } from "./context";
-
-interface NostoProviderProps {
-  account: string;
-  currentVariation: string;
-  host: string;
-  children: React.ReactElement;
-}
-
-const NostoProvider: React.FC<NostoProviderProps> = ({
-  account,
-  currentVariation,
-  host,
-  children,
-}) => {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
-    script.async = true;
-    document.head.appendChild(script);
-
-    window.nostojs = (cb: Function) =>
-      (window.nostojs.q = window.nostojs.q || []).push(cb);
-    // @ts-ignore
-    window.nostojs((api) => api.setAutoLoad(false));
-  }, []);
-
-  return (
-    <NostoContext.Provider value={{ account }}>
-      {children}
-    </NostoContext.Provider>
-  );
-};
-
-export default NostoProvider;