@ikas/storefront 0.0.25 → 0.0.27

package/build/components/page/head.d.ts

@@ -1,7 +1,10 @@
 import * as React from "react";
+import { IkasThemePage } from "../../models/index";
 declare type Props = {
+    page?: IkasThemePage;
     pageTitle?: string | null;
     description?: string | null;
+    pageSpecificDataStr?: string;
 };
 export declare const IkasPageHead: React.FC<Props>;
 export {};

package/build/components/page/index.d.ts

@@ -4,6 +4,7 @@ import { IkasPageComponentPropValue } from "../../utils/index";
 declare type Props = {
     propValues: IkasPageComponentPropValue[];
     page?: IkasThemePage;
+    pageSpecificDataStr?: string;
 };
 export declare const IkasPage: React.FC<Props>;
 export {};

package/build/index.es.js

@@ -11634,7 +11634,7 @@ var IkasPageDataProvider = /** @class */ (function () {
     IkasPageDataProvider.isServer = function () {
         return typeof window === "undefined";
     };
-    IkasPageDataProvider.initPropValues = function (propValuesStr, router) {
+    IkasPageDataProvider.initPropValues = function (propValuesStr, router, isBrowser) {
         var pageComponentPropValues = JSON.parse(propValuesStr).map(function (v) { return ({
             pageComponent: new IkasThemePageComponent(v.pageComponent),
             component: new IkasThemeComponent(v.component),
@@ -11669,7 +11669,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                         IkasPageDataProvider.initProductListPropValue(prop, propValue, pageComponentPropValue);
                         break;
                     case IkasThemeComponentPropType.PRODUCT_DETAIL:
-                        IkasPageDataProvider.initProductDetailPropValue(prop, propValue, pageComponentPropValue, router);
+                        IkasPageDataProvider.initProductDetailPropValue(prop, propValue, pageComponentPropValue, router, isBrowser);
                         break;
                     case IkasThemeComponentPropType.LINK:
                     case IkasThemeComponentPropType.LIST_OF_LINK:
@@ -11700,10 +11700,20 @@ var IkasPageDataProvider = /** @class */ (function () {
         var productList = new IkasProductList(propValue);
         pageComponentPropValue.propValues[prop.name] = productList;
     };
-    IkasPageDataProvider.initProductDetailPropValue = function (prop, propValue, pageComponentPropValue, router) {
+    IkasPageDataProvider.initProductDetailPropValue = function (prop, propValue, pageComponentPropValue, router, isBrowser) {
         var usePageData = propValue.usePageData;
         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");
+            if (vid_1) {
+                var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
+                if (variant) {
+                    productDetail.selectedVariantValues = variant.variantValues;
+                }
+            }
+        }
         pageComponentPropValue.propValues[prop.name] = new IkasProductDetail(productDetail.product, productDetail.selectedVariantValues, usePageData, router);
     };
     IkasPageDataProvider.initLinkPropValue = function (prop, propValue, pageComponentPropValue) {
@@ -13650,7 +13660,7 @@ var IkasProductDetail = /** @class */ (function () {
         var newUrl = "/" + metaData.slug + "-" + this.selectedVariantValues
             .map(function (vv) { return vv.slug; })
             .join("-");
-        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(newUrl);
+        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(newUrl, undefined, { shallow: true });
     };
     return IkasProductDetail;
 }());
@@ -18362,7 +18372,7 @@ var IkasCustomerAPI = /** @class */ (function () {
                     case 3:
                         err_5 = _b.sent();
                         console.log(err_5);
-                        return [3 /*break*/, 4];
+                        return [2 /*return*/, false];
                     case 4: return [2 /*return*/, true];
                 }
             });
@@ -22672,11 +22682,62 @@ var PolicyModal = observer(function (_a) {
 });
 
 var IkasPageHead = observer(function (_a) {
-    var pageTitle = _a.pageTitle, description = _a.description;
+    var page = _a.page, pageTitle = _a.pageTitle, description = _a.description, pageSpecificDataStr = _a.pageSpecificDataStr;
+    var schema;
+    if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === IkasThemePageType.PRODUCT) {
+        schema = createProductSchema(pageSpecificDataStr);
+    }
     return (createElement(Head, null,
         createElement("title", null, pageTitle || ""),
-        createElement("meta", { name: "description", content: description || "" })));
-});
+        createElement("meta", { name: "description", content: description || "" }),
+        !!schema && (createElement("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
+                __html: JSON.stringify(schema),
+            } }))));
+});
+function createProductSchema(pageSpecificDataStr) {
+    var _a;
+    var productDetailParsed = JSON.parse(pageSpecificDataStr);
+    var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
+    return {
+        "@context": "https://schema.org/",
+        "@type": "Product",
+        name: productDetail.product.name,
+        image: productDetail.selectedVariant.images.map(function (i) { return i.src; }),
+        description: "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
+        sku: productDetail.selectedVariant.sku,
+        mpn: "925872",
+        brand: {
+            "@type": "Brand",
+            name: (_a = productDetail.product.brand) === null || _a === void 0 ? void 0 : _a.name,
+        },
+        review: {
+            "@type": "Review",
+            reviewRating: {
+                "@type": "Rating",
+                ratingValue: "4",
+                bestRating: "5",
+            },
+            author: {
+                "@type": "Person",
+                name: "Fred Benson",
+            },
+        },
+        aggregateRating: {
+            "@type": "AggregateRating",
+            ratingValue: "4.4",
+            reviewCount: "89",
+        },
+        offers: {
+            "@type": "Offer",
+            url: "https://example.com/anvil",
+            priceCurrency: productDetail.selectedVariant.price.currency,
+            price: productDetail.selectedVariant.price.finalPrice,
+            priceValidUntil: "2020-11-20",
+            itemCondition: "https://schema.org/UsedCondition",
+            availability: "https://schema.org/InStock",
+        },
+    };
+}
 
 var IkasCheckoutPage = observer(function (_a) {
     var _b, _c, _d;
@@ -22836,7 +22897,7 @@ var ThemeComponent = observer(function (_a) {
 
 var IkasPage = observer(function (_a) {
     var _b, _c;
-    var propValues = _a.propValues, page = _a.page;
+    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr;
     var renderComponent = function (pageComponent, index) {
         var pageComponentPropValue = propValues.find(function (pv) { return pv.pageComponent.id === pageComponent.id; });
         return (createElement(ThemeComponent, { key: pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, pageComponent: pageComponent }));
@@ -22849,7 +22910,7 @@ var IkasPage = observer(function (_a) {
     if (!page)
         return null;
     return (createElement(Fragment, null,
-        createElement(IkasPageHead, { pageTitle: page.pageTitle, description: page.description }),
+        createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr }),
         createElement("div", { style: pageStyle },
             createElement("div", null,
                 headerComponent && renderComponent(headerComponent, -1),
@@ -23343,11 +23404,16 @@ var home = /*#__PURE__*/Object.freeze({
 var Page$1 = function (_a) {
     var page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, propValuesStr = _a.propValuesStr;
     var router = useRouter();
-    var propValues = computed(function () {
-        return IkasPageDataProvider.initPropValues(propValuesStr, router);
-    });
+    var _b = useState(false), isBrowser = _b[0], setIsBrowser = _b[1];
+    var _c = useState(IkasPageDataProvider.initPropValues(propValuesStr, router)), propValues = _c[0], setPropValues = _c[1];
+    useEffect(function () {
+        setIsBrowser(typeof window !== "undefined");
+    }, []);
+    useEffect(function () {
+        setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router, isBrowser));
+    }, [isBrowser]);
     handleGTM(page, pageSpecificDataStr);
-    return createElement(IkasPage, { page: page, propValues: propValues.get() });
+    return (createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr }));
 };
 var index$1 = observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {

package/build/index.js

@@ -11647,7 +11647,7 @@ var IkasPageDataProvider = /** @class */ (function () {
     IkasPageDataProvider.isServer = function () {
         return typeof window === "undefined";
     };
-    IkasPageDataProvider.initPropValues = function (propValuesStr, router) {
+    IkasPageDataProvider.initPropValues = function (propValuesStr, router, isBrowser) {
         var pageComponentPropValues = JSON.parse(propValuesStr).map(function (v) { return ({
             pageComponent: new IkasThemePageComponent(v.pageComponent),
             component: new IkasThemeComponent(v.component),
@@ -11682,7 +11682,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                         IkasPageDataProvider.initProductListPropValue(prop, propValue, pageComponentPropValue);
                         break;
                     case exports.IkasThemeComponentPropType.PRODUCT_DETAIL:
-                        IkasPageDataProvider.initProductDetailPropValue(prop, propValue, pageComponentPropValue, router);
+                        IkasPageDataProvider.initProductDetailPropValue(prop, propValue, pageComponentPropValue, router, isBrowser);
                         break;
                     case exports.IkasThemeComponentPropType.LINK:
                     case exports.IkasThemeComponentPropType.LIST_OF_LINK:
@@ -11713,10 +11713,20 @@ var IkasPageDataProvider = /** @class */ (function () {
         var productList = new IkasProductList(propValue);
         pageComponentPropValue.propValues[prop.name] = productList;
     };
-    IkasPageDataProvider.initProductDetailPropValue = function (prop, propValue, pageComponentPropValue, router) {
+    IkasPageDataProvider.initProductDetailPropValue = function (prop, propValue, pageComponentPropValue, router, isBrowser) {
         var usePageData = propValue.usePageData;
         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");
+            if (vid_1) {
+                var variant = productDetail.product.variants.find(function (v) { return v.id === vid_1; });
+                if (variant) {
+                    productDetail.selectedVariantValues = variant.variantValues;
+                }
+            }
+        }
         pageComponentPropValue.propValues[prop.name] = new IkasProductDetail(productDetail.product, productDetail.selectedVariantValues, usePageData, router);
     };
     IkasPageDataProvider.initLinkPropValue = function (prop, propValue, pageComponentPropValue) {
@@ -13636,7 +13646,7 @@ var IkasProductDetail = /** @class */ (function () {
         var newUrl = "/" + metaData.slug + "-" + this.selectedVariantValues
             .map(function (vv) { return vv.slug; })
             .join("-");
-        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(newUrl);
+        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(newUrl, undefined, { shallow: true });
     };
     return IkasProductDetail;
 }());
@@ -18346,7 +18356,7 @@ var IkasCustomerAPI = /** @class */ (function () {
                     case 3:
                         err_5 = _b.sent();
                         console.log(err_5);
-                        return [3 /*break*/, 4];
+                        return [2 /*return*/, false];
                     case 4: return [2 /*return*/, true];
                 }
             });
@@ -22656,11 +22666,62 @@ var PolicyModal = mobxReactLite.observer(function (_a) {
 });
 
 var IkasPageHead = mobxReactLite.observer(function (_a) {
-    var pageTitle = _a.pageTitle, description = _a.description;
+    var page = _a.page, pageTitle = _a.pageTitle, description = _a.description, pageSpecificDataStr = _a.pageSpecificDataStr;
+    var schema;
+    if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === exports.IkasThemePageType.PRODUCT) {
+        schema = createProductSchema(pageSpecificDataStr);
+    }
     return (React.createElement(Head__default['default'], null,
         React.createElement("title", null, pageTitle || ""),
-        React.createElement("meta", { name: "description", content: description || "" })));
-});
+        React.createElement("meta", { name: "description", content: description || "" }),
+        !!schema && (React.createElement("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
+                __html: JSON.stringify(schema),
+            } }))));
+});
+function createProductSchema(pageSpecificDataStr) {
+    var _a;
+    var productDetailParsed = JSON.parse(pageSpecificDataStr);
+    var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
+    return {
+        "@context": "https://schema.org/",
+        "@type": "Product",
+        name: productDetail.product.name,
+        image: productDetail.selectedVariant.images.map(function (i) { return i.src; }),
+        description: "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
+        sku: productDetail.selectedVariant.sku,
+        mpn: "925872",
+        brand: {
+            "@type": "Brand",
+            name: (_a = productDetail.product.brand) === null || _a === void 0 ? void 0 : _a.name,
+        },
+        review: {
+            "@type": "Review",
+            reviewRating: {
+                "@type": "Rating",
+                ratingValue: "4",
+                bestRating: "5",
+            },
+            author: {
+                "@type": "Person",
+                name: "Fred Benson",
+            },
+        },
+        aggregateRating: {
+            "@type": "AggregateRating",
+            ratingValue: "4.4",
+            reviewCount: "89",
+        },
+        offers: {
+            "@type": "Offer",
+            url: "https://example.com/anvil",
+            priceCurrency: productDetail.selectedVariant.price.currency,
+            price: productDetail.selectedVariant.price.finalPrice,
+            priceValidUntil: "2020-11-20",
+            itemCondition: "https://schema.org/UsedCondition",
+            availability: "https://schema.org/InStock",
+        },
+    };
+}
 
 var IkasCheckoutPage = mobxReactLite.observer(function (_a) {
     var _b, _c, _d;
@@ -22820,7 +22881,7 @@ var ThemeComponent = mobxReactLite.observer(function (_a) {
 
 var IkasPage = mobxReactLite.observer(function (_a) {
     var _b, _c;
-    var propValues = _a.propValues, page = _a.page;
+    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr;
     var renderComponent = function (pageComponent, index) {
         var pageComponentPropValue = propValues.find(function (pv) { return pv.pageComponent.id === pageComponent.id; });
         return (React.createElement(ThemeComponent, { key: pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, pageComponent: pageComponent }));
@@ -22833,7 +22894,7 @@ var IkasPage = mobxReactLite.observer(function (_a) {
     if (!page)
         return null;
     return (React.createElement(React.Fragment, null,
-        React.createElement(IkasPageHead, { pageTitle: page.pageTitle, description: page.description }),
+        React.createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr }),
         React.createElement("div", { style: pageStyle },
             React.createElement("div", null,
                 headerComponent && renderComponent(headerComponent, -1),
@@ -23327,11 +23388,16 @@ var home = /*#__PURE__*/Object.freeze({
 var Page$1 = function (_a) {
     var page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, propValuesStr = _a.propValuesStr;
     var router$1 = router.useRouter();
-    var propValues = mobx.computed(function () {
-        return IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    });
+    var _b = React.useState(false), isBrowser = _b[0], setIsBrowser = _b[1];
+    var _c = React.useState(IkasPageDataProvider.initPropValues(propValuesStr, router$1)), propValues = _c[0], setPropValues = _c[1];
+    React.useEffect(function () {
+        setIsBrowser(typeof window !== "undefined");
+    }, []);
+    React.useEffect(function () {
+        setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router$1, isBrowser));
+    }, [isBrowser]);
     handleGTM(page, pageSpecificDataStr);
-    return React.createElement(IkasPage, { page: page, propValues: propValues.get() });
+    return (React.createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr }));
 };
 var index$1 = mobxReactLite.observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {

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

@@ -22,13 +22,13 @@ export declare class IkasPageDataProvider {
     getPageComponentPropValue(pageComponent: IkasThemePageComponent, prop: IkasThemeComponentProp): Promise<any>;
     private setPageMetaData;
     static isServer(): boolean;
-    static initPropValues(propValuesStr: string, router: NextRouter): IkasPageComponentPropValue[];
+    static initPropValues(propValuesStr: string, router: NextRouter, isBrowser?: boolean): IkasPageComponentPropValue[];
     static initBrandPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue): void;
     static initBrandListPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue): void;
     static initCategoryPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue): void;
     static initCategoryListPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue): void;
     static initProductListPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue): void;
-    static initProductDetailPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue, router: NextRouter): void;
+    static initProductDetailPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue, router: NextRouter, isBrowser?: boolean): void;
     static initLinkPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue): void;
     static initImagePropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue): void;
     static initImageListPropValue(prop: IkasThemeComponentProp, propValue: any, pageComponentPropValue: IkasPageComponentPropValue): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "main": "./build/index.js",
   "module": "./build/index.es.js",
   "author": "Umut Ozan Yıldırım",