@ikas/storefront 4.0.0-alpha.39 → 4.0.0-alpha.4

package/src/page-data-init/index.ts

@@ -3,6 +3,7 @@ import { IkasCategoryListParams } from "../models/ui/category-list";
 import { IkasAttributeList } from "../models/ui/product-attribute-list";
 import { IkasProductListParams } from "../models/ui/product-list";
 import { IkasRaffleListParams } from "../models/ui/raffle-list";
+import { observable } from "mobx";
 
 import {
   IkasThemeJsonSettings,
@@ -53,7 +54,7 @@ import {
 import _cloneDeep from "lodash/cloneDeep";
 
 export class IkasPageDataInit {
-  static pageSpecificData: any = {};
+  static pageSpecificData: any = observable({});
 
   static setPageSpecificData(
     pageSpecificData: any,
@@ -70,8 +71,7 @@ export class IkasPageDataInit {
         const product = pageSpecificData as IkasProduct;
         IkasPageDataInit.pageSpecificData = new IkasProduct({
           ...product,
-          selectedVariantValues:
-            product.selectedVariantValues || product.variants[0].variantValues,
+          selectedVariantValues: product.selectedVariantValues,
         });
         if (isBrowser) {
           this._initProductOnBrowser(IkasPageDataInit.pageSpecificData);
@@ -112,136 +112,215 @@ export class IkasPageDataInit {
     return typeof window === "undefined";
   }
 
-  static initPagePropValues(
-    pageComponentPropValues: IkasPageComponentPropValue[],
+  static initPropValues(
+    _pageComponentPropValues: IkasPageComponentPropValue[],
     settings: IkasThemeJsonSettings,
     isBrowser?: boolean
   ) {
-    return pageComponentPropValues.map((pageComponentPropValue) =>
-      IkasPageDataInit.initPageComponentPropValue(
-        pageComponentPropValue,
-        settings,
-        isBrowser
-      )
-    );
-  }
-
-  static initPageComponentPropValue(
-    pageComponentPropValue: IkasPageComponentPropValue,
-    settings: IkasThemeJsonSettings,
-    isBrowser?: boolean
-  ) {
-    const props = pageComponentPropValue.component.props;
-    const initializedPropValues: Record<string, any> = {};
+    const pageComponentPropValues = _cloneDeep(_pageComponentPropValues);
 
-    props.map((prop) => {
-      const propValue = pageComponentPropValue.propValues[prop.name];
+    pageComponentPropValues.forEach((pageComponentPropValue) => {
+      const props = pageComponentPropValue.component.props;
 
-      initializedPropValues[prop.name] = IkasPageDataInit.initPropValue(
-        prop,
-        propValue,
-        settings,
-        isBrowser
-      );
-    });
-
-    return new IkasPageComponentPropValue({
-      ...pageComponentPropValue,
-      propValues: initializedPropValues,
-    });
-  }
-
-  static initPropValue(
-    prop: IkasThemeJsonComponentProp,
-    propValue: any,
-    settings: IkasThemeJsonSettings,
-    isBrowser?: boolean
-  ) {
-    if (propValue === null || propValue === undefined) return null;
+      props.forEach((prop) => {
+        const propValue = pageComponentPropValue.propValues[prop.name];
+        if (propValue === null || propValue === undefined) return;
 
-    switch (prop.type) {
-      case IkasThemeJsonComponentPropType.IMAGE:
-        return IkasPageDataInit.initImagePropValue(propValue);
-
-      case IkasThemeJsonComponentPropType.IMAGE_LIST:
-        return IkasPageDataInit.initImageListPropValue(propValue);
-
-      case IkasThemeJsonComponentPropType.BRAND:
-        return IkasPageDataInit.initBrandPropValue(propValue);
+        switch (prop.type) {
+          case IkasThemeJsonComponentPropType.IMAGE:
+            IkasPageDataInit.initImagePropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.BRAND_LIST:
-        return IkasPageDataInit.initBrandListPropValue(propValue);
+          case IkasThemeJsonComponentPropType.IMAGE_LIST:
+            IkasPageDataInit.initImageListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.CATEGORY:
-        return IkasPageDataInit.initCategoryPropValue(propValue);
+          case IkasThemeJsonComponentPropType.BRAND:
+            IkasPageDataInit.initBrandPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.CATEGORY_LIST:
-        return IkasPageDataInit.initCategoryListPropValue(propValue);
+          case IkasThemeJsonComponentPropType.BRAND_LIST:
+            IkasPageDataInit.initBrandListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.PRODUCT_LIST:
-        return IkasPageDataInit.initProductListPropValue(propValue);
+          case IkasThemeJsonComponentPropType.CATEGORY:
+            IkasPageDataInit.initCategoryPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.PRODUCT_DETAIL:
-        return IkasPageDataInit.initProductPropValue(propValue);
+          case IkasThemeJsonComponentPropType.CATEGORY_LIST:
+            IkasPageDataInit.initCategoryListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE:
-        return IkasPageDataInit.initAttributePropValue(propValue);
+          case IkasThemeJsonComponentPropType.PRODUCT_LIST:
+            IkasPageDataInit.initProductListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE_LIST:
-        return IkasPageDataInit.initAttributeListPropValue(propValue);
+          case IkasThemeJsonComponentPropType.PRODUCT_DETAIL:
+            IkasPageDataInit.initProductPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.LINK:
-      case IkasThemeJsonComponentPropType.LIST_OF_LINK:
-        return IkasPageDataInit.initLinkPropValue(propValue);
+          case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE:
+            IkasPageDataInit.initAttributePropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.COMPONENT:
-        return IkasPageDataInit.initComponentPropValue(
-          propValue,
-          settings,
-          isBrowser
-        );
+          case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE_LIST:
+            IkasPageDataInit.initAttributeListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeJsonComponentPropType.LINK:
+          case IkasThemeJsonComponentPropType.LIST_OF_LINK:
+            IkasPageDataInit.initLinkPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
+
+          case IkasThemeJsonComponentPropType.COMPONENT:
+            IkasPageDataInit.initComponentPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue,
+              settings,
+              isBrowser
+            );
+            break;
+
+          case IkasThemeJsonComponentPropType.COMPONENT_LIST:
+            IkasPageDataInit.initComponentListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue,
+              settings,
+              isBrowser
+            );
+            break;
+
+          case IkasThemeJsonComponentPropType.CUSTOM:
+            IkasPageDataInit.initCustomDataPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue,
+              settings,
+              isBrowser
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.COMPONENT_LIST:
-        return IkasPageDataInit.initComponentListPropValue(
-          propValue,
-          settings,
-          isBrowser
-        );
+          case IkasThemeJsonComponentPropType.BLOG:
+            IkasPageDataInit.initBlogPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.CUSTOM:
-        return IkasPageDataInit.initCustomDataPropValue(
-          propValue,
-          settings,
-          isBrowser
-        );
+          case IkasThemeJsonComponentPropType.BLOG_LIST:
+            IkasPageDataInit.initBlogListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.BLOG:
-        return IkasPageDataInit.initBlogPropValue(propValue);
+          case IkasThemeJsonComponentPropType.BLOG_CATEGORY:
+            IkasPageDataInit.initBlogCategoryPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.BLOG_LIST:
-        return IkasPageDataInit.initBlogListPropValue(propValue);
+          case IkasThemeJsonComponentPropType.BLOG_LIST:
+            IkasPageDataInit.initBlogCategoryListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.BLOG_CATEGORY:
-        return IkasPageDataInit.initBlogCategoryPropValue(propValue);
+          case IkasThemeJsonComponentPropType.RAFFLE:
+            IkasPageDataInit.initRafflePropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.BLOG_LIST:
-        return IkasPageDataInit.initBlogCategoryListPropValue(propValue);
+          case IkasThemeJsonComponentPropType.RAFFLE_LIST:
+            IkasPageDataInit.initRaffleListPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.RAFFLE:
-        return IkasPageDataInit.initRafflePropValue(propValue);
+          case IkasThemeJsonComponentPropType.SLIDER:
+            IkasPageDataInit.initSliderPropValue(
+              prop,
+              propValue,
+              pageComponentPropValue
+            );
+            break;
 
-      case IkasThemeJsonComponentPropType.RAFFLE_LIST:
-        return IkasPageDataInit.initRaffleListPropValue(propValue);
+          default:
+            break;
+        }
+      });
+    });
 
-      case IkasThemeJsonComponentPropType.SLIDER:
-        return IkasPageDataInit.initSliderPropValue(propValue);
+    return pageComponentPropValues;
+  }
 
-      default:
-        return propValue;
-    }
+  static initBrandPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: IkasBrandPropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      IkasPageDataInit._initBrandPropValue(propValue);
   }
 
-  static initBrandPropValue(propValue: IkasBrandPropValueData) {
+  static _initBrandPropValue(propValue: IkasBrandPropValueData) {
     if (propValue.brandPropValue.usePageData && this.pageSpecificData) {
       return this.pageSpecificData;
     }
@@ -253,11 +332,29 @@ export class IkasPageDataInit {
     return getPlaceholderBrand();
   }
 
-  static initBrandListPropValue(propValue: IkasBrandListParams) {
+  static initBrandListPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      IkasPageDataInit._initBrandListPropValue(propValue);
+  }
+
+  static _initBrandListPropValue(propValue: IkasBrandListParams) {
     return new IkasBrandList(propValue);
   }
 
-  static initCategoryPropValue(propValue: IkasCategoryPropValueData) {
+  static initCategoryPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: IkasCategoryPropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      IkasPageDataInit._initCategoryPropValue(propValue);
+  }
+
+  static _initCategoryPropValue(propValue: IkasCategoryPropValueData) {
     if (propValue.categoryPropValue.usePageData && this.pageSpecificData) {
       return this.pageSpecificData;
     }
@@ -269,15 +366,44 @@ export class IkasPageDataInit {
     return getPlaceholderCategory();
   }
 
-  static initCategoryListPropValue(propValue: IkasCategoryListParams) {
+  static initCategoryListPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    const categoryList = new IkasCategoryList(
+      propValue as IkasCategoryListParams
+    );
+    pageComponentPropValue.propValues[prop.name] = categoryList;
+  }
+
+  static _initCategoryListPropValue(propValue: IkasCategoryListParams) {
     return new IkasCategoryList(propValue);
   }
 
-  static initProductListPropValue(propValue: IkasProductListParams) {
+  static initProductListPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      this._initProductListPropValue(propValue);
+  }
+
+  static _initProductListPropValue(propValue: IkasProductListParams) {
     return new IkasProductList(propValue);
   }
 
-  static initProductPropValue(propValue: IkasProductPropValueData) {
+  static initProductPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: IkasProductPropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      this._initProductPropValue(propValue);
+  }
+
+  static _initProductPropValue(propValue: IkasProductPropValueData) {
     let product: IkasProduct = new IkasProduct(getPlaceholderProduct() as any);
 
     if (propValue.productDetailPropValue.usePageData && this.pageSpecificData) {
@@ -333,7 +459,16 @@ export class IkasPageDataInit {
     }
   }
 
-  static initAttributePropValue(propValue: IkasAttributePropValueData) {
+  static initAttributePropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: IkasAttributePropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      IkasPageDataInit._initAttributePropValue(propValue);
+  }
+
+  static _initAttributePropValue(propValue: IkasAttributePropValueData) {
     let product: IkasProduct | null = null;
 
     if (propValue.attributePropValue.usePageData && this.pageSpecificData) {
@@ -350,7 +485,18 @@ export class IkasPageDataInit {
     return new IkasAttributeDetail(product, propValue.attributePropValue);
   }
 
-  static initAttributeListPropValue(propValue: IkasAttributeListPropValueData) {
+  static initAttributeListPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: IkasAttributeListPropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      IkasPageDataInit._initAttributeListPropValue(propValue);
+  }
+
+  static _initAttributeListPropValue(
+    propValue: IkasAttributeListPropValueData
+  ) {
     let product: IkasProduct | null = null;
 
     if (propValue.attributeListPropValue.usePageData && this.pageSpecificData) {
@@ -368,8 +514,15 @@ export class IkasPageDataInit {
   }
 
   static initLinkPropValue(
-    propValue: IkasNavigationLink | IkasNavigationLink[]
+    prop: IkasThemeJsonComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
   ) {
+    pageComponentPropValue.propValues[prop.name] =
+      this._initLinkPropValue(propValue);
+  }
+
+  static _initLinkPropValue(propValue: any) {
     if (Array.isArray(propValue)) {
       return (propValue as IkasNavigationLink[]).map(
         (p) =>
@@ -385,21 +538,41 @@ export class IkasPageDataInit {
         propValue.href,
         propValue.label,
         propValue.subLinks,
-        propValue.isExternal || undefined
+        propValue.isExternal
       );
     }
   }
 
-  static initImagePropValue(propValue: IkasImage) {
+  static initImagePropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      this._initImagePropValue(propValue);
+  }
+
+  static _initImagePropValue(propValue: any) {
     return new IkasImage(propValue);
   }
 
-  static initImageListPropValue(propValue: IkasImage[]) {
+  static initImageListPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      this._initImageListPropValue(propValue);
+  }
+
+  static _initImageListPropValue(propValue: any) {
     return (propValue as IkasImage[]).map((i) => new IkasImage(i));
   }
 
   static initCustomDataPropValue(
+    prop: IkasThemeJsonComponentProp,
     customDataValue: IkasCustomDataPropValueData | undefined,
+    pageComponentPropValue: IkasPageComponentPropValue,
     settings: IkasThemeJsonSettings,
     isBrowser?: boolean
   ) {
@@ -410,12 +583,13 @@ export class IkasPageDataInit {
     )
       return;
 
-    return this._initCustomDataPropValue(
-      customDataValue,
-      new IkasThemeJsonCustomData(customDataValue.customData as any),
-      settings,
-      isBrowser
-    );
+    pageComponentPropValue.propValues[prop.name] =
+      this._initCustomDataPropValue(
+        customDataValue,
+        new IkasThemeJsonCustomData(customDataValue.customData as any),
+        settings,
+        isBrowser
+      );
   }
 
   static _initCustomDataPropValue(
@@ -431,58 +605,58 @@ export class IkasPageDataInit {
 
     switch (customData.type) {
       case IkasThemeJsonComponentPropType.BRAND:
-        return this.initBrandPropValue(propValue);
+        return this._initBrandPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.BRAND_LIST:
-        return this.initBrandListPropValue(propValue);
+        return this._initBrandListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.CATEGORY_LIST:
-        return this.initCategoryListPropValue(propValue);
+        return this._initCategoryListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.CATEGORY:
-        return this.initCategoryPropValue(propValue);
+        return this._initCategoryPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.IMAGE_LIST:
-        return this.initImageListPropValue(propValue);
+        return this._initImageListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.IMAGE:
-        return this.initImagePropValue(propValue);
+        return this._initImagePropValue(propValue);
 
       case IkasThemeJsonComponentPropType.LINK:
-        return this.initLinkPropValue(propValue);
+        return this._initLinkPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.PRODUCT_DETAIL:
-        return this.initProductPropValue(propValue);
+        return this._initProductPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.PRODUCT_LIST:
-        return this.initProductListPropValue(propValue);
+        return this._initProductListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE:
-        return this.initAttributePropValue(propValue);
+        return this._initAttributePropValue(propValue);
 
       case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE_LIST:
-        return this.initAttributeListPropValue(propValue);
+        return this._initAttributeListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.BLOG:
-        return this.initBlogPropValue(propValue);
+        return this._initBlogPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.BLOG_LIST:
-        return this.initBlogListPropValue(propValue);
+        return this._initBlogListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.BLOG_CATEGORY:
-        return this.initBlogCategoryPropValue(propValue);
+        return this._initBlogCategoryPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.BLOG_CATEGORY_LIST:
-        return this.initBlogCategoryListPropValue(propValue);
+        return this._initBlogCategoryListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.RAFFLE:
-        return this.initRafflePropValue(propValue);
+        return this._initRafflePropValue(propValue);
 
       case IkasThemeJsonComponentPropType.RAFFLE_LIST:
-        return this.initRaffleListPropValue(propValue);
+        return this._initRaffleListPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.SLIDER:
-        return this.initSliderPropValue(propValue);
+        return this._initSliderPropValue(propValue);
 
       case IkasThemeJsonComponentPropType.OBJECT:
         const objectValue: Record<string, any> = {};
@@ -534,10 +708,10 @@ export class IkasPageDataInit {
         }
 
       case IkasThemeJsonComponentPropType.COMPONENT:
-        return this.initComponentPropValue(propValue, settings, isBrowser);
+        return this._initComponentPropValue(propValue, settings, isBrowser);
 
       case IkasThemeJsonComponentPropType.COMPONENT_LIST:
-        return this.initComponentListPropValue(propValue, settings, isBrowser);
+        return this._initComponentListPropValue(propValue, settings, isBrowser);
 
       default:
         return propValue;
@@ -545,11 +719,17 @@ export class IkasPageDataInit {
   }
 
   static initComponentPropValue(
+    prop: IkasThemeJsonComponentProp,
     propValue: IkasPageComponentPropValue[],
+    pageComponentPropValue: IkasPageComponentPropValue,
     settings: IkasThemeJsonSettings,
     isBrowser?: boolean
   ) {
-    return this._initComponentPropValue(propValue, settings, isBrowser);
+    pageComponentPropValue.propValues[prop.name] = this._initComponentPropValue(
+      propValue,
+      settings,
+      isBrowser
+    );
   }
 
   static _initComponentPropValue(
@@ -561,12 +741,11 @@ export class IkasPageDataInit {
     if (!pValue) return;
 
     const pageComponentPropValue = new IkasPageComponentPropValue(pValue);
-    const initializedPageComponentPropValues =
-      IkasPageDataInit.initPagePropValues(
-        [pageComponentPropValue],
-        settings,
-        isBrowser
-      );
+    const initializedPageComponentPropValues = IkasPageDataInit.initPropValues(
+      [pageComponentPropValue],
+      settings,
+      isBrowser
+    );
 
     if (!initializedPageComponentPropValues.length) return;
 
@@ -576,11 +755,14 @@ export class IkasPageDataInit {
   }
 
   static initComponentListPropValue(
+    prop: IkasThemeJsonComponentProp,
     propValue: IkasPageComponentPropValue[],
+    pageComponentPropValue: IkasPageComponentPropValue,
     settings: IkasThemeJsonSettings,
     isBrowser?: boolean
   ) {
-    return this._initComponentListPropValue(propValue, settings, isBrowser);
+    pageComponentPropValue.propValues[prop.name] =
+      this._initComponentListPropValue(propValue, settings, isBrowser);
   }
 
   static _initComponentListPropValue(
@@ -592,7 +774,7 @@ export class IkasPageDataInit {
       return propValue.map((p: IkasPageComponentPropValue) => {
         const pageComponentPropValue = new IkasPageComponentPropValue(p);
         const initializedPageComponentPropValues =
-          IkasPageDataInit.initPagePropValues(
+          IkasPageDataInit.initPropValues(
             [pageComponentPropValue],
             settings,
             isBrowser
@@ -605,7 +787,16 @@ export class IkasPageDataInit {
     return [];
   }
 
-  static initBlogPropValue(propValue: IkasBlogPropValueData) {
+  static initBlogPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: IkasBlogPropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      IkasPageDataInit._initBlogPropValue(propValue);
+  }
+
+  static _initBlogPropValue(propValue: IkasBlogPropValueData) {
     if (propValue.blogPropValue.usePageData && this.pageSpecificData) {
       return this.pageSpecificData;
     }
@@ -617,11 +808,29 @@ export class IkasPageDataInit {
     return getPlaceholderBlog();
   }
 
-  static initBlogListPropValue(propValue: IkasBlogListParams) {
+  static initBlogListPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      this._initBlogListPropValue(propValue);
+  }
+
+  static _initBlogListPropValue(propValue: IkasBlogListParams) {
     return new IkasBlogList(propValue);
   }
 
-  static initBlogCategoryPropValue(propValue: IkasBlogCategoryPropValueData) {
+  static initBlogCategoryPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: IkasBlogCategoryPropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      IkasPageDataInit._initBlogCategoryPropValue(propValue);
+  }
+
+  static _initBlogCategoryPropValue(propValue: IkasBlogCategoryPropValueData) {
     if (propValue.blogCategoryPropValue.usePageData && this.pageSpecificData) {
       return this.pageSpecificData;
     }
@@ -633,11 +842,29 @@ export class IkasPageDataInit {
     return getPlaceholderBlogCategory();
   }
 
-  static initBlogCategoryListPropValue(propValue: IkasBlogCategoryListParams) {
+  static initBlogCategoryListPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      this._initBlogCategoryListPropValue(propValue);
+  }
+
+  static _initBlogCategoryListPropValue(propValue: IkasBlogCategoryListParams) {
     return new IkasBlogCategoryList(propValue);
   }
 
-  static initRafflePropValue(propValue: IkasRafflePropValueData) {
+  static initRafflePropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: IkasRafflePropValueData,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      IkasPageDataInit._initRafflePropValue(propValue);
+  }
+
+  static _initRafflePropValue(propValue: IkasRafflePropValueData) {
     if (propValue.rafflePropValue.usePageData && this.pageSpecificData) {
       return this.pageSpecificData;
     }
@@ -649,11 +876,29 @@ export class IkasPageDataInit {
     return new IkasRaffle(getPlaceholderRaffle() as any);
   }
 
-  static initRaffleListPropValue(propValue: IkasRaffleListParams) {
+  static initRaffleListPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      this._initRaffleListPropValue(propValue);
+  }
+
+  static _initRaffleListPropValue(propValue: IkasRaffleListParams) {
     return new IkasRaffleList(propValue);
   }
 
-  static initSliderPropValue(propValue: IkasSliderPropValueData) {
+  static initSliderPropValue(
+    prop: IkasThemeJsonComponentProp,
+    propValue: any,
+    pageComponentPropValue: IkasPageComponentPropValue
+  ) {
+    pageComponentPropValue.propValues[prop.name] =
+      this._initSliderPropValue(propValue);
+  }
+
+  static _initSliderPropValue(propValue: IkasSliderPropValueData) {
     return propValue;
   }
 }