@nosto/nosto-react 0.1.3 → 0.1.4

package/dist/index.es.client.js

@@ -1,5 +1,16 @@
 import * as React from "react";
-import React__default, { useEffect, createContext, useContext } from "react";
+import React__default, { createContext, useContext, useEffect } from "react";
+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 jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -34,13 +45,19 @@ const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
 const NostoFohofo = () => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").viewNotFound().setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewNotFound().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",
@@ -52,13 +69,19 @@ const NostoFohofo = () => {
   });
 };
 const NostoOther = () => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").viewOther().setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewOther().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",
@@ -70,13 +93,19 @@ const NostoOther = () => {
   });
 };
 const NostoCheckout = () => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").viewCart().setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewCart().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",
@@ -87,17 +116,6 @@ const NostoCheckout = () => {
     })
   });
 };
-const NostoContext = createContext({
-  account: void 0,
-  currentVariation: ""
-});
-function useNostoContext() {
-  const context = useContext(NostoContext);
-  if (!context) {
-    throw new Error("No nosto context found");
-  }
-  return context;
-}
 const NostoProduct = ({
   product,
   tagging
@@ -268,13 +286,19 @@ const NostoCategory = ({
 const NostoSearch = ({
   query
 }) => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          api.placements.injectCampaigns(data.recommendations);
+        });
       });
-    });
-  }, []);
+    }
+  }, [clientScriptLoaded, currentVariation, query]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -315,13 +339,19 @@ var isRegex = function(obj) {
 const NostoOrder = ({
   order
 }) => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").addOrder(snakeize(order)).setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").addOrder(snakeize(order)).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",

package/dist/index.umd.client.js

@@ -1,4 +1,4 @@
-(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={};/**
+(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 v=L(i),h=O(i);const _=i.createContext({account:void 0,currentVariation:""});function m(){const t=i.useContext(_);if(!t)throw new Error("No nosto context found");return t}var y={exports:{}},N={};/**
  * @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 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"}})});
+ */var M=v.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,a=null;n!==void 0&&(c=""+n),e.key!==void 0&&(c=""+e.key),e.ref!==void 0&&(a=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:a,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}=m();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"})})},U=()=>{const{clientScriptLoaded:t,currentVariation:e}=m();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"})})},A=()=>{const{clientScriptLoaded:t,currentVariation:e}=m();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"})})},b=({product:t,tagging:e})=>{const{clientScriptLoaded:n,currentVariation:r}=m();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]),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((a,w)=>s.customFields&&s.customFields[a]&&o("span",{className:a,children:s.customFields[a]},w))]},c))]})]})},D=({category:t})=>{const{clientScriptLoaded:e,currentVariation:n}=m();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})]})},H=({query:t})=>{const{clientScriptLoaded:e,currentVariation:n}=m();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,a){return"_"+a.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}=m();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}=m();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,a]=v.default.useState(!1),w=v.default.useMemo(()=>c,[c]);return e=n?e:"",i.useEffect(()=>{if(!document.querySelectorAll("[nosto-client-script]").length){const d=document.createElement("script");d.type="text/javascript",d.src="//"+(r||"connect.nosto.com")+"/include/"+t,d.async=!0,d.setAttribute("nosto-client-script",""),d.onload=()=>{console.log("Nosto client script loaded"),a(!0)},document.head.appendChild(d)}window.nostojs=d=>(window.nostojs.q=window.nostojs.q||[]).push(d),window.nostojs(d=>d.setAutoLoad(!1))},[]),o(_.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})=>(W(()=>{console.debug(e||void 0);const r=t||void 0;console.debug(r),window.nostojs(s=>{s.defaultSession().setResponseMode("HTML").setCart(j(r)).viewOther().load()})},[t||[],e||{}]),o("div",{}));l.Nosto404=R,l.NostoCategory=D,l.NostoCheckout=A,l.NostoContext=_,l.NostoHome=B,l.NostoOrder=q,l.NostoOther=U,l.NostoPlacement=G,l.NostoProduct=b,l.NostoProvider=$,l.NostoSearch=H,l.NostoSession=Y,l.useNostoContext=m,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.3",
+  "version": "0.1.4",
   "author": "Mridang Agarwalla, Dominik Gilg",
   "license": "ISC",
   "repository": {

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

@@ -1,21 +1,26 @@
 import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
 
 const NostoCheckout: React.FC = () => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   useEffect(() => {
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .viewCart()
-        .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")
+          .viewCart()
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
 
   return (
     <>

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

@@ -1,21 +1,26 @@
 import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
 
 const NostoFohofo: React.FC = () => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   useEffect(() => {
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .viewNotFound()
-        .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")
+          .viewNotFound()
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
 
   return (
     <>

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

@@ -1,27 +1,32 @@
 import { Purchase } from "../../types";
 import React, { useEffect } from "react";
 import snakeize from "snakeize";
+import { useNostoContext } from "../Provider/context.client";
 
 export interface OrderProps {
   purchase: Purchase;
 }
 
 const NostoOrder: React.FC<{ order: OrderProps }> = ({ order }) => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   useEffect(() => {
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .addOrder(snakeize(order))
-        .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")
+          .addOrder(snakeize(order))
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
 
   return (
     <>

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

@@ -1,21 +1,26 @@
 import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
 
 const NostoOther: React.FC = () => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   useEffect(() => {
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .viewOther()
-        .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")
+          .viewOther()
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
 
   return (
     <>

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

@@ -1,21 +1,26 @@
 import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
 
 const NostoSearch: React.FC<{ query: string }> = ({ query }) => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   useEffect(() => {
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .viewSearch(query)
-        .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")
+          .viewSearch(query)
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation, query]);
 
   return (
     <>