@ikas/storefront 0.0.48 → 0.0.49

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

@@ -6,6 +6,7 @@ declare type Props = {
     description?: string | null;
     pageSpecificDataStr?: string;
     merchantSettings?: string;
+    addOgpMetas?: boolean;
 };
 export declare const IkasPageHead: React.FC<Props>;
 export {};

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

@@ -7,6 +7,7 @@ declare type Props = {
     pageSpecificDataStr?: string;
     settingsStr: string;
     merchantSettings?: string;
+    addOgpMetas?: boolean;
 };
 export declare const IkasPage: React.FC<Props>;
 export {};

package/build/index.es.js

@@ -25003,9 +25003,61 @@ var PolicyModal = observer(function (_a) {
 });
 
 var IkasPageHead = observer(function (_a) {
+    var _b;
     var page = _a.page, pageTitle = _a.pageTitle, description = _a.description, pageSpecificDataStr = _a.pageSpecificDataStr, props = __rest(_a, ["page", "pageTitle", "description", "pageSpecificDataStr"]);
+    var ogpMetas = [];
     var schemas = [];
+    if (props.addOgpMetas) {
+        ogpMetas.push({
+            property: "og:type",
+            content: "website",
+        });
+        if (typeof window !== "undefined") {
+            ogpMetas.push({
+                property: "og:site_name",
+                content: "https://" + window.location.hostname,
+            });
+        }
+        if (pageTitle) {
+            ogpMetas.push({
+                property: "og:title",
+                content: pageTitle,
+            });
+        }
+        if (description) {
+            ogpMetas.push({
+                property: "og:description",
+                content: description,
+            });
+        }
+        if (typeof window !== "undefined") {
+            ogpMetas.push({
+                property: "og:url",
+                content: window.location.href,
+            });
+        }
+        if (props.merchantSettings) {
+            if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === IkasThemePageType.PRODUCT) {
+                var productDetailParsed = JSON.parse(pageSpecificDataStr);
+                var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
+                if (productDetail.selectedVariant.mainImage) {
+                    ogpMetas.push({
+                        property: "og:image",
+                        content: (_b = productDetail.selectedVariant.mainImage) === null || _b === void 0 ? void 0 : _b.src,
+                    });
+                }
+            }
+            else {
+                var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
+                ogpMetas.push({
+                    property: "og:image",
+                    content: merchantSettings.logo.src,
+                });
+            }
+        }
+    }
     if (props.merchantSettings) {
+        // for schema.org
         var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
         var websiteSchema = createWebsiteSchema();
         var storeSchema = createStoreSchema(merchantSettings);
@@ -25030,12 +25082,14 @@ var IkasPageHead = observer(function (_a) {
     return (createElement(Head, null,
         createElement("title", null, pageTitle || ""),
         createElement("meta", { name: "description", content: description || "" }),
+        !!props.addOgpMetas &&
+            ogpMetas.map(function (ogpMeta, index) { return (createElement("meta", { key: ogpMeta.content + "-" + index, property: ogpMeta.property, content: ogpMeta.content })); }),
         !!schemas.length &&
             schemas.map(function (schema, index) { return (createElement("script", { key: index, type: "application/ld+json", dangerouslySetInnerHTML: {
                     __html: JSON.stringify(schema),
                 } })); })));
 });
-function createWebsiteSchema(merchantSettings) {
+function createWebsiteSchema() {
     var _a;
     var hostname = "";
     if (typeof window !== "undefined") {
@@ -25307,7 +25361,7 @@ var ThemeComponent = observer(function (_a) {
 
 var IkasPage = observer(function (_a) {
     var _b, _c;
-    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings;
+    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, addOgpMetas = _a.addOgpMetas;
     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, settingsStr: settingsStr }));
@@ -25320,7 +25374,7 @@ var IkasPage = observer(function (_a) {
     if (!page)
         return null;
     return (createElement(Fragment, null,
-        createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr, merchantSettings: merchantSettings }),
+        createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr, merchantSettings: merchantSettings, addOgpMetas: addOgpMetas }),
         createElement("div", { style: pageStyle },
             createElement("div", null,
                 headerComponent && renderComponent(headerComponent, -1),
@@ -25582,7 +25636,7 @@ var PageViewModel = /** @class */ (function () {
                 _this.theme.components[index] = new IkasThemeComponent(data.component);
         };
         this.handleAddNewPageComponent = function (data) { return __awaiter(_this, void 0, void 0, function () {
-            var pageComponent, pageComponentPropValue;
+            var pageComponent, pageComponentPropValues;
             var _this = this;
             var _a;
             return __generator(this, function (_b) {
@@ -25593,10 +25647,14 @@ var PageViewModel = /** @class */ (function () {
                             return [2 /*return*/];
                         return [4 /*yield*/, this.pageDataProvider.getPageComponentPropValues(pageComponent)];
                     case 1:
-                        pageComponentPropValue = _b.sent();
+                        pageComponentPropValues = _b.sent();
                         runInAction(function () {
                             var _a;
-                            _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValue);
+                            var customDataProps = pageComponentPropValues.component.props.filter(function (p) { return p.type === IkasThemeComponentPropType.CUSTOM; });
+                            customDataProps.forEach(function (customDataProp) {
+                                IkasPageDataProvider.initCustomDataPropValue(customDataProp, pageComponentPropValues.propValues[customDataProp.name], pageComponentPropValues, _this.router, true);
+                            });
+                            _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValues);
                             (_a = _this.page) === null || _a === void 0 ? void 0 : _a.components.push(pageComponent);
                         });
                         return [2 /*return*/];
@@ -25809,7 +25867,7 @@ var Page = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return (createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues }));
+    return (createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues, addOgpMetas: true }));
 };
 var getStaticProps = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -25845,7 +25903,7 @@ var Page$1 = function (_a) {
         setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router, isBrowser));
     }, [isBrowser, propValuesStr]);
     handleGTM(page, pageSpecificDataStr);
-    return (createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr, merchantSettings: merchantSettings }));
+    return (createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr, merchantSettings: merchantSettings, addOgpMetas: true }));
 };
 var index$1 = observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {

package/build/index.js

@@ -24984,9 +24984,61 @@ var PolicyModal = mobxReactLite.observer(function (_a) {
 });
 
 var IkasPageHead = mobxReactLite.observer(function (_a) {
+    var _b;
     var page = _a.page, pageTitle = _a.pageTitle, description = _a.description, pageSpecificDataStr = _a.pageSpecificDataStr, props = __rest(_a, ["page", "pageTitle", "description", "pageSpecificDataStr"]);
+    var ogpMetas = [];
     var schemas = [];
+    if (props.addOgpMetas) {
+        ogpMetas.push({
+            property: "og:type",
+            content: "website",
+        });
+        if (typeof window !== "undefined") {
+            ogpMetas.push({
+                property: "og:site_name",
+                content: "https://" + window.location.hostname,
+            });
+        }
+        if (pageTitle) {
+            ogpMetas.push({
+                property: "og:title",
+                content: pageTitle,
+            });
+        }
+        if (description) {
+            ogpMetas.push({
+                property: "og:description",
+                content: description,
+            });
+        }
+        if (typeof window !== "undefined") {
+            ogpMetas.push({
+                property: "og:url",
+                content: window.location.href,
+            });
+        }
+        if (props.merchantSettings) {
+            if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === exports.IkasThemePageType.PRODUCT) {
+                var productDetailParsed = JSON.parse(pageSpecificDataStr);
+                var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
+                if (productDetail.selectedVariant.mainImage) {
+                    ogpMetas.push({
+                        property: "og:image",
+                        content: (_b = productDetail.selectedVariant.mainImage) === null || _b === void 0 ? void 0 : _b.src,
+                    });
+                }
+            }
+            else {
+                var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
+                ogpMetas.push({
+                    property: "og:image",
+                    content: merchantSettings.logo.src,
+                });
+            }
+        }
+    }
     if (props.merchantSettings) {
+        // for schema.org
         var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
         var websiteSchema = createWebsiteSchema();
         var storeSchema = createStoreSchema(merchantSettings);
@@ -25011,12 +25063,14 @@ var IkasPageHead = mobxReactLite.observer(function (_a) {
     return (React.createElement(Head__default['default'], null,
         React.createElement("title", null, pageTitle || ""),
         React.createElement("meta", { name: "description", content: description || "" }),
+        !!props.addOgpMetas &&
+            ogpMetas.map(function (ogpMeta, index) { return (React.createElement("meta", { key: ogpMeta.content + "-" + index, property: ogpMeta.property, content: ogpMeta.content })); }),
         !!schemas.length &&
             schemas.map(function (schema, index) { return (React.createElement("script", { key: index, type: "application/ld+json", dangerouslySetInnerHTML: {
                     __html: JSON.stringify(schema),
                 } })); })));
 });
-function createWebsiteSchema(merchantSettings) {
+function createWebsiteSchema() {
     var _a;
     var hostname = "";
     if (typeof window !== "undefined") {
@@ -25288,7 +25342,7 @@ var ThemeComponent = mobxReactLite.observer(function (_a) {
 
 var IkasPage = mobxReactLite.observer(function (_a) {
     var _b, _c;
-    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings;
+    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, addOgpMetas = _a.addOgpMetas;
     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, settingsStr: settingsStr }));
@@ -25301,7 +25355,7 @@ var IkasPage = mobxReactLite.observer(function (_a) {
     if (!page)
         return null;
     return (React.createElement(React.Fragment, null,
-        React.createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr, merchantSettings: merchantSettings }),
+        React.createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr, merchantSettings: merchantSettings, addOgpMetas: addOgpMetas }),
         React.createElement("div", { style: pageStyle },
             React.createElement("div", null,
                 headerComponent && renderComponent(headerComponent, -1),
@@ -25563,7 +25617,7 @@ var PageViewModel = /** @class */ (function () {
                 _this.theme.components[index] = new IkasThemeComponent(data.component);
         };
         this.handleAddNewPageComponent = function (data) { return __awaiter(_this, void 0, void 0, function () {
-            var pageComponent, pageComponentPropValue;
+            var pageComponent, pageComponentPropValues;
             var _this = this;
             var _a;
             return __generator(this, function (_b) {
@@ -25574,10 +25628,14 @@ var PageViewModel = /** @class */ (function () {
                             return [2 /*return*/];
                         return [4 /*yield*/, this.pageDataProvider.getPageComponentPropValues(pageComponent)];
                     case 1:
-                        pageComponentPropValue = _b.sent();
+                        pageComponentPropValues = _b.sent();
                         mobx.runInAction(function () {
                             var _a;
-                            _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValue);
+                            var customDataProps = pageComponentPropValues.component.props.filter(function (p) { return p.type === exports.IkasThemeComponentPropType.CUSTOM; });
+                            customDataProps.forEach(function (customDataProp) {
+                                IkasPageDataProvider.initCustomDataPropValue(customDataProp, pageComponentPropValues.propValues[customDataProp.name], pageComponentPropValues, _this.router, true);
+                            });
+                            _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValues);
                             (_a = _this.page) === null || _a === void 0 ? void 0 : _a.components.push(pageComponent);
                         });
                         return [2 /*return*/];
@@ -25790,7 +25848,7 @@ var Page = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues }));
+    return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues, addOgpMetas: true }));
 };
 var getStaticProps = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -25826,7 +25884,7 @@ var Page$1 = function (_a) {
         setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router$1, isBrowser));
     }, [isBrowser, propValuesStr]);
     handleGTM(page, pageSpecificDataStr);
-    return (React.createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr, merchantSettings: merchantSettings }));
+    return (React.createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr, merchantSettings: merchantSettings, addOgpMetas: true }));
 };
 var index$1 = mobxReactLite.observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {

package/package.json

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