[ { "lastUpdatedBy": "eKkJ2UiI2tPDREXNlNnSplF1SqP2", "folders": [], "data": { "jsCode": "var __awaiter=function(e,n,t,r){return new(t||(t=Promise))((function(o,a){function i(e){try{u(r.next(e))}catch(e){a(e)}}function l(e){try{u(r.throw(e))}catch(e){a(e)}}function u(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(i,l)}u((r=r.apply(e,n||[])).next())}))},__generator=function(e,n){var t,r,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:l(0),throw:l(1),return:l(2)},\"function\"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(a){return function(l){return function(a){if(t)throw new TypeError(\"Generator is already executing.\");for(;i;)try{if(t=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,r=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=(o=i.trys).length>0&&o[o.length-1])&&(6===a[0]||2===a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]coming soon\\n \",window.tagDefs={\"marker-preorder\":{tagType:\"colored\",text:\"pre order\"},\"marker-new\":{tagType:\"solid\",text:\"new\"},\"marker-sale\":{tagType:\"hollow\",text:\"sale\"},\"marker-replacement\":{tagType:\"hollow\",text:\"replacement\"}},state.tagDefs=window.tagDefs),[2]}))}))}var _virtual_index=main();return _virtual_index", "inputs": [], "liquidTargeting": { "liquidSnippets": [], "propertyOrder": [], "previouslyOrderedCollections": [], "selectedCurrency": "", "@type": "@builder.io/core:LiquidTargeting", "previouslyOrderedProducts": [], "productIsInCollections": [], "urlIncludes": "", "products": [], "customerStatus": "any", "locales": [], "cartStatus": "", "cartContainsProductWithTag": [], "customerAcceptsMarketing": "any", "collections": [], "previouslyOrderedProductOfType": [], "cartContainsProduct": [], "previouslyOrderedProductTags": [], "customerTags": [], "cartContainsProductInCollection": [], "cartContainsProductOfType": [], "productType": [], "productTags": [] }, "customFonts": [ { "fileUrl": "https://cdn.builder.io/o/assets%2F64dd5478e25746bf9db3b6c0319905f6%2Fcda62180cb7c4846865787d54e56ca2f?alt=media&token=3290abba-d7b2-4a60-841a-acf8b77c5a7c&apiKey=64dd5478e25746bf9db3b6c0319905f6", "isUserFont": true, "category": "serif", "family": "Neue Haas Grotesk Display Pro - 75 Bold" }, { "fileUrl": "https://cdn.builder.io/o/assets%2F64dd5478e25746bf9db3b6c0319905f6%2F2793a31f5c7b4eea8f9089a163d04b25?alt=media&token=7fa1ef0d-a102-46b2-a75c-8c3332b5b8c9&apiKey=64dd5478e25746bf9db3b6c0319905f6", "isUserFont": true, "family": "Neue Haas Grotesk Display Pro - Medium", "category": "sans-serif" }, { "fileUrl": "https://cdn.builder.io/o/assets%2F64dd5478e25746bf9db3b6c0319905f6%2F801ad1fc927c41ef959636b8424c18b6?alt=media&token=269259f3-2e52-4b04-b789-5e22187828bf&apiKey=64dd5478e25746bf9db3b6c0319905f6", "isUserFont": true, "category": "serif", "family": "Neue Haas Grotesk Display Pro - 55 Roman" } ], "cssCode": "/*\n* Custom CSS styles\n*\n* Global by default, but use `&` to scope to just this content, e.g.\n*\n* & .foo {\n* color: 'red'\n* }\n*/\n\n.collection>div {\n flex: 1;\n}\n\n.prod-box {\n color: #000;\n}\n.prod-placeholder {\n display: flex;\n min-height: 0px;\n max-height: 0px;\n height: 0px;\n padding: 0;\n border: none;\n}\n.prod-box, .prod-placeholder {\n flex: 1 0 calc(min(1648px, 100vw) * .305);\n max-width: calc(min(1648px, 100vw) * .32039);\n}\n/*- MOBILE Product Box -*/\n@media only screen and (max-width: 991px) {\n .prod-box, .prod-placeholder {\n flex: 1 0 calc(min(1648px, 100vw) * .398);\n max-width: calc(min(1648px, 100vw) * .45385);\n }\n}\n\n.prod-img-frame {\n background: #F4F3F3;\n border-radius: 8px;\n}\n.prod-box:hover .prod-img-frame:not([data-coming-soon=\"true\"]) {\n background: #DFDFDF;\n}\n.prod-tag {\n position: absolute;\n left: 16px;\n top: 16px;\n padding: 8px 16px;\n width: fit-content;\n max-width: calc(100% - 16px);\n overflow: hidden;\n border-radius: 40px;\n}\n.prod-tag[data-type='colored'] {\n color: #FFF;\n background: #4D1EF7;\n}\n.prod-tag[data-type='solid'] {\n color: #FFF;\n background: #000;\n}\n.prod-tag[data-type='hollow'] {\n color: #000;\n padding: 7px 15px;\n border: 1px solid #000;\n}\n.prod-title {\n color: #000;\n}\n.prod-title>div {\n flex: 1;\n}\n.prod-price[data-hide-price=\"true\"] {\n color: #787E81;\n}\n.prod-box .prod-img-frame[data-coming-soon=\"true\"],\n.prod-box .prod-title[data-coming-soon=\"true\"] {\n cursor: default;\n}\n.prod-box .prod-img-frame[data-coming-soon=\"false\"],\n.prod-box .prod-title[data-coming-soon=\"false\"] {\n cursor: pointer;\n}\n.prod-box svg {\n margin: 0px 0px -2px 12px;\n}\n.prod-box:not(:hover) svg {\n display: none;\n}\n.prod-box .coming-soon-title {\n position: absolute;\n left: 16px;\n top: -24px;\n transform: translateY(-100%);\n padding: 3px 8px;\n background: #DFDFDF;\n color: #787e81;\n border-radius: 8px;\n white-space: nowrap;\n}\n/* .prod-box:not(:hover) .coming-soon-title {\n display: none;\n} */\n/*- MOBILE Product -*/\n@media only screen and (max-width: 991px) {\n .prod-tag {\n left: 12px;\n top: 12px;\n display: flex;\n align-content: center;\n max-width: calc(calc(100% - 2.052vw) - 12px);\n }\n .prod-box svg {\n display: none;\n }\n .prod-box .coming-soon-title {\n left: 12px;\n }\n}\n\n.product-label > div {\n width: 100%;\n}\n.product-label > div > div > div > div {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 30px\n}", "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "RESCOPE SHOPIFY DATA", "id": "builder-8784ab46ddac454a903cc503bca9dc87", "meta": { "previousId": "builder-4899275ead2f467298edebb4e7d45e9e" }, "component": { "name": "Custom Code", "options": { "code": "\n", "replaceNodes": true } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "position": "relative", "flexShrink": "0", "boxSizing": "border-box" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state" }, "layerName": "Shopify-Linked Content (Dynamic)", "id": "builder-afde5d63d820460198f79732c4b8ad13", "class": "collection", "meta": { "version": "0.0.91", "previousId": "builder-9fd1d6daf1874044bc9c45b85a730ede" }, "component": { "name": "Symbol", "options": { "symbol": { "inline": true, "data": { "apiKey": "64dd5478e25746bf9db3b6c0319905f6", "limit": 50, "collection": "400354279641" }, "meta": { "fieldName": "Product Collection", "documentationNote": "Product collection boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/collection-box", "isProductCollection": true }, "content": { "data": { "jsCode": "if(Builder.isBrowser){var shopifyWindow=window;shopifyWindow.BuilderJsonData&&shopifyWindow.BuilderJsonData.collection&&(context.overrideCollectionId=shopifyWindow.BuilderJsonData.collection.id,context.collectionObject=shopifyWindow.BuilderJsonData.collection)}var getCollectionId=function(){if(\"context_placeholder\"===state.collection)return context.overrideCollectionId;var t=state.collection;return\"object\"==typeof t&&t&&\"@builder.io/core:Request\"===t[\"@type\"]&&(t=t.options.collection),t},lastCollectionId=getCollectionId(),lastLimit=10,lastHideIfUnavailable=state.hideIfUnavailable||!1;function updateCollection(){var t=getCollectionId();if(!state.collectionInfo||t)if(t){state.loading=!0,lastLimit=state.limit?state.limit:10;var e=window.Shopify||{},i=(null===(_a=e.currency)||void 0===_a?void 0:_a.active)||\"USD\";fetch(\"https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=\".concat(state.apiKey||context.apiKey||builder.apiKey,\"&collectionId=\").concat(t,\"&limit=\").concat(state.limit?state.limit:10,\"¤cyIsoCode=\").concat(i)).then((function(t){return t.json()})).then((function(t){var e=t;if(state.hideIfUnavailable){var i=e.products.filter((function(t){return t.variants.some((function(t){return t.availableForSale}))}));e.products=i}state.collectionInfo=e,state.loading=!1})).catch((function(t){console.error(\"Error fetching Shopify product\",t),state.loading=!1}))}else state.collectionInfo=null}Builder.isEditing&&ref.onStateChange.subscribe((function(){var t=getCollectionId();lastCollectionId===t&&lastLimit===state.limit&&lastHideIfUnavailable===state.hideIfUnavailable||(updateCollection(),lastCollectionId=t,lastHideIfUnavailable=state.hideIfUnavailable)})),updateCollection()", "inputs": [ { "@type": "@builder.io/core:Field", "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "name": "collection", "type": "ShopifyCollection", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "name": "limit", "type": "number", "defaultValue": 10, "required": false, "subFields": [], "helperText": "Number of products to show from the collection", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "name": "hideIfUnavailable", "friendlyName": "Hide product(s) if unavailable", "type": "boolean", "required": false, "subFields": [], "helperText": "Hide any product that is unavailable for purchase. Useful in situtations where you want to only show in stock products and have limited inventory", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 80//32", "id": "builder-11dd7d774501419e846589c7d7285b0d", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.loading" }, "layerName": "Loading spinner", "id": "builder-731a861d89694cfa863f37ab4ea39a25", "layerLocked": true, "meta": { "version": "0.0.91" }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "15px", "width": "4em", "height": "4em", "borderRadius": "50%", "margin": "6rem auto", "fontSize": "1rem", "textIndent": "-9999em", "borderTop": "0.2em solid rgba(131, 132, 137, 0.2)", "borderRight": "0.2em solid rgba(131, 132, 137, 0.2)", "borderBottom": "0.2em solid rgba(131, 132, 137, 0.2)", "borderLeft": "0.2em solid #454749", "transform": "translateZ(0)", "animationIterationCount": "infinite", "animationTimingFunction": "inear", "animationDuration": "1.1s", "animationName": "_EMO_animation-16036bv_@keyframes animation-16036bv{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}_EMO_" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=state.collectionInfo?JSON.stringify(state.collectionInfo):\"\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "return !!state.collectionInfo ? JSON.stringify(state.collectionInfo) : \"\";\n" } }, "layerName": "[DEBUG: COLLECTION JSON]", "id": "builder-359af265fe4c4e318896a3edc93dbed0", "meta": { "bindingActions": { "component": { "options": { "text": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.collectionInfo ? JSON.stringify(state.collectionInfo) : '';" } } ] } } }, "previousId": "builder-dd592b66c3574a77adc9a913ca6db33a" }, "component": { "name": "Text", "options": { "text": "Enter some text..." } }, "responsiveStyles": { "large": { "display": "none", "flexDirection": "column", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "lineHeight": "normal", "height": "auto" }, "medium": { "display": "none" }, "small": { "display": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "var returnValue=state.collectionInfo&&state.collectionInfo.products&&state.collectionInfo.products.length;return returnValue" }, "code": { "bindings": { "show": "//console.log('bwah!!', state); //debug\nreturn state.collectionInfo && state.collectionInfo.products && state.collectionInfo.products.length;" } }, "layerName": "Builder Grid", "id": "builder-52f886984c3c41c6aa636d2e7ac1c41a", "meta": { "version": "0.0.91" }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.symbol.data.productBoxHasChildren": "\n var _a, _b;\n return ((_b = (_a = block === null || block === void 0 ? void 0 : block.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.symbol.content.data.blocks.length) > 3;\n", "component.options.symbol.data.productInfo": "state.product" }, "repeat": { "collection": "collectionInfo.products", "itemName": "product" }, "layerName": "Product Box", "id": "builder-74e3e00783e54784b7131a6cb6808628", "properties": { "data-slot": "shopify:productBox" }, "class": "prod-box", "meta": { "version": "0.0.91", "kind": "ProductBox", "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "meta": { "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ] } } } }, "component": { "name": "Symbol", "options": { "symbol": { "data": { "loading": false, "product": "", "productBoxHasChildren": false, "apiKey": "64dd5478e25746bf9db3b6c0319905f6" }, "meta": { "fieldName": "Product Box", "documentationNote": "Product boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/product-box" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "name": "product", "type": "ShopifyProduct", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); });\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "name": "defaultVariantId", "friendlyName": "Default Variant", "type": "ShopifyProductVariant", "required": false, "subFields": [], "helperText": "Only choose a default variant if you want to have a specific variant be selected when the product box loads", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return (options.get('product') &&\n !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); }));\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "jsCode": "context.setState=function(t){for(var a in t)state[a]=t[a];\"selectedProductVariant\"in t&&onProductVariantChange()};var onProductVariantChange=function(){state.selectedProductVariant&&(state.selectedImage=state.selectedProductVariant.image||state.selectedImage)},getProductId=function(){if(\"context_placeholder\"===state.product)return context.overrideProductId;var t=state.product;return\"object\"==typeof t&&t&&\"@builder.io/core:Request\"===t[\"@type\"]&&(t=t.options.product),t},lastProductId=getProductId(),lastDefaultVariantId=state.defaultVariantId;function setDefaultVariant(){var t=state.productInfo,a=t.variants.find((function(t){return t.availableForSale}))||t.variants[0];if(state.defaultVariantId){var e=t.variants.find((function(t){return String(t.id)===String(state.defaultVariantId)}));e&&(a=e)}state.selectedProductVariant=a,state.selectedImage=(null==a?void 0:a.image)||t.images[0]}function updateProduct(){var t,a=getProductId();if(state.productInfo&&!a){var e=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],r=e.length?e[0]:\"NOTAG\";return state.productInfo.tagDef=window.tagDefs[r]?window.tagDefs[r]:{tagType:\"NOTAG\",text:\"n/a\"},void setDefaultVariant()}if(a){state.loading=!0;var n=(null===(t=(window.Shopify||{}).currency)||void 0===t?void 0:t.active)||\"USD\";return fetch(\"https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=\".concat(state.apiKey||context.apiKey||builder.apiKey,\"&productId=\").concat(a,\"¤cyIsoCode=\").concat(n)).then((function(t){return t.json()})).then((function(t){var a=t.products;if(a&&a.length){var e=a[0];state.productInfo=e;var r=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],n=r.length?r[0]:\"NOTAG\";state.productInfo.tagDef=window.tagDefs[n]?window.tagDefs[n]:{tagType:\"NOTAG\",text:\"n/a\"},setDefaultVariant()}state.loading=!1})).catch((function(t){console.error(\"Error fetching Shopify product\",t),state.loading=!1}))}state.productInfo=null}Builder.isEditing&&ref.onStateChange.subscribe((function(){var t=getProductId(),a=state.defaultVariantId;lastProductId!==t?updateProduct():(a!==lastDefaultVariantId||state.productInfo&&!state.selectedProductVariant)&&setDefaultVariant(),lastProductId=t,lastDefaultVariantId=a})),state.productInfo&&!state.selectedProductVariant&&setDefaultVariant(),updateProduct()", "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.loading && !state.productInfo" }, "layerName": "Loading spinner", "id": "builder-3996e9c43e164e68b6ba5a8dec01ae9e", "meta": { "version": "0.0.91" }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "15px", "width": "4em", "height": "4em", "borderRadius": "50%", "margin": "6rem auto", "fontSize": "1rem", "textIndent": "-9999em", "borderTop": "0.2em solid rgba(131, 132, 137, 0.2)", "borderRight": "0.2em solid rgba(131, 132, 137, 0.2)", "borderBottom": "0.2em solid rgba(131, 132, 137, 0.2)", "borderLeft": "0.2em solid #454749", "transform": "translateZ(0)", "animationIterationCount": "infinite", "animationTimingFunction": "inear", "animationDuration": "1.1s", "animationName": "_EMO_animation-16036bv_@keyframes animation-16036bv{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}_EMO_" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "show": "var _virtual_index=state.productInfo;return _virtual_index", "href": "var _virtual_index=!state.productInfo||state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"#\":\"\".concat(window.BigData.rootUrl,\"products/\").concat(state.productInfo.handle);return _virtual_index" }, "code": { "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "show": "state.productInfo", "href": "!state.productInfo ||\n(!!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length)\n ? \"#\"\n : `${window.BigData.rootUrl}products/${state.productInfo.handle}`;\n" } }, "layerName": "Product Image", "tagName": "a", "id": "builder-1fe1d12538c24af4907fdb23035450c1", "properties": { "data-coming-soon": "", "href": "", "target": "_self" }, "class": "prod-img-frame", "meta": { "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "href": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!state.productInfo || (!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length) ? '#' : `${window.BigData.rootUrl}products/${state.productInfo.handle}`" } } ] } }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "actions": { "mouseOver": "\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[1]) {\n context.setState({\n selectedImage: state.productInfo.images[1],\n });\n }\n }\n", "mouseOut": "\n var _a;\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[0]) {\n context.setState({\n selectedImage: ((_a = state.selectedProductVariant) === null || _a === void 0 ? void 0 : _a.image) || state.productInfo.images[0],\n });\n }\n }\n" }, "bindings": { "show": "state.productInfo", "component.options.image": "state.productInfo.images[0].src", "component.options.altText": "\n var _a;\n ((_a = state.selectedImage) === null || _a === void 0 ? void 0 : _a.alt) ||\n state.productInfo.images[0].alt ||\n state.productInfo.title;\n", "style.cursor": "\n if (state.onClickAction === 'enlarge image') {\n if (state.isZoomedIn) {\n return 'zoom-out';\n }\n return 'zoom-in';\n }\n return undefined;\n", "style.position": "var _virtual_index=state.isZoomedIn?\"fixed\":\"absolute\";return _virtual_index", "style.top": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.right": "(state.isZoomedIn ? 0 : undefined)", "style.left": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.zIndex": "(state.isZoomedIn ? 999 : undefined)", "style.background": "(state.isZoomedIn ? 'white' : undefined)" }, "code": { "bindings": { "style.position": "(state.isZoomedIn ? 'fixed' : 'absolute')", "style.left": "(state.isZoomedIn ? 0 : '50%')", "style.top": "(state.isZoomedIn ? 0 : '50%')", "component.options.image": "state.productInfo.images[0].src;" } }, "id": "builder-f524524c3eb743a6bcf8691592243bf5", "meta": { "version": "0.0.91", "bindingActions": { "style": { "maxWidth": null, "width": null, "height": null } }, "eventActions": { "mouseOut": [] }, "previousId": "builder-f705a55241ae4318aa5162bc899580a1" }, "component": { "name": "Image", "options": { "aspectRatio": 1.394, "backgroundPosition": "center", "backgroundSize": "contain" } }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.isZoomedIn" }, "layerName": "Close button", "id": "builder-d7ba17d3fc064312ad3260d4ed628d44", "meta": { "version": "0.0.91", "previousId": "builder-4482ce8b0fb04c478944404cc949cbf4" }, "component": { "name": "Text", "options": { "text": "×" } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "absolute", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "0px", "cursor": "pointer", "top": "10px", "right": "10px", "zIndex": "9999", "fontSize": "30px", "borderStyle": "solid", "borderColor": "rgba(213, 213, 213, 1)", "borderWidth": "1px", "borderRadius": "30px", "height": "40px", "width": "40px", "lineHeight": "32px", "backgroundColor": "rgba(255, 255, 255, 1)", "color": "rgba(112, 112, 112, 1)" } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "width": "calc(100% - 4.369vw)", "height": "calc(100% - 4.369vw)", "maxWidth": "calc(100% - 4.369vw)", "transform": "translate(-50%, -50%)" }, "small": { "width": "calc(100% - 4.103vw)", "maxWidth": "calc(100% - 4.103vw)", "height": "calc(100% - 4.103vw)" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "hide": "var returnValue=function(){var t=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],r=t.length?t[0]:\"NOTAG\";return!window.tagDefs[r]}();return returnValue", "component.options.code": "var _virtual_index=state.productInfo.tagDef.text;return _virtual_index", "data-type": "var _virtual_index=state.productInfo.tagDef.tagType;return _virtual_index" }, "code": { "bindings": { "hide": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\nreturn !window.tagDefs[tag];", "component.options.code": "state.productInfo.tagDef.text", "data-type": "state.productInfo.tagDef.tagType;\n" } }, "layerName": "[TAG]", "id": "builder-110ddcada7694a4d8d43113e3ebf39ab", "properties": { "data-type": "" }, "class": "prod-tag font-detail", "meta": { "previousId": "builder-b15a7f34fb2d433d850b5469dd79578d", "bindingActions": { "component": { "options": { "code": null } }, "meta": { "bindingActions": { "component": { "options": { "code": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "/**\n * Global objects available in custom action code:\n *\n * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions\n * context - builder context object - learn about context https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down\n * event - HTML Event - https://developer.mozilla.org/en-US/docs/Web/API/Event\n *\n * Learn more: https://www.builder.io/c/docs/guides/custom-code\n *\n */" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "component": { "name": "Custom Code", "options": { "code": "", "replaceNodes": true } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "flex": "1", "paddingBottom": "118.939%", "maxWidth": "100%", "width": "100%", "cursor": "text" }, "small": { "paddingBottom": "118.079%" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "show": "var _virtual_index=state.productInfo;return _virtual_index", "href": "var _virtual_index=!state.productInfo||state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"#\":\"\".concat(window.BigData.rootUrl,\"products/\").concat(state.productInfo.handle);return _virtual_index" }, "code": { "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "show": "state.productInfo", "href": "!state.productInfo ||\n(!!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length)\n ? \"#\"\n : `${window.BigData.rootUrl}products/${state.productInfo.handle}`;\n" } }, "layerName": "Product Title", "tagName": "a", "id": "builder-7c11260031694ae18970ee704ffa9af9", "properties": { "data-coming-soon": "", "href": "", "target": "_self" }, "class": "prod-title", "meta": { "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "href": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!state.productInfo || (!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length) ? '#' : `${window.BigData.rootUrl}products/${state.productInfo.handle}`" } } ] }, "previousId": "builder-e09fba45e3c744efb196b581e2840a31" }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 16//", "id": "builder-a8faa9a766f74827815128e2d8130bf7", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31" }, "component": { "name": "Custom Code", "options": { "code": "
", "replaceNodes": true } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var returnValue=function(){var t=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?window.comingSoonEl?window.comingSoonEl:\"\":window.hoverArrow?window.hoverArrow:\"\";return(window&&window.BigData&&window.BigData.prices&&window.BigData.titles[state.productInfo.handle]?window.BigData.titles[state.productInfo.handle]:state.productInfo.title)+t}();return returnValue" }, "code": { "bindings": { "component.options.text": "let hoverAddon = !!state.productInfo\r\n && !!state.productInfo.tags\r\n && state.productInfo.tags.length\r\n && state.productInfo.tags.filter(tag => tag == 'coming-soon').length\r\n ? (!!window.comingSoonEl ? window.comingSoonEl : '')\r\n : (!!window.hoverArrow ? window.hoverArrow : '');\r\nlet title = !window || !window.BigData || !window.BigData.prices || !window.BigData.titles[state.productInfo.handle] ? state.productInfo.title : window.BigData.titles[state.productInfo.handle];\r\nreturn title + hoverAddon;" } }, "layerName": "Title", "id": "builder-342c38159d8f455ea2e739b17c79dd99", "class": "font-body-sm body-sm-shorten-top font-mob-xsm mob-xsm-shorten-top", "meta": { "version": "0.0.91", "previousId": "builder-19f3a7d1643b4d3392f44d86267aacee" }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "position": "relative", "textDecoration": "none", "color": "inherit" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=!state.productInfo.tags.includes(\"hide-price\")&&window&&window.BigData&&window.BigData.prices&&window.BigData.prices[state.productInfo.handle]?window.BigData.prices[state.productInfo.handle]:\"$--\";return _virtual_index", "data-hide-price": "var _virtual_index=state.productInfo.tags.includes(\"hide-price\")?\"true\":\"false\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "state.productInfo.tags.includes('hide-price') || !window || !window.BigData || !window.BigData.prices || !window.BigData.prices[state.productInfo.handle] ? '$--' : window.BigData.prices[state.productInfo.handle]", "data-hide-price": "state.productInfo.tags.includes(\"hide-price\") ? \"true\" : \"false\";\n" } }, "layerName": "Price", "id": "builder-a5f2ff1cd3be4d02a9746022bdeafcea", "properties": { "data-hide-price": "" }, "class": "prod-price font-body-sm body-sm-shorten-btm font-mob-xsm mob-xsm-shorten-btm", "meta": { "version": "0.0.91", "previousId": "builder-09cb2528254c4582afc8c82967139a53", "bindingActions": { "data-hide-price": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tags.includes('hide-price') ? 'true' : 'false'" } } ] } }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "color": "inherit", "textDecoration": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 56//24", "id": "builder-1c224b105ea748f5a4104a5614c71459", "meta": { "previousId": "builder-ca8887ad855d44f3ae34e5b50efe6a03" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "width": "100%", "cursor": "text" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "actions": { "click": "\n" }, "bindings": { "show": "state.productInfo", "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "data-handle": "var _virtual_index=state.productInfo.handle;return _virtual_index" }, "code": { "actions": { "click": "let tags =\n !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length\n ? state.productInfo.tags.filter((tag) => tag == \"coming-soon\")\n : [];\nconsole.log(\"waaaagghh\");\nif (tags.length) {\n return 0;\n} else {\n window.open(`/products/${state.productInfo.handle}`, \"_self\");\n}\n" }, "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "data-handle": "state.productInfo.handle;\n" } }, "layerName": "(OLD) Product Title", "id": "builder-f5bdd22ad6884053aa4b8be1b134d48a", "properties": { "data-coming-soon": "", "data-handle": "" }, "class": "prod-title", "groupLocked": true, "meta": { "requiresParent": { "message": "This block must be inside a \"Product box\" block", "query": { "meta.kind": "ProductBox" } }, "version": "0.0.91", "eventActions": { "click": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length ? state.productInfo.tags.filter(tag => tag == 'coming-soon') : [];\nconsole.log('waaaagghh');\nif(tags.length) {\n return 0;\n}\nelse {\n window.open(`/products/${state.productInfo.handle}`, '_self');\n}" } } ] }, "bindingActions": { "style": { "cursor": null }, "meta": { "bindingActions": { "style": { "cursor": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'default' : pointer" } } ] } } }, "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "data-handle": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.handle" } } ] } }, "component": { "name": "Symbol", "options": { "inheritState": true, "symbol": { "meta": { "fieldName": "Product Title", "hideExplanation": true, "documentationLink": "https://builder.io/c/docs/shopify/product-box#product-title" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "name": "linkToProductPageOnClick", "type": "boolean", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=state.productInfo?JSON.stringify(state.productInfo):\"\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "return !!state.productInfo ? JSON.stringify(state.productInfo) : \"\";\n" } }, "layerName": "[DEBUG: PRODUCT JSON]", "id": "builder-c7dd944b91b74b5db7755e086e52887b", "meta": { "bindingActions": { "component": { "options": { "text": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo ? JSON.stringify(state.productInfo) : '';" } } ] } } }, "previousId": "builder-4e493b871b4a40ca90daf28dc1ebca63" }, "component": { "name": "Text", "options": { "text": "Enter some text..." } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "lineHeight": "normal", "height": "auto" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 16//", "id": "builder-bc675f705009409583ce245ec289cd48", "component": { "name": "Custom Code", "options": { "code": "
", "replaceNodes": true } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var returnValue=function(){var t=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?window.comingSoonEl?window.comingSoonEl:\"\":window.hoverArrow?window.hoverArrow:\"\";return state.productInfo.title+t}();return returnValue" }, "code": { "bindings": { "component.options.text": "let hoverAddon = !!state.productInfo\r\n && !!state.productInfo.tags\r\n && state.productInfo.tags.length\r\n && state.productInfo.tags.filter(tag => tag == 'coming-soon').length\r\n ? (!!window.comingSoonEl ? window.comingSoonEl : '')\r\n : (!!window.hoverArrow ? window.hoverArrow : '');\r\nreturn state.productInfo.title + hoverAddon;" } }, "layerName": "Title", "id": "builder-9247f442da314f4082b2473ba7754ff0", "class": "font-body-sm body-sm-shorten-top font-mob-xsm mob-xsm-shorten-top", "meta": { "version": "0.0.91" }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "position": "relative", "textDecoration": "none", "color": "inherit" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=state.productInfo.tags.includes(\"hide-price\")?\"$--\":state.productInfo.variants[0].formattedPrice;return _virtual_index", "data-hide-price": "var _virtual_index=state.productInfo.tags.includes(\"hide-price\")?\"true\":\"false\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "state.productInfo.tags.includes('hide-price') ? '$--' : state.productInfo.variants[0].formattedPrice", "data-hide-price": "state.productInfo.tags.includes(\"hide-price\") ? \"true\" : \"false\";\n" } }, "layerName": "Price", "id": "builder-295eb822d3fc4b138ad0a4a90a3d978d", "properties": { "data-hide-price": "" }, "class": "prod-price font-body-sm body-sm-shorten-btm font-mob-xsm mob-xsm-shorten-btm", "meta": { "version": "0.0.91", "previousId": "builder-bef4f6a7376f4b5eabe873148af39ca6", "bindingActions": { "data-hide-price": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tags.includes('hide-price') ? 'true' : 'false'" } } ] } }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "color": "inherit", "textDecoration": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 56//24", "id": "builder-1ebb54edc2ca442290e4050066710991", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } } } ] } }, "data": { "linkToProductPageOnClick": false } } } }, "responsiveStyles": { "large": { "display": "none", "flexDirection": "row", "width": "100%", "cursor": "text" }, "medium": { "display": "none" }, "small": { "display": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.productInfo", "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "data-handle": "var _virtual_index=state.productInfo.handle;return _virtual_index", "component.options.symbol.data.onClickAction": "var _virtual_index=function(o){void 0===o&&(o=o);var n=o.productInfo&&o.productInfo.tags&&o.productInfo.tags.length?o.productInfo.tags.filter((function(o){return\"coming-soon\"==o})):[];if(console.log(\"waaaagghh\"),n.length)return 0;window.open(\"/products/\".concat(o.productInfo.handle),\"_self\")};return _virtual_index" }, "code": { "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "data-handle": "state.productInfo.handle;\n", "component.options.symbol.data.onClickAction": "export default (state = state) => {\n let tags =\n !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length\n ? state.productInfo.tags.filter((tag) => tag == \"coming-soon\")\n : [];\n console.log(\"waaaagghh\");\n if (tags.length) {\n return 0;\n } else {\n window.open(`/products/${state.productInfo.handle}`, \"_self\");\n }\n};\n" } }, "layerName": "(OLD) Product Image", "id": "builder-f74cf7cd252248e693c6c48ceb00b9dc", "properties": { "data-coming-soon": "", "data-handle": "" }, "class": "prod-img-frame", "groupLocked": true, "meta": { "requiresParent": { "message": "This block must be inside a \"Product box\" block", "query": { "meta.kind": "ProductBox" } }, "version": "0.0.91", "eventActions": {}, "bindingActions": { "style": { "cursor": null }, "meta": { "bindingActions": { "style": { "cursor": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'default' : pointer" } } ] }, "data-type": null } }, "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'default' : 'pointer'" } } ], "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "data-handle": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.handle" } } ], "component": { "options": { "symbol": { "data": { "onClickAction": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "export default (state = state) => {\r\n let tags = !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length ? state.productInfo.tags.filter(tag => tag == 'coming-soon') : [];\r\n console.log('waaaagghh');\r\n if(tags.length) {\r\n return 0;\r\n }\r\n else {\r\n window.open(`/products/${state.productInfo.handle}`, '_self');\r\n }\r\n};" } } ] } } } } } }, "component": { "name": "Symbol", "options": { "inheritState": true, "symbol": { "data": { "onClickAction": "link to product page", "onHoverAction": "nothing" }, "meta": { "fieldName": "Product Image", "hideExplanation": true, "documentationLink": "https://builder.io/c/docs/shopify/product-box#product-image" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "name": "onClickAction", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "enum": [ "nothing", "link to product page", "enlarge image" ], "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "name": "onHoverAction", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "enum": [ "nothing", "swap image" ], "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "actions": { "mouseOver": "\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[1]) {\n context.setState({\n selectedImage: state.productInfo.images[1],\n });\n }\n }\n", "mouseOut": "\n var _a;\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[0]) {\n context.setState({\n selectedImage: ((_a = state.selectedProductVariant) === null || _a === void 0 ? void 0 : _a.image) || state.productInfo.images[0],\n });\n }\n }\n" }, "bindings": { "show": "state.productInfo", "component.options.image": "var returnValue=state.productInfo.images[state.productInfo.images.length-1].src;return returnValue", "component.options.altText": "\n var _a;\n ((_a = state.selectedImage) === null || _a === void 0 ? void 0 : _a.alt) ||\n state.productInfo.images[0].alt ||\n state.productInfo.title;\n", "style.cursor": "\n if (state.onClickAction === 'enlarge image') {\n if (state.isZoomedIn) {\n return 'zoom-out';\n }\n return 'zoom-in';\n }\n return undefined;\n", "style.position": "var _virtual_index=state.isZoomedIn?\"fixed\":\"absolute\";return _virtual_index", "style.top": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.right": "(state.isZoomedIn ? 0 : undefined)", "style.left": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.zIndex": "(state.isZoomedIn ? 999 : undefined)", "style.background": "(state.isZoomedIn ? 'white' : undefined)" }, "code": { "bindings": { "style.position": "(state.isZoomedIn ? 'fixed' : 'absolute')", "style.left": "(state.isZoomedIn ? 0 : '50%')", "style.top": "(state.isZoomedIn ? 0 : '50%')", "component.options.image": "\n var _a;\n //return ((_a = state.selectedImage) === null || _a === void 0 ? void 0 : _a.src) || state.productInfo.images[state.productInfo.images.length - 1].src;\n return state.productInfo.images[state.productInfo.images.length - 1].src;\n" } }, "id": "builder-09f022523958434491c455d5e60d66fe", "meta": { "version": "0.0.91", "bindingActions": { "style": { "maxWidth": null, "width": null, "height": null } }, "eventActions": { "mouseOut": [] } }, "component": { "name": "Image", "options": { "aspectRatio": 1.394, "backgroundPosition": "center", "backgroundSize": "contain" } }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.isZoomedIn" }, "layerName": "Close button", "id": "builder-b745bfd8459c462cac498a8c44e894ee", "meta": { "version": "0.0.91" }, "component": { "name": "Text", "options": { "text": "×" } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "absolute", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "0px", "cursor": "pointer", "top": "10px", "right": "10px", "zIndex": "9999", "fontSize": "30px", "borderStyle": "solid", "borderColor": "rgba(213, 213, 213, 1)", "borderWidth": "1px", "borderRadius": "30px", "height": "40px", "width": "40px", "lineHeight": "32px", "backgroundColor": "rgba(255, 255, 255, 1)", "color": "rgba(112, 112, 112, 1)" } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "width": "calc(100% - 4.369vw)", "height": "calc(100% - 4.369vw)", "maxWidth": "calc(100% - 4.369vw)", "transform": "translate(-50%, -50%)" }, "small": { "width": "calc(100% - 4.103vw)", "maxWidth": "calc(100% - 4.103vw)", "height": "calc(100% - 4.103vw)" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "hide": "var returnValue=function(){var t=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],r=t.length?t[0]:\"NOTAG\";return!window.tagDefs[r]}();return returnValue", "component.options.code": "var _virtual_index=state.productInfo.tagDef.text;return _virtual_index", "data-type": "var _virtual_index=state.productInfo.tagDef.tagType;return _virtual_index" }, "code": { "bindings": { "hide": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\nreturn !window.tagDefs[tag];", "component.options.code": "state.productInfo.tagDef.text", "data-type": "state.productInfo.tagDef.tagType;\n" } }, "layerName": "[TAG]", "id": "builder-e594bbe0b93742308a390d58cb9e9a19", "properties": { "data-type": "" }, "class": "prod-tag font-detail", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31", "bindingActions": { "component": { "options": { "code": null } }, "meta": { "bindingActions": { "component": { "options": { "code": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "/**\n * Global objects available in custom action code:\n *\n * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions\n * context - builder context object - learn about context https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down\n * event - HTML Event - https://developer.mozilla.org/en-US/docs/Web/API/Event\n *\n * Learn more: https://www.builder.io/c/docs/guides/custom-code\n *\n */" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "component": { "name": "Custom Code", "options": { "code": "", "replaceNodes": true } } } ] } } } } }, "responsiveStyles": { "large": { "display": "none", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "flex": "1", "paddingBottom": "118.939%", "maxWidth": "100%", "width": "100%", "cursor": "text" }, "small": { "paddingBottom": "118.079%" } } } ], "tsCode": "\n context.setState = (stateUpdates) => {\n for (let key in stateUpdates) {\n state[key] = stateUpdates[key];\n }\n if ('selectedProductVariant' in stateUpdates) {\n onProductVariantChange();\n }\n };\n const onProductVariantChange = () => {\n if (state.selectedProductVariant) {\n state.selectedImage = state.selectedProductVariant.image || state.selectedImage;\n }\n };\n const getProductId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.product === contextPlaceholder) {\n return context.overrideProductId;\n }\n let product = state.product;\n if (typeof product === 'object' &&\n product &&\n product['@type'] === '@builder.io/core:Request') {\n product = product.options.product;\n }\n return product;\n };\n let lastProductId = getProductId();\n let lastDefaultVariantId = state.defaultVariantId;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const productId = getProductId();\n const defaultVariantId = state.defaultVariantId;\n if (lastProductId !== productId) {\n updateProduct();\n }\n else if (defaultVariantId !== lastDefaultVariantId ||\n (state.productInfo && !state.selectedProductVariant)) {\n setDefaultVariant();\n }\n lastProductId = productId;\n lastDefaultVariantId = defaultVariantId;\n });\n }\n if (state.productInfo && !state.selectedProductVariant) {\n setDefaultVariant();\n }\n function setDefaultVariant() {\n const productInfo = state.productInfo;\n const firstAvailableVariant = productInfo.variants.find(variant => variant.availableForSale);\n let defaultVariant = firstAvailableVariant || productInfo.variants[0];\n if (state.defaultVariantId) {\n const defaultVariantInfo = productInfo.variants.find(variant => String(variant.id) === String(state.defaultVariantId));\n if (defaultVariantInfo) {\n defaultVariant = defaultVariantInfo;\n }\n }\n state.selectedProductVariant = defaultVariant;\n state.selectedImage = (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.image) || productInfo.images[0];\n }\n function updateProduct() {\n var _a;\n const productId = getProductId();\n if (state.productInfo && !productId) {\n let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\n let tag = !tags.length ? 'NOTAG' : tags[0];\n /* return JSON.stringify(state.productInfo.tags); */\n state.productInfo.tagDef = !window.tagDefs[tag] ? {tagType: 'NOTAG', text: 'n/a'} : window.tagDefs[tag];\n setDefaultVariant();\n return;\n }\n if (productId) {\n state.loading = true;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n return fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&productId=${productId}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const { products } = data;\n if (products && products.length) {\n const productInfo = products[0];\n state.productInfo = productInfo;\n let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\n let tag = !tags.length ? 'NOTAG' : tags[0];\n /* return JSON.stringify(state.productInfo.tags); */\n state.productInfo.tagDef = !window.tagDefs[tag] ? {tagType: 'NOTAG', text: 'n/a'} : window.tagDefs[tag];\n setDefaultVariant();\n }\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.productInfo = null;\n }\n }\n updateProduct();\n" } } } } }, "responsiveStyles": { "large": { "display": "flex", "alignItems": "stretch", "position": "relative", "boxSizing": "border-box", "textAlign": "left", "flexDirection": "column" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "repeat": { "collection": "collectionInfo.products", "itemName": "product" }, "layerName": "[PLACEHOLDER]", "id": "builder-def603c4a13c4cebb2d64aebec16d8eb", "properties": { "data-slot": "shopify:productBox" }, "class": "prod-placeholder", "meta": { "version": "0.0.91", "kind": "ProductBox", "previousId": "builder-69ed3cb30a5b4a518acabe072f1f1583" }, "component": { "name": "Symbol", "options": { "symbol": { "data": { "loading": false, "product": "", "productBoxHasChildren": false, "apiKey": "64dd5478e25746bf9db3b6c0319905f6" }, "meta": { "fieldName": "Product Box", "documentationNote": "Product boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/product-box" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "name": "product", "type": "ShopifyProduct", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); });\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "name": "defaultVariantId", "friendlyName": "Default Variant", "type": "ShopifyProductVariant", "required": false, "subFields": [], "helperText": "Only choose a default variant if you want to have a specific variant be selected when the product box loads", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return (options.get('product') &&\n !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); }));\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "jsCode": "\n context.setState = (stateUpdates) => {\n for (let key in stateUpdates) {\n state[key] = stateUpdates[key];\n }\n if ('selectedProductVariant' in stateUpdates) {\n onProductVariantChange();\n }\n };\n const onProductVariantChange = () => {\n if (state.selectedProductVariant) {\n state.selectedImage = state.selectedProductVariant.image || state.selectedImage;\n }\n };\n const getProductId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.product === contextPlaceholder) {\n return context.overrideProductId;\n }\n let product = state.product;\n if (typeof product === 'object' &&\n product &&\n product['@type'] === '@builder.io/core:Request') {\n product = product.options.product;\n }\n return product;\n };\n let lastProductId = getProductId();\n let lastDefaultVariantId = state.defaultVariantId;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const productId = getProductId();\n const defaultVariantId = state.defaultVariantId;\n if (lastProductId !== productId) {\n updateProduct();\n }\n else if (defaultVariantId !== lastDefaultVariantId ||\n (state.productInfo && !state.selectedProductVariant)) {\n setDefaultVariant();\n }\n lastProductId = productId;\n lastDefaultVariantId = defaultVariantId;\n });\n }\n if (state.productInfo && !state.selectedProductVariant) {\n setDefaultVariant();\n }\n function setDefaultVariant() {\n const productInfo = state.productInfo;\n const firstAvailableVariant = productInfo.variants.find(variant => variant.availableForSale);\n let defaultVariant = firstAvailableVariant || productInfo.variants[0];\n if (state.defaultVariantId) {\n const defaultVariantInfo = productInfo.variants.find(variant => String(variant.id) === String(state.defaultVariantId));\n if (defaultVariantInfo) {\n defaultVariant = defaultVariantInfo;\n }\n }\n state.selectedProductVariant = defaultVariant;\n state.selectedImage = (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.image) || productInfo.images[0];\n }\n function updateProduct() {\n var _a;\n const productId = getProductId();\n if (state.productInfo && !productId) {\n setDefaultVariant();\n return;\n }\n if (productId) {\n state.loading = true;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n return fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&productId=${productId}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const { products } = data;\n if (products && products.length) {\n const productInfo = products[0];\n state.productInfo = productInfo;\n setDefaultVariant();\n }\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.productInfo = null;\n }\n }\n updateProduct();\n", "blocks": [] } } } } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "repeat": { "collection": "collectionInfo.products", "itemName": "product" }, "layerName": "[PLACEHOLDER]", "id": "builder-6289b251f4dc4a37ba8c32d28c3771ca", "properties": { "data-slot": "shopify:productBox" }, "class": "prod-placeholder", "meta": { "version": "0.0.91", "kind": "ProductBox", "previousId": "builder-6fec2ce34d564853872d0dd08a668442" }, "component": { "name": "Symbol", "options": { "symbol": { "data": { "loading": false, "product": "", "productBoxHasChildren": false, "apiKey": "64dd5478e25746bf9db3b6c0319905f6" }, "meta": { "fieldName": "Product Box", "documentationNote": "Product boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/product-box" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "name": "product", "type": "ShopifyProduct", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); });\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "name": "defaultVariantId", "friendlyName": "Default Variant", "type": "ShopifyProductVariant", "required": false, "subFields": [], "helperText": "Only choose a default variant if you want to have a specific variant be selected when the product box loads", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return (options.get('product') &&\n !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); }));\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "jsCode": "\n context.setState = (stateUpdates) => {\n for (let key in stateUpdates) {\n state[key] = stateUpdates[key];\n }\n if ('selectedProductVariant' in stateUpdates) {\n onProductVariantChange();\n }\n };\n const onProductVariantChange = () => {\n if (state.selectedProductVariant) {\n state.selectedImage = state.selectedProductVariant.image || state.selectedImage;\n }\n };\n const getProductId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.product === contextPlaceholder) {\n return context.overrideProductId;\n }\n let product = state.product;\n if (typeof product === 'object' &&\n product &&\n product['@type'] === '@builder.io/core:Request') {\n product = product.options.product;\n }\n return product;\n };\n let lastProductId = getProductId();\n let lastDefaultVariantId = state.defaultVariantId;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const productId = getProductId();\n const defaultVariantId = state.defaultVariantId;\n if (lastProductId !== productId) {\n updateProduct();\n }\n else if (defaultVariantId !== lastDefaultVariantId ||\n (state.productInfo && !state.selectedProductVariant)) {\n setDefaultVariant();\n }\n lastProductId = productId;\n lastDefaultVariantId = defaultVariantId;\n });\n }\n if (state.productInfo && !state.selectedProductVariant) {\n setDefaultVariant();\n }\n function setDefaultVariant() {\n const productInfo = state.productInfo;\n const firstAvailableVariant = productInfo.variants.find(variant => variant.availableForSale);\n let defaultVariant = firstAvailableVariant || productInfo.variants[0];\n if (state.defaultVariantId) {\n const defaultVariantInfo = productInfo.variants.find(variant => String(variant.id) === String(state.defaultVariantId));\n if (defaultVariantInfo) {\n defaultVariant = defaultVariantInfo;\n }\n }\n state.selectedProductVariant = defaultVariant;\n state.selectedImage = (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.image) || productInfo.images[0];\n }\n function updateProduct() {\n var _a;\n const productId = getProductId();\n if (state.productInfo && !productId) {\n setDefaultVariant();\n return;\n }\n if (productId) {\n state.loading = true;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n return fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&productId=${productId}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const { products } = data;\n if (products && products.length) {\n const productInfo = products[0];\n state.productInfo = productInfo;\n setDefaultVariant();\n }\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.productInfo = null;\n }\n }\n updateProduct();\n", "blocks": [] } } } } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "row", "alignItems": "flex-start", "position": "relative", "flexShrink": "0", "justifyContent": "center", "flexWrap": "wrap", "minWidth": "200px", "width": "100%", "maxWidth": "1648px", "paddingLeft": "16px", "paddingRight": "16px", "columnGap": "16px" }, "small": { "paddingLeft": "12px", "paddingRight": "12px", "columnGap": "12px" } } } ], "tsCode": "\n if (Builder.isBrowser) {\n const shopifyWindow = window;\n if (shopifyWindow.BuilderJsonData && shopifyWindow.BuilderJsonData.collection) {\n context.overrideCollectionId = shopifyWindow.BuilderJsonData.collection.id;\n context.collectionObject = shopifyWindow.BuilderJsonData.collection;\n }\n }\n\n const getCollectionId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.collection === contextPlaceholder) {\n return context.overrideCollectionId;\n }\n let collection = state.collection;\n if (typeof collection === 'object' &&\n collection &&\n collection['@type'] === '@builder.io/core:Request') {\n collection = collection.options.collection;\n }\n return collection;\n };\n let lastCollectionId = getCollectionId();\n let lastLimit = 10;\n let lastHideIfUnavailable = state.hideIfUnavailable || false;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const newId = getCollectionId();\n if (lastCollectionId !== newId ||\n lastLimit !== state.limit ||\n lastHideIfUnavailable !== state.hideIfUnavailable) {\n updateCollection();\n lastCollectionId = newId;\n lastHideIfUnavailable = state.hideIfUnavailable;\n }\n });\n }\n function updateCollection() {\n const collectionId = getCollectionId();\n if (state.collectionInfo && !collectionId) {\n return;\n }\n if (collectionId) {\n state.loading = true;\n lastLimit = state.limit ? state.limit : 10;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&collectionId=${collectionId}&limit=${state.limit ? state.limit : 10}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const collectionResponse = data;\n if (state.hideIfUnavailable) {\n const availableProducts = collectionResponse.products.filter((product) => product.variants.some(variant => variant.availableForSale));\n collectionResponse.products = availableProducts;\n }\n state.collectionInfo = collectionResponse;\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.collectionInfo = null;\n }\n }\n updateCollection();\n" } } } } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "row", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "textAlign": "center", "justifyContent": "center", "maxWidth": "1648px", "width": "100%", "marginLeft": "auto", "marginRight": "auto" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[CLICK EVENTS]", "id": "builder-b5344eaa490543f480b1a30644893155", "meta": { "previousId": "builder-9140c515deeb426ea4db3b97ac8055b8" }, "component": { "name": "Custom Code", "options": { "code": "\n", "replaceNodes": true } }, "responsiveStyles": { "large": { "marginTop": "-56px", "display": "none" }, "small": { "marginTop": "-24px" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 240//80", "id": "builder-5adaced077d044e883bcd0edacee45cc", "meta": { "previousId": "builder-b0cf6508a877453d977effdefe880352" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } }, "responsiveStyles": { "large": { "marginTop": "-56px" }, "small": { "marginTop": "-24px" } } }, { "id": "builder-pixel-brbf464ujl", "@type": "@builder.io/sdk:Element", "tagName": "img", "properties": { "src": "https://cdn.builder.io/api/v1/pixel?apiKey=64dd5478e25746bf9db3b6c0319905f6", "aria-hidden": "true", "alt": "", "role": "presentation", "width": "0", "height": "0" }, "responsiveStyles": { "large": { "height": "0", "width": "0", "display": "block", "opacity": "0", "overflow": "hidden", "pointerEvents": "none" } } } ], "state": { "deviceSize": "large", "location": { "path": "", "query": {} } } }, "modelId": "9d74246634894ce39fff6c22449a9d52", "query": [], "published": "draft", "screenshot": "https://cdn.builder.io/api/v1/image/assets%2F64dd5478e25746bf9db3b6c0319905f6%2F292c6df7532a40c890b543464ae284f0", "firstPublished": 1662866118362, "testRatio": 1, "lastUpdated": 1709773272101, "createdDate": 1709588709577, "createdBy": "eKkJ2UiI2tPDREXNlNnSplF1SqP2", "meta": { "lastPreviewUrl": "https://https___bigscreenvr__myshopify__com.preview.builder.codes/apps/builder?apiKey=64dd5478e25746bf9db3b6c0319905f6&model=item-grid&builder.cachebuster=ltgiuuyl&preview_theme_id=132657348825&builder.proxyPreview.includeSW=true&builder.useProxyBase=true&builder.space=64dd5478e25746bf9db3b6c0319905f6&builder.cachebust=true&builder.preview=item-grid&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.item-grid=bbf342a3d2954ee2a6a5dd854b7aafa6&builder.overrides.bbf342a3d2954ee2a6a5dd854b7aafa6=bbf342a3d2954ee2a6a5dd854b7aafa6&builder.options.locale=Default", "kind": "component", "originalContentId": "cde272c69e3c423c91b3d152850bf118", "format": "shopify", "hasLinks": true, "shopifyCustomDomain": "store.bigscreenvr.com", "shopifyDomain": "bigscreenvr.myshopify.com", "winningTest": null }, "variations": {}, "name": "STORE - Homepage Item Grid - DEV Sold Out Tag", "id": "bbf342a3d2954ee2a6a5dd854b7aafa6", "rev": "1rb29jyvmat" }, { "query": [], "folders": [], "createdDate": 1689644584948, "id": "cde272c69e3c423c91b3d152850bf118", "name": "STORE - Homepage Item Grid - LIVE Japanese", "modelId": "9d74246634894ce39fff6c22449a9d52", "published": "published", "meta": { "shopifyDomain": "bigscreenvr.myshopify.com", "format": "shopify", "shopifyCustomDomain": "store.bigscreenvr.com", "kind": "component", "winningTest": null, "lastPreviewUrl": "https://https___bigscreenvr__myshopify__com.preview.builder.codes/apps/builder?apiKey=64dd5478e25746bf9db3b6c0319905f6&model=item-grid&builder.cachebuster=m8hkyrth&preview_theme_id=132657348825&builder.proxyPreview.includeSW=true&builder.useProxyBase=true&builder.space=64dd5478e25746bf9db3b6c0319905f6&builder.user.permissions=read%2Ccreate%2Cpublish%2CeditCode%2CeditDesigns%2Cadmin%2CeditLayouts%2CeditLayers%2CeditContentPriority&builder.user.role.name=Admin&builder.user.role.id=admin&builder.cachebust=true&builder.preview=item-grid&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.item-grid=cde272c69e3c423c91b3d152850bf118&builder.overrides.cde272c69e3c423c91b3d152850bf118=cde272c69e3c423c91b3d152850bf118&builder.options.locale=Default", "originalContentId": "a1ff2fab29564c1987b061587e71c6d3", "hasLinks": true }, "data": { "inputs": [], "liquidTargeting": { "products": [], "liquidSnippets": [], "collections": [], "previouslyOrderedProducts": [], "previouslyOrderedProductTags": [], "previouslyOrderedProductOfType": [], "productTags": [], "productType": [], "customerTags": [], "previouslyOrderedCollections": [], "productIsInCollections": [], "propertyOrder": [], "locales": [], "cartContainsProduct": [], "cartContainsProductWithTag": [], "cartContainsProductInCollection": [], "cartContainsProductOfType": [], "@type": "@builder.io/core:LiquidTargeting", "customerStatus": "any", "customerAcceptsMarketing": "any", "urlIncludes": "", "cartStatus": "", "selectedCurrency": "" }, "customFonts": [ { "isUserFont": true, "category": "serif", "family": "Neue Haas Grotesk Display Pro - 75 Bold", "fileUrl": "https://cdn.builder.io/o/assets%2F64dd5478e25746bf9db3b6c0319905f6%2Fcda62180cb7c4846865787d54e56ca2f?alt=media&token=3290abba-d7b2-4a60-841a-acf8b77c5a7c&apiKey=64dd5478e25746bf9db3b6c0319905f6" }, { "isUserFont": true, "family": "Neue Haas Grotesk Display Pro - Medium", "category": "sans-serif", "fileUrl": "https://cdn.builder.io/o/assets%2F64dd5478e25746bf9db3b6c0319905f6%2F2793a31f5c7b4eea8f9089a163d04b25?alt=media&token=7fa1ef0d-a102-46b2-a75c-8c3332b5b8c9&apiKey=64dd5478e25746bf9db3b6c0319905f6" }, { "fileUrl": "https://cdn.builder.io/o/assets%2F64dd5478e25746bf9db3b6c0319905f6%2F801ad1fc927c41ef959636b8424c18b6?alt=media&token=269259f3-2e52-4b04-b789-5e22187828bf&apiKey=64dd5478e25746bf9db3b6c0319905f6", "category": "serif", "family": "Neue Haas Grotesk Display Pro - 55 Roman", "isUserFont": true } ], "jsCode": "var __awaiter=function(e,n,t,r){return new(t||(t=Promise))((function(o,a){function i(e){try{u(r.next(e))}catch(e){a(e)}}function l(e){try{u(r.throw(e))}catch(e){a(e)}}function u(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(i,l)}u((r=r.apply(e,n||[])).next())}))},__generator=function(e,n){var t,r,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:l(0),throw:l(1),return:l(2)},\"function\"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(a){return function(l){return function(a){if(t)throw new TypeError(\"Generator is already executing.\");for(;i;)try{if(t=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,r=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=(o=i.trys).length>0&&o[o.length-1])&&(6===a[0]||2===a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]coming soon\\n \",window.tagDefs={\"marker-preorder\":{tagType:\"colored\",text:\"pre order\"},\"marker-new\":{tagType:\"solid\",text:\"new\"},\"marker-sale\":{tagType:\"hollow\",text:\"sale\"},\"marker-replacement\":{tagType:\"hollow\",text:\"replacement\"}},state.tagDefs=window.tagDefs),[2]}))}))}var _virtual_index=main();return _virtual_index", "cssCode": "/*\n* Custom CSS styles\n*\n* Global by default, but use `&` to scope to just this content, e.g.\n*\n* & .foo {\n* color: 'red'\n* }\n*/\n\n.collection>div {\n flex: 1;\n}\n\n.prod-box {\n color: #000;\n}\n.prod-placeholder {\n display: flex;\n min-height: 0px;\n max-height: 0px;\n height: 0px;\n padding: 0;\n border: none;\n}\n.prod-box, .prod-placeholder {\n flex: 1 0 calc(min(1648px, 100vw) * .305);\n max-width: calc(min(1648px, 100vw) * .32039);\n}\n/*- MOBILE Product Box -*/\n@media only screen and (max-width: 991px) {\n .prod-box, .prod-placeholder {\n flex: 1 0 calc(min(1648px, 100vw) * .398);\n max-width: calc(min(1648px, 100vw) * .45385);\n }\n}\n\n.prod-img-frame {\n background: #F4F3F3;\n border-radius: 8px;\n}\n.prod-box:hover .prod-img-frame:not([data-coming-soon=\"true\"]) {\n background: #DFDFDF;\n}\n.prod-tag {\n position: absolute;\n left: 16px;\n top: 16px;\n padding: 8px 16px;\n width: fit-content;\n max-width: calc(100% - 16px);\n overflow: hidden;\n border-radius: 40px;\n}\n.prod-tag[data-type='colored'] {\n color: #FFF;\n background: #4D1EF7;\n}\n.prod-tag[data-type='solid'] {\n color: #FFF;\n background: #000;\n}\n.prod-tag[data-type='hollow'] {\n color: #000;\n padding: 7px 15px;\n border: 1px solid #000;\n}\n.prod-title {\n color: #000;\n}\n.prod-title>div {\n flex: 1;\n}\n.prod-price[data-hide-price=\"true\"] {\n color: #787E81;\n}\n.prod-box .prod-img-frame[data-coming-soon=\"true\"],\n.prod-box .prod-title[data-coming-soon=\"true\"] {\n cursor: default;\n}\n.prod-box .prod-img-frame[data-coming-soon=\"false\"],\n.prod-box .prod-title[data-coming-soon=\"false\"] {\n cursor: pointer;\n}\n.prod-box svg {\n margin: 0px 0px -2px 12px;\n}\n.prod-box:not(:hover) svg {\n display: none;\n}\n.prod-box .coming-soon-title {\n position: absolute;\n left: 16px;\n top: -24px;\n transform: translateY(-100%);\n padding: 3px 8px;\n background: #DFDFDF;\n color: #787e81;\n border-radius: 8px;\n white-space: nowrap;\n}\n/* .prod-box:not(:hover) .coming-soon-title {\n display: none;\n} */\n/*- MOBILE Product -*/\n@media only screen and (max-width: 991px) {\n .prod-tag {\n left: 12px;\n top: 12px;\n display: flex;\n align-content: center;\n max-width: calc(calc(100% - 2.052vw) - 12px);\n }\n .prod-box svg {\n display: none;\n }\n .prod-box .coming-soon-title {\n left: 12px;\n }\n}\n\n.product-label > div {\n width: 100%;\n}\n.product-label > div > div > div > div {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 30px\n}", "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "RESCOPE SHOPIFY DATA", "id": "builder-4899275ead2f467298edebb4e7d45e9e", "meta": { "previousId": "builder-b8ec52fd237b464c989631ea09e28c2d" }, "component": { "name": "Custom Code", "options": { "code": "\n", "replaceNodes": true } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "position": "relative", "flexShrink": "0", "boxSizing": "border-box" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state" }, "layerName": "Shopify-Linked Content (Dynamic)", "id": "builder-9fd1d6daf1874044bc9c45b85a730ede", "class": "collection", "meta": { "version": "0.0.91", "previousId": "builder-9b488900a63b425fa5b91556221204bb" }, "component": { "name": "Symbol", "options": { "symbol": { "inline": true, "data": { "apiKey": "64dd5478e25746bf9db3b6c0319905f6", "limit": 50, "collection": "400354279641" }, "meta": { "fieldName": "Product Collection", "documentationNote": "Product collection boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/collection-box", "isProductCollection": true }, "content": { "data": { "jsCode": "if(Builder.isBrowser){var shopifyWindow=window;shopifyWindow.BuilderJsonData&&shopifyWindow.BuilderJsonData.collection&&(context.overrideCollectionId=shopifyWindow.BuilderJsonData.collection.id,context.collectionObject=shopifyWindow.BuilderJsonData.collection)}var getCollectionId=function(){if(\"context_placeholder\"===state.collection)return context.overrideCollectionId;var t=state.collection;return\"object\"==typeof t&&t&&\"@builder.io/core:Request\"===t[\"@type\"]&&(t=t.options.collection),t},lastCollectionId=getCollectionId(),lastLimit=10,lastHideIfUnavailable=state.hideIfUnavailable||!1;function updateCollection(){var t=getCollectionId();if(!state.collectionInfo||t)if(t){state.loading=!0,lastLimit=state.limit?state.limit:10;var e=window.Shopify||{},i=(null===(_a=e.currency)||void 0===_a?void 0:_a.active)||\"USD\";fetch(\"https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=\".concat(state.apiKey||context.apiKey||builder.apiKey,\"&collectionId=\").concat(t,\"&limit=\").concat(state.limit?state.limit:10,\"¤cyIsoCode=\").concat(i)).then((function(t){return t.json()})).then((function(t){var e=t;if(state.hideIfUnavailable){var i=e.products.filter((function(t){return t.variants.some((function(t){return t.availableForSale}))}));e.products=i}state.collectionInfo=e,state.loading=!1})).catch((function(t){console.error(\"Error fetching Shopify product\",t),state.loading=!1}))}else state.collectionInfo=null}Builder.isEditing&&ref.onStateChange.subscribe((function(){var t=getCollectionId();lastCollectionId===t&&lastLimit===state.limit&&lastHideIfUnavailable===state.hideIfUnavailable||(updateCollection(),lastCollectionId=t,lastHideIfUnavailable=state.hideIfUnavailable)})),updateCollection()", "inputs": [ { "@type": "@builder.io/core:Field", "meta": {}, "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "meta": {}, "name": "collection", "type": "ShopifyCollection", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "meta": {}, "name": "limit", "type": "number", "defaultValue": 10, "required": false, "subFields": [], "helperText": "Number of products to show from the collection", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "meta": {}, "name": "hideIfUnavailable", "friendlyName": "Hide product(s) if unavailable", "type": "boolean", "required": false, "subFields": [], "helperText": "Hide any product that is unavailable for purchase. Useful in situtations where you want to only show in stock products and have limited inventory", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 80//32", "id": "builder-186658b693684acd9dab31ba124d9d2f", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.loading" }, "layerName": "Loading spinner", "id": "builder-197253a72e1649038a338a92a6966f17", "layerLocked": true, "meta": { "version": "0.0.91" }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "15px", "width": "4em", "height": "4em", "borderRadius": "50%", "margin": "6rem auto", "fontSize": "1rem", "textIndent": "-9999em", "borderTop": "0.2em solid rgba(131, 132, 137, 0.2)", "borderRight": "0.2em solid rgba(131, 132, 137, 0.2)", "borderBottom": "0.2em solid rgba(131, 132, 137, 0.2)", "borderLeft": "0.2em solid #454749", "transform": "translateZ(0)", "animationIterationCount": "infinite", "animationTimingFunction": "inear", "animationDuration": "1.1s", "animationName": "_EMO_animation-16036bv_@keyframes animation-16036bv{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}_EMO_" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=state.collectionInfo?JSON.stringify(state.collectionInfo):\"\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "return !!state.collectionInfo ? JSON.stringify(state.collectionInfo) : \"\";\n" } }, "layerName": "[DEBUG: COLLECTION JSON]", "id": "builder-85b08ff109974193a1efacbb9e2c1609", "meta": { "bindingActions": { "component": { "options": { "text": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.collectionInfo ? JSON.stringify(state.collectionInfo) : '';" } } ] } } }, "previousId": "builder-dd592b66c3574a77adc9a913ca6db33a" }, "component": { "name": "Text", "options": { "text": "Enter some text..." } }, "responsiveStyles": { "large": { "display": "none", "flexDirection": "column", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "lineHeight": "normal", "height": "auto" }, "medium": { "display": "none" }, "small": { "display": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "var returnValue=state.collectionInfo&&state.collectionInfo.products&&state.collectionInfo.products.length;return returnValue" }, "code": { "bindings": { "show": "//console.log('bwah!!', state); //debug\nreturn state.collectionInfo && state.collectionInfo.products && state.collectionInfo.products.length;" } }, "layerName": "Builder Grid", "id": "builder-9325ba593a7940c783f220d792e32409", "meta": { "version": "0.0.91" }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.symbol.data.productBoxHasChildren": "\n var _a, _b;\n return ((_b = (_a = block === null || block === void 0 ? void 0 : block.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.symbol.content.data.blocks.length) > 3;\n", "component.options.symbol.data.productInfo": "state.product" }, "repeat": { "collection": "collectionInfo.products", "itemName": "product" }, "layerName": "Product Box", "id": "builder-78d2e1024eb44e6e8a7e4b56c8884c54", "properties": { "data-slot": "shopify:productBox" }, "class": "prod-box", "meta": { "version": "0.0.91", "kind": "ProductBox", "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "meta": { "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ] } } } }, "component": { "name": "Symbol", "options": { "symbol": { "data": { "loading": false, "product": "", "productBoxHasChildren": false, "apiKey": "64dd5478e25746bf9db3b6c0319905f6" }, "meta": { "fieldName": "Product Box", "documentationNote": "Product boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/product-box" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "meta": {}, "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "meta": {}, "name": "product", "type": "ShopifyProduct", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "\n return !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); });\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "meta": {}, "name": "defaultVariantId", "friendlyName": "Default Variant", "type": "ShopifyProductVariant", "required": false, "subFields": [], "helperText": "Only choose a default variant if you want to have a specific variant be selected when the product box loads", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "\n return (options.get('product') &&\n !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); }));\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "jsCode": "context.setState=function(t){for(var a in t)state[a]=t[a];\"selectedProductVariant\"in t&&onProductVariantChange()};var onProductVariantChange=function(){state.selectedProductVariant&&(state.selectedImage=state.selectedProductVariant.image||state.selectedImage)},getProductId=function(){if(\"context_placeholder\"===state.product)return context.overrideProductId;var t=state.product;return\"object\"==typeof t&&t&&\"@builder.io/core:Request\"===t[\"@type\"]&&(t=t.options.product),t},lastProductId=getProductId(),lastDefaultVariantId=state.defaultVariantId;function setDefaultVariant(){var t=state.productInfo,a=t.variants.find((function(t){return t.availableForSale}))||t.variants[0];if(state.defaultVariantId){var e=t.variants.find((function(t){return String(t.id)===String(state.defaultVariantId)}));e&&(a=e)}state.selectedProductVariant=a,state.selectedImage=(null==a?void 0:a.image)||t.images[0]}function updateProduct(){var t,a=getProductId();if(state.productInfo&&!a){var e=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],r=e.length?e[0]:\"NOTAG\";return state.productInfo.tagDef=window.tagDefs[r]?window.tagDefs[r]:{tagType:\"NOTAG\",text:\"n/a\"},void setDefaultVariant()}if(a){state.loading=!0;var n=(null===(t=(window.Shopify||{}).currency)||void 0===t?void 0:t.active)||\"USD\";return fetch(\"https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=\".concat(state.apiKey||context.apiKey||builder.apiKey,\"&productId=\").concat(a,\"¤cyIsoCode=\").concat(n)).then((function(t){return t.json()})).then((function(t){var a=t.products;if(a&&a.length){var e=a[0];state.productInfo=e;var r=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],n=r.length?r[0]:\"NOTAG\";state.productInfo.tagDef=window.tagDefs[n]?window.tagDefs[n]:{tagType:\"NOTAG\",text:\"n/a\"},setDefaultVariant()}state.loading=!1})).catch((function(t){console.error(\"Error fetching Shopify product\",t),state.loading=!1}))}state.productInfo=null}Builder.isEditing&&ref.onStateChange.subscribe((function(){var t=getProductId(),a=state.defaultVariantId;lastProductId!==t?updateProduct():(a!==lastDefaultVariantId||state.productInfo&&!state.selectedProductVariant)&&setDefaultVariant(),lastProductId=t,lastDefaultVariantId=a})),state.productInfo&&!state.selectedProductVariant&&setDefaultVariant(),updateProduct()", "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.loading && !state.productInfo" }, "layerName": "Loading spinner", "id": "builder-486b4d684b2445cb8ec6a6f588167562", "meta": { "version": "0.0.91" }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "15px", "width": "4em", "height": "4em", "borderRadius": "50%", "margin": "6rem auto", "fontSize": "1rem", "textIndent": "-9999em", "borderTop": "0.2em solid rgba(131, 132, 137, 0.2)", "borderRight": "0.2em solid rgba(131, 132, 137, 0.2)", "borderBottom": "0.2em solid rgba(131, 132, 137, 0.2)", "borderLeft": "0.2em solid #454749", "transform": "translateZ(0)", "animationIterationCount": "infinite", "animationTimingFunction": "inear", "animationDuration": "1.1s", "animationName": "_EMO_animation-16036bv_@keyframes animation-16036bv{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}_EMO_" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "show": "var _virtual_index=state.productInfo;return _virtual_index", "href": "var _virtual_index=!state.productInfo||state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"#\":\"\".concat(window.BigData.rootUrl,\"products/\").concat(state.productInfo.handle);return _virtual_index" }, "code": { "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "show": "state.productInfo", "href": "!state.productInfo ||\n(!!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length)\n ? \"#\"\n : `${window.BigData.rootUrl}products/${state.productInfo.handle}`;\n" } }, "layerName": "Product Image", "tagName": "a", "id": "builder-7707ffad3fbd4052b457a67d9cd63d83", "properties": { "data-coming-soon": "", "href": "", "target": "_self" }, "class": "prod-img-frame", "meta": { "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "href": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!state.productInfo || (!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length) ? '#' : `${window.BigData.rootUrl}products/${state.productInfo.handle}`" } } ] } }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "actions": { "mouseOver": "\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[1]) {\n context.setState({\n selectedImage: state.productInfo.images[1],\n });\n }\n }\n", "mouseOut": "\n var _a;\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[0]) {\n context.setState({\n selectedImage: ((_a = state.selectedProductVariant) === null || _a === void 0 ? void 0 : _a.image) || state.productInfo.images[0],\n });\n }\n }\n" }, "bindings": { "show": "state.productInfo", "component.options.image": "state.productInfo.images[0].src", "component.options.altText": "\n var _a;\n ((_a = state.selectedImage) === null || _a === void 0 ? void 0 : _a.alt) ||\n state.productInfo.images[0].alt ||\n state.productInfo.title;\n", "style.cursor": "\n if (state.onClickAction === 'enlarge image') {\n if (state.isZoomedIn) {\n return 'zoom-out';\n }\n return 'zoom-in';\n }\n return undefined;\n", "style.position": "var _virtual_index=state.isZoomedIn?\"fixed\":\"absolute\";return _virtual_index", "style.top": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.right": "(state.isZoomedIn ? 0 : undefined)", "style.left": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.zIndex": "(state.isZoomedIn ? 999 : undefined)", "style.background": "(state.isZoomedIn ? 'white' : undefined)" }, "code": { "bindings": { "style.position": "(state.isZoomedIn ? 'fixed' : 'absolute')", "style.left": "(state.isZoomedIn ? 0 : '50%')", "style.top": "(state.isZoomedIn ? 0 : '50%')", "component.options.image": "state.productInfo.images[0].src;" } }, "id": "builder-a9a12c78847a4e4e9e3e13548e872244", "meta": { "version": "0.0.91", "bindingActions": { "style": { "maxWidth": null, "width": null, "height": null } }, "eventActions": { "mouseOut": [] }, "previousId": "builder-f705a55241ae4318aa5162bc899580a1" }, "component": { "name": "Image", "options": { "aspectRatio": 1.394, "backgroundPosition": "center", "backgroundSize": "contain" } }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.isZoomedIn" }, "layerName": "Close button", "id": "builder-dd8943e2f0204b24a3011e1262278f67", "meta": { "version": "0.0.91", "previousId": "builder-4482ce8b0fb04c478944404cc949cbf4" }, "component": { "name": "Text", "options": { "text": "×" } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "absolute", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "0px", "cursor": "pointer", "top": "10px", "right": "10px", "zIndex": "9999", "fontSize": "30px", "borderStyle": "solid", "borderColor": "rgba(213, 213, 213, 1)", "borderWidth": "1px", "borderRadius": "30px", "height": "40px", "width": "40px", "lineHeight": "32px", "backgroundColor": "rgba(255, 255, 255, 1)", "color": "rgba(112, 112, 112, 1)" } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "width": "calc(100% - 4.369vw)", "height": "calc(100% - 4.369vw)", "maxWidth": "calc(100% - 4.369vw)", "transform": "translate(-50%, -50%)" }, "small": { "width": "calc(100% - 4.103vw)", "maxWidth": "calc(100% - 4.103vw)", "height": "calc(100% - 4.103vw)" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "hide": "var returnValue=function(){var t=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],r=t.length?t[0]:\"NOTAG\";return!window.tagDefs[r]}();return returnValue", "component.options.code": "var _virtual_index=state.productInfo.tagDef.text;return _virtual_index", "data-type": "var _virtual_index=state.productInfo.tagDef.tagType;return _virtual_index" }, "code": { "bindings": { "hide": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\nreturn !window.tagDefs[tag];", "component.options.code": "state.productInfo.tagDef.text", "data-type": "state.productInfo.tagDef.tagType;\n" } }, "layerName": "[TAG]", "id": "builder-eb61da12bb4d4f61b16e50f9a583867b", "properties": { "data-type": "" }, "class": "prod-tag font-detail", "meta": { "previousId": "builder-b15a7f34fb2d433d850b5469dd79578d", "bindingActions": { "component": { "options": { "code": null } }, "meta": { "bindingActions": { "component": { "options": { "code": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "/**\n * Global objects available in custom action code:\n *\n * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions\n * context - builder context object - learn about context https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down\n * event - HTML Event - https://developer.mozilla.org/en-US/docs/Web/API/Event\n *\n * Learn more: https://www.builder.io/c/docs/guides/custom-code\n *\n */" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "component": { "name": "Custom Code", "options": { "code": "", "replaceNodes": true } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "flex": "1", "paddingBottom": "118.939%", "maxWidth": "100%", "width": "100%", "cursor": "text" }, "small": { "paddingBottom": "118.079%" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "show": "var _virtual_index=state.productInfo;return _virtual_index", "href": "var _virtual_index=!state.productInfo||state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"#\":\"\".concat(window.BigData.rootUrl,\"products/\").concat(state.productInfo.handle);return _virtual_index" }, "code": { "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "show": "state.productInfo", "href": "!state.productInfo ||\n(!!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length)\n ? \"#\"\n : `${window.BigData.rootUrl}products/${state.productInfo.handle}`;\n" } }, "layerName": "Product Title", "tagName": "a", "id": "builder-d8403e02970a4fe8bf68976402487ab6", "properties": { "data-coming-soon": "", "href": "", "target": "_self" }, "class": "prod-title", "meta": { "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "href": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!state.productInfo || (!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length) ? '#' : `${window.BigData.rootUrl}products/${state.productInfo.handle}`" } } ] }, "previousId": "builder-e09fba45e3c744efb196b581e2840a31" }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 16//", "id": "builder-a6bcdcf77e9c41a692165bc6b070d507", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31" }, "component": { "name": "Custom Code", "options": { "code": "
", "replaceNodes": true } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var returnValue=function(){var t=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?window.comingSoonEl?window.comingSoonEl:\"\":window.hoverArrow?window.hoverArrow:\"\";return(window&&window.BigData&&window.BigData.prices&&window.BigData.titles[state.productInfo.handle]?window.BigData.titles[state.productInfo.handle]:state.productInfo.title)+t}();return returnValue" }, "code": { "bindings": { "component.options.text": "let hoverAddon = !!state.productInfo\r\n && !!state.productInfo.tags\r\n && state.productInfo.tags.length\r\n && state.productInfo.tags.filter(tag => tag == 'coming-soon').length\r\n ? (!!window.comingSoonEl ? window.comingSoonEl : '')\r\n : (!!window.hoverArrow ? window.hoverArrow : '');\r\nlet title = !window || !window.BigData || !window.BigData.prices || !window.BigData.titles[state.productInfo.handle] ? state.productInfo.title : window.BigData.titles[state.productInfo.handle];\r\nreturn title + hoverAddon;" } }, "layerName": "Title", "id": "builder-6a4ff29cb013456eb6173136c899fe7a", "class": "font-body-sm body-sm-shorten-top font-mob-xsm mob-xsm-shorten-top", "meta": { "version": "0.0.91", "previousId": "builder-19f3a7d1643b4d3392f44d86267aacee" }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "position": "relative", "textDecoration": "none", "color": "inherit" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=!state.productInfo.tags.includes(\"hide-price\")&&window&&window.BigData&&window.BigData.prices&&window.BigData.prices[state.productInfo.handle]?window.BigData.prices[state.productInfo.handle]:\"$--\";return _virtual_index", "data-hide-price": "var _virtual_index=state.productInfo.tags.includes(\"hide-price\")?\"true\":\"false\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "state.productInfo.tags.includes('hide-price') || !window || !window.BigData || !window.BigData.prices || !window.BigData.prices[state.productInfo.handle] ? '$--' : window.BigData.prices[state.productInfo.handle]", "data-hide-price": "state.productInfo.tags.includes(\"hide-price\") ? \"true\" : \"false\";\n" } }, "layerName": "Price", "id": "builder-37de9096fd14488082f4bc30dddc8775", "properties": { "data-hide-price": "" }, "class": "prod-price font-body-sm body-sm-shorten-btm font-mob-xsm mob-xsm-shorten-btm", "meta": { "version": "0.0.91", "previousId": "builder-09cb2528254c4582afc8c82967139a53", "bindingActions": { "data-hide-price": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tags.includes('hide-price') ? 'true' : 'false'" } } ] } }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "color": "inherit", "textDecoration": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 56//24", "id": "builder-53ab35a16e7944f5bb88705c26b66412", "meta": { "previousId": "builder-ca8887ad855d44f3ae34e5b50efe6a03" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "width": "100%", "cursor": "text" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "actions": { "click": "\n" }, "bindings": { "show": "state.productInfo", "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "data-handle": "var _virtual_index=state.productInfo.handle;return _virtual_index" }, "code": { "actions": { "click": "let tags =\n !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length\n ? state.productInfo.tags.filter((tag) => tag == \"coming-soon\")\n : [];\nconsole.log(\"waaaagghh\");\nif (tags.length) {\n return 0;\n} else {\n window.open(`/products/${state.productInfo.handle}`, \"_self\");\n}\n" }, "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "data-handle": "state.productInfo.handle;\n" } }, "layerName": "(OLD) Product Title", "id": "builder-4edb53a1fb734d78bef757e667edd1fe", "properties": { "data-coming-soon": "", "data-handle": "" }, "class": "prod-title", "groupLocked": true, "meta": { "requiresParent": { "message": "This block must be inside a \"Product box\" block", "query": { "meta.kind": "ProductBox" } }, "version": "0.0.91", "eventActions": { "click": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length ? state.productInfo.tags.filter(tag => tag == 'coming-soon') : [];\nconsole.log('waaaagghh');\nif(tags.length) {\n return 0;\n}\nelse {\n window.open(`/products/${state.productInfo.handle}`, '_self');\n}" } } ] }, "bindingActions": { "style": { "cursor": null }, "meta": { "bindingActions": { "style": { "cursor": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'default' : pointer" } } ] } } }, "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "data-handle": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.handle" } } ] } }, "component": { "name": "Symbol", "options": { "inheritState": true, "symbol": { "meta": { "fieldName": "Product Title", "hideExplanation": true, "documentationLink": "https://builder.io/c/docs/shopify/product-box#product-title" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "meta": {}, "name": "linkToProductPageOnClick", "type": "boolean", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=state.productInfo?JSON.stringify(state.productInfo):\"\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "return !!state.productInfo ? JSON.stringify(state.productInfo) : \"\";\n" } }, "layerName": "[DEBUG: PRODUCT JSON]", "id": "builder-6af2658d5cd5497b8c17d37ba9fbfd63", "meta": { "bindingActions": { "component": { "options": { "text": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo ? JSON.stringify(state.productInfo) : '';" } } ] } } }, "previousId": "builder-4e493b871b4a40ca90daf28dc1ebca63" }, "component": { "name": "Text", "options": { "text": "Enter some text..." } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "lineHeight": "normal", "height": "auto" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 16//", "id": "builder-60bdca0855954f9e8605c1908443e88d", "component": { "name": "Custom Code", "options": { "code": "
", "replaceNodes": true } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var returnValue=function(){var t=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?window.comingSoonEl?window.comingSoonEl:\"\":window.hoverArrow?window.hoverArrow:\"\";return state.productInfo.title+t}();return returnValue" }, "code": { "bindings": { "component.options.text": "let hoverAddon = !!state.productInfo\r\n && !!state.productInfo.tags\r\n && state.productInfo.tags.length\r\n && state.productInfo.tags.filter(tag => tag == 'coming-soon').length\r\n ? (!!window.comingSoonEl ? window.comingSoonEl : '')\r\n : (!!window.hoverArrow ? window.hoverArrow : '');\r\nreturn state.productInfo.title + hoverAddon;" } }, "layerName": "Title", "id": "builder-cc6e96d88bc448729fa806259b6e03d8", "class": "font-body-sm body-sm-shorten-top font-mob-xsm mob-xsm-shorten-top", "meta": { "version": "0.0.91" }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "position": "relative", "textDecoration": "none", "color": "inherit" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=state.productInfo.tags.includes(\"hide-price\")?\"$--\":state.productInfo.variants[0].formattedPrice;return _virtual_index", "data-hide-price": "var _virtual_index=state.productInfo.tags.includes(\"hide-price\")?\"true\":\"false\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "state.productInfo.tags.includes('hide-price') ? '$--' : state.productInfo.variants[0].formattedPrice", "data-hide-price": "state.productInfo.tags.includes(\"hide-price\") ? \"true\" : \"false\";\n" } }, "layerName": "Price", "id": "builder-ddb621eaea1140efabe12a2cf975ada1", "properties": { "data-hide-price": "" }, "class": "prod-price font-body-sm body-sm-shorten-btm font-mob-xsm mob-xsm-shorten-btm", "meta": { "version": "0.0.91", "previousId": "builder-bef4f6a7376f4b5eabe873148af39ca6", "bindingActions": { "data-hide-price": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tags.includes('hide-price') ? 'true' : 'false'" } } ] } }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "color": "inherit", "textDecoration": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 56//24", "id": "builder-dead37b461d8404c8132985975e4b85d", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } } } ] } }, "data": { "linkToProductPageOnClick": false } } } }, "responsiveStyles": { "large": { "display": "none", "flexDirection": "row", "width": "100%", "cursor": "text" }, "medium": { "display": "none" }, "small": { "display": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.productInfo", "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "data-handle": "var _virtual_index=state.productInfo.handle;return _virtual_index", "component.options.symbol.data.onClickAction": "var _virtual_index=function(o){void 0===o&&(o=o);var n=o.productInfo&&o.productInfo.tags&&o.productInfo.tags.length?o.productInfo.tags.filter((function(o){return\"coming-soon\"==o})):[];if(console.log(\"waaaagghh\"),n.length)return 0;window.open(\"/products/\".concat(o.productInfo.handle),\"_self\")};return _virtual_index" }, "code": { "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "data-handle": "state.productInfo.handle;\n", "component.options.symbol.data.onClickAction": "export default (state = state) => {\n let tags =\n !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length\n ? state.productInfo.tags.filter((tag) => tag == \"coming-soon\")\n : [];\n console.log(\"waaaagghh\");\n if (tags.length) {\n return 0;\n } else {\n window.open(`/products/${state.productInfo.handle}`, \"_self\");\n }\n};\n" } }, "layerName": "(OLD) Product Image", "id": "builder-c7a457d159504c2e917bb40a3108e74b", "properties": { "data-coming-soon": "", "data-handle": "" }, "class": "prod-img-frame", "groupLocked": true, "meta": { "requiresParent": { "message": "This block must be inside a \"Product box\" block", "query": { "meta.kind": "ProductBox" } }, "version": "0.0.91", "eventActions": {}, "bindingActions": { "style": { "cursor": null }, "meta": { "bindingActions": { "style": { "cursor": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'default' : pointer" } } ] }, "data-type": null } }, "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'default' : 'pointer'" } } ], "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "data-handle": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.handle" } } ], "component": { "options": { "symbol": { "data": { "onClickAction": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "export default (state = state) => {\r\n let tags = !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length ? state.productInfo.tags.filter(tag => tag == 'coming-soon') : [];\r\n console.log('waaaagghh');\r\n if(tags.length) {\r\n return 0;\r\n }\r\n else {\r\n window.open(`/products/${state.productInfo.handle}`, '_self');\r\n }\r\n};" } } ] } } } } } }, "component": { "name": "Symbol", "options": { "inheritState": true, "symbol": { "data": { "onClickAction": "link to product page", "onHoverAction": "nothing" }, "meta": { "fieldName": "Product Image", "hideExplanation": true, "documentationLink": "https://builder.io/c/docs/shopify/product-box#product-image" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "meta": {}, "name": "onClickAction", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "enum": [ "nothing", "link to product page", "enlarge image" ], "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "meta": {}, "name": "onHoverAction", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "enum": [ "nothing", "swap image" ], "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "actions": { "mouseOver": "\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[1]) {\n context.setState({\n selectedImage: state.productInfo.images[1],\n });\n }\n }\n", "mouseOut": "\n var _a;\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[0]) {\n context.setState({\n selectedImage: ((_a = state.selectedProductVariant) === null || _a === void 0 ? void 0 : _a.image) || state.productInfo.images[0],\n });\n }\n }\n" }, "bindings": { "show": "state.productInfo", "component.options.image": "var returnValue=state.productInfo.images[state.productInfo.images.length-1].src;return returnValue", "component.options.altText": "\n var _a;\n ((_a = state.selectedImage) === null || _a === void 0 ? void 0 : _a.alt) ||\n state.productInfo.images[0].alt ||\n state.productInfo.title;\n", "style.cursor": "\n if (state.onClickAction === 'enlarge image') {\n if (state.isZoomedIn) {\n return 'zoom-out';\n }\n return 'zoom-in';\n }\n return undefined;\n", "style.position": "var _virtual_index=state.isZoomedIn?\"fixed\":\"absolute\";return _virtual_index", "style.top": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.right": "(state.isZoomedIn ? 0 : undefined)", "style.left": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.zIndex": "(state.isZoomedIn ? 999 : undefined)", "style.background": "(state.isZoomedIn ? 'white' : undefined)" }, "code": { "bindings": { "style.position": "(state.isZoomedIn ? 'fixed' : 'absolute')", "style.left": "(state.isZoomedIn ? 0 : '50%')", "style.top": "(state.isZoomedIn ? 0 : '50%')", "component.options.image": "\n var _a;\n //return ((_a = state.selectedImage) === null || _a === void 0 ? void 0 : _a.src) || state.productInfo.images[state.productInfo.images.length - 1].src;\n return state.productInfo.images[state.productInfo.images.length - 1].src;\n" } }, "id": "builder-5020792d5e5c4cbb97ae592cde4f35ac", "meta": { "version": "0.0.91", "bindingActions": { "style": { "maxWidth": null, "width": null, "height": null } }, "eventActions": { "mouseOut": [] } }, "component": { "name": "Image", "options": { "aspectRatio": 1.394, "backgroundPosition": "center", "backgroundSize": "contain" } }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.isZoomedIn" }, "layerName": "Close button", "id": "builder-a91f67ae5dbd4a7aaab2ff75a1534543", "meta": { "version": "0.0.91" }, "component": { "name": "Text", "options": { "text": "×" } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "absolute", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "0px", "cursor": "pointer", "top": "10px", "right": "10px", "zIndex": "9999", "fontSize": "30px", "borderStyle": "solid", "borderColor": "rgba(213, 213, 213, 1)", "borderWidth": "1px", "borderRadius": "30px", "height": "40px", "width": "40px", "lineHeight": "32px", "backgroundColor": "rgba(255, 255, 255, 1)", "color": "rgba(112, 112, 112, 1)" } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "width": "calc(100% - 4.369vw)", "height": "calc(100% - 4.369vw)", "maxWidth": "calc(100% - 4.369vw)", "transform": "translate(-50%, -50%)" }, "small": { "width": "calc(100% - 4.103vw)", "maxWidth": "calc(100% - 4.103vw)", "height": "calc(100% - 4.103vw)" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "hide": "var returnValue=function(){var t=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],r=t.length?t[0]:\"NOTAG\";return!window.tagDefs[r]}();return returnValue", "component.options.code": "var _virtual_index=state.productInfo.tagDef.text;return _virtual_index", "data-type": "var _virtual_index=state.productInfo.tagDef.tagType;return _virtual_index" }, "code": { "bindings": { "hide": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\nreturn !window.tagDefs[tag];", "component.options.code": "state.productInfo.tagDef.text", "data-type": "state.productInfo.tagDef.tagType;\n" } }, "layerName": "[TAG]", "id": "builder-fef1b797c5d04fbc8de649bda3dd9f9a", "properties": { "data-type": "" }, "class": "prod-tag font-detail", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31", "bindingActions": { "component": { "options": { "code": null } }, "meta": { "bindingActions": { "component": { "options": { "code": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "/**\n * Global objects available in custom action code:\n *\n * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions\n * context - builder context object - learn about context https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down\n * event - HTML Event - https://developer.mozilla.org/en-US/docs/Web/API/Event\n *\n * Learn more: https://www.builder.io/c/docs/guides/custom-code\n *\n */" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "component": { "name": "Custom Code", "options": { "code": "", "replaceNodes": true } } } ] } } } } }, "responsiveStyles": { "large": { "display": "none", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "flex": "1", "paddingBottom": "118.939%", "maxWidth": "100%", "width": "100%", "cursor": "text" }, "small": { "paddingBottom": "118.079%" } } } ], "tsCode": "\n context.setState = (stateUpdates) => {\n for (let key in stateUpdates) {\n state[key] = stateUpdates[key];\n }\n if ('selectedProductVariant' in stateUpdates) {\n onProductVariantChange();\n }\n };\n const onProductVariantChange = () => {\n if (state.selectedProductVariant) {\n state.selectedImage = state.selectedProductVariant.image || state.selectedImage;\n }\n };\n const getProductId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.product === contextPlaceholder) {\n return context.overrideProductId;\n }\n let product = state.product;\n if (typeof product === 'object' &&\n product &&\n product['@type'] === '@builder.io/core:Request') {\n product = product.options.product;\n }\n return product;\n };\n let lastProductId = getProductId();\n let lastDefaultVariantId = state.defaultVariantId;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const productId = getProductId();\n const defaultVariantId = state.defaultVariantId;\n if (lastProductId !== productId) {\n updateProduct();\n }\n else if (defaultVariantId !== lastDefaultVariantId ||\n (state.productInfo && !state.selectedProductVariant)) {\n setDefaultVariant();\n }\n lastProductId = productId;\n lastDefaultVariantId = defaultVariantId;\n });\n }\n if (state.productInfo && !state.selectedProductVariant) {\n setDefaultVariant();\n }\n function setDefaultVariant() {\n const productInfo = state.productInfo;\n const firstAvailableVariant = productInfo.variants.find(variant => variant.availableForSale);\n let defaultVariant = firstAvailableVariant || productInfo.variants[0];\n if (state.defaultVariantId) {\n const defaultVariantInfo = productInfo.variants.find(variant => String(variant.id) === String(state.defaultVariantId));\n if (defaultVariantInfo) {\n defaultVariant = defaultVariantInfo;\n }\n }\n state.selectedProductVariant = defaultVariant;\n state.selectedImage = (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.image) || productInfo.images[0];\n }\n function updateProduct() {\n var _a;\n const productId = getProductId();\n if (state.productInfo && !productId) {\n let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\n let tag = !tags.length ? 'NOTAG' : tags[0];\n /* return JSON.stringify(state.productInfo.tags); */\n state.productInfo.tagDef = !window.tagDefs[tag] ? {tagType: 'NOTAG', text: 'n/a'} : window.tagDefs[tag];\n setDefaultVariant();\n return;\n }\n if (productId) {\n state.loading = true;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n return fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&productId=${productId}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const { products } = data;\n if (products && products.length) {\n const productInfo = products[0];\n state.productInfo = productInfo;\n let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\n let tag = !tags.length ? 'NOTAG' : tags[0];\n /* return JSON.stringify(state.productInfo.tags); */\n state.productInfo.tagDef = !window.tagDefs[tag] ? {tagType: 'NOTAG', text: 'n/a'} : window.tagDefs[tag];\n setDefaultVariant();\n }\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.productInfo = null;\n }\n }\n updateProduct();\n" } } } } }, "responsiveStyles": { "large": { "display": "flex", "alignItems": "stretch", "position": "relative", "boxSizing": "border-box", "textAlign": "left", "flexDirection": "column" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "repeat": { "collection": "collectionInfo.products", "itemName": "product" }, "layerName": "[PLACEHOLDER]", "id": "builder-65c7e659d92d4079a368db4192fcc3c0", "properties": { "data-slot": "shopify:productBox" }, "class": "prod-placeholder", "meta": { "version": "0.0.91", "kind": "ProductBox", "previousId": "builder-69ed3cb30a5b4a518acabe072f1f1583" }, "component": { "name": "Symbol", "options": { "symbol": { "data": { "loading": false, "product": "", "productBoxHasChildren": false, "apiKey": "64dd5478e25746bf9db3b6c0319905f6" }, "meta": { "fieldName": "Product Box", "documentationNote": "Product boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/product-box" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "meta": {}, "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "meta": {}, "name": "product", "type": "ShopifyProduct", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "\n return !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); });\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "meta": {}, "name": "defaultVariantId", "friendlyName": "Default Variant", "type": "ShopifyProductVariant", "required": false, "subFields": [], "helperText": "Only choose a default variant if you want to have a specific variant be selected when the product box loads", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "\n return (options.get('product') &&\n !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); }));\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "jsCode": "\n context.setState = (stateUpdates) => {\n for (let key in stateUpdates) {\n state[key] = stateUpdates[key];\n }\n if ('selectedProductVariant' in stateUpdates) {\n onProductVariantChange();\n }\n };\n const onProductVariantChange = () => {\n if (state.selectedProductVariant) {\n state.selectedImage = state.selectedProductVariant.image || state.selectedImage;\n }\n };\n const getProductId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.product === contextPlaceholder) {\n return context.overrideProductId;\n }\n let product = state.product;\n if (typeof product === 'object' &&\n product &&\n product['@type'] === '@builder.io/core:Request') {\n product = product.options.product;\n }\n return product;\n };\n let lastProductId = getProductId();\n let lastDefaultVariantId = state.defaultVariantId;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const productId = getProductId();\n const defaultVariantId = state.defaultVariantId;\n if (lastProductId !== productId) {\n updateProduct();\n }\n else if (defaultVariantId !== lastDefaultVariantId ||\n (state.productInfo && !state.selectedProductVariant)) {\n setDefaultVariant();\n }\n lastProductId = productId;\n lastDefaultVariantId = defaultVariantId;\n });\n }\n if (state.productInfo && !state.selectedProductVariant) {\n setDefaultVariant();\n }\n function setDefaultVariant() {\n const productInfo = state.productInfo;\n const firstAvailableVariant = productInfo.variants.find(variant => variant.availableForSale);\n let defaultVariant = firstAvailableVariant || productInfo.variants[0];\n if (state.defaultVariantId) {\n const defaultVariantInfo = productInfo.variants.find(variant => String(variant.id) === String(state.defaultVariantId));\n if (defaultVariantInfo) {\n defaultVariant = defaultVariantInfo;\n }\n }\n state.selectedProductVariant = defaultVariant;\n state.selectedImage = (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.image) || productInfo.images[0];\n }\n function updateProduct() {\n var _a;\n const productId = getProductId();\n if (state.productInfo && !productId) {\n setDefaultVariant();\n return;\n }\n if (productId) {\n state.loading = true;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n return fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&productId=${productId}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const { products } = data;\n if (products && products.length) {\n const productInfo = products[0];\n state.productInfo = productInfo;\n setDefaultVariant();\n }\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.productInfo = null;\n }\n }\n updateProduct();\n", "blocks": [] } } } } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "repeat": { "collection": "collectionInfo.products", "itemName": "product" }, "layerName": "[PLACEHOLDER]", "id": "builder-735b768143134b2bb3cc9f01abf3693f", "properties": { "data-slot": "shopify:productBox" }, "class": "prod-placeholder", "meta": { "version": "0.0.91", "kind": "ProductBox", "previousId": "builder-6fec2ce34d564853872d0dd08a668442" }, "component": { "name": "Symbol", "options": { "symbol": { "data": { "loading": false, "product": "", "productBoxHasChildren": false, "apiKey": "64dd5478e25746bf9db3b6c0319905f6" }, "meta": { "fieldName": "Product Box", "documentationNote": "Product boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/product-box" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "meta": {}, "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "meta": {}, "name": "product", "type": "ShopifyProduct", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "\n return !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); });\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false }, { "@type": "@builder.io/core:Field", "meta": {}, "name": "defaultVariantId", "friendlyName": "Default Variant", "type": "ShopifyProductVariant", "required": false, "subFields": [], "helperText": "Only choose a default variant if you want to have a specific variant be selected when the product box loads", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "behavior": "", "showIf": "\n return (options.get('product') &&\n !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); }));\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false, "defaultCollapsed": false } ], "jsCode": "\n context.setState = (stateUpdates) => {\n for (let key in stateUpdates) {\n state[key] = stateUpdates[key];\n }\n if ('selectedProductVariant' in stateUpdates) {\n onProductVariantChange();\n }\n };\n const onProductVariantChange = () => {\n if (state.selectedProductVariant) {\n state.selectedImage = state.selectedProductVariant.image || state.selectedImage;\n }\n };\n const getProductId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.product === contextPlaceholder) {\n return context.overrideProductId;\n }\n let product = state.product;\n if (typeof product === 'object' &&\n product &&\n product['@type'] === '@builder.io/core:Request') {\n product = product.options.product;\n }\n return product;\n };\n let lastProductId = getProductId();\n let lastDefaultVariantId = state.defaultVariantId;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const productId = getProductId();\n const defaultVariantId = state.defaultVariantId;\n if (lastProductId !== productId) {\n updateProduct();\n }\n else if (defaultVariantId !== lastDefaultVariantId ||\n (state.productInfo && !state.selectedProductVariant)) {\n setDefaultVariant();\n }\n lastProductId = productId;\n lastDefaultVariantId = defaultVariantId;\n });\n }\n if (state.productInfo && !state.selectedProductVariant) {\n setDefaultVariant();\n }\n function setDefaultVariant() {\n const productInfo = state.productInfo;\n const firstAvailableVariant = productInfo.variants.find(variant => variant.availableForSale);\n let defaultVariant = firstAvailableVariant || productInfo.variants[0];\n if (state.defaultVariantId) {\n const defaultVariantInfo = productInfo.variants.find(variant => String(variant.id) === String(state.defaultVariantId));\n if (defaultVariantInfo) {\n defaultVariant = defaultVariantInfo;\n }\n }\n state.selectedProductVariant = defaultVariant;\n state.selectedImage = (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.image) || productInfo.images[0];\n }\n function updateProduct() {\n var _a;\n const productId = getProductId();\n if (state.productInfo && !productId) {\n setDefaultVariant();\n return;\n }\n if (productId) {\n state.loading = true;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n return fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&productId=${productId}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const { products } = data;\n if (products && products.length) {\n const productInfo = products[0];\n state.productInfo = productInfo;\n setDefaultVariant();\n }\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.productInfo = null;\n }\n }\n updateProduct();\n", "blocks": [] } } } } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "row", "alignItems": "flex-start", "position": "relative", "flexShrink": "0", "justifyContent": "center", "flexWrap": "wrap", "minWidth": "200px", "width": "100%", "maxWidth": "1648px", "paddingLeft": "16px", "paddingRight": "16px", "columnGap": "16px" }, "small": { "paddingLeft": "12px", "paddingRight": "12px", "columnGap": "12px" } } } ], "tsCode": "\n if (Builder.isBrowser) {\n const shopifyWindow = window;\n if (shopifyWindow.BuilderJsonData && shopifyWindow.BuilderJsonData.collection) {\n context.overrideCollectionId = shopifyWindow.BuilderJsonData.collection.id;\n context.collectionObject = shopifyWindow.BuilderJsonData.collection;\n }\n }\n\n const getCollectionId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.collection === contextPlaceholder) {\n return context.overrideCollectionId;\n }\n let collection = state.collection;\n if (typeof collection === 'object' &&\n collection &&\n collection['@type'] === '@builder.io/core:Request') {\n collection = collection.options.collection;\n }\n return collection;\n };\n let lastCollectionId = getCollectionId();\n let lastLimit = 10;\n let lastHideIfUnavailable = state.hideIfUnavailable || false;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const newId = getCollectionId();\n if (lastCollectionId !== newId ||\n lastLimit !== state.limit ||\n lastHideIfUnavailable !== state.hideIfUnavailable) {\n updateCollection();\n lastCollectionId = newId;\n lastHideIfUnavailable = state.hideIfUnavailable;\n }\n });\n }\n function updateCollection() {\n const collectionId = getCollectionId();\n if (state.collectionInfo && !collectionId) {\n return;\n }\n if (collectionId) {\n state.loading = true;\n lastLimit = state.limit ? state.limit : 10;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&collectionId=${collectionId}&limit=${state.limit ? state.limit : 10}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const collectionResponse = data;\n if (state.hideIfUnavailable) {\n const availableProducts = collectionResponse.products.filter((product) => product.variants.some(variant => variant.availableForSale));\n collectionResponse.products = availableProducts;\n }\n state.collectionInfo = collectionResponse;\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.collectionInfo = null;\n }\n }\n updateCollection();\n" } } } } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "row", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "textAlign": "center", "justifyContent": "center", "maxWidth": "1648px", "width": "100%", "marginLeft": "auto", "marginRight": "auto" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[CLICK EVENTS]", "id": "builder-9140c515deeb426ea4db3b97ac8055b8", "meta": { "previousId": "builder-57a6b972efa24fb582d55c21f117be8a" }, "component": { "name": "Custom Code", "options": { "code": "\n", "replaceNodes": true } }, "responsiveStyles": { "large": { "marginTop": "-56px", "display": "none" }, "small": { "marginTop": "-24px" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 240//80", "id": "builder-b0cf6508a877453d977effdefe880352", "meta": { "previousId": "builder-5562c0a34f724f3b9e79e6127693ce64" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } }, "responsiveStyles": { "large": { "marginTop": "-56px" }, "small": { "marginTop": "-24px" } } }, { "id": "builder-pixel-2jsovgoaauf", "@type": "@builder.io/sdk:Element", "tagName": "img", "properties": { "src": "https://cdn.builder.io/api/v1/pixel?apiKey=64dd5478e25746bf9db3b6c0319905f6", "aria-hidden": "true", "alt": "", "role": "presentation", "width": "0", "height": "0" }, "responsiveStyles": { "large": { "height": "0", "width": "0", "display": "block", "opacity": "0", "overflow": "hidden", "pointerEvents": "none" } } } ], "state": { "deviceSize": "large", "location": { "path": "", "query": {} } } }, "variations": {}, "lastUpdated": 1742489914951, "firstPublished": 1662866118362, "testRatio": 1, "screenshot": "https://cdn.builder.io/api/v1/image/assets%2F64dd5478e25746bf9db3b6c0319905f6%2Feecb64e7b3c14dc395a9733873501872", "createdBy": "eKkJ2UiI2tPDREXNlNnSplF1SqP2", "lastUpdatedBy": "eKkJ2UiI2tPDREXNlNnSplF1SqP2", "rev": "1rb29jyvmat" }, { "lastUpdatedBy": "eKkJ2UiI2tPDREXNlNnSplF1SqP2", "folders": [], "data": { "jsCode": "var __awaiter=function(e,n,t,r){return new(t||(t=Promise))((function(o,a){function i(e){try{u(r.next(e))}catch(e){a(e)}}function l(e){try{u(r.throw(e))}catch(e){a(e)}}function u(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(i,l)}u((r=r.apply(e,n||[])).next())}))},__generator=function(e,n){var t,r,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:l(0),throw:l(1),return:l(2)},\"function\"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(a){return function(l){return function(a){if(t)throw new TypeError(\"Generator is already executing.\");for(;i;)try{if(t=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,r=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=(o=i.trys).length>0&&o[o.length-1])&&(6===a[0]||2===a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]coming soon\\n \",window.tagDefs={\"marker-preorder\":{tagType:\"colored\",text:\"pre order\"},\"marker-new\":{tagType:\"solid\",text:\"new\"},\"marker-sale\":{tagType:\"hollow\",text:\"sale\"},\"marker-replacement\":{tagType:\"hollow\",text:\"replacement\"}},state.tagDefs=window.tagDefs),[2]}))}))}var _virtual_index=main();return _virtual_index", "inputs": [], "liquidTargeting": { "liquidSnippets": [], "propertyOrder": [], "previouslyOrderedCollections": [], "selectedCurrency": "", "@type": "@builder.io/core:LiquidTargeting", "previouslyOrderedProducts": [], "productIsInCollections": [], "urlIncludes": "", "products": [], "customerStatus": "any", "locales": [], "cartStatus": "", "cartContainsProductWithTag": [], "customerAcceptsMarketing": "any", "collections": [], "previouslyOrderedProductOfType": [], "cartContainsProduct": [], "previouslyOrderedProductTags": [], "customerTags": [], "cartContainsProductInCollection": [], "cartContainsProductOfType": [], "productType": [], "productTags": [] }, "customFonts": [ { "fileUrl": "https://cdn.builder.io/o/assets%2F64dd5478e25746bf9db3b6c0319905f6%2Fcda62180cb7c4846865787d54e56ca2f?alt=media&token=3290abba-d7b2-4a60-841a-acf8b77c5a7c&apiKey=64dd5478e25746bf9db3b6c0319905f6", "isUserFont": true, "category": "serif", "family": "Neue Haas Grotesk Display Pro - 75 Bold" }, { "fileUrl": "https://cdn.builder.io/o/assets%2F64dd5478e25746bf9db3b6c0319905f6%2F2793a31f5c7b4eea8f9089a163d04b25?alt=media&token=7fa1ef0d-a102-46b2-a75c-8c3332b5b8c9&apiKey=64dd5478e25746bf9db3b6c0319905f6", "isUserFont": true, "category": "sans-serif", "family": "Neue Haas Grotesk Display Pro - Medium" }, { "fileUrl": "https://cdn.builder.io/o/assets%2F64dd5478e25746bf9db3b6c0319905f6%2F801ad1fc927c41ef959636b8424c18b6?alt=media&token=269259f3-2e52-4b04-b789-5e22187828bf&apiKey=64dd5478e25746bf9db3b6c0319905f6", "isUserFont": true, "category": "serif", "family": "Neue Haas Grotesk Display Pro - 55 Roman" } ], "cssCode": "/*\n* Custom CSS styles\n*\n* Global by default, but use `&` to scope to just this content, e.g.\n*\n* & .foo {\n* color: 'red'\n* }\n*/\n\n.collection>div {\n flex: 1;\n}\n\n.prod-box {\n color: #000;\n}\n.prod-placeholder {\n display: flex;\n min-height: 0px;\n max-height: 0px;\n height: 0px;\n padding: 0;\n border: none;\n}\n.prod-box, .prod-placeholder {\n flex: 1 0 calc(min(1648px, 100vw) * .305);\n max-width: calc(min(1648px, 100vw) * .32039);\n}\n/*- MOBILE Product Box -*/\n@media only screen and (max-width: 991px) {\n .prod-box, .prod-placeholder {\n flex: 1 0 calc(min(1648px, 100vw) * .398);\n max-width: calc(min(1648px, 100vw) * .45385);\n }\n}\n\n.prod-img-frame {\n background: #F4F3F3;\n border-radius: 8px;\n}\n.prod-box:hover .prod-img-frame:not([data-coming-soon=\"true\"]) {\n background: #DFDFDF;\n}\n.prod-tag {\n position: absolute;\n left: 16px;\n top: 16px;\n padding: 8px 16px;\n width: fit-content;\n max-width: calc(100% - 16px);\n overflow: hidden;\n border-radius: 40px;\n}\n.prod-tag[data-type='colored'] {\n color: #FFF;\n background: #4D1EF7;\n}\n.prod-tag[data-type='solid'] {\n color: #FFF;\n background: #000;\n}\n.prod-tag[data-type='hollow'] {\n color: #000;\n padding: 7px 15px;\n border: 1px solid #000;\n}\n.prod-title {\n color: #000;\n}\n.prod-title>div {\n flex: 1;\n}\n.prod-price[data-hide-price=\"true\"] {\n color: #787E81;\n}\n.prod-box .prod-img-frame[data-coming-soon=\"true\"],\n.prod-box .prod-title[data-coming-soon=\"true\"] {\n cursor: default;\n}\n.prod-box .prod-img-frame[data-coming-soon=\"false\"],\n.prod-box .prod-title[data-coming-soon=\"false\"] {\n cursor: pointer;\n}\n.prod-box svg {\n margin: 0px 0px -2px 12px;\n}\n.prod-box:not(:hover) svg {\n display: none;\n}\n.prod-box .coming-soon-title {\n position: absolute;\n left: 16px;\n top: -24px;\n transform: translateY(-100%);\n padding: 3px 8px;\n background: #DFDFDF;\n color: #787e81;\n border-radius: 8px;\n white-space: nowrap;\n}\n/* .prod-box:not(:hover) .coming-soon-title {\n display: none;\n} */\n/*- MOBILE Product -*/\n@media only screen and (max-width: 991px) {\n .prod-tag {\n left: 12px;\n top: 12px;\n display: flex;\n align-content: center;\n max-width: calc(calc(100% - 2.052vw) - 12px);\n }\n .prod-box svg {\n display: none;\n }\n .prod-box .coming-soon-title {\n left: 12px;\n }\n}\n\n.product-label > div {\n width: 100%;\n}\n.product-label > div > div > div > div {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 30px\n}", "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "RESCOPE SHOPIFY DATA", "id": "builder-b8ec52fd237b464c989631ea09e28c2d", "component": { "name": "Custom Code", "options": { "code": "\n", "replaceNodes": true } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "position": "relative", "flexShrink": "0", "boxSizing": "border-box" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state" }, "layerName": "Shopify-Linked Content (Dynamic)", "id": "builder-9b488900a63b425fa5b91556221204bb", "class": "collection", "meta": { "version": "0.0.91", "previousId": "builder-3c270bca6edf4df0b38e8b8b946eaf40" }, "component": { "name": "Symbol", "options": { "symbol": { "inline": true, "data": { "apiKey": "64dd5478e25746bf9db3b6c0319905f6", "limit": 10, "collection": "400354279641" }, "meta": { "fieldName": "Product Collection", "documentationNote": "Product collection boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/collection-box", "isProductCollection": true }, "content": { "data": { "jsCode": "if(Builder.isBrowser){var shopifyWindow=window;shopifyWindow.BuilderJsonData&&shopifyWindow.BuilderJsonData.collection&&(context.overrideCollectionId=shopifyWindow.BuilderJsonData.collection.id,context.collectionObject=shopifyWindow.BuilderJsonData.collection)}var getCollectionId=function(){if(\"context_placeholder\"===state.collection)return context.overrideCollectionId;var t=state.collection;return\"object\"==typeof t&&t&&\"@builder.io/core:Request\"===t[\"@type\"]&&(t=t.options.collection),t},lastCollectionId=getCollectionId(),lastLimit=10,lastHideIfUnavailable=state.hideIfUnavailable||!1;function updateCollection(){var t=getCollectionId();if(!state.collectionInfo||t)if(t){state.loading=!0,lastLimit=state.limit?state.limit:10;var e=window.Shopify||{},i=(null===(_a=e.currency)||void 0===_a?void 0:_a.active)||\"USD\";fetch(\"https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=\".concat(state.apiKey||context.apiKey||builder.apiKey,\"&collectionId=\").concat(t,\"&limit=\").concat(state.limit?state.limit:10,\"¤cyIsoCode=\").concat(i)).then((function(t){return t.json()})).then((function(t){var e=t;if(state.hideIfUnavailable){var i=e.products.filter((function(t){return t.variants.some((function(t){return t.availableForSale}))}));e.products=i}state.collectionInfo=e,state.loading=!1})).catch((function(t){console.error(\"Error fetching Shopify product\",t),state.loading=!1}))}else state.collectionInfo=null}Builder.isEditing&&ref.onStateChange.subscribe((function(){var t=getCollectionId();lastCollectionId===t&&lastLimit===state.limit&&lastHideIfUnavailable===state.hideIfUnavailable||(updateCollection(),lastCollectionId=t,lastHideIfUnavailable=state.hideIfUnavailable)})),updateCollection()", "inputs": [ { "@type": "@builder.io/core:Field", "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false }, { "@type": "@builder.io/core:Field", "name": "collection", "type": "ShopifyCollection", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false }, { "@type": "@builder.io/core:Field", "name": "limit", "type": "number", "defaultValue": 10, "required": false, "subFields": [], "helperText": "Number of products to show from the collection", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false }, { "@type": "@builder.io/core:Field", "name": "hideIfUnavailable", "friendlyName": "Hide product(s) if unavailable", "type": "boolean", "required": false, "subFields": [], "helperText": "Hide any product that is unavailable for purchase. Useful in situtations where you want to only show in stock products and have limited inventory", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false } ], "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 80//32", "id": "builder-8c3802391c864bedbc71b8bc8a1b9c05", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.loading" }, "layerName": "Loading spinner", "id": "builder-9ad011ed17684e0b9f84ab8a9ffdd4fd", "layerLocked": true, "meta": { "version": "0.0.91" }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "15px", "width": "4em", "height": "4em", "borderRadius": "50%", "margin": "6rem auto", "fontSize": "1rem", "textIndent": "-9999em", "borderTop": "0.2em solid rgba(131, 132, 137, 0.2)", "borderRight": "0.2em solid rgba(131, 132, 137, 0.2)", "borderBottom": "0.2em solid rgba(131, 132, 137, 0.2)", "borderLeft": "0.2em solid #454749", "transform": "translateZ(0)", "animationIterationCount": "infinite", "animationTimingFunction": "inear", "animationDuration": "1.1s", "animationName": "_EMO_animation-16036bv_@keyframes animation-16036bv{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}_EMO_" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=state.collectionInfo?JSON.stringify(state.collectionInfo):\"\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "return !!state.collectionInfo ? JSON.stringify(state.collectionInfo) : \"\";\n" } }, "layerName": "[DEBUG: COLLECTION JSON]", "id": "builder-d9e92298b95045568e950e6984f02fa4", "meta": { "bindingActions": { "component": { "options": { "text": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.collectionInfo ? JSON.stringify(state.collectionInfo) : '';" } } ] } } }, "previousId": "builder-dd592b66c3574a77adc9a913ca6db33a" }, "component": { "name": "Text", "options": { "text": "Enter some text..." } }, "responsiveStyles": { "large": { "display": "none", "flexDirection": "column", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "lineHeight": "normal", "height": "auto" }, "medium": { "display": "none" }, "small": { "display": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "var returnValue=state.collectionInfo&&state.collectionInfo.products&&state.collectionInfo.products.length;return returnValue" }, "code": { "bindings": { "show": "//console.log('bwah!!', state); //debug\nreturn state.collectionInfo && state.collectionInfo.products && state.collectionInfo.products.length;" } }, "layerName": "Builder Grid", "id": "builder-2d00225715674b4d86db04a82db3a772", "meta": { "version": "0.0.91" }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.symbol.data.productBoxHasChildren": "\n var _a, _b;\n return ((_b = (_a = block === null || block === void 0 ? void 0 : block.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.symbol.content.data.blocks.length) > 3;\n", "component.options.symbol.data.productInfo": "state.product" }, "repeat": { "collection": "collectionInfo.products", "itemName": "product" }, "layerName": "Product Box", "id": "builder-48cd6817296c4b55a50bd5d915372ece", "properties": { "data-slot": "shopify:productBox" }, "class": "prod-box", "meta": { "version": "0.0.91", "kind": "ProductBox", "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "meta": { "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ] } } } }, "component": { "name": "Symbol", "options": { "symbol": { "data": { "loading": false, "product": "", "productBoxHasChildren": false, "apiKey": "64dd5478e25746bf9db3b6c0319905f6" }, "meta": { "fieldName": "Product Box", "documentationNote": "Product boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/product-box" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false }, { "@type": "@builder.io/core:Field", "name": "product", "type": "ShopifyProduct", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); });\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false }, { "@type": "@builder.io/core:Field", "name": "defaultVariantId", "friendlyName": "Default Variant", "type": "ShopifyProductVariant", "required": false, "subFields": [], "helperText": "Only choose a default variant if you want to have a specific variant be selected when the product box loads", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return (options.get('product') &&\n !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); }));\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false } ], "jsCode": "context.setState=function(t){for(var a in t)state[a]=t[a];\"selectedProductVariant\"in t&&onProductVariantChange()};var onProductVariantChange=function(){state.selectedProductVariant&&(state.selectedImage=state.selectedProductVariant.image||state.selectedImage)},getProductId=function(){if(\"context_placeholder\"===state.product)return context.overrideProductId;var t=state.product;return\"object\"==typeof t&&t&&\"@builder.io/core:Request\"===t[\"@type\"]&&(t=t.options.product),t},lastProductId=getProductId(),lastDefaultVariantId=state.defaultVariantId;function setDefaultVariant(){var t=state.productInfo,a=t.variants.find((function(t){return t.availableForSale}))||t.variants[0];if(state.defaultVariantId){var e=t.variants.find((function(t){return String(t.id)===String(state.defaultVariantId)}));e&&(a=e)}state.selectedProductVariant=a,state.selectedImage=(null==a?void 0:a.image)||t.images[0]}function updateProduct(){var t,a=getProductId();if(state.productInfo&&!a){var e=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],r=e.length?e[0]:\"NOTAG\";return state.productInfo.tagDef=window.tagDefs[r]?window.tagDefs[r]:{tagType:\"NOTAG\",text:\"n/a\"},void setDefaultVariant()}if(a){state.loading=!0;var n=(null===(t=(window.Shopify||{}).currency)||void 0===t?void 0:t.active)||\"USD\";return fetch(\"https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=\".concat(state.apiKey||context.apiKey||builder.apiKey,\"&productId=\").concat(a,\"¤cyIsoCode=\").concat(n)).then((function(t){return t.json()})).then((function(t){var a=t.products;if(a&&a.length){var e=a[0];state.productInfo=e;var r=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],n=r.length?r[0]:\"NOTAG\";state.productInfo.tagDef=window.tagDefs[n]?window.tagDefs[n]:{tagType:\"NOTAG\",text:\"n/a\"},setDefaultVariant()}state.loading=!1})).catch((function(t){console.error(\"Error fetching Shopify product\",t),state.loading=!1}))}state.productInfo=null}Builder.isEditing&&ref.onStateChange.subscribe((function(){var t=getProductId(),a=state.defaultVariantId;lastProductId!==t?updateProduct():(a!==lastDefaultVariantId||state.productInfo&&!state.selectedProductVariant)&&setDefaultVariant(),lastProductId=t,lastDefaultVariantId=a})),state.productInfo&&!state.selectedProductVariant&&setDefaultVariant(),updateProduct()", "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.loading && !state.productInfo" }, "layerName": "Loading spinner", "id": "builder-1e6791f7f5494f248f0daa38666c471d", "meta": { "version": "0.0.91" }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "15px", "width": "4em", "height": "4em", "borderRadius": "50%", "margin": "6rem auto", "fontSize": "1rem", "textIndent": "-9999em", "borderTop": "0.2em solid rgba(131, 132, 137, 0.2)", "borderRight": "0.2em solid rgba(131, 132, 137, 0.2)", "borderBottom": "0.2em solid rgba(131, 132, 137, 0.2)", "borderLeft": "0.2em solid #454749", "transform": "translateZ(0)", "animationIterationCount": "infinite", "animationTimingFunction": "inear", "animationDuration": "1.1s", "animationName": "_EMO_animation-16036bv_@keyframes animation-16036bv{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}_EMO_" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "show": "var _virtual_index=state.productInfo;return _virtual_index", "href": "var _virtual_index=!state.productInfo||state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"#\":\"\".concat(window.BigData.rootUrl,\"products/\").concat(state.productInfo.handle);return _virtual_index" }, "code": { "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "show": "state.productInfo", "href": "!state.productInfo ||\n(!!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length)\n ? \"#\"\n : `${window.BigData.rootUrl}products/${state.productInfo.handle}`;\n" } }, "layerName": "Product Image", "tagName": "a", "id": "builder-e09fba45e3c744efb196b581e2840a31", "properties": { "data-coming-soon": "", "href": "", "target": "_self" }, "class": "prod-img-frame", "meta": { "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "href": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!state.productInfo || (!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length) ? '#' : `${window.BigData.rootUrl}products/${state.productInfo.handle}`" } } ] } }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "actions": { "mouseOver": "\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[1]) {\n context.setState({\n selectedImage: state.productInfo.images[1],\n });\n }\n }\n", "mouseOut": "\n var _a;\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[0]) {\n context.setState({\n selectedImage: ((_a = state.selectedProductVariant) === null || _a === void 0 ? void 0 : _a.image) || state.productInfo.images[0],\n });\n }\n }\n" }, "bindings": { "show": "state.productInfo", "component.options.image": "state.productInfo.images[0].src", "component.options.altText": "\n var _a;\n ((_a = state.selectedImage) === null || _a === void 0 ? void 0 : _a.alt) ||\n state.productInfo.images[0].alt ||\n state.productInfo.title;\n", "style.cursor": "\n if (state.onClickAction === 'enlarge image') {\n if (state.isZoomedIn) {\n return 'zoom-out';\n }\n return 'zoom-in';\n }\n return undefined;\n", "style.position": "var _virtual_index=state.isZoomedIn?\"fixed\":\"absolute\";return _virtual_index", "style.top": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.right": "(state.isZoomedIn ? 0 : undefined)", "style.left": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.zIndex": "(state.isZoomedIn ? 999 : undefined)", "style.background": "(state.isZoomedIn ? 'white' : undefined)" }, "code": { "bindings": { "style.position": "(state.isZoomedIn ? 'fixed' : 'absolute')", "style.left": "(state.isZoomedIn ? 0 : '50%')", "style.top": "(state.isZoomedIn ? 0 : '50%')", "component.options.image": "state.productInfo.images[0].src;" } }, "id": "builder-91f4247941784262868aafa21ae10a5e", "meta": { "version": "0.0.91", "bindingActions": { "style": { "maxWidth": null, "width": null, "height": null } }, "eventActions": { "mouseOut": [] }, "previousId": "builder-f705a55241ae4318aa5162bc899580a1" }, "component": { "name": "Image", "options": { "aspectRatio": 1.394, "backgroundPosition": "center", "backgroundSize": "contain" } }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.isZoomedIn" }, "layerName": "Close button", "id": "builder-845990182ac24e3ab89dca3e3c0dd825", "meta": { "version": "0.0.91", "previousId": "builder-4482ce8b0fb04c478944404cc949cbf4" }, "component": { "name": "Text", "options": { "text": "×" } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "absolute", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "0px", "cursor": "pointer", "top": "10px", "right": "10px", "zIndex": "9999", "fontSize": "30px", "borderStyle": "solid", "borderColor": "rgba(213, 213, 213, 1)", "borderWidth": "1px", "borderRadius": "30px", "height": "40px", "width": "40px", "lineHeight": "32px", "backgroundColor": "rgba(255, 255, 255, 1)", "color": "rgba(112, 112, 112, 1)" } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "width": "calc(100% - 4.369vw)", "height": "calc(100% - 4.369vw)", "maxWidth": "calc(100% - 4.369vw)", "transform": "translate(-50%, -50%)" }, "small": { "width": "calc(100% - 4.103vw)", "maxWidth": "calc(100% - 4.103vw)", "height": "calc(100% - 4.103vw)" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "hide": "var returnValue=function(){var t=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],r=t.length?t[0]:\"NOTAG\";return!window.tagDefs[r]}();return returnValue", "component.options.code": "var _virtual_index=state.productInfo.tagDef.text;return _virtual_index", "data-type": "var _virtual_index=state.productInfo.tagDef.tagType;return _virtual_index" }, "code": { "bindings": { "hide": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\nreturn !window.tagDefs[tag];", "component.options.code": "state.productInfo.tagDef.text", "data-type": "state.productInfo.tagDef.tagType;\n" } }, "layerName": "[TAG]", "id": "builder-4a1d7eeca2e74da397895e7359a371fb", "properties": { "data-type": "" }, "class": "prod-tag font-detail", "meta": { "previousId": "builder-b15a7f34fb2d433d850b5469dd79578d", "bindingActions": { "component": { "options": { "code": null } }, "meta": { "bindingActions": { "component": { "options": { "code": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "/**\n * Global objects available in custom action code:\n *\n * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions\n * context - builder context object - learn about context https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down\n * event - HTML Event - https://developer.mozilla.org/en-US/docs/Web/API/Event\n *\n * Learn more: https://www.builder.io/c/docs/guides/custom-code\n *\n */" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "component": { "name": "Custom Code", "options": { "code": "", "replaceNodes": true } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "flex": "1", "paddingBottom": "118.939%", "maxWidth": "100%", "width": "100%", "cursor": "text" }, "small": { "paddingBottom": "118.079%" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "show": "var _virtual_index=state.productInfo;return _virtual_index", "href": "var _virtual_index=!state.productInfo||state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"#\":\"\".concat(window.BigData.rootUrl,\"products/\").concat(state.productInfo.handle);return _virtual_index" }, "code": { "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "show": "state.productInfo", "href": "!state.productInfo ||\n(!!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length)\n ? \"#\"\n : `${window.BigData.rootUrl}products/${state.productInfo.handle}`;\n" } }, "layerName": "Product Title", "tagName": "a", "id": "builder-8adaaa0f5d314249b0aa172a159f1d0c", "properties": { "data-coming-soon": "", "href": "", "target": "_self" }, "class": "prod-title", "meta": { "bindingActions": { "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "href": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!state.productInfo || (!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length) ? '#' : `${window.BigData.rootUrl}products/${state.productInfo.handle}`" } } ] }, "previousId": "builder-e09fba45e3c744efb196b581e2840a31" }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 16//", "id": "builder-7cf6503a74134d85bb590e38ee510e08", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31" }, "component": { "name": "Custom Code", "options": { "code": "
", "replaceNodes": true } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var returnValue=function(){var t=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?window.comingSoonEl?window.comingSoonEl:\"\":window.hoverArrow?window.hoverArrow:\"\";return state.productInfo.title+t}();return returnValue" }, "code": { "bindings": { "component.options.text": "let hoverAddon = !!state.productInfo\r\n && !!state.productInfo.tags\r\n && state.productInfo.tags.length\r\n && state.productInfo.tags.filter(tag => tag == 'coming-soon').length\r\n ? (!!window.comingSoonEl ? window.comingSoonEl : '')\r\n : (!!window.hoverArrow ? window.hoverArrow : '');\r\nreturn state.productInfo.title + hoverAddon;" } }, "layerName": "Title", "id": "builder-c6f954238f25419aad0aa51fda3945d6", "class": "font-body-sm body-sm-shorten-top font-mob-xsm mob-xsm-shorten-top", "meta": { "version": "0.0.91", "previousId": "builder-19f3a7d1643b4d3392f44d86267aacee" }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "position": "relative", "textDecoration": "none", "color": "inherit" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=!state.productInfo.tags.includes(\"hide-price\")&&window&&window.BigData&&window.BigData.prices&&window.BigData.prices[state.productInfo.handle]?window.BigData.prices[state.productInfo.handle]:\"$--\";return _virtual_index", "data-hide-price": "var _virtual_index=state.productInfo.tags.includes(\"hide-price\")?\"true\":\"false\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "state.productInfo.tags.includes('hide-price') || !window || !window.BigData || !window.BigData.prices || !window.BigData.prices[state.productInfo.handle] ? '$--' : window.BigData.prices[state.productInfo.handle]", "data-hide-price": "state.productInfo.tags.includes(\"hide-price\") ? \"true\" : \"false\";\n" } }, "layerName": "Price", "id": "builder-0b1f5943f7cd456188dd1b6c6523569f", "properties": { "data-hide-price": "" }, "class": "prod-price font-body-sm body-sm-shorten-btm font-mob-xsm mob-xsm-shorten-btm", "meta": { "version": "0.0.91", "previousId": "builder-09cb2528254c4582afc8c82967139a53", "bindingActions": { "data-hide-price": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tags.includes('hide-price') ? 'true' : 'false'" } } ] } }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "color": "inherit", "textDecoration": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 56//24", "id": "builder-2ebdff10fad3413fa18403d126015d93", "meta": { "previousId": "builder-ca8887ad855d44f3ae34e5b50efe6a03" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "width": "100%", "cursor": "text" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "actions": { "click": "\n" }, "bindings": { "show": "state.productInfo", "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "data-handle": "var _virtual_index=state.productInfo.handle;return _virtual_index" }, "code": { "actions": { "click": "let tags =\n !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length\n ? state.productInfo.tags.filter((tag) => tag == \"coming-soon\")\n : [];\nconsole.log(\"waaaagghh\");\nif (tags.length) {\n return 0;\n} else {\n window.open(`/products/${state.productInfo.handle}`, \"_self\");\n}\n" }, "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "data-handle": "state.productInfo.handle;\n" } }, "layerName": "(OLD) Product Title", "id": "builder-d3bc13293b7943bba44812c8511d3f5d", "properties": { "data-coming-soon": "", "data-handle": "" }, "class": "prod-title", "groupLocked": true, "meta": { "requiresParent": { "message": "This block must be inside a \"Product box\" block", "query": { "meta.kind": "ProductBox" } }, "version": "0.0.91", "eventActions": { "click": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length ? state.productInfo.tags.filter(tag => tag == 'coming-soon') : [];\nconsole.log('waaaagghh');\nif(tags.length) {\n return 0;\n}\nelse {\n window.open(`/products/${state.productInfo.handle}`, '_self');\n}" } } ] }, "bindingActions": { "style": { "cursor": null }, "meta": { "bindingActions": { "style": { "cursor": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'default' : pointer" } } ] } } }, "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "data-handle": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.handle" } } ] } }, "component": { "name": "Symbol", "options": { "inheritState": true, "symbol": { "meta": { "fieldName": "Product Title", "hideExplanation": true, "documentationLink": "https://builder.io/c/docs/shopify/product-box#product-title" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "name": "linkToProductPageOnClick", "type": "boolean", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false } ], "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=state.productInfo?JSON.stringify(state.productInfo):\"\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "return !!state.productInfo ? JSON.stringify(state.productInfo) : \"\";\n" } }, "layerName": "[DEBUG: PRODUCT JSON]", "id": "builder-dd592b66c3574a77adc9a913ca6db33a", "meta": { "bindingActions": { "component": { "options": { "text": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo ? JSON.stringify(state.productInfo) : '';" } } ] } } }, "previousId": "builder-4e493b871b4a40ca90daf28dc1ebca63" }, "component": { "name": "Text", "options": { "text": "Enter some text..." } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "lineHeight": "normal", "height": "auto" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 16//", "id": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31", "component": { "name": "Custom Code", "options": { "code": "
", "replaceNodes": true } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var returnValue=function(){var t=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?window.comingSoonEl?window.comingSoonEl:\"\":window.hoverArrow?window.hoverArrow:\"\";return state.productInfo.title+t}();return returnValue" }, "code": { "bindings": { "component.options.text": "let hoverAddon = !!state.productInfo\r\n && !!state.productInfo.tags\r\n && state.productInfo.tags.length\r\n && state.productInfo.tags.filter(tag => tag == 'coming-soon').length\r\n ? (!!window.comingSoonEl ? window.comingSoonEl : '')\r\n : (!!window.hoverArrow ? window.hoverArrow : '');\r\nreturn state.productInfo.title + hoverAddon;" } }, "layerName": "Title", "id": "builder-19f3a7d1643b4d3392f44d86267aacee", "class": "font-body-sm body-sm-shorten-top font-mob-xsm mob-xsm-shorten-top", "meta": { "version": "0.0.91" }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "position": "relative", "textDecoration": "none", "color": "inherit" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "component.options.text": "var _virtual_index=state.productInfo.tags.includes(\"hide-price\")?\"$--\":state.productInfo.variants[0].formattedPrice;return _virtual_index", "data-hide-price": "var _virtual_index=state.productInfo.tags.includes(\"hide-price\")?\"true\":\"false\";return _virtual_index" }, "code": { "bindings": { "component.options.text": "state.productInfo.tags.includes('hide-price') ? '$--' : state.productInfo.variants[0].formattedPrice", "data-hide-price": "state.productInfo.tags.includes(\"hide-price\") ? \"true\" : \"false\";\n" } }, "layerName": "Price", "id": "builder-09cb2528254c4582afc8c82967139a53", "properties": { "data-hide-price": "" }, "class": "prod-price font-body-sm body-sm-shorten-btm font-mob-xsm mob-xsm-shorten-btm", "meta": { "version": "0.0.91", "previousId": "builder-bef4f6a7376f4b5eabe873148af39ca6", "bindingActions": { "data-hide-price": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tags.includes('hide-price') ? 'true' : 'false'" } } ] } }, "component": { "name": "Text", "options": {} }, "responsiveStyles": { "large": { "color": "inherit", "textDecoration": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 56//24", "id": "builder-ca8887ad855d44f3ae34e5b50efe6a03", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } } } ] } }, "data": { "linkToProductPageOnClick": false } } } }, "responsiveStyles": { "large": { "display": "none", "flexDirection": "row", "width": "100%", "cursor": "text" }, "medium": { "display": "none" }, "small": { "display": "none" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.productInfo", "data-coming-soon": "var _virtual_index=state.productInfo&&state.productInfo.tags&&state.productInfo.tags.length&&state.productInfo.tags.filter((function(t){return\"coming-soon\"==t})).length?\"true\":\"false\";return _virtual_index", "data-handle": "var _virtual_index=state.productInfo.handle;return _virtual_index", "component.options.symbol.data.onClickAction": "var _virtual_index=function(o){void 0===o&&(o=o);var n=o.productInfo&&o.productInfo.tags&&o.productInfo.tags.length?o.productInfo.tags.filter((function(o){return\"coming-soon\"==o})):[];if(console.log(\"waaaagghh\"),n.length)return 0;window.open(\"/products/\".concat(o.productInfo.handle),\"_self\")};return _virtual_index" }, "code": { "bindings": { "data-coming-soon": "return !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length &&\n state.productInfo.tags.filter((tag) => tag == \"coming-soon\").length\n ? \"true\"\n : \"false\";\n", "data-handle": "state.productInfo.handle;\n", "component.options.symbol.data.onClickAction": "export default (state = state) => {\n let tags =\n !!state.productInfo &&\n !!state.productInfo.tags &&\n state.productInfo.tags.length\n ? state.productInfo.tags.filter((tag) => tag == \"coming-soon\")\n : [];\n console.log(\"waaaagghh\");\n if (tags.length) {\n return 0;\n } else {\n window.open(`/products/${state.productInfo.handle}`, \"_self\");\n }\n};\n" } }, "layerName": "(OLD) Product Image", "id": "builder-dc90b8ca9426465cb564c8ac3f7e0e76", "properties": { "data-coming-soon": "", "data-handle": "" }, "class": "prod-img-frame", "groupLocked": true, "meta": { "requiresParent": { "message": "This block must be inside a \"Product box\" block", "query": { "meta.kind": "ProductBox" } }, "version": "0.0.91", "eventActions": {}, "bindingActions": { "style": { "cursor": null }, "meta": { "bindingActions": { "style": { "cursor": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'default' : pointer" } } ] }, "data-type": null } }, "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "!!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'default' : 'pointer'" } } ], "data-coming-soon": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "return !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length && state.productInfo.tags.filter(tag => tag == 'coming-soon').length ? 'true' : 'false';" } } ], "data-handle": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.handle" } } ], "component": { "options": { "symbol": { "data": { "onClickAction": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "export default (state = state) => {\r\n let tags = !!state.productInfo && !!state.productInfo.tags && state.productInfo.tags.length ? state.productInfo.tags.filter(tag => tag == 'coming-soon') : [];\r\n console.log('waaaagghh');\r\n if(tags.length) {\r\n return 0;\r\n }\r\n else {\r\n window.open(`/products/${state.productInfo.handle}`, '_self');\r\n }\r\n};" } } ] } } } } } }, "component": { "name": "Symbol", "options": { "inheritState": true, "symbol": { "data": { "onClickAction": "link to product page", "onHoverAction": "nothing" }, "meta": { "fieldName": "Product Image", "hideExplanation": true, "documentationLink": "https://builder.io/c/docs/shopify/product-box#product-image" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "name": "onClickAction", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "enum": [ "nothing", "link to product page", "enlarge image" ], "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false }, { "@type": "@builder.io/core:Field", "name": "onHoverAction", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "enum": [ "nothing", "swap image" ], "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false } ], "blocks": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "actions": { "mouseOver": "\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[1]) {\n context.setState({\n selectedImage: state.productInfo.images[1],\n });\n }\n }\n", "mouseOut": "\n var _a;\n if (state.onHoverAction === 'swap image') {\n if (state.productInfo.images[0]) {\n context.setState({\n selectedImage: ((_a = state.selectedProductVariant) === null || _a === void 0 ? void 0 : _a.image) || state.productInfo.images[0],\n });\n }\n }\n" }, "bindings": { "show": "state.productInfo", "component.options.image": "var returnValue=state.productInfo.images[state.productInfo.images.length-1].src;return returnValue", "component.options.altText": "\n var _a;\n ((_a = state.selectedImage) === null || _a === void 0 ? void 0 : _a.alt) ||\n state.productInfo.images[0].alt ||\n state.productInfo.title;\n", "style.cursor": "\n if (state.onClickAction === 'enlarge image') {\n if (state.isZoomedIn) {\n return 'zoom-out';\n }\n return 'zoom-in';\n }\n return undefined;\n", "style.position": "var _virtual_index=state.isZoomedIn?\"fixed\":\"absolute\";return _virtual_index", "style.top": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.right": "(state.isZoomedIn ? 0 : undefined)", "style.left": "var _virtual_index=state.isZoomedIn?0:\"50%\";return _virtual_index", "style.zIndex": "(state.isZoomedIn ? 999 : undefined)", "style.background": "(state.isZoomedIn ? 'white' : undefined)" }, "code": { "bindings": { "style.position": "(state.isZoomedIn ? 'fixed' : 'absolute')", "style.left": "(state.isZoomedIn ? 0 : '50%')", "style.top": "(state.isZoomedIn ? 0 : '50%')", "component.options.image": "\n var _a;\n //return ((_a = state.selectedImage) === null || _a === void 0 ? void 0 : _a.src) || state.productInfo.images[state.productInfo.images.length - 1].src;\n return state.productInfo.images[state.productInfo.images.length - 1].src;\n" } }, "id": "builder-f705a55241ae4318aa5162bc899580a1", "meta": { "version": "0.0.91", "bindingActions": { "style": { "maxWidth": null, "width": null, "height": null } }, "eventActions": { "mouseOut": [] } }, "component": { "name": "Image", "options": { "aspectRatio": 1.394, "backgroundPosition": "center", "backgroundSize": "contain" } }, "children": [ { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "show": "state.isZoomedIn" }, "layerName": "Close button", "id": "builder-4482ce8b0fb04c478944404cc949cbf4", "meta": { "version": "0.0.91" }, "component": { "name": "Text", "options": { "text": "×" } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "absolute", "flexShrink": "0", "boxSizing": "border-box", "textAlign": "center", "marginTop": "0px", "cursor": "pointer", "top": "10px", "right": "10px", "zIndex": "9999", "fontSize": "30px", "borderStyle": "solid", "borderColor": "rgba(213, 213, 213, 1)", "borderWidth": "1px", "borderRadius": "30px", "height": "40px", "width": "40px", "lineHeight": "32px", "backgroundColor": "rgba(255, 255, 255, 1)", "color": "rgba(112, 112, 112, 1)" } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "width": "calc(100% - 4.369vw)", "height": "calc(100% - 4.369vw)", "maxWidth": "calc(100% - 4.369vw)", "transform": "translate(-50%, -50%)" }, "small": { "width": "calc(100% - 4.103vw)", "maxWidth": "calc(100% - 4.103vw)", "height": "calc(100% - 4.103vw)" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "bindings": { "hide": "var returnValue=function(){var t=state.productInfo.tags&&state.productInfo.tags.length?state.productInfo.tags.filter((function(t){return t.startsWith(\"marker-\")})):[],r=t.length?t[0]:\"NOTAG\";return!window.tagDefs[r]}();return returnValue", "component.options.code": "var _virtual_index=state.productInfo.tagDef.text;return _virtual_index", "data-type": "var _virtual_index=state.productInfo.tagDef.tagType;return _virtual_index" }, "code": { "bindings": { "hide": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\nreturn !window.tagDefs[tag];", "component.options.code": "state.productInfo.tagDef.text", "data-type": "state.productInfo.tagDef.tagType;\n" } }, "layerName": "[TAG]", "id": "builder-b15a7f34fb2d433d850b5469dd79578d", "properties": { "data-type": "" }, "class": "prod-tag font-detail", "meta": { "previousId": "builder-62e8e2f0d34942c9b5a9fc1cf3763d31", "bindingActions": { "component": { "options": { "code": null } }, "meta": { "bindingActions": { "component": { "options": { "code": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "/**\n * Global objects available in custom action code:\n *\n * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions\n * context - builder context object - learn about context https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down\n * event - HTML Event - https://developer.mozilla.org/en-US/docs/Web/API/Event\n *\n * Learn more: https://www.builder.io/c/docs/guides/custom-code\n *\n */" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "data-tag-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\nlet tag = !tags.length ? 'NOTAG' : tags[0];\n/* return JSON.stringify(state.productInfo.tags); */\nreturn !state.tagDefs[tag] ? 'n/a' : state.tagDefs[tag].tagType;" } } ], "data-type": [ { "@type": "@builder.io/core:Action", "action": "@builder.io:customCode", "options": { "code": "state.productInfo.tagDef.tagType" } } ] } }, "component": { "name": "Custom Code", "options": { "code": "", "replaceNodes": true } } } ] } } } } }, "responsiveStyles": { "large": { "display": "none", "flexDirection": "column", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "flex": "1", "paddingBottom": "118.939%", "maxWidth": "100%", "width": "100%", "cursor": "text" }, "small": { "paddingBottom": "118.079%" } } } ], "tsCode": "\n context.setState = (stateUpdates) => {\n for (let key in stateUpdates) {\n state[key] = stateUpdates[key];\n }\n if ('selectedProductVariant' in stateUpdates) {\n onProductVariantChange();\n }\n };\n const onProductVariantChange = () => {\n if (state.selectedProductVariant) {\n state.selectedImage = state.selectedProductVariant.image || state.selectedImage;\n }\n };\n const getProductId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.product === contextPlaceholder) {\n return context.overrideProductId;\n }\n let product = state.product;\n if (typeof product === 'object' &&\n product &&\n product['@type'] === '@builder.io/core:Request') {\n product = product.options.product;\n }\n return product;\n };\n let lastProductId = getProductId();\n let lastDefaultVariantId = state.defaultVariantId;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const productId = getProductId();\n const defaultVariantId = state.defaultVariantId;\n if (lastProductId !== productId) {\n updateProduct();\n }\n else if (defaultVariantId !== lastDefaultVariantId ||\n (state.productInfo && !state.selectedProductVariant)) {\n setDefaultVariant();\n }\n lastProductId = productId;\n lastDefaultVariantId = defaultVariantId;\n });\n }\n if (state.productInfo && !state.selectedProductVariant) {\n setDefaultVariant();\n }\n function setDefaultVariant() {\n const productInfo = state.productInfo;\n const firstAvailableVariant = productInfo.variants.find(variant => variant.availableForSale);\n let defaultVariant = firstAvailableVariant || productInfo.variants[0];\n if (state.defaultVariantId) {\n const defaultVariantInfo = productInfo.variants.find(variant => String(variant.id) === String(state.defaultVariantId));\n if (defaultVariantInfo) {\n defaultVariant = defaultVariantInfo;\n }\n }\n state.selectedProductVariant = defaultVariant;\n state.selectedImage = (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.image) || productInfo.images[0];\n }\n function updateProduct() {\n var _a;\n const productId = getProductId();\n if (state.productInfo && !productId) {\n let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\n let tag = !tags.length ? 'NOTAG' : tags[0];\n /* return JSON.stringify(state.productInfo.tags); */\n state.productInfo.tagDef = !window.tagDefs[tag] ? {tagType: 'NOTAG', text: 'n/a'} : window.tagDefs[tag];\n setDefaultVariant();\n return;\n }\n if (productId) {\n state.loading = true;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n return fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&productId=${productId}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const { products } = data;\n if (products && products.length) {\n const productInfo = products[0];\n state.productInfo = productInfo;\n let tags = !state.productInfo.tags || !state.productInfo.tags.length ? [] : state.productInfo.tags.filter(tag => tag.startsWith('marker-'));\n let tag = !tags.length ? 'NOTAG' : tags[0];\n /* return JSON.stringify(state.productInfo.tags); */\n state.productInfo.tagDef = !window.tagDefs[tag] ? {tagType: 'NOTAG', text: 'n/a'} : window.tagDefs[tag];\n setDefaultVariant();\n }\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.productInfo = null;\n }\n }\n updateProduct();\n" } } } } }, "responsiveStyles": { "large": { "display": "flex", "alignItems": "stretch", "position": "relative", "boxSizing": "border-box", "textAlign": "left", "flexDirection": "column" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "repeat": { "collection": "collectionInfo.products", "itemName": "product" }, "layerName": "[PLACEHOLDER]", "id": "builder-6fec2ce34d564853872d0dd08a668442", "properties": { "data-slot": "shopify:productBox" }, "class": "prod-placeholder", "meta": { "version": "0.0.91", "kind": "ProductBox", "previousId": "builder-69ed3cb30a5b4a518acabe072f1f1583" }, "component": { "name": "Symbol", "options": { "symbol": { "data": { "loading": false, "product": "", "productBoxHasChildren": false, "apiKey": "64dd5478e25746bf9db3b6c0319905f6" }, "meta": { "fieldName": "Product Box", "documentationNote": "Product boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/product-box" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false }, { "@type": "@builder.io/core:Field", "name": "product", "type": "ShopifyProduct", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); });\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false }, { "@type": "@builder.io/core:Field", "name": "defaultVariantId", "friendlyName": "Default Variant", "type": "ShopifyProductVariant", "required": false, "subFields": [], "helperText": "Only choose a default variant if you want to have a specific variant be selected when the product box loads", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return (options.get('product') &&\n !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); }));\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false } ], "jsCode": "\n context.setState = (stateUpdates) => {\n for (let key in stateUpdates) {\n state[key] = stateUpdates[key];\n }\n if ('selectedProductVariant' in stateUpdates) {\n onProductVariantChange();\n }\n };\n const onProductVariantChange = () => {\n if (state.selectedProductVariant) {\n state.selectedImage = state.selectedProductVariant.image || state.selectedImage;\n }\n };\n const getProductId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.product === contextPlaceholder) {\n return context.overrideProductId;\n }\n let product = state.product;\n if (typeof product === 'object' &&\n product &&\n product['@type'] === '@builder.io/core:Request') {\n product = product.options.product;\n }\n return product;\n };\n let lastProductId = getProductId();\n let lastDefaultVariantId = state.defaultVariantId;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const productId = getProductId();\n const defaultVariantId = state.defaultVariantId;\n if (lastProductId !== productId) {\n updateProduct();\n }\n else if (defaultVariantId !== lastDefaultVariantId ||\n (state.productInfo && !state.selectedProductVariant)) {\n setDefaultVariant();\n }\n lastProductId = productId;\n lastDefaultVariantId = defaultVariantId;\n });\n }\n if (state.productInfo && !state.selectedProductVariant) {\n setDefaultVariant();\n }\n function setDefaultVariant() {\n const productInfo = state.productInfo;\n const firstAvailableVariant = productInfo.variants.find(variant => variant.availableForSale);\n let defaultVariant = firstAvailableVariant || productInfo.variants[0];\n if (state.defaultVariantId) {\n const defaultVariantInfo = productInfo.variants.find(variant => String(variant.id) === String(state.defaultVariantId));\n if (defaultVariantInfo) {\n defaultVariant = defaultVariantInfo;\n }\n }\n state.selectedProductVariant = defaultVariant;\n state.selectedImage = (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.image) || productInfo.images[0];\n }\n function updateProduct() {\n var _a;\n const productId = getProductId();\n if (state.productInfo && !productId) {\n setDefaultVariant();\n return;\n }\n if (productId) {\n state.loading = true;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n return fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&productId=${productId}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const { products } = data;\n if (products && products.length) {\n const productInfo = products[0];\n state.productInfo = productInfo;\n setDefaultVariant();\n }\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.productInfo = null;\n }\n }\n updateProduct();\n", "blocks": [] } } } } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "repeat": { "collection": "collectionInfo.products", "itemName": "product" }, "layerName": "[PLACEHOLDER]", "id": "builder-d71d72e5c6f54dc2a705a69f48f215a7", "properties": { "data-slot": "shopify:productBox" }, "class": "prod-placeholder", "meta": { "version": "0.0.91", "kind": "ProductBox", "previousId": "builder-6fec2ce34d564853872d0dd08a668442" }, "component": { "name": "Symbol", "options": { "symbol": { "data": { "loading": false, "product": "", "productBoxHasChildren": false, "apiKey": "64dd5478e25746bf9db3b6c0319905f6" }, "meta": { "fieldName": "Product Box", "documentationNote": "Product boxes allow you to create content that pulls dynamic data from Shopify.", "documentationLink": "https://builder.io/c/docs/shopify/product-box" }, "inline": true, "content": { "data": { "inputs": [ { "@type": "@builder.io/core:Field", "name": "apiKey", "type": "text", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": true, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false }, { "@type": "@builder.io/core:Field", "name": "product", "type": "ShopifyProduct", "required": false, "subFields": [], "helperText": "", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); });\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false }, { "@type": "@builder.io/core:Field", "name": "defaultVariantId", "friendlyName": "Default Variant", "type": "ShopifyProductVariant", "required": false, "subFields": [], "helperText": "Only choose a default variant if you want to have a specific variant be selected when the product box loads", "autoFocus": false, "simpleTextOnly": false, "disallowRemove": false, "broadcast": false, "bubble": false, "hideFromUI": false, "hideFromFieldsEditor": false, "showTemplatePicker": true, "permissionsRequiredToEdit": "", "advanced": false, "copyOnAdd": true, "onChange": "", "showIf": "\n return (options.get('product') &&\n !parentElements.some((el) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = el === null || el === void 0 ? void 0 : el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get('symbol')) === null || _c === void 0 ? void 0 : _c.get('meta')) === null || _d === void 0 ? void 0 : _d.get('isProductCollection'); }));\n", "mandatory": false, "hidden": false, "noPhotoPicker": false, "model": "", "supportsAiGeneration": false } ], "jsCode": "\n context.setState = (stateUpdates) => {\n for (let key in stateUpdates) {\n state[key] = stateUpdates[key];\n }\n if ('selectedProductVariant' in stateUpdates) {\n onProductVariantChange();\n }\n };\n const onProductVariantChange = () => {\n if (state.selectedProductVariant) {\n state.selectedImage = state.selectedProductVariant.image || state.selectedImage;\n }\n };\n const getProductId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.product === contextPlaceholder) {\n return context.overrideProductId;\n }\n let product = state.product;\n if (typeof product === 'object' &&\n product &&\n product['@type'] === '@builder.io/core:Request') {\n product = product.options.product;\n }\n return product;\n };\n let lastProductId = getProductId();\n let lastDefaultVariantId = state.defaultVariantId;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const productId = getProductId();\n const defaultVariantId = state.defaultVariantId;\n if (lastProductId !== productId) {\n updateProduct();\n }\n else if (defaultVariantId !== lastDefaultVariantId ||\n (state.productInfo && !state.selectedProductVariant)) {\n setDefaultVariant();\n }\n lastProductId = productId;\n lastDefaultVariantId = defaultVariantId;\n });\n }\n if (state.productInfo && !state.selectedProductVariant) {\n setDefaultVariant();\n }\n function setDefaultVariant() {\n const productInfo = state.productInfo;\n const firstAvailableVariant = productInfo.variants.find(variant => variant.availableForSale);\n let defaultVariant = firstAvailableVariant || productInfo.variants[0];\n if (state.defaultVariantId) {\n const defaultVariantInfo = productInfo.variants.find(variant => String(variant.id) === String(state.defaultVariantId));\n if (defaultVariantInfo) {\n defaultVariant = defaultVariantInfo;\n }\n }\n state.selectedProductVariant = defaultVariant;\n state.selectedImage = (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.image) || productInfo.images[0];\n }\n function updateProduct() {\n var _a;\n const productId = getProductId();\n if (state.productInfo && !productId) {\n setDefaultVariant();\n return;\n }\n if (productId) {\n state.loading = true;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n return fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&productId=${productId}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const { products } = data;\n if (products && products.length) {\n const productInfo = products[0];\n state.productInfo = productInfo;\n setDefaultVariant();\n }\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.productInfo = null;\n }\n }\n updateProduct();\n", "blocks": [] } } } } } } ], "responsiveStyles": { "large": { "display": "flex", "flexDirection": "row", "alignItems": "flex-start", "position": "relative", "flexShrink": "0", "justifyContent": "center", "flexWrap": "wrap", "minWidth": "200px", "width": "100%", "maxWidth": "1648px", "paddingLeft": "16px", "paddingRight": "16px", "columnGap": "16px" }, "small": { "paddingLeft": "12px", "paddingRight": "12px", "columnGap": "12px" } } } ], "tsCode": "\n if (Builder.isBrowser) {\n const shopifyWindow = window;\n if (shopifyWindow.BuilderJsonData && shopifyWindow.BuilderJsonData.collection) {\n context.overrideCollectionId = shopifyWindow.BuilderJsonData.collection.id;\n context.collectionObject = shopifyWindow.BuilderJsonData.collection;\n }\n }\n\n const getCollectionId = () => {\n const contextPlaceholder = 'context_placeholder';\n if (state.collection === contextPlaceholder) {\n return context.overrideCollectionId;\n }\n let collection = state.collection;\n if (typeof collection === 'object' &&\n collection &&\n collection['@type'] === '@builder.io/core:Request') {\n collection = collection.options.collection;\n }\n return collection;\n };\n let lastCollectionId = getCollectionId();\n let lastLimit = 10;\n let lastHideIfUnavailable = state.hideIfUnavailable || false;\n if (Builder.isEditing) {\n ref.onStateChange.subscribe(() => {\n const newId = getCollectionId();\n if (lastCollectionId !== newId ||\n lastLimit !== state.limit ||\n lastHideIfUnavailable !== state.hideIfUnavailable) {\n updateCollection();\n lastCollectionId = newId;\n lastHideIfUnavailable = state.hideIfUnavailable;\n }\n });\n }\n function updateCollection() {\n const collectionId = getCollectionId();\n if (state.collectionInfo && !collectionId) {\n return;\n }\n if (collectionId) {\n state.loading = true;\n lastLimit = state.limit ? state.limit : 10;\n const shopify = window.Shopify || {};\n const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';\n fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&collectionId=${collectionId}&limit=${state.limit ? state.limit : 10}¤cyIsoCode=${activeCurrency}`)\n .then(res => res.json())\n .then(data => {\n const collectionResponse = data;\n if (state.hideIfUnavailable) {\n const availableProducts = collectionResponse.products.filter((product) => product.variants.some(variant => variant.availableForSale));\n collectionResponse.products = availableProducts;\n }\n state.collectionInfo = collectionResponse;\n state.loading = false;\n })\n .catch(err => {\n console.error('Error fetching Shopify product', err);\n state.loading = false;\n });\n }\n else {\n state.collectionInfo = null;\n }\n }\n updateCollection();\n" } } } } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "row", "alignItems": "stretch", "position": "relative", "flexShrink": "0", "textAlign": "center", "justifyContent": "center", "maxWidth": "1648px", "width": "100%", "marginLeft": "auto", "marginRight": "auto" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[CLICK EVENTS]", "id": "builder-57a6b972efa24fb582d55c21f117be8a", "meta": { "previousId": "builder-0c7dfb775a5144d6b4d9405429bbe120" }, "component": { "name": "Custom Code", "options": { "code": "\n", "replaceNodes": true } }, "responsiveStyles": { "large": { "marginTop": "-56px", "display": "none" }, "small": { "marginTop": "-24px" } } }, { "@type": "@builder.io/sdk:Element", "@version": 2, "layerName": "[SPACER] - 240//80", "id": "builder-5562c0a34f724f3b9e79e6127693ce64", "meta": { "previousId": "builder-57a6b972efa24fb582d55c21f117be8a" }, "component": { "name": "Custom Code", "options": { "code": "
\n", "replaceNodes": true } }, "responsiveStyles": { "large": { "marginTop": "-56px" }, "small": { "marginTop": "-24px" } } }, { "id": "builder-pixel-4lc5r66lkc9", "@type": "@builder.io/sdk:Element", "tagName": "img", "properties": { "src": "https://cdn.builder.io/api/v1/pixel?apiKey=64dd5478e25746bf9db3b6c0319905f6", "aria-hidden": "true", "alt": "", "role": "presentation", "width": "0", "height": "0" }, "responsiveStyles": { "large": { "height": "0", "width": "0", "display": "block", "opacity": "0", "overflow": "hidden", "pointerEvents": "none" } } } ], "state": { "deviceSize": "large", "location": { "path": "", "query": {} } } }, "modelId": "9d74246634894ce39fff6c22449a9d52", "query": [], "published": "published", "screenshot": "https://cdn.builder.io/api/v1/image/assets%2F64dd5478e25746bf9db3b6c0319905f6%2F6f915cf8b4e54e838e6b1ce5f6f955f7", "firstPublished": 1662866118362, "testRatio": 1, "lastUpdated": 1690846854747, "createdDate": 1673576532710, "createdBy": "eKkJ2UiI2tPDREXNlNnSplF1SqP2", "meta": { "kind": "component", "lastPreviewUrl": "https://https___bigscreenvr__myshopify__com.preview.builder.codes/apps/builder?apiKey=64dd5478e25746bf9db3b6c0319905f6&model=item-grid&builder.cachebuster=lkrijpu0&preview_theme_id=132657348825&builder.proxyPreview.includeSW=true&builder.useProxyBase=true&builder.space=64dd5478e25746bf9db3b6c0319905f6&builder.cachebust=true&builder.preview=item-grid&builder.noCache=true&__builder_editing__=true&builder.overrides.item-grid=a1ff2fab29564c1987b061587e71c6d3&builder.overrides.a1ff2fab29564c1987b061587e71c6d3=a1ff2fab29564c1987b061587e71c6d3&builder.options.locale=Default", "format": "shopify", "originalContentId": "121bb976a1dc432c91148a22d3834d30", "hasLinks": true, "winningTest": null, "shopifyCustomDomain": "store.bigscreenvr.com", "shopifyDomain": "bigscreenvr.myshopify.com" }, "variations": {}, "name": "STORE - Homepage Item Grid - BACKUP Non-Japanese", "id": "a1ff2fab29564c1987b061587e71c6d3", "rev": "1rb29jyvmat" } ]