@gem-sdk/pages 1.36.0 → 1.36.20

package/dist/cjs/components/builder/Toolbox.js

@@ -29,6 +29,7 @@ const Toolbox = ()=>{
     const addSection = core.useSectionStore((s)=>s.addSection);
     const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
     const updateItemName = core.useBuilderPreviewStore((s)=>s.updateItemName);
+    const updateItemAttribute = core.useBuilderPreviewStore((s)=>s.updateItemAttribute);
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
@@ -304,6 +305,14 @@ const Toolbox = ()=>{
     }, [
         updateItemName
     ]);
+    const onUpdateItemAttribute = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.uid) {
+            updateItemAttribute(detail.uid, detail.value || '', detail.attr || '');
+        }
+    }, [
+        updateItemAttribute
+    ]);
     react.useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -328,6 +337,7 @@ const Toolbox = ()=>{
         window.addEventListener('set-dynamic-product', onUpdateDynamicProduct);
         window.addEventListener('set-dynamic-collection', onUpdateDynamicCollection);
         window.addEventListener('update-item-name', onUpdateItemName);
+        window.addEventListener('update-item-attribute', onUpdateItemAttribute);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -344,6 +354,7 @@ const Toolbox = ()=>{
             window.removeEventListener('set-dynamic-product', onUpdateDynamicProduct);
             window.removeEventListener('set-dynamic-collection', onUpdateDynamicCollection);
             window.removeEventListener('update-item-name', onUpdateItemName);
+            window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
         };
     }, [
         onAddEntity,
@@ -361,7 +372,8 @@ const Toolbox = ()=>{
         onUpdateCreateThemeSectionCount,
         onUpdateDynamicProduct,
         onUpdateDynamicCollection,
-        onUpdateItemName
+        onUpdateItemName,
+        onUpdateItemAttribute
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

package/dist/cjs/libs/api/get-static-page-props-v2.js

@@ -9,6 +9,7 @@ var getFallback = require('../helpers/get-fallback.js');
 var normalize = require('../helpers/normalize.js');
 var parseJson = require('../helpers/parse-json.js');
 var nextjs = require('@sentry/nextjs');
+var customFonts = require('../custom-fonts.js');
 
 const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
         try {
@@ -33,14 +34,16 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 throw new Error(theme.reason?.[0]);
             }
             const dataBuilder = theme.value.publishedThemePages?.[0];
+            const themePageCustomFonts = theme.value?.publishedThemePages?.[0]?.themePageCustomFonts;
             if (!dataBuilder) {
                 throw new Error(`No data builder found for slug: /${slug}`);
             }
             const pageTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
-            const [elementFontStyle, fontStyle, fallback] = await Promise.all([
+            const [elementFontStyle, fontStyle, fallback, customFonts$1] = await Promise.all([
                 googleFonts.getFontStyleFromPageTemplate(pageTemplate),
                 googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
-                getFallback.getFallbackV2(fetcher, pageTemplate)
+                getFallback.getFallbackV2(fetcher, pageTemplate),
+                customFonts.getCustomFonts(themePageCustomFonts)
             ]);
             const mobileOnly = dataBuilder.isMobile ?? false;
             const description = dataBuilder?.themePageDataSEO?.find((item)=>item?.key === 'global-meta-description')?.value;
@@ -137,7 +140,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
                 customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
                 customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
-                pageHandle: dataBuilder.handle ?? null
+                pageHandle: dataBuilder.handle ?? null,
+                customFonts: customFonts$1
             });
         } catch (err) {
             nextjs.captureException(err);

package/dist/cjs/libs/custom-fonts.js

@@ -0,0 +1,62 @@
+'use strict';
+
+const composeFontMimeType = (fonts)=>{
+    const result = {};
+    fonts?.forEach((font)=>{
+        if (!font) return;
+        const fontKey = `${font.fontFamily}_${font.fontStyle}_${font.fontWeight}`;
+        const fontData = {
+            font: {
+                fontFamily: font.fontFamily,
+                fontStyle: font.fontStyle,
+                fontWeight: font.fontWeight
+            },
+            urls: [
+                {
+                    url: font.backupFilePath || font.filePath,
+                    mimeType: font.mimeType
+                }
+            ]
+        };
+        if (!result[fontKey]) {
+            result[fontKey] = fontData;
+        } else {
+            result[fontKey]?.urls.push(fontData?.urls?.[0]);
+        }
+    });
+    return result;
+};
+// Currently support only ttf, otf, woff, woff2
+const formatName = (mimeType)=>{
+    const fontMimeTypes = {
+        'font/ttf': 'truetype',
+        'application/x-font-opentype': 'opentype',
+        'application/font-woff': 'woff',
+        'application/font-woff2': 'woff2'
+    };
+    return fontMimeTypes[mimeType];
+};
+const composeFontFaces = (fontsMimeType)=>{
+    const fontFaces = [];
+    for (const [, value] of Object.entries(fontsMimeType)){
+        fontFaces.push(`
+        @font-face {
+          font-family: '${value.font.fontFamily}';
+          src: ${value.urls.map((item)=>`url('${item.url}') format('${formatName(item.mimeType)}')`).join('\n')};
+          font-style: ${value?.font?.fontStyle ?? 'normal'};
+          font-weight: ${value?.font?.fontWeight ?? 'normal'};
+        }
+      `);
+    }
+    return fontFaces.map((fontFace)=>fontFace).join('\n');
+};
+const getCustomFonts = (fonts)=>{
+    if (!fonts) return null;
+    const fontsMimeType = composeFontMimeType(fonts);
+    return composeFontFaces(fontsMimeType);
+};
+
+exports.composeFontFaces = composeFontFaces;
+exports.composeFontMimeType = composeFontMimeType;
+exports.formatName = formatName;
+exports.getCustomFonts = getCustomFonts;

package/dist/cjs/libs/helpers/gen-css.js

@@ -70,6 +70,12 @@ const getValueByDevice = (data, device)=>{
 const genCSSVariable = (deviceData)=>{
     return Object.entries(mapObject(flattenObject(deviceData))).map(([key, value])=>{
         if (value === undefined) return undefined;
+        if ([
+            'font-heading',
+            'font-body'
+        ].includes(key)) {
+            return `--g-${key}: '${value}'`;
+        }
         return `--g-${key}:${value}`;
     }).filter((v)=>v !== undefined).join(';');
 };

package/dist/cjs/pages/static-v2.js

@@ -8,7 +8,7 @@ var router = require('next/router');
 var useTrackingView = require('../libs/hooks/use-tracking-view.js');
 var parseHtml = require('../libs/parse-html.js');
 
-const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle })=>{
+const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts })=>{
     const router$1 = router.useRouter();
     useTrackingView.useTrackingView(shopToken, pageHandle, router$1.isFallback);
     if (router$1.isFallback) {
@@ -58,7 +58,14 @@ const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, f
                             dangerouslySetInnerHTML: {
                                 __html: fontStyle
                             }
-                        }, fontStyle))
+                        }, fontStyle)),
+                    customFonts && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        "data-id": "custom-element-fonts",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: customFonts
+                        }
+                    }, fontStyle)
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {

package/dist/esm/components/builder/Toolbox.js

@@ -25,6 +25,7 @@ const Toolbox = ()=>{
     const addSection = useSectionStore((s)=>s.addSection);
     const changeSwatches = useShopStore((s)=>s.changeSwatches);
     const updateItemName = useBuilderPreviewStore((s)=>s.updateItemName);
+    const updateItemAttribute = useBuilderPreviewStore((s)=>s.updateItemAttribute);
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
@@ -300,6 +301,14 @@ const Toolbox = ()=>{
     }, [
         updateItemName
     ]);
+    const onUpdateItemAttribute = useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.uid) {
+            updateItemAttribute(detail.uid, detail.value || '', detail.attr || '');
+        }
+    }, [
+        updateItemAttribute
+    ]);
     useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -324,6 +333,7 @@ const Toolbox = ()=>{
         window.addEventListener('set-dynamic-product', onUpdateDynamicProduct);
         window.addEventListener('set-dynamic-collection', onUpdateDynamicCollection);
         window.addEventListener('update-item-name', onUpdateItemName);
+        window.addEventListener('update-item-attribute', onUpdateItemAttribute);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -340,6 +350,7 @@ const Toolbox = ()=>{
             window.removeEventListener('set-dynamic-product', onUpdateDynamicProduct);
             window.removeEventListener('set-dynamic-collection', onUpdateDynamicCollection);
             window.removeEventListener('update-item-name', onUpdateItemName);
+            window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
         };
     }, [
         onAddEntity,
@@ -357,7 +368,8 @@ const Toolbox = ()=>{
         onUpdateCreateThemeSectionCount,
         onUpdateDynamicProduct,
         onUpdateDynamicCollection,
-        onUpdateItemName
+        onUpdateItemName,
+        onUpdateItemAttribute
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

package/dist/esm/libs/api/get-static-page-props-v2.js

@@ -7,6 +7,7 @@ import { getFallbackV2 } from '../helpers/get-fallback.js';
 import { parseBuilderTemplateV2 } from '../helpers/normalize.js';
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
 import { captureException } from '@sentry/nextjs';
+import { getCustomFonts } from '../custom-fonts.js';
 
 const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
         try {
@@ -31,14 +32,16 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 throw new Error(theme.reason?.[0]);
             }
             const dataBuilder = theme.value.publishedThemePages?.[0];
+            const themePageCustomFonts = theme.value?.publishedThemePages?.[0]?.themePageCustomFonts;
             if (!dataBuilder) {
                 throw new Error(`No data builder found for slug: /${slug}`);
             }
             const pageTemplate = parseBuilderTemplateV2(dataBuilder);
-            const [elementFontStyle, fontStyle, fallback] = await Promise.all([
+            const [elementFontStyle, fontStyle, fallback, customFonts] = await Promise.all([
                 getFontStyleFromPageTemplate(pageTemplate),
                 getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
-                getFallbackV2(fetcher, pageTemplate)
+                getFallbackV2(fetcher, pageTemplate),
+                getCustomFonts(themePageCustomFonts)
             ]);
             const mobileOnly = dataBuilder.isMobile ?? false;
             const description = dataBuilder?.themePageDataSEO?.find((item)=>item?.key === 'global-meta-description')?.value;
@@ -135,7 +138,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
                 customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
                 customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
-                pageHandle: dataBuilder.handle ?? null
+                pageHandle: dataBuilder.handle ?? null,
+                customFonts
             });
         } catch (err) {
             captureException(err);

package/dist/esm/libs/custom-fonts.js

@@ -0,0 +1,57 @@
+const composeFontMimeType = (fonts)=>{
+    const result = {};
+    fonts?.forEach((font)=>{
+        if (!font) return;
+        const fontKey = `${font.fontFamily}_${font.fontStyle}_${font.fontWeight}`;
+        const fontData = {
+            font: {
+                fontFamily: font.fontFamily,
+                fontStyle: font.fontStyle,
+                fontWeight: font.fontWeight
+            },
+            urls: [
+                {
+                    url: font.backupFilePath || font.filePath,
+                    mimeType: font.mimeType
+                }
+            ]
+        };
+        if (!result[fontKey]) {
+            result[fontKey] = fontData;
+        } else {
+            result[fontKey]?.urls.push(fontData?.urls?.[0]);
+        }
+    });
+    return result;
+};
+// Currently support only ttf, otf, woff, woff2
+const formatName = (mimeType)=>{
+    const fontMimeTypes = {
+        'font/ttf': 'truetype',
+        'application/x-font-opentype': 'opentype',
+        'application/font-woff': 'woff',
+        'application/font-woff2': 'woff2'
+    };
+    return fontMimeTypes[mimeType];
+};
+const composeFontFaces = (fontsMimeType)=>{
+    const fontFaces = [];
+    for (const [, value] of Object.entries(fontsMimeType)){
+        fontFaces.push(`
+        @font-face {
+          font-family: '${value.font.fontFamily}';
+          src: ${value.urls.map((item)=>`url('${item.url}') format('${formatName(item.mimeType)}')`).join('\n')};
+          font-style: ${value?.font?.fontStyle ?? 'normal'};
+          font-weight: ${value?.font?.fontWeight ?? 'normal'};
+        }
+      `);
+    }
+    return fontFaces.map((fontFace)=>fontFace).join('\n');
+};
+const getCustomFonts = (fonts)=>{
+    if (!fonts) return null;
+    const fontsMimeType = composeFontMimeType(fonts);
+    return composeFontFaces(fontsMimeType);
+};
+
+export { composeFontFaces, composeFontMimeType, formatName, getCustomFonts };

package/dist/esm/libs/helpers/gen-css.js

@@ -68,6 +68,12 @@ const getValueByDevice = (data, device)=>{
 const genCSSVariable = (deviceData)=>{
     return Object.entries(mapObject(flattenObject(deviceData))).map(([key, value])=>{
         if (value === undefined) return undefined;
+        if ([
+            'font-heading',
+            'font-body'
+        ].includes(key)) {
+            return `--g-${key}: '${value}'`;
+        }
         return `--g-${key}:${value}`;
     }).filter((v)=>v !== undefined).join(';');
 };

package/dist/esm/pages/static-v2.js

@@ -6,7 +6,7 @@ import { useRouter } from 'next/router';
 import { useTrackingView } from '../libs/hooks/use-tracking-view.js';
 import { parseHtml } from '../libs/parse-html.js';
 
-const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle })=>{
+const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts })=>{
     const router = useRouter();
     useTrackingView(shopToken, pageHandle, router.isFallback);
     if (router.isFallback) {
@@ -56,7 +56,14 @@ const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, f
                             dangerouslySetInnerHTML: {
                                 __html: fontStyle
                             }
-                        }, fontStyle))
+                        }, fontStyle)),
+                    customFonts && /*#__PURE__*/ jsx("style", {
+                        "data-id": "custom-element-fonts",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: customFonts
+                        }
+                    }, fontStyle)
                 ]
             }),
             /*#__PURE__*/ jsx(PageProvider, {

package/dist/types/index.d.ts

@@ -37,6 +37,7 @@ type PageBuilderProps = {
     customCodeHeader?: string | null;
     customCodeBody?: string | null;
     isStorefront?: boolean;
+    customFonts?: string | null;
 };
 type PageBuilderPropsV2 = {
     builderData?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.36.0",
+  "version": "1.36.20",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
     "next-seo": "^6.0.0"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.36.0",
+    "@gem-sdk/core": "1.36.20",
     "@gem-sdk/plugin-cookie-bar": "1.35.0",
     "@gem-sdk/plugin-quick-view": "1.35.0",
     "@gem-sdk/plugin-sticky-add-to-cart": "1.35.0"