@ikas/storefront 0.0.165-alpha.3 → 0.0.165-alpha.4

package/build/index.es.js

@@ -3,6 +3,7 @@ import fs from 'fs';
 import path$1 from 'path';
 import getConfig from 'next/config';
 import React, { createElement, Fragment as Fragment$1, useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import Script from 'next/script';
 import { observer } from 'mobx-react-lite';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -24236,19 +24237,23 @@ var AnalyticsHead = function (_a) {
                 __html: "dataLayer = [{'gtm.blocklist': ['html']}];",
             } })),
         gtmId && (createElement("script", { dangerouslySetInnerHTML: {
-                __html: "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\n              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\n              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n              })(window,document,'script','dataLayer','" + gtmId + "');",
+                __html: "(function(w,l){" +
+                    "w[l] = w[l] || [];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});" +
+                    "})(window,'dataLayer');",
             } })),
         fbpId && (createElement("script", { dangerouslySetInnerHTML: {
-                __html: "!function(f,b,e,v,n,t,s)\n          {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n          n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n          if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n          n.queue=[];t=b.createElement(e);t.async=!0;\n          t.src=v;s=b.getElementsByTagName(e)[0];\n          s.parentNode.insertBefore(t,s)}(window, document,'script',\n          'https://connect.facebook.net/en_US/fbevents.js');\n          fbq('init', '" + fbpId + "');\n          fbq('track', 'PageView');",
+                __html: "!function(f,b,e,v,n,t,s)\n          {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n          n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n          if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n          n.queue=[];}(window);\n          fbq('init', '" + fbpId + "');\n          fbq('track', 'PageView');",
             } }))));
 };
 var AnalyticsBody = function () {
     var gtmId = IkasStorefrontConfig.gtmId;
     var fbpId = IkasStorefrontConfig.fbpId;
     return (createElement(Fragment$1, null,
+        gtmId && (createElement(Script, { src: "https://www.googletagmanager.com/gtm.js?id=" + gtmId })),
         gtmId && (createElement("noscript", { dangerouslySetInnerHTML: {
                 __html: "<iframe src=\"https://www.googletagmanager.com/ns.html?id=" + gtmId + "\" height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe>",
             } })),
+        fbpId && (createElement(Script, { src: "https://connect.facebook.net/en_US/fbevents.js" })),
         fbpId && (createElement("noscript", { dangerouslySetInnerHTML: {
                 __html: "<img height=\"1\" width=\"1\" style=\"display:none\" \n        src=\"https://www.facebook.com/tr?id=" + fbpId + "&ev=PageView&noscript=1\"/>",
             } }))));
@@ -27598,9 +27603,11 @@ var IkasNavigationLink = /** @class */ (function () {
 }());
 
 var IkasProductDetail = /** @class */ (function () {
-    function IkasProductDetail(product, selectedVariantValues) {
+    function IkasProductDetail(product, selectedVariantValues, router) {
+        this.router = null;
         this.product = new IkasProduct(product);
         this.selectedVariantValues = selectedVariantValues.map(function (vv) { return new IkasVariantValue(vv); });
+        this.router = router;
         makeAutoObservable(this);
     }
     Object.defineProperty(IkasProductDetail.prototype, "mainVariantValue", {
@@ -27678,12 +27685,34 @@ var IkasProductDetail = /** @class */ (function () {
         configurable: true
     });
     IkasProductDetail.prototype.selectVariantValue = function (variantValue) {
+        var _this = this;
+        var _a;
+        var metaData = this.product.metaData;
         var selectedVariantValues = this.selectedVariantValues.map(function (vv) {
             if (vv.variantTypeId === variantValue.variantTypeId)
                 return variantValue;
             return vv;
         });
         this.selectedVariantValues = selectedVariantValues;
+        var variantParams = this.product.variantTypes
+            .map(function (pvt) {
+            var vt = pvt.variantType;
+            var selectedVariant = vt.values.find(function (vv) {
+                return _this.selectedVariantValues.some(function (svv) { return svv.id === vv.id; });
+            });
+            if (selectedVariant)
+                return vt.slug + "=" + selectedVariant.slug;
+        })
+            .filter(function (param) { return !!param; })
+            .join("&");
+        var newUrl = "/" + metaData.slug + "?" + variantParams;
+        if (newUrl === window.location.pathname)
+            return;
+        var isShallow = process.env.NODE_ENV !== "production";
+        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(newUrl, undefined, {
+            shallow: isShallow,
+            scroll: false,
+        });
     };
     return IkasProductDetail;
 }());
@@ -33256,16 +33285,6 @@ function createProductSchema(productDetail) {
     var _a, _b;
     try {
         var isBrowser = typeof window !== "undefined";
-        if (isBrowser) {
-            var urlParams = new URLSearchParams(window.location.search);
-            var vid_1 = urlParams.get("vid");
-            if (vid_1) {
-                var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
-                if (variant) {
-                    productDetail.selectedVariantValues = variant.variantValues;
-                }
-            }
-        }
         var productUrl = isBrowser
             ? "https://" + window.location.hostname + productDetail.href
             : "";
@@ -33895,7 +33914,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                         IkasPageDataProvider.initProductListPropValue(prop, propValue, pageComponentPropValue, router);
                         break;
                     case IkasThemeComponentPropType.PRODUCT_DETAIL:
-                        IkasPageDataProvider.initProductDetailPropValue(prop, propValue, pageComponentPropValue, isBrowser);
+                        IkasPageDataProvider.initProductDetailPropValue(prop, propValue, pageComponentPropValue, router, isBrowser);
                         break;
                     case IkasThemeComponentPropType.PRODUCT_ATTRIBUTE:
                         IkasPageDataProvider.initAttributePropValue(prop, propValue, pageComponentPropValue);
@@ -33964,23 +33983,40 @@ var IkasPageDataProvider = /** @class */ (function () {
     IkasPageDataProvider._initProductListPropValue = function (propValue, router) {
         return new IkasProductList(propValue, router);
     };
-    IkasPageDataProvider.initProductDetailPropValue = function (prop, propValue, pageComponentPropValue, isBrowser) {
-        pageComponentPropValue.propValues[prop.name] = this._initProductDetailPropValue(propValue, isBrowser);
+    IkasPageDataProvider.initProductDetailPropValue = function (prop, propValue, pageComponentPropValue, router, isBrowser) {
+        pageComponentPropValue.propValues[prop.name] = this._initProductDetailPropValue(propValue, router, isBrowser);
     };
-    IkasPageDataProvider._initProductDetailPropValue = function (propValue, isBrowser) {
+    IkasPageDataProvider._initProductDetailPropValue = function (propValue, router, isBrowser) {
         var _propValue = propValue;
         var productDetail = new IkasProductDetail(_propValue.product, _propValue.selectedVariantValues);
         if (isBrowser) {
-            var urlParams = new URLSearchParams(window.location.search);
-            var vid_1 = urlParams.get("vid");
+            var urlParams_1 = new URLSearchParams(window.location.search);
+            var vid_1 = urlParams_1.get("vid");
             if (vid_1) {
                 var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
                 if (variant) {
                     productDetail.selectedVariantValues = variant.variantValues;
                 }
             }
+            else {
+                var productVariantTypeSlugs = productDetail.product.variantTypes.map(function (vt) { return vt.variantType.slug; });
+                var selectedVariantValues_1 = [];
+                productVariantTypeSlugs.forEach(function (slug, vtIndex) {
+                    var productVariantType = productDetail.product.variantTypes[vtIndex];
+                    var variantValueSlug = urlParams_1.get(slug);
+                    if (variantValueSlug) {
+                        var variantValue = productVariantType.variantType.values.find(function (v) { return v.slug === variantValueSlug; });
+                        if (variantValue)
+                            selectedVariantValues_1.push(variantValue);
+                    }
+                });
+                if (selectedVariantValues_1.length ===
+                    productDetail.selectedVariantValues.length) {
+                    productDetail.selectedVariantValues = selectedVariantValues_1;
+                }
+            }
         }
-        return new IkasProductDetail(productDetail.product, productDetail.selectedVariantValues);
+        return new IkasProductDetail(productDetail.product, productDetail.selectedVariantValues, router);
     };
     IkasPageDataProvider.initAttributePropValue = function (prop, propValue, pageComponentPropValue) {
         pageComponentPropValue.propValues[prop.name] = IkasPageDataProvider._initAttributePropValue(propValue);
@@ -34056,7 +34092,7 @@ var IkasPageDataProvider = /** @class */ (function () {
             case IkasThemeComponentPropType.LINK:
                 return this._initLinkPropValue(propValue);
             case IkasThemeComponentPropType.PRODUCT_DETAIL:
-                return this._initProductDetailPropValue(propValue, isBrowser);
+                return this._initProductDetailPropValue(propValue, router, isBrowser);
             case IkasThemeComponentPropType.PRODUCT_LIST:
                 return this._initProductListPropValue(propValue, router);
             case IkasThemeComponentPropType.PRODUCT_ATTRIBUTE:

package/build/index.js

@@ -7,6 +7,7 @@ var fs = require('fs');
 var path$1 = require('path');
 var getConfig = require('next/config');
 var React = require('react');
+var Script = require('next/script');
 var mobxReactLite = require('mobx-react-lite');
 var Head = require('next/head');
 var router = require('next/router');
@@ -22,6 +23,7 @@ var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 var path__default = /*#__PURE__*/_interopDefaultLegacy(path$1);
 var getConfig__default = /*#__PURE__*/_interopDefaultLegacy(getConfig);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Script__default = /*#__PURE__*/_interopDefaultLegacy(Script);
 var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
 var crypto__default = /*#__PURE__*/_interopDefaultLegacy(crypto$1);
 var NextImage__default = /*#__PURE__*/_interopDefaultLegacy(NextImage);
@@ -24244,19 +24246,23 @@ var AnalyticsHead = function (_a) {
                 __html: "dataLayer = [{'gtm.blocklist': ['html']}];",
             } })),
         gtmId && (React.createElement("script", { dangerouslySetInnerHTML: {
-                __html: "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\n              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\n              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n              })(window,document,'script','dataLayer','" + gtmId + "');",
+                __html: "(function(w,l){" +
+                    "w[l] = w[l] || [];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});" +
+                    "})(window,'dataLayer');",
             } })),
         fbpId && (React.createElement("script", { dangerouslySetInnerHTML: {
-                __html: "!function(f,b,e,v,n,t,s)\n          {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n          n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n          if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n          n.queue=[];t=b.createElement(e);t.async=!0;\n          t.src=v;s=b.getElementsByTagName(e)[0];\n          s.parentNode.insertBefore(t,s)}(window, document,'script',\n          'https://connect.facebook.net/en_US/fbevents.js');\n          fbq('init', '" + fbpId + "');\n          fbq('track', 'PageView');",
+                __html: "!function(f,b,e,v,n,t,s)\n          {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n          n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n          if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n          n.queue=[];}(window);\n          fbq('init', '" + fbpId + "');\n          fbq('track', 'PageView');",
             } }))));
 };
 var AnalyticsBody = function () {
     var gtmId = IkasStorefrontConfig.gtmId;
     var fbpId = IkasStorefrontConfig.fbpId;
     return (React.createElement(React.Fragment, null,
+        gtmId && (React.createElement(Script__default['default'], { src: "https://www.googletagmanager.com/gtm.js?id=" + gtmId })),
         gtmId && (React.createElement("noscript", { dangerouslySetInnerHTML: {
                 __html: "<iframe src=\"https://www.googletagmanager.com/ns.html?id=" + gtmId + "\" height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe>",
             } })),
+        fbpId && (React.createElement(Script__default['default'], { src: "https://connect.facebook.net/en_US/fbevents.js" })),
         fbpId && (React.createElement("noscript", { dangerouslySetInnerHTML: {
                 __html: "<img height=\"1\" width=\"1\" style=\"display:none\" \n        src=\"https://www.facebook.com/tr?id=" + fbpId + "&ev=PageView&noscript=1\"/>",
             } }))));
@@ -27581,9 +27587,11 @@ var IkasNavigationLink = /** @class */ (function () {
 }());
 
 var IkasProductDetail = /** @class */ (function () {
-    function IkasProductDetail(product, selectedVariantValues) {
+    function IkasProductDetail(product, selectedVariantValues, router) {
+        this.router = null;
         this.product = new IkasProduct(product);
         this.selectedVariantValues = selectedVariantValues.map(function (vv) { return new IkasVariantValue(vv); });
+        this.router = router;
         mobx.makeAutoObservable(this);
     }
     Object.defineProperty(IkasProductDetail.prototype, "mainVariantValue", {
@@ -27661,12 +27669,34 @@ var IkasProductDetail = /** @class */ (function () {
         configurable: true
     });
     IkasProductDetail.prototype.selectVariantValue = function (variantValue) {
+        var _this = this;
+        var _a;
+        var metaData = this.product.metaData;
         var selectedVariantValues = this.selectedVariantValues.map(function (vv) {
             if (vv.variantTypeId === variantValue.variantTypeId)
                 return variantValue;
             return vv;
         });
         this.selectedVariantValues = selectedVariantValues;
+        var variantParams = this.product.variantTypes
+            .map(function (pvt) {
+            var vt = pvt.variantType;
+            var selectedVariant = vt.values.find(function (vv) {
+                return _this.selectedVariantValues.some(function (svv) { return svv.id === vv.id; });
+            });
+            if (selectedVariant)
+                return vt.slug + "=" + selectedVariant.slug;
+        })
+            .filter(function (param) { return !!param; })
+            .join("&");
+        var newUrl = "/" + metaData.slug + "?" + variantParams;
+        if (newUrl === window.location.pathname)
+            return;
+        var isShallow = process.env.NODE_ENV !== "production";
+        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(newUrl, undefined, {
+            shallow: isShallow,
+            scroll: false,
+        });
     };
     return IkasProductDetail;
 }());
@@ -33236,16 +33266,6 @@ function createProductSchema(productDetail) {
     var _a, _b;
     try {
         var isBrowser = typeof window !== "undefined";
-        if (isBrowser) {
-            var urlParams = new URLSearchParams(window.location.search);
-            var vid_1 = urlParams.get("vid");
-            if (vid_1) {
-                var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
-                if (variant) {
-                    productDetail.selectedVariantValues = variant.variantValues;
-                }
-            }
-        }
         var productUrl = isBrowser
             ? "https://" + window.location.hostname + productDetail.href
             : "";
@@ -33875,7 +33895,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                         IkasPageDataProvider.initProductListPropValue(prop, propValue, pageComponentPropValue, router);
                         break;
                     case exports.IkasThemeComponentPropType.PRODUCT_DETAIL:
-                        IkasPageDataProvider.initProductDetailPropValue(prop, propValue, pageComponentPropValue, isBrowser);
+                        IkasPageDataProvider.initProductDetailPropValue(prop, propValue, pageComponentPropValue, router, isBrowser);
                         break;
                     case exports.IkasThemeComponentPropType.PRODUCT_ATTRIBUTE:
                         IkasPageDataProvider.initAttributePropValue(prop, propValue, pageComponentPropValue);
@@ -33944,23 +33964,40 @@ var IkasPageDataProvider = /** @class */ (function () {
     IkasPageDataProvider._initProductListPropValue = function (propValue, router) {
         return new IkasProductList(propValue, router);
     };
-    IkasPageDataProvider.initProductDetailPropValue = function (prop, propValue, pageComponentPropValue, isBrowser) {
-        pageComponentPropValue.propValues[prop.name] = this._initProductDetailPropValue(propValue, isBrowser);
+    IkasPageDataProvider.initProductDetailPropValue = function (prop, propValue, pageComponentPropValue, router, isBrowser) {
+        pageComponentPropValue.propValues[prop.name] = this._initProductDetailPropValue(propValue, router, isBrowser);
     };
-    IkasPageDataProvider._initProductDetailPropValue = function (propValue, isBrowser) {
+    IkasPageDataProvider._initProductDetailPropValue = function (propValue, router, isBrowser) {
         var _propValue = propValue;
         var productDetail = new IkasProductDetail(_propValue.product, _propValue.selectedVariantValues);
         if (isBrowser) {
-            var urlParams = new URLSearchParams(window.location.search);
-            var vid_1 = urlParams.get("vid");
+            var urlParams_1 = new URLSearchParams(window.location.search);
+            var vid_1 = urlParams_1.get("vid");
             if (vid_1) {
                 var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
                 if (variant) {
                     productDetail.selectedVariantValues = variant.variantValues;
                 }
             }
+            else {
+                var productVariantTypeSlugs = productDetail.product.variantTypes.map(function (vt) { return vt.variantType.slug; });
+                var selectedVariantValues_1 = [];
+                productVariantTypeSlugs.forEach(function (slug, vtIndex) {
+                    var productVariantType = productDetail.product.variantTypes[vtIndex];
+                    var variantValueSlug = urlParams_1.get(slug);
+                    if (variantValueSlug) {
+                        var variantValue = productVariantType.variantType.values.find(function (v) { return v.slug === variantValueSlug; });
+                        if (variantValue)
+                            selectedVariantValues_1.push(variantValue);
+                    }
+                });
+                if (selectedVariantValues_1.length ===
+                    productDetail.selectedVariantValues.length) {
+                    productDetail.selectedVariantValues = selectedVariantValues_1;
+                }
+            }
         }
-        return new IkasProductDetail(productDetail.product, productDetail.selectedVariantValues);
+        return new IkasProductDetail(productDetail.product, productDetail.selectedVariantValues, router);
     };
     IkasPageDataProvider.initAttributePropValue = function (prop, propValue, pageComponentPropValue) {
         pageComponentPropValue.propValues[prop.name] = IkasPageDataProvider._initAttributePropValue(propValue);
@@ -34036,7 +34073,7 @@ var IkasPageDataProvider = /** @class */ (function () {
             case exports.IkasThemeComponentPropType.LINK:
                 return this._initLinkPropValue(propValue);
             case exports.IkasThemeComponentPropType.PRODUCT_DETAIL:
-                return this._initProductDetailPropValue(propValue, isBrowser);
+                return this._initProductDetailPropValue(propValue, router, isBrowser);
             case exports.IkasThemeComponentPropType.PRODUCT_LIST:
                 return this._initProductListPropValue(propValue, router);
             case exports.IkasThemeComponentPropType.PRODUCT_ATTRIBUTE:

package/build/models/ui/product-detail/index.d.ts

@@ -1,9 +1,11 @@
 import { IkasProduct, IkasVariantValue } from "../../index";
+import { NextRouter } from "next/router";
 import { IkasProductVariant, IkasVariantType } from "../../data/index";
 export declare class IkasProductDetail {
     product: IkasProduct;
     selectedVariantValues: IkasVariantValue[];
-    constructor(product: IkasProduct, selectedVariantValues: IkasVariantValue[]);
+    private router?;
+    constructor(product: IkasProduct, selectedVariantValues: IkasVariantValue[], router?: NextRouter);
     get mainVariantValue(): IkasVariantValue | undefined;
     get selectedVariant(): IkasProductVariant;
     get href(): string;

package/build/utils/providers/page-data.d.ts

@@ -61,8 +61,8 @@ export declare class IkasPageDataProvider {
     static _initCategoryListPropValue(propValue: IkasCategoryListParams): IkasCategoryList;
     static initProductListPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue, router: NextRouter): void;
     static _initProductListPropValue(propValue: IkasProductListParams, router: NextRouter): IkasProductList;
-    static initProductDetailPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue, isBrowser?: boolean): void;
-    static _initProductDetailPropValue(propValue: any, isBrowser?: boolean): IkasProductDetail;
+    static initProductDetailPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue, router: NextRouter, isBrowser?: boolean): void;
+    static _initProductDetailPropValue(propValue: any, router: NextRouter, isBrowser?: boolean): IkasProductDetail;
     static initAttributePropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue): void;
     static _initAttributePropValue(propValue: IkasProductAttributeValue[]): IkasProductAttributeValue[];
     static initAttributeListPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "0.0.165-alpha.3",
+  "version": "0.0.165-alpha.4",
   "main": "./build/index.js",
   "module": "./build/index.es.js",
   "author": "Umut Ozan Yıldırım",
@@ -18,9 +18,9 @@
   "peerDependencies": {
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "10.0.6",
-    "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "next": "11.1.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
   "dependencies": {
     "@apollo/client": "^3.2.0",
@@ -71,12 +71,12 @@
     "jest": "^26.4.2",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "10.0.6",
+    "next": "11.1.2",
     "node-sass": "^5.0.0",
     "postcss": "^8.2.4",
     "prettier": "^2.2.1",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "rollup": "^2.38.4",
     "rollup-plugin-copy-assets": "^2.0.3",
     "rollup-plugin-node-polyfills": "^0.2.1",