@ikas/storefront 0.0.32 → 0.0.33

package/build/index.es.js

@@ -11387,7 +11387,7 @@ var IkasPageDataProvider = /** @class */ (function () {
     };
     IkasPageDataProvider.prototype.getPageSpecificData = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var slug, metaDataList, metaData, handleBrandPage, handleCategoryPage, handleProductPage, _a;
+            var slug, metaDataList, metaData, handleBrandPage, handleCategoryPage, _a;
             var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -11400,11 +11400,14 @@ var IkasPageDataProvider = /** @class */ (function () {
                             ].includes(this.pageType))
                             return [2 /*return*/];
                         slug = this.pageParams.slug;
+                        if (!slug) {
+                            return [2 /*return*/];
+                        }
                         return [4 /*yield*/, IkasHTMLMetaDataAPI.listHTMLMetaData(slug)];
                     case 1:
                         metaDataList = _b.sent();
                         if (!metaDataList || !metaDataList.length) {
-                            return [2 /*return*/];
+                            return [2 /*return*/, this.getPageSpecificProduct()];
                         }
                         metaData = metaDataList[0];
                         handleBrandPage = function () { return __awaiter(_this, void 0, void 0, function () {
@@ -11445,25 +11448,6 @@ var IkasPageDataProvider = /** @class */ (function () {
                                 }
                             });
                         }); };
-                        handleProductPage = function () { return __awaiter(_this, void 0, void 0, function () {
-                            var productsResponse, product;
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, IkasProductAPI.listProducts({
-                                            idList: [metaData.targetId],
-                                        })];
-                                    case 1:
-                                        productsResponse = _a.sent();
-                                        if (!productsResponse.products.length)
-                                            return [2 /*return*/];
-                                        product = productsResponse.products[0];
-                                        this.pageSpecificData = new IkasProductDetail(product, product.variants[0].variantValues, true);
-                                        this.pageType = IkasThemePageType.PRODUCT;
-                                        this.setPageMetaData(metaData);
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); };
                         _a = metaData.targetType;
                         switch (_a) {
                             case IkasHTMLMetaDataTargetType.BRAND: return [3 /*break*/, 2];
@@ -11475,7 +11459,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case 3: return [2 /*return*/, _b.sent()];
                     case 4: return [4 /*yield*/, handleCategoryPage()];
                     case 5: return [2 /*return*/, _b.sent()];
-                    case 6: return [4 /*yield*/, handleProductPage()];
+                    case 6: return [4 /*yield*/, this.getPageSpecificProduct()];
                     case 7: return [2 /*return*/, _b.sent()];
                     case 8: return [3 /*break*/, 9];
                     case 9: return [2 /*return*/];
@@ -11483,6 +11467,85 @@ var IkasPageDataProvider = /** @class */ (function () {
             });
         });
     };
+    IkasPageDataProvider.prototype.getPageSpecificProduct = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var slug, getProductMetaData, metaDataResponse, productsResponse, product, isMainProductSlug, selectedVariantValues, variantSlugPart, variantSlugs, _i, _a, variant, isSelectedVariant, _loop_1, _b, variantSlugs_1, variantSlug, state_1;
+            var _this = this;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        slug = this.pageParams.slug;
+                        if (!slug) {
+                            console.log("Slug not found for getPageSpecificProduct");
+                        }
+                        getProductMetaData = function (slug) { return __awaiter(_this, void 0, void 0, function () {
+                            var metaDataList, splitParts, newSlug;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, IkasHTMLMetaDataAPI.listHTMLMetaData(slug)];
+                                    case 1:
+                                        metaDataList = _a.sent();
+                                        if (!(!metaDataList || !metaDataList.length)) return [3 /*break*/, 3];
+                                        splitParts = slug.split("-");
+                                        newSlug = splitParts.slice(0, splitParts.length - 1).join("-");
+                                        return [4 /*yield*/, getProductMetaData(newSlug)];
+                                    case 2: return [2 /*return*/, _a.sent()];
+                                    case 3: return [2 /*return*/, {
+                                            metaData: metaDataList[0],
+                                            slug: slug,
+                                        }];
+                                }
+                            });
+                        }); };
+                        return [4 /*yield*/, getProductMetaData(slug)];
+                    case 1:
+                        metaDataResponse = _c.sent();
+                        if (!metaDataResponse)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, IkasProductAPI.listProducts({
+                                idList: [metaDataResponse.metaData.targetId],
+                            })];
+                    case 2:
+                        productsResponse = _c.sent();
+                        if (!productsResponse.products.length)
+                            return [2 /*return*/];
+                        product = productsResponse.products[0];
+                        isMainProductSlug = slug.length === metaDataResponse.slug.length;
+                        selectedVariantValues = [];
+                        if (!isMainProductSlug) {
+                            variantSlugPart = slug.slice(metaDataResponse.slug.length + 1);
+                            variantSlugs = variantSlugPart.split("-");
+                            for (_i = 0, _a = product.variants; _i < _a.length; _i++) {
+                                variant = _a[_i];
+                                isSelectedVariant = true;
+                                _loop_1 = function (variantSlug) {
+                                    if (!variant.variantValues.some(function (vv) { return vv.slug === variantSlug; })) {
+                                        isSelectedVariant = false;
+                                        return "break";
+                                    }
+                                };
+                                for (_b = 0, variantSlugs_1 = variantSlugs; _b < variantSlugs_1.length; _b++) {
+                                    variantSlug = variantSlugs_1[_b];
+                                    state_1 = _loop_1(variantSlug);
+                                    if (state_1 === "break")
+                                        break;
+                                }
+                                if (isSelectedVariant) {
+                                    selectedVariantValues = variant.variantValues;
+                                    break;
+                                }
+                            }
+                        }
+                        this.pageSpecificData = new IkasProductDetail(product, selectedVariantValues.length
+                            ? selectedVariantValues
+                            : product.variants[0].variantValues, true);
+                        this.pageType = IkasThemePageType.PRODUCT;
+                        this.setPageMetaData(metaDataResponse.metaData);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     IkasPageDataProvider.prototype.getPageComponentPropValues = function (pageComponent) {
         return __awaiter(this, void 0, void 0, function () {
             var component, result, setPageComponentPropValue;
@@ -11647,44 +11710,17 @@ var IkasPageDataProvider = /** @class */ (function () {
         var usePageData = propValue.usePageData;
         var _propValue = propValue;
         var productDetail = new IkasProductDetail(_propValue.product, _propValue.selectedVariantValues);
-        var product = productDetail.product;
-        var selectedVariantValues = [];
-        if (usePageData && isBrowser) {
-            var urlParams_1 = new URLSearchParams(window.location.search);
-            var vid_1 = urlParams_1.get("vid");
-            var hasVid = false;
-            if (vid_1 && typeof vid_1 === "string") {
-                var variant = product.variants.find(function (v) { return v.id === vid_1; });
+        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) {
-                    selectedVariantValues = variant.variantValues;
-                    hasVid = true;
+                    productDetail.selectedVariantValues = variant.variantValues;
                 }
             }
-            if (!hasVid) {
-                product.variantTypes.forEach(function (pvt) {
-                    var slug = pvt.variantType.slug;
-                    var variantValueParam = urlParams_1.get(slug);
-                    if (variantValueParam) {
-                        var variantValueSlug_1 = variantValueParam;
-                        if (Array.isArray(variantValueParam)) {
-                            variantValueSlug_1 = variantValueParam[0];
-                        }
-                        var variantValue = pvt.variantType.values.find(function (vv) { return vv.slug === variantValueSlug_1; });
-                        if (variantValue)
-                            selectedVariantValues.push(variantValue);
-                        else
-                            selectedVariantValues.push(pvt.variantType.values[0]);
-                    }
-                    else {
-                        selectedVariantValues.push(pvt.variantType.values[0]);
-                    }
-                });
-            }
-        }
-        else {
-            selectedVariantValues = productDetail.selectedVariantValues;
         }
-        pageComponentPropValue.propValues[prop.name] = new IkasProductDetail(productDetail.product, selectedVariantValues, usePageData, router);
+        pageComponentPropValue.propValues[prop.name] = new IkasProductDetail(productDetail.product, productDetail.selectedVariantValues, usePageData, router);
     };
     IkasPageDataProvider.initLinkPropValue = function (prop, propValue, pageComponentPropValue) {
         if (Array.isArray(propValue)) {
@@ -13605,17 +13641,13 @@ var IkasProductDetail = /** @class */ (function () {
     });
     Object.defineProperty(IkasProductDetail.prototype, "href", {
         get: function () {
-            var _this = this;
             var metaData = this.product.metaData;
             if (!(metaData === null || metaData === void 0 ? void 0 : metaData.slug))
                 return "";
-            if (this.product.hasVariant && typeof window !== "undefined") {
-                var queryParams_1 = {};
-                this.selectedVariantValues.forEach(function (vv) {
-                    var vt = _this.product.variantTypes.find(function (vt) { return vt.variantType.id === vv.variantTypeId; });
-                    queryParams_1[vt.variantType.slug] = vv.slug;
-                });
-                return "/" + metaData.slug + "?" + queryString.stringify(queryParams_1);
+            if (this.product.hasVariant) {
+                return "/" + metaData.slug + "-" + this.selectedVariantValues
+                    .map(function (vv) { return vv.slug; })
+                    .join("-");
             }
             return "/" + metaData.slug;
         },
@@ -13624,12 +13656,18 @@ var IkasProductDetail = /** @class */ (function () {
     });
     IkasProductDetail.prototype.selectVariantValue = function (variantValue) {
         var _a;
-        this.selectedVariantValues = this.selectedVariantValues.map(function (vv) {
+        var metaData = this.product.metaData;
+        var selectedVariantValues = this.selectedVariantValues.map(function (vv) {
             if (vv.variantTypeId === variantValue.variantTypeId)
                 return variantValue;
             return vv;
         });
-        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(this.href, undefined, { shallow: true });
+        this.selectedVariantValues = selectedVariantValues;
+        var newUrl = "/" + metaData.slug + "-" + this.selectedVariantValues
+            .map(function (vv) { return vv.slug; })
+            .join("-");
+        var isShallow = process.env.NODE_ENV !== "production";
+        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(newUrl, undefined, { shallow: isShallow });
     };
     return IkasProductDetail;
 }());
@@ -22669,38 +22707,14 @@ function createProductSchema(pageSpecificDataStr) {
     var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
     var isBrowser = typeof window !== "undefined";
     if (isBrowser) {
-        var urlParams_1 = new URLSearchParams(window.location.search);
-        var vid_1 = urlParams_1.get("vid");
-        var hasVid = false;
-        if (vid_1 && typeof vid_1 === "string") {
+        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;
-                hasVid = true;
             }
         }
-        if (!hasVid) {
-            var selectedVariantValues_1 = [];
-            productDetail.product.variantTypes.forEach(function (pvt) {
-                var slug = pvt.variantType.slug;
-                var variantValueParam = urlParams_1.get(slug);
-                if (variantValueParam) {
-                    var variantValueSlug_1 = variantValueParam;
-                    if (Array.isArray(variantValueParam)) {
-                        variantValueSlug_1 = variantValueParam[0];
-                    }
-                    var variantValue = pvt.variantType.values.find(function (vv) { return vv.slug === variantValueSlug_1; });
-                    if (variantValue)
-                        selectedVariantValues_1.push(variantValue);
-                    else
-                        selectedVariantValues_1.push(pvt.variantType.values[0]);
-                }
-                else {
-                    selectedVariantValues_1.push(pvt.variantType.values[0]);
-                }
-            });
-            productDetail.selectedVariantValues = selectedVariantValues_1;
-        }
     }
     return {
         "@context": "https://schema.org/",
@@ -23421,24 +23435,60 @@ var Page$1 = function (_a) {
 };
 var index$1 = observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {
-    var metaData, targetTypes, filteredMetaData;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+    var metaData, targetTypes, brandCategoryMetaData, productMetaData, productsResponse, productParams, _loop_1, _i, _a, product;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
             case 0: return [4 /*yield*/, IkasHTMLMetaDataAPI.listHTMLMetaData()];
             case 1:
-                metaData = _a.sent();
+                metaData = _b.sent();
                 targetTypes = [
                     IkasHTMLMetaDataTargetType.BRAND,
                     IkasHTMLMetaDataTargetType.CATEGORY,
-                    IkasHTMLMetaDataTargetType.PRODUCT,
                 ];
-                filteredMetaData = metaData.filter(function (m) { return m.targetType && targetTypes.includes(m.targetType); });
+                brandCategoryMetaData = metaData.filter(function (m) { return m.targetType && targetTypes.includes(m.targetType); });
+                productMetaData = metaData.filter(function (m) { return m.targetType && m.targetType === IkasHTMLMetaDataTargetType.PRODUCT; });
+                return [4 /*yield*/, IkasProductAPI.listProducts({
+                        idList: productMetaData.map(function (p) { return p.targetId; }),
+                    })];
+            case 2:
+                productsResponse = _b.sent();
+                productParams = [];
+                _loop_1 = function (product) {
+                    var meta = productMetaData.find(function (pm) { return pm.targetId === product.id; });
+                    if (meta) {
+                        for (var _i = 0, _a = product.variants; _i < _a.length; _i++) {
+                            var variant = _a[_i];
+                            if (product.hasVariant) {
+                                var variantSlug = variant.variantValues
+                                    .map(function (vv) { return vv.slug; })
+                                    .join("-");
+                                productParams.push({
+                                    slug: meta.slug + "-" + variantSlug,
+                                });
+                            }
+                            else {
+                                productParams.push({
+                                    slug: meta.slug,
+                                });
+                            }
+                        }
+                    }
+                };
+                for (_i = 0, _a = productsResponse.products; _i < _a.length; _i++) {
+                    product = _a[_i];
+                    _loop_1(product);
+                }
                 return [2 /*return*/, {
-                        paths: filteredMetaData.map(function (m) { return ({
+                        paths: brandCategoryMetaData
+                            .map(function (m) { return ({
                             params: {
                                 slug: m.slug,
+                                originalSlug: m.slug,
                             },
-                        }); }),
+                        }); })
+                            .concat(productParams.map(function (pp) { return ({
+                            params: pp,
+                        }); })),
                         fallback: "blocking",
                     }];
         }

package/build/index.js

@@ -11400,7 +11400,7 @@ var IkasPageDataProvider = /** @class */ (function () {
     };
     IkasPageDataProvider.prototype.getPageSpecificData = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var slug, metaDataList, metaData, handleBrandPage, handleCategoryPage, handleProductPage, _a;
+            var slug, metaDataList, metaData, handleBrandPage, handleCategoryPage, _a;
             var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -11413,11 +11413,14 @@ var IkasPageDataProvider = /** @class */ (function () {
                             ].includes(this.pageType))
                             return [2 /*return*/];
                         slug = this.pageParams.slug;
+                        if (!slug) {
+                            return [2 /*return*/];
+                        }
                         return [4 /*yield*/, IkasHTMLMetaDataAPI.listHTMLMetaData(slug)];
                     case 1:
                         metaDataList = _b.sent();
                         if (!metaDataList || !metaDataList.length) {
-                            return [2 /*return*/];
+                            return [2 /*return*/, this.getPageSpecificProduct()];
                         }
                         metaData = metaDataList[0];
                         handleBrandPage = function () { return __awaiter(_this, void 0, void 0, function () {
@@ -11458,25 +11461,6 @@ var IkasPageDataProvider = /** @class */ (function () {
                                 }
                             });
                         }); };
-                        handleProductPage = function () { return __awaiter(_this, void 0, void 0, function () {
-                            var productsResponse, product;
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, IkasProductAPI.listProducts({
-                                            idList: [metaData.targetId],
-                                        })];
-                                    case 1:
-                                        productsResponse = _a.sent();
-                                        if (!productsResponse.products.length)
-                                            return [2 /*return*/];
-                                        product = productsResponse.products[0];
-                                        this.pageSpecificData = new IkasProductDetail(product, product.variants[0].variantValues, true);
-                                        this.pageType = exports.IkasThemePageType.PRODUCT;
-                                        this.setPageMetaData(metaData);
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); };
                         _a = metaData.targetType;
                         switch (_a) {
                             case exports.IkasHTMLMetaDataTargetType.BRAND: return [3 /*break*/, 2];
@@ -11488,7 +11472,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case 3: return [2 /*return*/, _b.sent()];
                     case 4: return [4 /*yield*/, handleCategoryPage()];
                     case 5: return [2 /*return*/, _b.sent()];
-                    case 6: return [4 /*yield*/, handleProductPage()];
+                    case 6: return [4 /*yield*/, this.getPageSpecificProduct()];
                     case 7: return [2 /*return*/, _b.sent()];
                     case 8: return [3 /*break*/, 9];
                     case 9: return [2 /*return*/];
@@ -11496,6 +11480,85 @@ var IkasPageDataProvider = /** @class */ (function () {
             });
         });
     };
+    IkasPageDataProvider.prototype.getPageSpecificProduct = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var slug, getProductMetaData, metaDataResponse, productsResponse, product, isMainProductSlug, selectedVariantValues, variantSlugPart, variantSlugs, _i, _a, variant, isSelectedVariant, _loop_1, _b, variantSlugs_1, variantSlug, state_1;
+            var _this = this;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        slug = this.pageParams.slug;
+                        if (!slug) {
+                            console.log("Slug not found for getPageSpecificProduct");
+                        }
+                        getProductMetaData = function (slug) { return __awaiter(_this, void 0, void 0, function () {
+                            var metaDataList, splitParts, newSlug;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, IkasHTMLMetaDataAPI.listHTMLMetaData(slug)];
+                                    case 1:
+                                        metaDataList = _a.sent();
+                                        if (!(!metaDataList || !metaDataList.length)) return [3 /*break*/, 3];
+                                        splitParts = slug.split("-");
+                                        newSlug = splitParts.slice(0, splitParts.length - 1).join("-");
+                                        return [4 /*yield*/, getProductMetaData(newSlug)];
+                                    case 2: return [2 /*return*/, _a.sent()];
+                                    case 3: return [2 /*return*/, {
+                                            metaData: metaDataList[0],
+                                            slug: slug,
+                                        }];
+                                }
+                            });
+                        }); };
+                        return [4 /*yield*/, getProductMetaData(slug)];
+                    case 1:
+                        metaDataResponse = _c.sent();
+                        if (!metaDataResponse)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, IkasProductAPI.listProducts({
+                                idList: [metaDataResponse.metaData.targetId],
+                            })];
+                    case 2:
+                        productsResponse = _c.sent();
+                        if (!productsResponse.products.length)
+                            return [2 /*return*/];
+                        product = productsResponse.products[0];
+                        isMainProductSlug = slug.length === metaDataResponse.slug.length;
+                        selectedVariantValues = [];
+                        if (!isMainProductSlug) {
+                            variantSlugPart = slug.slice(metaDataResponse.slug.length + 1);
+                            variantSlugs = variantSlugPart.split("-");
+                            for (_i = 0, _a = product.variants; _i < _a.length; _i++) {
+                                variant = _a[_i];
+                                isSelectedVariant = true;
+                                _loop_1 = function (variantSlug) {
+                                    if (!variant.variantValues.some(function (vv) { return vv.slug === variantSlug; })) {
+                                        isSelectedVariant = false;
+                                        return "break";
+                                    }
+                                };
+                                for (_b = 0, variantSlugs_1 = variantSlugs; _b < variantSlugs_1.length; _b++) {
+                                    variantSlug = variantSlugs_1[_b];
+                                    state_1 = _loop_1(variantSlug);
+                                    if (state_1 === "break")
+                                        break;
+                                }
+                                if (isSelectedVariant) {
+                                    selectedVariantValues = variant.variantValues;
+                                    break;
+                                }
+                            }
+                        }
+                        this.pageSpecificData = new IkasProductDetail(product, selectedVariantValues.length
+                            ? selectedVariantValues
+                            : product.variants[0].variantValues, true);
+                        this.pageType = exports.IkasThemePageType.PRODUCT;
+                        this.setPageMetaData(metaDataResponse.metaData);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     IkasPageDataProvider.prototype.getPageComponentPropValues = function (pageComponent) {
         return __awaiter(this, void 0, void 0, function () {
             var component, result, setPageComponentPropValue;
@@ -11660,44 +11723,17 @@ var IkasPageDataProvider = /** @class */ (function () {
         var usePageData = propValue.usePageData;
         var _propValue = propValue;
         var productDetail = new IkasProductDetail(_propValue.product, _propValue.selectedVariantValues);
-        var product = productDetail.product;
-        var selectedVariantValues = [];
-        if (usePageData && isBrowser) {
-            var urlParams_1 = new URLSearchParams(window.location.search);
-            var vid_1 = urlParams_1.get("vid");
-            var hasVid = false;
-            if (vid_1 && typeof vid_1 === "string") {
-                var variant = product.variants.find(function (v) { return v.id === vid_1; });
+        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) {
-                    selectedVariantValues = variant.variantValues;
-                    hasVid = true;
+                    productDetail.selectedVariantValues = variant.variantValues;
                 }
             }
-            if (!hasVid) {
-                product.variantTypes.forEach(function (pvt) {
-                    var slug = pvt.variantType.slug;
-                    var variantValueParam = urlParams_1.get(slug);
-                    if (variantValueParam) {
-                        var variantValueSlug_1 = variantValueParam;
-                        if (Array.isArray(variantValueParam)) {
-                            variantValueSlug_1 = variantValueParam[0];
-                        }
-                        var variantValue = pvt.variantType.values.find(function (vv) { return vv.slug === variantValueSlug_1; });
-                        if (variantValue)
-                            selectedVariantValues.push(variantValue);
-                        else
-                            selectedVariantValues.push(pvt.variantType.values[0]);
-                    }
-                    else {
-                        selectedVariantValues.push(pvt.variantType.values[0]);
-                    }
-                });
-            }
-        }
-        else {
-            selectedVariantValues = productDetail.selectedVariantValues;
         }
-        pageComponentPropValue.propValues[prop.name] = new IkasProductDetail(productDetail.product, selectedVariantValues, usePageData, router);
+        pageComponentPropValue.propValues[prop.name] = new IkasProductDetail(productDetail.product, productDetail.selectedVariantValues, usePageData, router);
     };
     IkasPageDataProvider.initLinkPropValue = function (prop, propValue, pageComponentPropValue) {
         if (Array.isArray(propValue)) {
@@ -13591,17 +13627,13 @@ var IkasProductDetail = /** @class */ (function () {
     });
     Object.defineProperty(IkasProductDetail.prototype, "href", {
         get: function () {
-            var _this = this;
             var metaData = this.product.metaData;
             if (!(metaData === null || metaData === void 0 ? void 0 : metaData.slug))
                 return "";
-            if (this.product.hasVariant && typeof window !== "undefined") {
-                var queryParams_1 = {};
-                this.selectedVariantValues.forEach(function (vv) {
-                    var vt = _this.product.variantTypes.find(function (vt) { return vt.variantType.id === vv.variantTypeId; });
-                    queryParams_1[vt.variantType.slug] = vv.slug;
-                });
-                return "/" + metaData.slug + "?" + queryString__default['default'].stringify(queryParams_1);
+            if (this.product.hasVariant) {
+                return "/" + metaData.slug + "-" + this.selectedVariantValues
+                    .map(function (vv) { return vv.slug; })
+                    .join("-");
             }
             return "/" + metaData.slug;
         },
@@ -13610,12 +13642,18 @@ var IkasProductDetail = /** @class */ (function () {
     });
     IkasProductDetail.prototype.selectVariantValue = function (variantValue) {
         var _a;
-        this.selectedVariantValues = this.selectedVariantValues.map(function (vv) {
+        var metaData = this.product.metaData;
+        var selectedVariantValues = this.selectedVariantValues.map(function (vv) {
             if (vv.variantTypeId === variantValue.variantTypeId)
                 return variantValue;
             return vv;
         });
-        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(this.href, undefined, { shallow: true });
+        this.selectedVariantValues = selectedVariantValues;
+        var newUrl = "/" + metaData.slug + "-" + this.selectedVariantValues
+            .map(function (vv) { return vv.slug; })
+            .join("-");
+        var isShallow = process.env.NODE_ENV !== "production";
+        (_a = this.router) === null || _a === void 0 ? void 0 : _a.replace(newUrl, undefined, { shallow: isShallow });
     };
     return IkasProductDetail;
 }());
@@ -22653,38 +22691,14 @@ function createProductSchema(pageSpecificDataStr) {
     var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
     var isBrowser = typeof window !== "undefined";
     if (isBrowser) {
-        var urlParams_1 = new URLSearchParams(window.location.search);
-        var vid_1 = urlParams_1.get("vid");
-        var hasVid = false;
-        if (vid_1 && typeof vid_1 === "string") {
+        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;
-                hasVid = true;
             }
         }
-        if (!hasVid) {
-            var selectedVariantValues_1 = [];
-            productDetail.product.variantTypes.forEach(function (pvt) {
-                var slug = pvt.variantType.slug;
-                var variantValueParam = urlParams_1.get(slug);
-                if (variantValueParam) {
-                    var variantValueSlug_1 = variantValueParam;
-                    if (Array.isArray(variantValueParam)) {
-                        variantValueSlug_1 = variantValueParam[0];
-                    }
-                    var variantValue = pvt.variantType.values.find(function (vv) { return vv.slug === variantValueSlug_1; });
-                    if (variantValue)
-                        selectedVariantValues_1.push(variantValue);
-                    else
-                        selectedVariantValues_1.push(pvt.variantType.values[0]);
-                }
-                else {
-                    selectedVariantValues_1.push(pvt.variantType.values[0]);
-                }
-            });
-            productDetail.selectedVariantValues = selectedVariantValues_1;
-        }
     }
     return {
         "@context": "https://schema.org/",
@@ -23405,24 +23419,60 @@ var Page$1 = function (_a) {
 };
 var index$1 = mobxReactLite.observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {
-    var metaData, targetTypes, filteredMetaData;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+    var metaData, targetTypes, brandCategoryMetaData, productMetaData, productsResponse, productParams, _loop_1, _i, _a, product;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
             case 0: return [4 /*yield*/, IkasHTMLMetaDataAPI.listHTMLMetaData()];
             case 1:
-                metaData = _a.sent();
+                metaData = _b.sent();
                 targetTypes = [
                     exports.IkasHTMLMetaDataTargetType.BRAND,
                     exports.IkasHTMLMetaDataTargetType.CATEGORY,
-                    exports.IkasHTMLMetaDataTargetType.PRODUCT,
                 ];
-                filteredMetaData = metaData.filter(function (m) { return m.targetType && targetTypes.includes(m.targetType); });
+                brandCategoryMetaData = metaData.filter(function (m) { return m.targetType && targetTypes.includes(m.targetType); });
+                productMetaData = metaData.filter(function (m) { return m.targetType && m.targetType === exports.IkasHTMLMetaDataTargetType.PRODUCT; });
+                return [4 /*yield*/, IkasProductAPI.listProducts({
+                        idList: productMetaData.map(function (p) { return p.targetId; }),
+                    })];
+            case 2:
+                productsResponse = _b.sent();
+                productParams = [];
+                _loop_1 = function (product) {
+                    var meta = productMetaData.find(function (pm) { return pm.targetId === product.id; });
+                    if (meta) {
+                        for (var _i = 0, _a = product.variants; _i < _a.length; _i++) {
+                            var variant = _a[_i];
+                            if (product.hasVariant) {
+                                var variantSlug = variant.variantValues
+                                    .map(function (vv) { return vv.slug; })
+                                    .join("-");
+                                productParams.push({
+                                    slug: meta.slug + "-" + variantSlug,
+                                });
+                            }
+                            else {
+                                productParams.push({
+                                    slug: meta.slug,
+                                });
+                            }
+                        }
+                    }
+                };
+                for (_i = 0, _a = productsResponse.products; _i < _a.length; _i++) {
+                    product = _a[_i];
+                    _loop_1(product);
+                }
                 return [2 /*return*/, {
-                        paths: filteredMetaData.map(function (m) { return ({
+                        paths: brandCategoryMetaData
+                            .map(function (m) { return ({
                             params: {
                                 slug: m.slug,
+                                originalSlug: m.slug,
                             },
-                        }); }),
+                        }); })
+                            .concat(productParams.map(function (pp) { return ({
+                            params: pp,
+                        }); })),
                         fallback: "blocking",
                     }];
         }

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

@@ -17,6 +17,7 @@ export declare class IkasPageDataProvider {
     get isStaticPage(): boolean | null | undefined;
     getPageData(): Promise<void>;
     getPageSpecificData(): Promise<void>;
+    getPageSpecificProduct(): Promise<void>;
     getPageComponentPropValues(pageComponent: IkasThemePageComponent): Promise<IkasPageComponentPropValue>;
     getPageComponentPropValue(pageComponent: IkasThemePageComponent, prop: IkasThemeComponentProp): Promise<any>;
     private setPageMetaData;

package/package.json

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