@dropins/storefront-pdp 1.1.2-alpha2 → 1.2.0-alpha6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/api/fetch-graphql/fetch-graphql.d.ts +2 -2
- package/api/initialize/initialize.d.ts +3 -3
- package/api.js +1 -0
- package/api.js.map +1 -0
- package/chunks/PriceRange.js +1 -0
- package/chunks/PriceRange.js.map +1 -0
- package/chunks/Swatches.js +2 -1
- package/chunks/Swatches.js.map +1 -0
- package/chunks/Zoom.js +1 -0
- package/chunks/Zoom.js.map +1 -0
- package/chunks/date.js +1 -0
- package/chunks/date.js.map +1 -0
- package/chunks/getFetchedProductData.js +1 -0
- package/chunks/getFetchedProductData.js.map +1 -0
- package/chunks/isProductConfigurationValid.js +7 -6
- package/chunks/isProductConfigurationValid.js.map +1 -0
- package/components/Swatches/Swatches.d.ts +4 -2
- package/containers/ProductAttributes/ProductAttributes.d.ts +8 -1
- package/containers/ProductAttributes.js +2 -1
- package/containers/ProductAttributes.js.map +1 -0
- package/containers/ProductDescription/ProductDescription.d.ts +1 -1
- package/containers/ProductDescription.js +1 -0
- package/containers/ProductDescription.js.map +1 -0
- package/containers/ProductDetails/ProductDetails.d.ts +12 -3
- package/containers/ProductDetails.js +2 -1
- package/containers/ProductDetails.js.map +1 -0
- package/containers/ProductGallery/ProductGallery.d.ts +14 -1
- package/containers/ProductGallery.js +2 -1
- package/containers/ProductGallery.js.map +1 -0
- package/containers/ProductHeader/ProductHeader.d.ts +1 -1
- package/containers/ProductHeader.js +1 -0
- package/containers/ProductHeader.js.map +1 -0
- package/containers/ProductOptions/ProductOptions.d.ts +9 -2
- package/containers/ProductOptions.js +2 -1
- package/containers/ProductOptions.js.map +1 -0
- package/containers/ProductPrice/ProductPrice.d.ts +1 -1
- package/containers/ProductPrice.js +1 -0
- package/containers/ProductPrice.js.map +1 -0
- package/containers/ProductQuantity/ProductQuantity.d.ts +1 -1
- package/containers/ProductQuantity.js +2 -1
- package/containers/ProductQuantity.js.map +1 -0
- package/containers/ProductShortDescription/ProductShortDescription.d.ts +1 -1
- package/containers/ProductShortDescription.js +1 -0
- package/containers/ProductShortDescription.js.map +1 -0
- package/fragments.js +1 -0
- package/fragments.js.map +1 -0
- package/i18n/en_US.json.d.ts +0 -3
- package/lib/url-params.d.ts +1 -0
- package/package.json +1 -1
- package/render/render.d.ts +1 -1
- package/render.js +3 -2
- package/render.js.map +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { HTMLAttributes } from 'preact/compat';
|
|
2
|
-
import { Container } from '
|
|
2
|
+
import { Container } from '@dropins/tools/types/elsie/src/lib';
|
|
3
3
|
import { ProductModel } from '../../data/models';
|
|
4
4
|
|
|
5
5
|
export interface ProductQuantityProps extends HTMLAttributes<HTMLDivElement> {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as g}from"@dropins/tools/preact-jsx-runtime.js";import{useState as
|
|
3
|
+
import{jsx as g}from"@dropins/tools/preact-jsx-runtime.js";import{useState as s,useEffect as P}from"@dropins/tools/preact-compat.js";import{classes as y}from"@dropins/tools/lib.js";import{Incrementer as I}from"@dropins/tools/components.js";import{events as i}from"@dropins/tools/event-bus.js";import{n as b,j as q,c as D,o as h}from"../chunks/isProductConfigurationValid.js";import{g as x}from"../chunks/getFetchedProductData.js";import{useText as C}from"@dropins/tools/i18n.js";import"../fragments.js";import"@dropins/tools/fetch-graphql.js";const S=({initialData:m=null,onValue:e,children:U,...n})=>{const c=C("PDP.Product.Incrementer.label").label,[u,l]=s(m),[o,f]=s(()=>b(1));P(()=>{const r=i.on("pdp/data",l),t=i.on("pdp/values",({quantity:a})=>{f(a)},{eager:!0});return()=>{r==null||r.off(),t==null||t.off()}},[]);const p=r=>{const t=parseInt(r,10);q(d=>({...d,quantity:t}));const{persistURLParams:a}=D.getConfig()??{};a&&h({quantity:t}),e==null||e(t)};return u?g(I,{name:"quantity",defaultValue:String(o),value:String(o),min:1,"aria-label":c,onValue:p,...n,className:y(["pdp-quantity",n.className])},"quantity"):null};S.getInitialData=x;export{S as ProductQuantity,S as default};
|
|
4
|
+
//# sourceMappingURL=ProductQuantity.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProductQuantity.js","sources":["/@dropins/storefront-pdp/src/containers/ProductQuantity/ProductQuantity.tsx"],"sourcesContent":["/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2024 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport { HTMLAttributes, useEffect, useState } from 'preact/compat';\nimport { classes, Container } from '@adobe-commerce/elsie/lib';\nimport { Incrementer } from '@adobe-commerce/elsie/components';\nimport { events } from '@adobe-commerce/event-bus';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { ProductModel } from '@/pdp/data/models';\nimport {\n setProductConfigurationValues,\n getFetchedProductData,\n} from '@/pdp/api';\nimport {\n setUrlParams,\n getValidatedQuantityFromUrl,\n} from '@/pdp/lib/url-params';\nimport { config } from '@/pdp/api/initialize';\n\nexport interface ProductQuantityProps extends HTMLAttributes<HTMLDivElement> {\n onValue?: (quantity: number) => void;\n}\n\nexport const ProductQuantity: Container<\n ProductQuantityProps,\n ProductModel | null\n> = ({ initialData = null, onValue, children, ...props }) => {\n const IncrementerLabel = useText('PDP.Product.Incrementer.label').label;\n\n const [data, setData] = useState<ProductModel | null>(initialData);\n\n const [current, setCurrent] = useState(() => getValidatedQuantityFromUrl(1)); // Default quantity to 1\n\n useEffect(() => {\n const dataEvent = events.on('pdp/data', setData);\n\n const valuesEvent = events.on(\n 'pdp/values',\n ({ quantity }) => {\n setCurrent(quantity);\n },\n { eager: true }\n );\n\n return () => {\n dataEvent?.off();\n valuesEvent?.off();\n };\n }, []);\n\n const handleOnValue = (value: string) => {\n const quantity = parseInt(value, 10);\n setProductConfigurationValues((prev) => ({ ...prev, quantity }));\n\n // Update URL parameters if persistURLParams is enabled\n const { persistURLParams } = config.getConfig() ?? {};\n if (persistURLParams) {\n setUrlParams({ quantity });\n }\n\n onValue?.(quantity);\n };\n\n if (!data) return null;\n\n return (\n <Incrementer\n key=\"quantity\"\n name=\"quantity\"\n defaultValue={String(current)}\n value={String(current)}\n min={1}\n aria-label={IncrementerLabel}\n onValue={handleOnValue}\n {...props}\n className={classes(['pdp-quantity', props.className])}\n />\n );\n};\n\nProductQuantity.getInitialData = getFetchedProductData;\n"],"names":["ProductQuantity","initialData","onValue","children","props","IncrementerLabel","useText","data","setData","useState","current","setCurrent","getValidatedQuantityFromUrl","useEffect","dataEvent","events","valuesEvent","quantity","handleOnValue","value","setProductConfigurationValues","prev","persistURLParams","config","setUrlParams","jsx","Incrementer","classes","getFetchedProductData"],"mappings":"+hBAoCa,MAAAA,EAGT,CAAC,CAAE,YAAAC,EAAc,KAAM,QAAAC,EAAS,SAAAC,EAAU,GAAGC,KAAY,CACrD,MAAAC,EAAmBC,EAAQ,+BAA+B,EAAE,MAE5D,CAACC,EAAMC,CAAO,EAAIC,EAA8BR,CAAW,EAE3D,CAACS,EAASC,CAAU,EAAIF,EAAS,IAAMG,EAA4B,CAAC,CAAC,EAE3EC,EAAU,IAAM,CACd,MAAMC,EAAYC,EAAO,GAAG,WAAYP,CAAO,EAEzCQ,EAAcD,EAAO,GACzB,aACA,CAAC,CAAE,SAAAE,CAAA,IAAe,CAChBN,EAAWM,CAAQ,CACrB,EACA,CAAE,MAAO,EAAK,CAChB,EAEA,MAAO,IAAM,CACXH,GAAA,MAAAA,EAAW,MACXE,GAAA,MAAAA,EAAa,KACf,CACF,EAAG,EAAE,EAEC,MAAAE,EAAiBC,GAAkB,CACjC,MAAAF,EAAW,SAASE,EAAO,EAAE,EACnCC,EAA+BC,IAAU,CAAE,GAAGA,EAAM,SAAAJ,CAAW,EAAA,EAG/D,KAAM,CAAE,iBAAAK,CAAiB,EAAIC,EAAO,aAAe,CAAC,EAChDD,GACWE,EAAA,CAAE,SAAAP,EAAU,EAG3Bf,GAAA,MAAAA,EAAUe,EACZ,EAEI,OAACV,EAGHkB,EAACC,EAAA,CAEC,KAAK,WACL,aAAc,OAAOhB,CAAO,EAC5B,MAAO,OAAOA,CAAO,EACrB,IAAK,EACL,aAAYL,EACZ,QAASa,EACR,GAAGd,EACJ,UAAWuB,EAAQ,CAAC,eAAgBvB,EAAM,SAAS,CAAC,CAAA,EARhD,UASN,EAbgB,IAepB,EAEAJ,EAAgB,eAAiB4B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { HTMLAttributes } from 'preact/compat';
|
|
2
|
-
import { Container } from '
|
|
2
|
+
import { Container } from '@dropins/tools/types/elsie/src/lib';
|
|
3
3
|
import { ProductModel } from '../../data/models';
|
|
4
4
|
|
|
5
5
|
export interface ProductShortDescriptionProps extends HTMLAttributes<HTMLDivElement> {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
3
|
import{jsx as n}from"@dropins/tools/preact-jsx-runtime.js";import{useState as i,useEffect as a}from"@dropins/tools/preact-compat.js";import{classes as c}from"@dropins/tools/lib.js";import{events as m}from"@dropins/tools/event-bus.js";import{g as l}from"../chunks/getFetchedProductData.js";const f=({initialData:o=null,children:p,...e})=>{const[t,s]=i(o);return a(()=>{const r=m.on("pdp/data",s);return()=>{r==null||r.off()}},[]),t?n("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.shortDescription)??""},...e,className:c(["pdp-short-description",e.className])}):null};f.getInitialData=l;export{f as ProductShortDescription,f as default};
|
|
4
|
+
//# sourceMappingURL=ProductShortDescription.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProductShortDescription.js","sources":["/@dropins/storefront-pdp/src/containers/ProductShortDescription/ProductShortDescription.tsx"],"sourcesContent":["/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2024 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport { HTMLAttributes, useEffect, useState } from 'preact/compat';\nimport { classes, Container } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { ProductModel } from '@/pdp/data/models';\nimport { getFetchedProductData } from '@/pdp/api';\n\nexport interface ProductShortDescriptionProps\n extends HTMLAttributes<HTMLDivElement> { }\n\nexport const ProductShortDescription: Container<\n ProductShortDescriptionProps,\n ProductModel | null\n> = ({ initialData = null, children, ...props }) => {\n const [data, setData] = useState<ProductModel | null>(initialData);\n\n useEffect(() => {\n const dataEvent = events.on('pdp/data', setData);\n\n return () => {\n dataEvent?.off();\n };\n }, []);\n\n if (!data) return null;\n\n return (\n <div\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: data?.shortDescription ?? '' }}\n {...props}\n className={classes(['pdp-short-description', props.className])}\n />\n );\n};\n\nProductShortDescription.getInitialData = getFetchedProductData;\n"],"names":["ProductShortDescription","initialData","children","props","data","setData","useState","useEffect","dataEvent","events","jsx","classes","getFetchedProductData"],"mappings":"iSAyBa,MAAAA,EAGT,CAAC,CAAE,YAAAC,EAAc,KAAM,SAAAC,EAAU,GAAGC,KAAY,CAClD,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAA8BL,CAAW,EAU7D,OARJM,EAAU,IAAM,CACd,MAAMC,EAAYC,EAAO,GAAG,WAAYJ,CAAO,EAE/C,MAAO,IAAM,CACXG,GAAA,MAAAA,EAAW,KACb,CACF,EAAG,EAAE,EAEAJ,EAGHM,EAAC,MAAA,CAEC,wBAAyB,CAAE,QAAQN,GAAA,YAAAA,EAAM,mBAAoB,EAAG,EAC/D,GAAGD,EACJ,UAAWQ,EAAQ,CAAC,wBAAyBR,EAAM,SAAS,CAAC,CAAA,CAC/D,EARgB,IAUpB,EAEAH,EAAwB,eAAiBY"}
|
package/fragments.js
CHANGED
package/fragments.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fragments.js","sources":["/@dropins/storefront-pdp/src/api/graphql/ProductOptionFragment.graphql.ts","/@dropins/storefront-pdp/src/api/graphql/PriceRangeFragment.graphql.ts","/@dropins/storefront-pdp/src/api/graphql/ProductFragment.graphql.ts"],"sourcesContent":["/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2023 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nexport const PRODUCT_OPTION_FRAGMENT = `\nfragment PRODUCT_OPTION_FRAGMENT on ProductViewOption {\n id\n title\n required\n multi\n values {\n id\n title\n inStock\n __typename\n ... on ProductViewOptionValueProduct {\n title\n quantity\n isDefault\n __typename\n product {\n sku\n shortDescription\n metaDescription\n metaKeyword\n metaTitle\n name\n price {\n final {\n amount {\n value\n currency\n }\n }\n regular {\n amount {\n value\n currency\n }\n }\n roles\n }\n }\n }\n ... on ProductViewOptionValueSwatch {\n id\n title\n type\n value\n inStock\n }\n }\n }\n`;\n","/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2025 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nexport const PRICE_RANGE_FRAGMENT = `\n fragment PRICE_RANGE_FRAGMENT on ComplexProductView {\n priceRange {\n maximum {\n final {\n amount {\n value\n currency\n }\n }\n regular {\n amount {\n value\n currency\n }\n }\n roles\n }\n minimum {\n final {\n amount {\n value\n currency\n }\n }\n regular {\n amount {\n value\n currency\n }\n }\n roles\n }\n }\n }\n`;\n","/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2023 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport { PRODUCT_OPTION_FRAGMENT } from '@/pdp/api/graphql/ProductOptionFragment.graphql';\nimport { PRICE_RANGE_FRAGMENT } from './PriceRangeFragment.graphql';\n\nexport const PRODUCT_FRAGMENT = `\nfragment PRODUCT_FRAGMENT on ProductView {\n __typename\n id\n sku\n name\n shortDescription\n metaDescription\n metaKeyword\n metaTitle\n description\n inStock\n addToCartAllowed\n url\n urlKey\n externalId\n\n images(roles: []) {\n url\n label\n roles\n }\n\n attributes(roles: []) {\n name\n label\n value\n roles\n }\n\n... on SimpleProductView {\n price {\n roles\n\n regular {\n amount {\n value\n currency\n }\n }\n\n final {\n amount {\n value\n currency\n }\n }\n }\n }\n\n ... on ComplexProductView {\n options {\n ...PRODUCT_OPTION_FRAGMENT\n }\n\n ...PRICE_RANGE_FRAGMENT\n }\n}\n\n${PRODUCT_OPTION_FRAGMENT}\n${PRICE_RANGE_FRAGMENT}\n`;\n"],"names":["PRODUCT_OPTION_FRAGMENT","PRICE_RANGE_FRAGMENT","PRODUCT_FRAGMENT"],"mappings":"AAgBO,MAAMA,EAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECA1BC,EAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECGvBC,EAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2D9BF,CAAuB;AAAA,EACvBC,CAAoB;"}
|
package/i18n/en_US.json.d.ts
CHANGED
package/lib/url-params.d.ts
CHANGED
|
@@ -15,4 +15,5 @@
|
|
|
15
15
|
*/
|
|
16
16
|
export declare function setUrlParams(params: Record<string, string | number | null>): void;
|
|
17
17
|
export declare function getUrlParams(): Record<string, string>;
|
|
18
|
+
export declare function getValidatedQuantityFromUrl(defaultQuantity?: number): number;
|
|
18
19
|
//# sourceMappingURL=url-params.d.ts.map
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name": "@dropins/storefront-pdp", "version": "1.
|
|
1
|
+
{"name": "@dropins/storefront-pdp", "version": "1.2.0-alpha6", "@dropins/tools": "1.3.0-beta2", "license": "SEE LICENSE IN LICENSE.md"}
|
package/render/render.d.ts
CHANGED
package/render.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
(function(p,t){try{if(typeof document<"u"){const r=document.createElement("style"),e=t.styleId;for(const a in t.attributes)r.setAttribute(a,t.attributes[a]);r.setAttribute("data-dropin",e),r.appendChild(document.createTextNode(p));const o=document.querySelector('style[data-dropin="sdk"]');if(o)o.after(r);else{const a=document.querySelector('link[rel="stylesheet"], style');a?a.before(r):document.head.append(r)}}}catch(r){console.error("dropin-styles (injectCodeFunction)",r)}})(".pdp-carousel{--icon-size: 32px;--icon-extra-padding: 8px;--thumb-peak: 32px;--thumbnails-col-width: 18.6%;position:relative;display:flex;flex-direction:var(--flex-carousel);align-items:center;gap:var(--gap);width:var(--width)}.pdp-carousel .dropin-button--tertiary--disabled:hover{color:var(--color-neutral-500)}.pdp-carousel--thumbnailsColumn{justify-content:flex-end;align-items:start}.pdp-carousel--thumbnailsRow{align-items:center}.pdp-carousel--arrows{padding-left:calc(var(--icon-size) + var(--icon-extra-padding));padding-right:calc(var(--icon-size) + var(--icon-extra-padding));width:calc(var(--width) - 2 * var(--icon-size) - 2 * var(--icon-extra-padding))}.pdp-carousel__button{position:absolute;top:50%;transform:translateY(-50%);padding:0}.pdp-carousel__button--prev{left:0}[dir=rtl] .pdp-carousel__button--prev{left:auto;right:0}[dir=rtl] .pdp-carousel__button--next{right:auto;left:0}.pdp-carousel__button__icon--next{transform:rotate(-90deg)}.pdp-carousel__button--next{right:0}.pdp-carousel__button__icon--prev{transform:rotate(90deg)}[dir=rtl] .pdp-carousel__button__icon--prev{transform:rotate(-90deg)}[dir=rtl] .pdp-carousel__button__icon--next{transform:rotate(90deg)}.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsColumn .pdp-carousel__button--prev{left:var(--thumbnails-col-width)}.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsRow .pdp-carousel__button--prev,.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsRow .pdp-carousel__button--next{top:calc(var(--height) / 2)}.pdp-carousel__button--thumbnailsColumn{margin:auto;padding:0}.pdp-carousel__button--thumbnailsRow{padding:0}.pdp-carousel__button__icon--thumbnailsColumn--prev{transform:rotate(180deg)}.pdp-carousel__button__icon--thumbnailsRow--prev{transform:rotate(90deg)}[dir=rtl] .pdp-carousel__button__icon--thumbnailsRow--prev,.pdp-carousel__button__icon--thumbnailsRow--next{transform:rotate(-90deg)}[dir=rtl] .pdp-carousel__button__icon--thumbnailsRow--next{transform:rotate(90deg)}.pdp-carousel__wrapper{--peak: 0px;scroll-padding:var(--peak);width:var(--total-width);height:var(--height);display:flex;flex-wrap:nowrap;gap:var(--gap);-webkit-overflow-scrolling:touch}.pdp-carousel__wrapper--horizontal{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}.pdp-carousel__slide{display:grid;grid-gap:var(--gap);grid-auto-columns:1fr;grid-auto-rows:100%;scroll-snap-align:end;scroll-snap-stop:always;flex-shrink:0}.pdp-carousel__slide--horizontal{grid-auto-flow:column;width:calc(100% - var(--peak))}.pdp-carousel__slide--horizontal.pdp-carousel__slide--orphan{width:calc((100% / var(--per-page) * var(--length)) - var(--peak) / var(--per-page) * var(--length) - var(--gap) / var(--per-page) * (var(--per-page) - var(--length)))}.pdp-carousel__slide>*{vertical-align:middle;max-width:100%;max-height:100%}.pdp-carousel__slide>img{object-fit:contain;width:100%;height:100%}.pdp-carousel__wrapper--peak{--peak: calc(var(--spacing-medium) + var(--gap))}.pdp-carousel__wrapper--scrollbar{--scroll-foreground: var(--color-neutral-600);--scroll-background: var(--color-neutral-400);scrollbar-color:var(--scroll-foreground) var(--scroll-background);scrollbar-width:thin}.pdp-carousel__wrapper:not(.pdp-carousel__wrapper--scrollbar){scrollbar-width:none}.pdp-carousel__wrapper:not(.pdp-carousel__wrapper--scrollbar)::-webkit-scrollbar{display:none}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar{width:4px;height:4px}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar-thumb{background:var(--scroll-foreground)}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar-track{background:var(--scroll-background)}.pdp-carousel__controls__container--thumbnailsRow{--thumbnails-spacing: var(--spacing-small);--thumbnails-box-width: var(--spacing-xxsmall);--thumbnails-rest: calc(var(--thumbnails-spacing) - var(--thumbnails-box-width));--thumbnails-width: calc((var(--width) - 2 * var(--icon-size) - 4 * var(--thumbnails-spacing) - var(--thumb-peak) - 2 * var(--thumbnails-box-width)) / 4);margin-top:var(--thumbnails-rest);width:var(--width);display:flex}.pdp-carousel__controls__container--thumbnailsColumn{--thumbnails-spacing: var(--spacing-small);--thumbnails-box-width: var(--spacing-xxsmall);--thumbnails-rest: calc(var(--thumbnails-spacing) - var(--thumbnails-box-width));--thumbnails-width: 100%;margin-right:var(--thumbnails-rest);width:calc(var(--thumbnails-col-width) - var(--thumbnails-rest))}.pdp-carousel__controls__container--thumbnailsColumn:not(.pdp-carousel__controls__container--no-arrows){height:calc(max(var(--height),4 * var(--thumbnails-spacing)) - 4 * var(--thumbnails-spacing))}.pdp-carousel__controls__container--thumbnailsColumn.pdp-carousel__controls__container--no-arrows{height:var(--height)}.pdp-carousel__controls__wrapper--thumbnailsColumn{max-height:100%;overflow-y:scroll}.pdp-carousel__controls__wrapper--thumbnailsRow{max-width:100%;overflow-x:scroll}.pdp-carousel__controls--thumbnailsRow>label>span:nth-last-child(1){margin-left:0;margin-right:var(--thumbnails-box-width)}[dir=rtl] .pdp-carousel__controls--thumbnailsRow>label>span:nth-last-child(1){margin-left:var(--thumbnails-box-width);margin-right:0}.pdp-carousel__controls__wrapper::-webkit-scrollbar{display:none}.pdp-carousel__controls__wrapper{-ms-overflow-style:none;scrollbar-width:none}.pdp-carousel__controls{display:flex;flex-direction:row;gap:var(--spacing-xsmall)}.pdp-carousel__controls--thumbnailsColumn{display:grid;grid-template-columns:repeat(1,1fr);grid-auto-rows:1fr;grid-row-gap:var(--thumbnails-spacing);padding:var(--thumbnails-box-width)}.pdp-carousel__controls--thumbnailsRow{grid-column-gap:var(--thumbnails-spacing);padding:var(--thumbnails-box-width)}.pdp-carousel__controls__button{border-radius:50%;width:10px;height:10px;padding:0;border:none;background:var(--color-neutral-400);cursor:pointer}.pdp-carousel__controls__button:hover{background:var(--color-neutral-500)}.pdp-carousel__controls__button:active,.pdp-carousel__controls__button--active{background:var(--color-neutral-600)}.pdp-carousel__slide--last{width:100%}.pdp-carousel__thumbnail__container input[type=radio]{opacity:0;position:absolute;width:0;height:0}.pdp-carousel__thumbnail__container .pdp-carousel__thumbnail__span{--bg-color: var(--color-neutral-300);display:inline-block;box-shadow:0 0 0 var(--shape-border-width-1) var(--color-neutral-400);position:relative;cursor:pointer;background-color:var(--bg-color);background-image:var(--background-image);background-repeat:no-repeat;background-size:cover;height:100%;width:100%;overflow:hidden}.pdp-carousel__thumbnail__content{width:inherit;position:absolute;top:-9999px;bottom:-9999px;left:-9999px;right:-9999px;margin:auto;overflow:hidden}.pdp-carousel__thumbnail__span:hover{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-500);outline:none}.pdp-carousel__controls__wrapper--thumbnailsRow .pdp-carousel__thumbnail__container{min-width:100px}.pdp-carousel__thumbnail__container input[type=radio]:not(:checked):active~.pdp-carousel-thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-1) var(--color-neutral-500);outline:none}.pdp-carousel__thumbnail__container input[type=radio]:checked~.pdp-carousel__thumbnail__span,.pdp-carousel__thumbnail--selected{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-800)}.pdp-carousel__thumbnail__container input[type=radio]:checked:active~.pdp-carousel__thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-600)}.pdp-carousel__thumbnail__container input[type=radio]:focus-visible+.pdp-carousel__thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-900),0 0 0 6px var(--color-neutral-400)}.pdp-carousel__thumbnail__span>img{object-fit:cover;width:100%;height:100%}.pdp-product{display:grid;grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);margin:0 var(--grid-1-margins)}.pdp-product__gallery-column{display:none}.pdp-product__content-column{grid-column:1 / span 4;color:var(--color-neutral-800)}.pdp-product__header{display:grid;grid-auto-rows:max-content;margin-bottom:var(--spacing-medium)}.pdp-product__breadcrumbs{grid-column:1 / -1;padding:var(--spacing-medium) 0 var(--spacing-xxbig)}.pdp-product__title{font:var(--type-display-3-font);letter-spacing:var(--type-display-3-letter-spacing);margin:0}.pdp-product__sku{font:var(--type-body-1-default-font);max-width:600px}.pdp-product__prices{display:flex;gap:var(--spacing-xsmall);margin-top:var(--spacing-medium)}.pdp-product__out-of-stock__text{font:var(--type-headline-2-strong-font)}.pdp-product__options{grid-column:1 / span 4}.pdp-product__price,.pdp-product__price-special{font:var(--type-headline-2-strong-font)}.pdp-product__price,.pdp-product__sku,.pdp-product__price-special,.pdp-product__out-of-stock__text{letter-spacing:var(--type-headline-2-strong-letter-spacing)}.pdp-product__price--grey{color:var(--color-neutral-500)}.pdp-product__actions,.pdp-product__actions--out-of-stock{display:grid;grid-auto-flow:row;gap:var(--grid-1-gutters);grid-auto-rows:max-content;margin-bottom:var(--spacing-xxbig);margin-top:var(--spacing-big)}.pdp-product__short_description,.pdp-product__attributes{font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing);margin-bottom:var(--spacing-small)}.pdp-product__description,.pdp-product__attributes li{font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.pdp-product__attributes{margin-top:var(--spacing-xsmall)}.pdp-product__short_description p,.pdp-product__description p,.pdp-product__attributes li p{margin:0}.pdp-product__short_description figure,.pdp-product__description figure{margin:0}.pdp-product__short_description img,.pdp-product__description img{max-width:100%}.pdp-product__images--carousel{max-height:60vh}.pdp-product__images--carousel--thumbnails{max-height:90vh}.pdp-product__images__placeholder{background-color:var(--color-neutral-200)}.pdp-product__buttons{display:grid;grid-auto-rows:max-content;grid-gap:var(--grid-1-gutters)}.pdp-product__buttons a{text-align:center}.pdp-product__buttons a:hover{text-decoration:none}.pdp-product__overlay .pdp-overlay__content{width:100%;height:100%}.pdp-product__overlay__carousel{width:100%;height:100%;box-sizing:border-box}.pdp-product__overlay__carousel img{width:100%;height:100%;object-fit:contain}.pdp-carousel__controls__container--thumbnailsRow img,.pdp-carousel__controls__container--thumbnailsColumn img{object-fit:cover}.pdp-product__quantity,.pdp-product__buttons{grid-column:1 / span 4}@media only screen and (min-width: 1024px){.pdp-product__breadcrumbs{grid-column:2 / -2}.pdp-product{grid-template-columns:repeat(var(--grid-3-columns),1fr);grid-column-gap:var(--grid-3-gutters);margin:0 var(--grid-3-margins);position:relative}.pdp-product__column-container{position:relative;display:flex;flex-direction:column}.pdp-product__column-body{position:sticky;bottom:30%;align-self:flex-end}.pdp-product__gallery-column{display:block;grid-column:2 / span 6}.pdp-product__content-column{grid-column:8 / span 4;padding-top:var(--spacing-medium)}.pdp-product__images--carousel{display:none}.pdp-product__header{margin-bottom:var(--spacing-small)}.pdp-product__actions{grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);grid-row-gap:var(--spacing-xxbig);margin-top:var(--spacing-xxbig)}.pdp-product__quantity{grid-column:1 / span 2;width:fit-content}.pdp-product__actions--out-of-stock{grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);grid-row-gap:var(--spacing-xxbig);margin-top:var(--spacing-small)}.pdp-product__buttons{grid-column:1 / span 4}.pdp-product__out-of-stock__text{grid-column:1 / span 2}.pdp-product__gallery-content,.pdp-product__content{grid-column:2 / span 6}}.pdp-gallery-grid{display:grid;grid-gap:var(--gap);grid-template-columns:repeat(1,1fr);grid-auto-rows:max-content}.pdp-gallery-grid__item>*{height:100%;max-width:100%;min-width:100%;vertical-align:middle;width:100%;object-fit:contain}.pdp-gallery-grid__item:only-child{grid-column:1 / span 2}.pdp-gallery-grid__item:first-child:nth-last-child(2){grid-column:1 / span 2;grid-row:1}.pdp-gallery-grid__item:nth-child(2):last-child{grid-column:1 / 3;grid-row:2}@media only screen and (min-width: 1024px){.pdp-gallery-grid{grid-template-columns:repeat(2,1fr)}}.pdp-price-range .dropin-price{letter-spacing:var(--type-headline-2-strong-letter-spacing);font:var(--type-headline-2-strong-font)}.pdp-price-range__label{font:var(--type-headline-2-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing);margin-left:5px;margin-right:5px}.pdp-overlay{position:fixed;top:0;left:0;z-index:1000;right:0;bottom:0;background-color:var(--color-neutral-50);display:flex;padding:var(--spacing-medium)}.pdp-overlay--centered{align-items:center;justify-content:center}.pdp-overlay__content{display:flex;height:100%;width:100%}.pdp-overlay__close-button{position:absolute;top:var(--spacing-medium);right:var(--spacing-medium);z-index:1001}.pdp-swatches{display:grid;grid-auto-flow:row;grid-gap:var(--grid-1-gutters);grid-auto-rows:max-content;position:relative;z-index:0}.pdp-swatches__field{display:grid;font:var(--type-body-2-strong-font);grid-auto-rows:max-content;gap:var(--spacing-xsmall)}.pdp-swatches__field__label{font:var(--type-details-caption-1-font);letter-spacing:var(--type-details-caption-1-letter-spacing);color:var(--color-neutral-800)}.pdp-swatches__options{display:flex;flex-wrap:wrap;gap:var(--spacing-xsmall)}.pdp-zoom{cursor:zoom-in;overflow:hidden;margin:0;position:relative}.pdp-zoom img{height:100%;max-width:100%;min-width:100%;object-fit:contain;position:relative;transition:transform .2s;transform:var(--transform);vertical-align:middle;width:100%}.pdp-zoom .pdp-zoom__close-button{background-color:var(--color-neutral-50);border-radius:50%;position:absolute;right:var(--spacing-small);top:var(--spacing-small)}.pdp-zoom.pdp-zoom--zoomed{cursor:zoom-out}.pdp-zoom.pdp-zoom--no-effects{cursor:default}@media only screen and (max-width: 768px){.pdp-zoom img{display:block;width:100%;height:100%;transition:transform .2s;transform:var(--transform)}}.pdp-header{display:grid;grid-auto-rows:max-content}.pdp-header__title{font:var(--type-display-3-font);letter-spacing:var(--type-display-3-letter-spacing);margin:0}.pdp-header__sku{font:var(--type-body-1-default-font);max-width:600px}.pdp-price{display:flex;gap:var(--spacing-xsmall);margin-top:var(--spacing-medium)}.pdp-price__amount,.pdp-price__amount-special{font:var(--type-headline-2-strong-font);letter-spacing:var(--type-headline-2-strong-letter-spacing)}.pdp-price__amount--grey{color:var(--color-neutral-500)}",{styleId:"PDP"});
|
|
4
|
-
import{jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{deepmerge as c,Render as u}from"@dropins/tools/lib.js";import{useState as m,useEffect as f}from"@dropins/tools/preact-hooks.js";import{UIProvider as b}from"@dropins/tools/components.js";import{events as d}from"@dropins/tools/event-bus.js";import{c as
|
|
3
|
+
(function(p,a){try{if(typeof document<"u"){const r=document.createElement("style"),e=a.styleId;for(const t in a.attributes)r.setAttribute(t,a.attributes[t]);r.setAttribute("data-dropin",e),r.appendChild(document.createTextNode(p));const o=document.querySelector('style[data-dropin="sdk"]');if(o)o.after(r);else{const t=document.querySelector('link[rel="stylesheet"], style');t?t.before(r):document.head.append(r)}}}catch(r){console.error("dropin-styles (injectCodeFunction)",r)}})(".pdp-carousel{--icon-size: 32px;--icon-extra-padding: 8px;--thumb-peak: 32px;--thumbnails-col-width: 18.6%;position:relative;display:flex;flex-direction:var(--flex-carousel);align-items:center;gap:var(--gap);width:var(--width)}.pdp-carousel .dropin-button--tertiary--disabled:hover{color:var(--color-neutral-500)}.pdp-carousel--thumbnailsColumn{justify-content:flex-end;align-items:start}.pdp-carousel--thumbnailsRow{align-items:center}.pdp-carousel--arrows{padding-left:calc(var(--icon-size) + var(--icon-extra-padding));padding-right:calc(var(--icon-size) + var(--icon-extra-padding));width:calc(var(--width) - 2 * var(--icon-size) - 2 * var(--icon-extra-padding))}.pdp-carousel__button{position:absolute;top:50%;transform:translateY(-50%);padding:0}.pdp-carousel__button--prev{left:0}[dir=rtl] .pdp-carousel__button--prev{left:auto;right:0}[dir=rtl] .pdp-carousel__button--next{right:auto;left:0}.pdp-carousel__button__icon--next{transform:rotate(-90deg)}.pdp-carousel__button--next{right:0}.pdp-carousel__button__icon--prev{transform:rotate(90deg)}[dir=rtl] .pdp-carousel__button__icon--prev{transform:rotate(-90deg)}[dir=rtl] .pdp-carousel__button__icon--next{transform:rotate(90deg)}.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsColumn .pdp-carousel__button--prev{left:var(--thumbnails-col-width)}.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsRow .pdp-carousel__button--prev,.pdp-carousel--main-image-controls.pdp-carousel--thumbnailsRow .pdp-carousel__button--next{top:calc(var(--height) / 2)}.pdp-carousel__button--thumbnailsColumn{margin:auto;padding:0}.pdp-carousel__button--thumbnailsRow{padding:0}.pdp-carousel__button__icon--thumbnailsColumn--prev{transform:rotate(180deg)}.pdp-carousel__button__icon--thumbnailsRow--prev{transform:rotate(90deg)}[dir=rtl] .pdp-carousel__button__icon--thumbnailsRow--prev,.pdp-carousel__button__icon--thumbnailsRow--next{transform:rotate(-90deg)}[dir=rtl] .pdp-carousel__button__icon--thumbnailsRow--next{transform:rotate(90deg)}.pdp-carousel__wrapper{--peak: 0px;scroll-padding:var(--peak);width:var(--total-width);height:var(--height);display:flex;flex-wrap:nowrap;gap:var(--gap);-webkit-overflow-scrolling:touch}.pdp-carousel__wrapper--horizontal{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}.pdp-carousel__slide{display:grid;grid-gap:var(--gap);grid-auto-columns:1fr;grid-auto-rows:100%;scroll-snap-align:end;scroll-snap-stop:always;flex-shrink:0}.pdp-carousel__slide--horizontal{grid-auto-flow:column;width:calc(100% - var(--peak))}.pdp-carousel__slide--horizontal.pdp-carousel__slide--orphan{width:calc((100% / var(--per-page) * var(--length)) - var(--peak) / var(--per-page) * var(--length) - var(--gap) / var(--per-page) * (var(--per-page) - var(--length)))}.pdp-carousel__slide *{vertical-align:middle;max-width:100%;max-height:100%;width:100%;height:100%}.pdp-carousel__slide img{object-fit:contain;width:100%;height:100%}.pdp-carousel__wrapper--peak{--peak: calc(var(--spacing-medium) + var(--gap))}.pdp-carousel__wrapper--scrollbar{--scroll-foreground: var(--color-neutral-600);--scroll-background: var(--color-neutral-400);scrollbar-color:var(--scroll-foreground) var(--scroll-background);scrollbar-width:thin}.pdp-carousel__wrapper:not(.pdp-carousel__wrapper--scrollbar){scrollbar-width:none}.pdp-carousel__wrapper:not(.pdp-carousel__wrapper--scrollbar)::-webkit-scrollbar{display:none}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar{width:4px;height:4px}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar-thumb{background:var(--scroll-foreground)}.pdp-carousel__wrapper--scrollbar::-webkit-scrollbar-track{background:var(--scroll-background)}.pdp-carousel__controls__container--thumbnailsRow{--thumbnails-spacing: var(--spacing-small);--thumbnails-box-width: var(--spacing-xxsmall);--thumbnails-rest: calc(var(--thumbnails-spacing) - var(--thumbnails-box-width));--thumbnails-width: calc((var(--width) - 2 * var(--icon-size) - 4 * var(--thumbnails-spacing) - var(--thumb-peak) - 2 * var(--thumbnails-box-width)) / 4);margin-top:var(--thumbnails-rest);width:var(--width);display:flex}.pdp-carousel__controls__container--thumbnailsColumn{--thumbnails-spacing: var(--spacing-small);--thumbnails-box-width: var(--spacing-xxsmall);--thumbnails-rest: calc(var(--thumbnails-spacing) - var(--thumbnails-box-width));--thumbnails-width: 100%;margin-right:var(--thumbnails-rest);width:calc(var(--thumbnails-col-width) - var(--thumbnails-rest))}.pdp-carousel__controls__container--thumbnailsColumn:not(.pdp-carousel__controls__container--no-arrows){height:calc(max(var(--height),4 * var(--thumbnails-spacing)) - 4 * var(--thumbnails-spacing))}.pdp-carousel__controls__container--thumbnailsColumn.pdp-carousel__controls__container--no-arrows{height:var(--height)}.pdp-carousel__controls__wrapper--thumbnailsColumn{max-height:100%;overflow-y:scroll}.pdp-carousel__controls__wrapper--thumbnailsRow{max-width:100%;overflow-x:scroll}.pdp-carousel__controls--thumbnailsRow>label>span:nth-last-child(1){margin-left:0;margin-right:var(--thumbnails-box-width)}[dir=rtl] .pdp-carousel__controls--thumbnailsRow>label>span:nth-last-child(1){margin-left:var(--thumbnails-box-width);margin-right:0}.pdp-carousel__controls__wrapper::-webkit-scrollbar{display:none}.pdp-carousel__controls__wrapper{-ms-overflow-style:none;scrollbar-width:none}.pdp-carousel__controls{display:flex;flex-direction:row;gap:var(--spacing-xsmall)}.pdp-carousel__controls--thumbnailsColumn{display:grid;grid-template-columns:repeat(1,1fr);grid-auto-rows:1fr;grid-row-gap:var(--thumbnails-spacing);padding:var(--thumbnails-box-width)}.pdp-carousel__controls--thumbnailsRow{grid-column-gap:var(--thumbnails-spacing);padding:var(--thumbnails-box-width)}.pdp-carousel__controls__button{border-radius:50%;width:10px;height:10px;padding:0;border:none;background:var(--color-neutral-400);cursor:pointer}.pdp-carousel__controls__button:hover{background:var(--color-neutral-500)}.pdp-carousel__controls__button:active,.pdp-carousel__controls__button--active{background:var(--color-neutral-600)}.pdp-carousel__slide--last{width:100%}.pdp-carousel__thumbnail__container input[type=radio]{opacity:0;position:absolute;width:0;height:0}.pdp-carousel__thumbnail__container .pdp-carousel__thumbnail__span{--bg-color: var(--color-neutral-300);display:inline-block;box-shadow:0 0 0 var(--shape-border-width-1) var(--color-neutral-400);position:relative;cursor:pointer;background-color:var(--bg-color);background-image:var(--background-image);background-repeat:no-repeat;background-size:cover;height:100%;width:100%;overflow:hidden}.pdp-carousel__thumbnail__content{width:inherit;position:absolute;top:-9999px;bottom:-9999px;left:-9999px;right:-9999px;margin:auto;overflow:hidden}.pdp-carousel__thumbnail__span:hover{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-500);outline:none}.pdp-carousel__controls__wrapper--thumbnailsRow .pdp-carousel__thumbnail__container{min-width:100px}.pdp-carousel__thumbnail__container input[type=radio]:not(:checked):active~.pdp-carousel-thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-1) var(--color-neutral-500);outline:none}.pdp-carousel__thumbnail__container input[type=radio]:checked~.pdp-carousel__thumbnail__span,.pdp-carousel__thumbnail--selected{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-800)}.pdp-carousel__thumbnail__container input[type=radio]:checked:active~.pdp-carousel__thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-50),0 0 0 var(--shape-border-width-4) var(--color-neutral-600)}.pdp-carousel__thumbnail__container input[type=radio]:focus-visible+.pdp-carousel__thumbnail__span{box-shadow:0 0 0 var(--shape-border-width-3) var(--color-neutral-900),0 0 0 6px var(--color-neutral-400)}.pdp-carousel__thumbnail__span img{object-fit:cover;width:100%;height:100%}.pdp-product{display:grid;grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);margin:0 var(--grid-1-margins)}.pdp-product__gallery-column{display:none}.pdp-product__content-column{grid-column:1 / span 4;color:var(--color-neutral-800)}.pdp-product__header{display:grid;grid-auto-rows:max-content;margin-bottom:var(--spacing-medium)}.pdp-product__breadcrumbs{grid-column:1 / -1;padding:var(--spacing-medium) 0 var(--spacing-xxbig)}.pdp-product__title{font:var(--type-display-3-font);letter-spacing:var(--type-display-3-letter-spacing);margin:0}.pdp-product__sku{font:var(--type-body-1-default-font);max-width:600px}.pdp-product__prices{display:flex;gap:var(--spacing-xsmall);margin-top:var(--spacing-medium)}.pdp-product__out-of-stock__text{font:var(--type-headline-2-strong-font)}.pdp-product__options{grid-column:1 / span 4}.pdp-product__price,.pdp-product__price-special{font:var(--type-headline-2-strong-font)}.pdp-product__price,.pdp-product__sku,.pdp-product__price-special,.pdp-product__out-of-stock__text{letter-spacing:var(--type-headline-2-strong-letter-spacing)}.pdp-product__price--grey{color:var(--color-neutral-500)}.pdp-product__actions,.pdp-product__actions--out-of-stock{display:grid;grid-auto-flow:row;gap:var(--grid-1-gutters);grid-auto-rows:max-content;margin-bottom:var(--spacing-xxbig);margin-top:var(--spacing-big)}.pdp-product__short_description,.pdp-product__attributes{font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing);margin-bottom:var(--spacing-small)}.pdp-product__description,.pdp-product__attributes li{font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.pdp-product__attributes{margin-top:var(--spacing-xsmall)}.pdp-product__short_description p,.pdp-product__description p,.pdp-product__attributes li p{margin:0}.pdp-product__short_description figure,.pdp-product__description figure{margin:0}.pdp-product__short_description img,.pdp-product__description img{max-width:100%}.pdp-product__images--carousel{max-height:60vh}.pdp-product__images--carousel--thumbnails{max-height:90vh}.pdp-product__images__placeholder{background-color:var(--color-neutral-200)}.pdp-product__buttons{display:grid;grid-auto-rows:max-content;grid-gap:var(--grid-1-gutters)}.pdp-product__buttons a{text-align:center}.pdp-product__buttons a:hover{text-decoration:none}.pdp-product__overlay .pdp-overlay__content{width:100%;height:100%}.pdp-product__overlay__carousel{width:100%;height:100%;box-sizing:border-box}.pdp-product__overlay__carousel img{width:100%;height:100%;object-fit:contain}.pdp-carousel__controls__container--thumbnailsRow img,.pdp-carousel__controls__container--thumbnailsColumn img{object-fit:cover}.pdp-product__quantity,.pdp-product__buttons{grid-column:1 / span 4}@media only screen and (min-width: 1024px){.pdp-product__breadcrumbs{grid-column:2 / -2}.pdp-product{grid-template-columns:repeat(var(--grid-3-columns),1fr);grid-column-gap:var(--grid-3-gutters);margin:0 var(--grid-3-margins);position:relative}.pdp-product__column-container{position:relative;display:flex;flex-direction:column}.pdp-product__column-body{position:sticky;bottom:30%;align-self:flex-end}.pdp-product__gallery-column{display:block;grid-column:2 / span 6}.pdp-product__content-column{grid-column:8 / span 4;padding-top:var(--spacing-medium)}.pdp-product__images--carousel{display:none}.pdp-product__header{margin-bottom:var(--spacing-small)}.pdp-product__actions{grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);grid-row-gap:var(--spacing-xxbig);margin-top:var(--spacing-xxbig)}.pdp-product__quantity{grid-column:1 / span 2;width:fit-content}.pdp-product__actions--out-of-stock{grid-template-columns:repeat(var(--grid-1-columns),1fr);grid-column-gap:var(--grid-1-gutters);grid-row-gap:var(--spacing-xxbig);margin-top:var(--spacing-small)}.pdp-product__buttons{grid-column:1 / span 4}.pdp-product__out-of-stock__text{grid-column:1 / span 2}.pdp-product__gallery-content,.pdp-product__content{grid-column:2 / span 6}}.pdp-gallery-grid{display:grid;grid-gap:var(--gap);grid-template-columns:repeat(1,1fr);grid-auto-rows:max-content}.pdp-gallery-grid__item>*{height:100%;max-width:100%;min-width:100%;vertical-align:middle;width:100%;object-fit:contain}.pdp-gallery-grid__item:only-child{grid-column:1 / span 2}.pdp-gallery-grid__item:first-child:nth-last-child(2){grid-column:1 / span 2;grid-row:1}.pdp-gallery-grid__item:nth-child(2):last-child{grid-column:1 / 3;grid-row:2}@media only screen and (min-width: 1024px){.pdp-gallery-grid{grid-template-columns:repeat(2,1fr)}}.pdp-price-range .dropin-price{letter-spacing:var(--type-headline-2-strong-letter-spacing);font:var(--type-headline-2-strong-font)}.pdp-price-range__label{font:var(--type-headline-2-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing);margin-left:5px;margin-right:5px}.pdp-overlay{position:fixed;top:0;left:0;z-index:1000;right:0;bottom:0;background-color:var(--color-neutral-50);display:flex;padding:var(--spacing-medium)}.pdp-overlay--centered{align-items:center;justify-content:center}.pdp-overlay__content{display:flex;height:100%;width:100%}.pdp-overlay__close-button{position:absolute;top:var(--spacing-medium);right:var(--spacing-medium);z-index:1001}.pdp-swatches{display:grid;grid-auto-flow:row;grid-gap:var(--grid-1-gutters);grid-auto-rows:max-content;position:relative;z-index:0}.pdp-swatches__field{display:grid;font:var(--type-body-2-strong-font);grid-auto-rows:max-content;gap:var(--spacing-xsmall)}.pdp-swatches__field__label{font:var(--type-details-caption-1-font);letter-spacing:var(--type-details-caption-1-letter-spacing);color:var(--color-neutral-800)}.pdp-swatches__options{display:flex;flex-wrap:wrap;gap:var(--spacing-xsmall)}.pdp-zoom{cursor:zoom-in;overflow:hidden;margin:0;position:relative}.pdp-zoom img{height:100%;max-width:100%;min-width:100%;object-fit:contain;position:relative;transition:transform .2s;transform:var(--transform);vertical-align:middle;width:100%}.pdp-zoom .pdp-zoom__close-button{background-color:var(--color-neutral-50);border-radius:50%;position:absolute;right:var(--spacing-small);top:var(--spacing-small);width:10px;height:10px}.pdp-zoom.pdp-zoom--zoomed{cursor:zoom-out}.pdp-zoom.pdp-zoom--no-effects{cursor:default}@media only screen and (max-width: 768px){.pdp-zoom img{display:block;width:100%;height:100%;transition:transform .2s;transform:var(--transform)}}.pdp-header{display:grid;grid-auto-rows:max-content}.pdp-header__title{font:var(--type-display-3-font);letter-spacing:var(--type-display-3-letter-spacing);margin:0}.pdp-header__sku{font:var(--type-body-1-default-font);max-width:600px}.pdp-price{display:flex;gap:var(--spacing-xsmall);margin-top:var(--spacing-medium)}.pdp-price__amount,.pdp-price__amount-special{font:var(--type-headline-2-strong-font);letter-spacing:var(--type-headline-2-strong-letter-spacing)}.pdp-price__amount--grey{color:var(--color-neutral-500)}",{styleId:"PDP"});
|
|
4
|
+
import{jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{deepmerge as c,Render as u}from"@dropins/tools/lib.js";import{useState as m,useEffect as f}from"@dropins/tools/preact-hooks.js";import{UIProvider as b}from"@dropins/tools/components.js";import{events as d}from"@dropins/tools/event-bus.js";import{c as g}from"./chunks/isProductConfigurationValid.js";import"./fragments.js";import"@dropins/tools/fetch-graphql.js";const C={Product:{Incrementer:{label:"Item Quantity"},OutOfStock:{label:"Out of Stock"},AddToCart:{label:"Add to Cart"},Details:{label:"Details"},RegularPrice:{label:"Regular Price"},SpecialPrice:{label:"Special Price"},PriceRange:{From:{label:"From"},To:{label:"to"}},Image:{label:"{product} Image {key} of {total}"}},Swatches:{Required:{label:"Required"},ChooseOption:{label:"Choose an option"}},Carousel:{label:"Carousel",Next:{label:"Next"},Previous:{label:"Previous"},Slide:{label:"Slide"},Controls:{label:"Carousel Controls",Button:{label:"Show slide {key} of {total}"}}},Overlay:{Close:{label:"Close"}},Zoom:{Close:{label:"Close"}}},p={quantityLabel:"Quantity"},P={PDP:C,Custom:p},S={default:P},D=({children:a})=>{var t;const[e,i]=m(),n=(t=g.getConfig())==null?void 0:t.langDefinitions;f(()=>{const o=d.on("locale",l=>{l!==e&&i(l)},{eager:!0});return()=>{o==null||o.off()}},[e]);const s=c(S,n??{});return r(b,{lang:e,langDefinitions:s,children:a})},q=new u(r(D,{}));export{q as render};
|
|
5
|
+
//# sourceMappingURL=render.js.map
|
package/render.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"render.js","sources":["/@dropins/storefront-pdp/src/render/Provider.tsx","/@dropins/storefront-pdp/src/render/render.tsx"],"sourcesContent":["/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2023 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport { FunctionComponent } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport { UIProvider } from '@adobe-commerce/elsie/components';\nimport { Lang } from '@adobe-commerce/elsie/i18n';\nimport { events } from '@adobe-commerce/event-bus';\nimport { config } from '../api';\nimport { deepmerge } from '@adobe-commerce/elsie/lib';\n\nimport en_US from '../i18n/en_US.json';\n\n// Langs\nconst langDefinitions = {\n default: en_US,\n};\n\ninterface CartProviderProps {\n children?: any;\n}\n\nexport const Provider: FunctionComponent<CartProviderProps> = ({\n children,\n}) => {\n const [locale, setLang] = useState<Lang>();\n\n const userLangDefinitions = config.getConfig()?.langDefinitions;\n\n // Events\n useEffect(() => {\n const localeEvent = events.on(\n 'locale',\n (payload) => {\n if (payload !== locale) setLang(payload as Lang);\n },\n { eager: true }\n );\n return () => {\n localeEvent?.off();\n };\n }, [locale]);\n\n // Merge language definitions with user language definitions\n const definitions = deepmerge(langDefinitions, userLangDefinitions ?? {});\n\n return (\n <UIProvider lang={locale} langDefinitions={definitions}>\n {children}\n </UIProvider>\n );\n};\n","/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2023 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport { Render } from '@adobe-commerce/elsie/lib';\nimport { Provider } from './Provider';\n\nexport const render = new Render(<Provider />);\n"],"names":["langDefinitions","en_US","Provider","children","locale","setLang","useState","userLangDefinitions","_a","config","useEffect","localeEvent","events","payload","definitions","deepmerge","UIProvider","render","Render","jsx"],"mappings":"4lCA2BMA,EAAkB,CACtB,QAASC,CACX,EAMaC,EAAiD,CAAC,CAC7D,SAAAC,CACF,IAAM,OACJ,KAAM,CAACC,EAAQC,CAAO,EAAIC,EAAe,EAEnCC,GAAsBC,EAAAC,EAAO,UAAA,IAAP,YAAAD,EAAoB,gBAGhDE,EAAU,IAAM,CACd,MAAMC,EAAcC,EAAO,GACzB,SACCC,GAAY,CACPA,IAAYT,GAAQC,EAAQQ,CAAe,CACjD,EACA,CAAE,MAAO,EAAK,CAChB,EACA,MAAO,IAAM,CACXF,GAAA,MAAAA,EAAa,KACf,CAAA,EACC,CAACP,CAAM,CAAC,EAGX,MAAMU,EAAcC,EAAUf,EAAiBO,GAAuB,CAAA,CAAE,EAExE,SACGS,EAAW,CAAA,KAAMZ,EAAQ,gBAAiBU,EACxC,SAAAX,EACH,CAEJ,EC7Cac,EAAS,IAAIC,EAAOC,EAACjB,IAAS,CAAE"}
|