@dropins/storefront-pdp 1.1.2-alpha2 → 1.2.0-beta2
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.js +1 -1
- package/chunks/Swatches.js +1 -1
- package/chunks/getProductConfigurationValues.js +3 -0
- package/chunks/isProductConfigurationValid.js +6 -6
- package/components/Swatches/Swatches.d.ts +4 -2
- package/containers/ProductAttributes.js +1 -1
- package/containers/ProductDetails/ProductDetails.d.ts +9 -0
- package/containers/ProductDetails.js +1 -1
- package/containers/ProductGallery/ProductGallery.d.ts +14 -1
- package/containers/ProductGallery.js +1 -1
- package/containers/ProductOptions/ProductOptions.d.ts +8 -1
- package/containers/ProductOptions.js +1 -1
- package/containers/ProductPrice.js +1 -1
- package/containers/ProductQuantity.js +1 -1
- package/i18n/en_US.json.d.ts +0 -3
- package/package.json +1 -1
- package/render.js +2 -2
package/api.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{c as i,f as d,h as c,g as n,
|
|
3
|
+
import{c as i,f as d,h as c,g,d as n,e as u,i as f,k as p,r as h,s as l,a as m,b as P,j as C}from"./chunks/isProductConfigurationValid.js";import{g as G,s as Q}from"./chunks/getProductConfigurationValues.js";import{g as x}from"./chunks/getFetchedProductData.js";import"@dropins/tools/lib.js";import"@dropins/tools/event-bus.js";import"./fragments.js";import"@dropins/tools/fetch-graphql.js";export{i as config,d as fetchGraphQl,c as fetchProductData,g as getConfig,x as getFetchedProductData,G as getProductConfigurationValues,n as getProductData,u as getRefinedProduct,f as initialize,p as isProductConfigurationValid,h as removeFetchGraphQlHeader,l as setEndpoint,m as setFetchGraphQlHeader,P as setFetchGraphQlHeaders,C as setProductConfigurationValid,Q as setProductConfigurationValues};
|
package/chunks/Swatches.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as h,jsxs as
|
|
3
|
+
import{jsx as h,jsxs as M}from"@dropins/tools/preact-jsx-runtime.js";import{useState as R,useEffect as N,useMemo as z,useCallback as _}from"@dropins/tools/preact-compat.js";import{classes as P}from"@dropins/tools/lib.js";import{Picker as A,ColorSwatch as y,ImageSwatch as B,TextSwatch as D}from"@dropins/tools/components.js";/* empty css */import{useText as C}from"@dropins/tools/i18n.js";const F=["text","image","color","dropdown"],G=t=>t.map(s=>({...s,text:s.label,disabled:!s.inStock}));function H(t,s){return t.reduce((m,i)=>{const n=s==null?void 0:s.find(f=>f.items.find(w=>w.id===i));if(!n)return m;const b=n.items.find(f=>f.id===i);return{...m,[n.id]:{label:b.label,value:b.id}}},{})}const I=({options:t,hideSelectedValue:s,disablePreselections:m,selectedUIDs:i,onValues:n,onErrors:b,defaultOptions:f,selectionsToUpdate:w,className:L,children:K,imageSwatchNode:O,...q})=>{const j=C("PDP.Swatches.Required.label").label,k=C("PDP.Swatches.ChooseOption.label").label,[S,x]=R(()=>t==null?void 0:t.reduce((r,e)=>{const{items:a}=e,d=a==null?void 0:a.find(c=>f==null?void 0:f.includes(c.id)),u=a==null?void 0:a.find(c=>c.selected);return d?{...r,[e.id]:{label:d.label,value:d.id}}:u?{...r,[e.id]:{label:u.label,value:u.id}}:r},{}));N(()=>{if(i){const l=H(i,t);if(JSON.stringify(l)===JSON.stringify(S))return;x(r=>{let e={...r,...l};return n==null||n(e),e})}},[i]),N(()=>{w==null||w.forEach(l=>{x(r=>{var d;const e=(d=l==null?void 0:l.items)==null?void 0:d.find(u=>u.selected);return e?{...r,[l.id]:{label:e==null?void 0:e.label,value:e==null?void 0:e.id}}:r})})},[w,x]),z(()=>{const l=t==null?void 0:t.reduce((r,e)=>{var d;let a=!1;return(d=e==null?void 0:e.items)==null||d.forEach(u=>{var v;((v=S[e.id])==null?void 0:v.value)===u.id&&(a=!0)}),e.required&&!a&&(r[e.id]=j),r},{});return b==null||b(l),l},[S]);const g=_((l,r,e)=>{x(a=>{let d={...a,...l&&{[l]:{label:r,value:e}}};return r===k&&delete d[l],n==null||n(d,e),d})},[n]),$=_((l,r)=>{var a;const e=((a=r.selectedOptions[0])==null?void 0:a.label)??"";g(l,e,r.value)},[g]),J=_(({items:l,id:r,required:e,type:a,selected:d,label:u})=>(l==null?void 0:l.length)>0&&h("div",{className:P(["pdp-swatches__options"]),children:(a==null?void 0:a.toLowerCase())==="dropdown"?h(A,{"aria-label":u,placeholder:m?k:void 0,handleSelect:c=>$(r,c.target),options:G(l),value:d}):l==null?void 0:l.map(c=>{const v={key:c.id,id:c.id,name:r,value:c.value,label:c.label,groupAriaLabel:u,selected:d===c.id,outOfStock:!c.inStock,required:e===null?!0:e,onValue:()=>{g(r,c.label,c.id)}};switch(a){case"text":return h(D,{...v,label:c.label});case"image":return h(B,{...v,src:c.value,alt:c.label,imageNode:O});case"color":return h(y,{...v,size:"large",color:c.value});default:return console.warn(`Invalid swatch type ${a}`),null}})}),[k,g,$]);return h("div",{...q,className:P(["pdp-swatches",L]),children:t==null?void 0:t.map(({type:l,label:r,id:e,multiple:a,required:d,items:u})=>{var c;return F.includes(l)||console.warn(`Invalid swatch type ${l}`),a&&console.warn("Multiple selection swatches are not currently supported."),M("div",{id:`swatch-item-${e}`,"data-slot-key":`product-swatch--${e}`,className:"pdp-swatches__field",children:[h("div",{className:"pdp-swatches__field__label",children:S[e]?s?`${r}`:`${r}: ${S[e].label}`:r}),h(J,{id:e,type:l,required:d,items:u,label:r,selected:(c=S[e])==null?void 0:c.value})]},`swatch-item-${e}`)})})};export{I as S};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/*! Copyright 2025 Adobe
|
|
2
|
+
All Rights Reserved. */
|
|
3
|
+
import{events as o}from"@dropins/tools/event-bus.js";import"@dropins/tools/lib.js";const u=t=>{const e=n(),s=t(e);o.emit("pdp/values",{...s})},n=()=>{var t;return((t=o._lastEvent["pdp/values"])==null?void 0:t.payload)??null};export{n as g,u as s};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{merge as oe,Initializer as
|
|
3
|
+
import{merge as oe,Initializer as ue}from"@dropins/tools/lib.js";import{events as L}from"@dropins/tools/event-bus.js";import{PRODUCT_FRAGMENT as ne}from"../fragments.js";import{FetchGraphQL as le}from"@dropins/tools/fetch-graphql.js";import{s as ae}from"./getProductConfigurationValues.js";function $e(e){const n=new URLSearchParams(window.location.search);Object.entries(e).forEach(([i,t])=>{t===null?n.delete(i):n.set(i,String(t))});let r=window.location.pathname;r+=`?${n.toString()}`,r+=window.location.hash,window.history.replaceState({},"",r)}function me(){const e=new URLSearchParams(window.location.search),n={};return e.forEach((r,i)=>{n[i]=r}),n}function ce(e){var n,r,i,t,s,u,a,o,m,l,c,f;return{productId:Number(e==null?void 0:e.externalId),name:e==null?void 0:e.name,sku:(e==null?void 0:e.variantSku)||(e==null?void 0:e.sku),topLevelSku:e==null?void 0:e.sku,specialToDate:void 0,specialFromDate:void 0,newToDate:void 0,newFromDate:void 0,createdAt:void 0,updatedAt:void 0,manufacturer:void 0,countryOfManufacture:void 0,categories:void 0,productType:e==null?void 0:e.productType,pricing:{regularPrice:((r=(n=e==null?void 0:e.prices)==null?void 0:n.regular)==null?void 0:r.amount)||0,minimalPrice:(t=(i=e==null?void 0:e.prices)==null?void 0:i.final)==null?void 0:t.minimumAmount,maximalPrice:(u=(s=e==null?void 0:e.prices)==null?void 0:s.final)==null?void 0:u.maximumAmount,specialPrice:(o=(a=e==null?void 0:e.prices)==null?void 0:a.final)==null?void 0:o.amount,tierPricing:void 0,currencyCode:((l=(m=e==null?void 0:e.prices)==null?void 0:m.final)==null?void 0:l.currency)||"USD"},canonicalUrl:e==null?void 0:e.url,mainImageUrl:(f=(c=e==null?void 0:e.images)==null?void 0:c[0])==null?void 0:f.url}}const fe={PRODUCT_CONTEXT:"productContext"},Pe={PRODUCT_PAGE_VIEW:"product-page-view"};function ie(){return window.adobeDataLayer=window.adobeDataLayer||[],window.adobeDataLayer}function de(e,n){const r=ie();r.push({[e]:null}),r.push({[e]:n})}function he(e,n){ie().push(i=>{const t=i.getState?i.getState():{};i.push({event:e,eventInfo:{...t,...n}})})}function we(e){const n=ce(e);de(fe.PRODUCT_CONTEXT,n),he(Pe.PRODUCT_PAGE_VIEW)}var H=(e=>(e.ComplexProduct="complex",e.SimpleProduct="simple",e))(H||{}),re=(e=>(e.ComplexProductView="ComplexProductView",e.SimpleProductView="SimpleProductView",e))(re||{});function X(e,n){var u,a,o,m,l,c,f,d,h,D,P,k;const r=((m=(o=(a=(u=e==null?void 0:e.options)==null?void 0:u[0])==null?void 0:a.values)==null?void 0:o[0])==null?void 0:m.__typename)==="ProductViewOptionValueProduct",i=Te(e,r,n==null?void 0:n.preselectFirstOption),t=(e==null?void 0:e.__typename)===re.SimpleProductView?H.SimpleProduct:H.ComplexProduct,s=e?{name:e.name,sku:e.sku,isBundle:r,addToCartAllowed:e.addToCartAllowed,inStock:e.inStock,shortDescription:e.shortDescription,metaDescription:e.metaDescription,metaKeyword:e.metaKeyword,metaTitle:e.metaTitle,description:e.description,images:De(e),prices:Ee(e,r,i),attributes:ye(e),options:ge(e,r),optionUIDs:i,url:e.url,urlKey:e.urlKey,externalId:e.externalId,externalParentId:e.externalParentId,variantSku:e.variantSku,productType:t}:null;return oe(s,((d=(f=(c=(l=p.getConfig())==null?void 0:l.models)==null?void 0:c.ProductDetails)==null?void 0:f.transformer)==null?void 0:d.call(f,e))??((k=(P=(D=(h=p.getConfig())==null?void 0:h.models)==null?void 0:D.ProductDetails)==null?void 0:P.transform)==null?void 0:k.call(P,e)))}function De(e){var n,r;return(r=(n=e.images)==null?void 0:n.filter(i=>{var t;return!((t=i.roles)!=null&&t.includes("hide_from_pdp"))}))==null?void 0:r.map(i=>(i.url=i.url.replace(/^https?:/,""),i))}function ye(e){var n,r;return(r=(n=e.attributes)==null?void 0:n.filter(({roles:i})=>(i==null?void 0:i.indexOf("visible_in_pdp"))!==-1))==null?void 0:r.map(({label:i,value:t,name:s})=>({id:s,label:i,value:t.toString().split(",").join(", ")}))}function ge(e,n){const{options:r,optionUIDs:i}=e;return r==null?void 0:r.map(({id:t,title:s,required:u,multi:a,values:o})=>{var c;const m=(c=o==null?void 0:o[0])==null?void 0:c.__typename;let l=o==null?void 0:o[0].type;return l?l=l.replace("COLOR_HEX","color").replace("TEXT","text").replace("IMAGE","image"):l="dropdown",{id:t,type:l,typename:m,label:s,required:u,multiple:a,items:n?Ce(o,i):xe(o,i,l)}})}function Ce(e,n){return e==null?void 0:e.filter(({enabled:r})=>typeof r>"u"||r).map(({id:r,title:i,inStock:t,isDefault:s,product:u})=>({id:r,inStock:t,label:i,selected:(n==null?void 0:n.indexOf(r))>-1||s,value:r,product:u}))}function xe(e,n,r){return e==null?void 0:e.map(({id:i,title:t,inStock:s,value:u})=>({id:i,inStock:s,label:t,selected:(n==null?void 0:n.indexOf(i))>-1,value:(r==null?void 0:r.toLowerCase())==="dropdown"?i:u==null?void 0:u.replace(/^https?:/,"")}))}function Ee(e,n,r){var P,k,q,B,z;const{price:i,priceRange:t,options:s,optionUIDs:u=r}=e;let{__typename:a}=e;function o(){var x;const g=i.regular.amount.value,w=((x=i.final)==null?void 0:x.amount.value)??i.regular.amount.value,C=i.regular.amount.currency==="NONE"?"USD":i==null?void 0:i.regular.amount.currency;return[g,w,w,C]}function m(){var T,O,_,b,U,v,A,I,F,V,G,N;const g=(T=t==null?void 0:t.minimum)==null?void 0:T.final.amount.value,w=(O=t==null?void 0:t.maximum)==null?void 0:O.final.amount.value;let C;((b=(_=t==null?void 0:t.minimum)==null?void 0:_.regular)==null?void 0:b.amount.value)===((v=(U=t==null?void 0:t.maximum)==null?void 0:U.regular)==null?void 0:v.amount.value)&&(C=(I=(A=t==null?void 0:t.minimum)==null?void 0:A.regular)==null?void 0:I.amount.value);const x=((V=(F=t==null?void 0:t.minimum)==null?void 0:F.final)==null?void 0:V.amount.currency)==="NONE"?"USD":(N=(G=t==null?void 0:t.minimum)==null?void 0:G.final)==null?void 0:N.amount.currency;return[C,g,w,x]}function l(){var _,b,U,v,A,I,F,V,G,N,W,Y;let g=0,w=0;s==null||s.forEach(S=>{var J;const j=S==null?void 0:S.values;if(j&&Array.isArray(j)){const E=j.map(y=>{var M,$,Z,R;return(R=(Z=($=(M=y==null?void 0:y.product)==null?void 0:M.price)==null?void 0:$.regular)==null?void 0:Z.amount)==null?void 0:R.value}).filter(y=>y!==void 0),Q=E.length>0?Math.max(...E):0;g+=Q}(J=S==null?void 0:S.values)==null||J.forEach(E=>{var Q,y,M,$;u!=null&&u.includes(E.id)&&(w+=($=(M=(y=(Q=E==null?void 0:E.product)==null?void 0:Q.price)==null?void 0:y.final)==null?void 0:M.amount)==null?void 0:$.value)})});const C=(_=t==null?void 0:t.minimum)==null?void 0:_.final.amount.value,x=(b=t==null?void 0:t.maximum)==null?void 0:b.final.amount.value;let T;((v=(U=t==null?void 0:t.minimum)==null?void 0:U.regular)==null?void 0:v.amount.value)===((I=(A=t==null?void 0:t.maximum)==null?void 0:A.regular)==null?void 0:I.amount.value)&&(T=(V=(F=t==null?void 0:t.minimum)==null?void 0:F.regular)==null?void 0:V.amount.value);const O=((N=(G=t==null?void 0:t.minimum)==null?void 0:G.final)==null?void 0:N.amount.currency)==="NONE"?"USD":(Y=(W=t==null?void 0:t.minimum)==null?void 0:W.final)==null?void 0:Y.amount.currency;return n&&(u==null?void 0:u.length)<1?[T,C,x,O]:g===(t==null?void 0:t.maximum.regular.amount.value)?[w,w,w,O]:[T,C,x,O]}const[c,f,d,h]=a==="SimpleProductView"?o():n?l():m(),D=a==="SimpleProductView"?(P=i==null?void 0:i.roles)==null?void 0:P.includes("visible"):((q=(k=t==null?void 0:t.maximum)==null?void 0:k.roles)==null?void 0:q.includes("visible"))&&((z=(B=t==null?void 0:t.minimum)==null?void 0:B.roles)==null?void 0:z.includes("visible"));return d&&f===d?{regular:{amount:c,currency:h,variant:c&&f!==c?"strikethrough":"default"},final:{amount:d,currency:h,variant:"default"},visible:D}:{final:{minimumAmount:f,maximumAmount:d,currency:h},visible:D}}function Te(e,n,r){var i;return n?((i=e==null?void 0:e.options)==null?void 0:i.map(({values:s})=>{var o;const u=((o=s==null?void 0:s.find(({isDefault:m})=>m))==null?void 0:o.id)??null,a=r?s[0].id:null;return u||a})).filter(s=>s!==null):e==null?void 0:e.optionUIDs}const K=new ue({init:async e=>{var s,u,a;const n=(u=(s=e==null?void 0:e.models)==null?void 0:s.ProductDetails)==null?void 0:u.initialData,t={...{defaultLocale:"en-US",persistURLParams:!1,acdl:!1,optionsUIDs:((a=me().optionsUIDs)==null?void 0:a.split(","))||(n==null?void 0:n.optionsUIDs)},...e};if(K.config.setConfig({...t}),t!=null&&t.sku){const o=n?X(n):await te(t.sku,{preselectFirstOption:t.preselectFirstOption});L.emit("pdp/data",o);const m={sku:t.sku,quantity:1,optionsUIDs:o==null?void 0:o.optionUIDs};ae(()=>({...m})),Ae(()=>{var l;return o!=null&&o.options?o.options.length===((l=o==null?void 0:o.optionUIDs)==null?void 0:l.length):!0}),t.acdl&&o&&we(o)}},listeners:()=>[L.on("locale",async()=>{const{sku:e}=K.config.getConfig();if(e){const n=await te(e);L.emit("pdp/data",n)}})]}),p=K.config,{setEndpoint:Le,setFetchGraphQlHeader:Qe,removeFetchGraphQlHeader:je,setFetchGraphQlHeaders:He,fetchGraphQl:se,getConfig:Ke}=new le().getMethods(),Oe=`
|
|
4
4
|
query GET_PRODUCT_DATA($skus: [String]) {
|
|
5
5
|
products(skus: $skus) {
|
|
6
6
|
...PRODUCT_FRAGMENT
|
|
@@ -8,7 +8,7 @@ query GET_PRODUCT_DATA($skus: [String]) {
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
${ne}
|
|
11
|
-
`,
|
|
11
|
+
`,Se=async(e,n,r)=>{var s;const{data:i}=await se(Oe,{method:"GET",variables:{skus:[e]}}),t=(s=i==null?void 0:i.products)==null?void 0:s[0];return n!=null&&n.optionsUIDs&&(t.optionUIDs=n.optionsUIDs),t?r?t:X(t,{preselectFirstOption:n==null?void 0:n.preselectFirstOption}):null},pe=`
|
|
12
12
|
query REFINE_PRODUCT_QUERY(
|
|
13
13
|
$optionIds: [String!]!
|
|
14
14
|
$sku: String!
|
|
@@ -30,10 +30,10 @@ query REFINE_PRODUCT_QUERY(
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
${ne}
|
|
33
|
-
`;async function ee(e,n){const
|
|
34
|
-
ProductOption${
|
|
33
|
+
`;async function ee(e,n){const r=_e(n),i=be(r,e),t=pe.replace("# %extendedPlaceholder%",i),{data:s}=await se(t,{method:"GET",variables:{optionIds:n,sku:e}});return s}const ke=async(e,n,r,i)=>{var d,h,D;const t=await ee(e,n);if(!t)return null;let{products:s,refineProduct:u,...a}=t;const o=s==null?void 0:s[0],m=Ue(Object.values(a),o.options,r);if(r!=null&&r.length&&u===null){n=ve(m,n,r);const P=await ee(e,n);u=P==null?void 0:P.refineProduct}const l={...u||o,sku:o.sku,name:o.name,externalParentId:o==null?void 0:o.externalId,options:m,optionUIDs:n,variantSku:(u==null?void 0:u.__typename)==="SimpleProductView"?u==null?void 0:u.sku:void 0},c=i?l:X(l),f=(D=(h=(d=p==null?void 0:p.getConfig())==null?void 0:d.models)==null?void 0:h.ProductDetails)==null?void 0:D.fallbackData;return f?f(o,c):c};function _e(e){if(e.length<2)return[e];const n=[];return e.forEach(r=>{const i=[];e.forEach(t=>{r!==t&&i.push(t)}),n.push(i)}),n}function be(e,n){return e.map((r,i)=>`
|
|
34
|
+
ProductOption${i}: refineProduct(
|
|
35
35
|
optionIds: [
|
|
36
|
-
${
|
|
36
|
+
${r.map(t=>`"${t}"`).join(", ")}
|
|
37
37
|
]
|
|
38
38
|
sku: "${n}"
|
|
39
39
|
) {
|
|
@@ -43,4 +43,4 @@ ${ne}
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
`).join("")}function
|
|
46
|
+
`).join("")}function Ue(e,n=[],r){const i=Object.values(e).filter(s=>!!s).reduce((s,u)=>u.options?[...s,...u.options]:[...s],[]),t=new Map(n.map(s=>[s.id,s]));return i.forEach(s=>{r!=null&&r.includes(s.id)||t.set(s.id,s)}),[...t.values()]}function ve(e,n,r){const i=[];let t;return e.forEach(s=>{var u,a,o,m;r.includes(s.id)?t=((a=(u=s.values)==null?void 0:u.find(l=>n.includes(l==null?void 0:l.id)))==null?void 0:a.id)||((o=s.values[0])==null?void 0:o.id):t=(m=s.values[0])==null?void 0:m.id,i.push(t)}),i}const te=async(e,n)=>{const{anchors:r,optionsUIDs:i}=p.getConfig(),{optionsUIDs:t=i,anchors:s=r,preselectFirstOption:u,isBundle:a,skipTransform:o}=n??{};return!a&&t?await ke(e,t,s,o):await Se(e,{preselectFirstOption:u,optionsUIDs:t},o)},Ae=e=>{const n=Ie(),r=e(n);L.emit("pdp/valid",r)},Ie=()=>{var e;return((e=L._lastEvent["pdp/valid"])==null?void 0:e.payload)??null};export{Qe as a,He as b,p as c,Se as d,ke as e,se as f,Ke as g,te as h,K as i,Ae as j,Ie as k,$e as l,we as p,je as r,Le as s,X as t};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { FunctionComponent } from 'preact';
|
|
2
|
-
import { HTMLAttributes } from 'preact/compat';
|
|
1
|
+
import { FunctionComponent, VNode } from 'preact';
|
|
2
|
+
import { HTMLAttributes, JSX } from 'preact/compat';
|
|
3
|
+
import { ImageNodeRenderProps } from '../../../@adobe-commerce/elsie/src/components';
|
|
3
4
|
|
|
4
5
|
declare const supportedTypes: string[];
|
|
5
6
|
type OptionValue = {
|
|
@@ -34,6 +35,7 @@ export interface SwatchesProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
34
35
|
[id: string]: string;
|
|
35
36
|
}) => void;
|
|
36
37
|
selectedUIDs?: string[];
|
|
38
|
+
imageSwatchNode?: VNode | ((props: ImageNodeRenderProps) => JSX.Element);
|
|
37
39
|
}
|
|
38
40
|
export declare const Swatches: FunctionComponent<SwatchesProps>;
|
|
39
41
|
export {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsxs as a,jsx as i}from"@dropins/tools/preact-jsx-runtime.js";import{useState as n,useEffect as b}from"@dropins/tools/preact-compat.js";import{classes as h}from"@dropins/tools/lib.js";import{events as l}from"@dropins/tools/event-bus.js";import{i as P,t as S}from"../chunks/date.js";import{g as x}from"../chunks/getFetchedProductData.js";import{useText as L}from"@dropins/tools/i18n.js";import{c as j}from"../chunks/isProductConfigurationValid.js";import"../fragments.js";import"@dropins/tools/fetch-graphql.js";const I=({initialData:c=null,children:N,...r})=>{var s;const m=L("PDP.Product.Details.label").label,{defaultLocale:f="en-US"}=j.getConfig(),[u,p]=n(f),[o,d]=n(c);return b(()=>{const e=l.on("pdp/data",d),t=l.on("locale",p);return()=>{e==null||e.off(),t==null||t.off()}},[]),o?a("div",{...r,className:h(["pdp-attributes",r.className]),children:[m,i("ul",{children:(s=o==null?void 0:o.attributes)==null?void 0:s.map(({label:e,value:t},g)=>{const D=P(t)?S(t,u):t.toString();return a("li",{children:[e,": ",i("span",{dangerouslySetInnerHTML:{__html:D}})]},g)})})]}):null};I.getInitialData=x;export{I as ProductAttributes,I as default};
|
|
3
|
+
import{jsxs as a,jsx as i}from"@dropins/tools/preact-jsx-runtime.js";import{useState as n,useEffect as b}from"@dropins/tools/preact-compat.js";import{classes as h}from"@dropins/tools/lib.js";import{events as l}from"@dropins/tools/event-bus.js";import{i as P,t as S}from"../chunks/date.js";import{g as x}from"../chunks/getFetchedProductData.js";import{useText as L}from"@dropins/tools/i18n.js";import{c as j}from"../chunks/isProductConfigurationValid.js";import"../fragments.js";import"@dropins/tools/fetch-graphql.js";import"../chunks/getProductConfigurationValues.js";const I=({initialData:c=null,children:N,...r})=>{var s;const m=L("PDP.Product.Details.label").label,{defaultLocale:f="en-US"}=j.getConfig(),[u,p]=n(f),[o,d]=n(c);return b(()=>{const e=l.on("pdp/data",d),t=l.on("locale",p);return()=>{e==null||e.off(),t==null||t.off()}},[]),o?a("div",{...r,className:h(["pdp-attributes",r.className]),children:[m,i("ul",{children:(s=o==null?void 0:o.attributes)==null?void 0:s.map(({label:e,value:t},g)=>{const D=P(t)?S(t,u):t.toString();return a("li",{children:[e,": ",i("span",{dangerouslySetInnerHTML:{__html:D}})]},g)})})]}):null};I.getInitialData=x;export{I as ProductAttributes,I as default};
|
|
@@ -4,16 +4,19 @@ import { ButtonProps } from '../../../@adobe-commerce/elsie/src/components';
|
|
|
4
4
|
import { ProductModel } from '../../data/models';
|
|
5
5
|
|
|
6
6
|
type IconType = keyof typeof import('@adobe-commerce/elsie/icons');
|
|
7
|
+
/** @deprecated This type is part of the deprecated ProductDetails component. */
|
|
7
8
|
export type Values = {
|
|
8
9
|
sku: string;
|
|
9
10
|
quantity: number;
|
|
10
11
|
optionsUIDs?: string[];
|
|
11
12
|
};
|
|
13
|
+
/** @deprecated This type is part of the deprecated ProductDetails component. */
|
|
12
14
|
type DefaultSlotContext = {
|
|
13
15
|
data: ProductModel | null;
|
|
14
16
|
values: Values;
|
|
15
17
|
valid: boolean;
|
|
16
18
|
};
|
|
19
|
+
/** @deprecated This type is part of the deprecated ProductDetails component. */
|
|
17
20
|
export type CarouselConfig = {
|
|
18
21
|
controls?: {
|
|
19
22
|
desktop?: 'thumbnailsRow' | 'thumbnailsColumn' | 'dots' | null;
|
|
@@ -30,9 +33,11 @@ export type CarouselConfig = {
|
|
|
30
33
|
imageParams?: ResolveImageUrlOptions;
|
|
31
34
|
thumbnailParams?: ResolveImageUrlOptions;
|
|
32
35
|
};
|
|
36
|
+
/** @deprecated This type is part of the deprecated ProductDetails component. */
|
|
33
37
|
export type OptionsConfig = {
|
|
34
38
|
anchorOptions?: string[];
|
|
35
39
|
};
|
|
40
|
+
/** @deprecated This interface is part of the deprecated ProductDetails component. */
|
|
36
41
|
export interface ProductDetailsProps extends HTMLAttributes<HTMLDivElement> {
|
|
37
42
|
sku: string;
|
|
38
43
|
productData?: ProductModel;
|
|
@@ -78,6 +83,10 @@ export interface ProductDetailsProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
78
83
|
closeButton?: boolean;
|
|
79
84
|
disableDropdownPreselection?: boolean;
|
|
80
85
|
}
|
|
86
|
+
/**
|
|
87
|
+
* @deprecated This container has been deprecated and will be removed in a future release.
|
|
88
|
+
* Please use the different composable containers to build your product details page.xs
|
|
89
|
+
*/
|
|
81
90
|
export declare const ProductDetails: Container<ProductDetailsProps, ProductModel | null>;
|
|
82
91
|
export {};
|
|
83
92
|
//# sourceMappingURL=ProductDetails.d.ts.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as e,jsxs as w,Fragment as Dt}from"@dropins/tools/preact-jsx-runtime.js";import{useState as R,Children as ut,useEffect as $,useCallback as tt,useMemo as wt}from"@dropins/tools/preact-compat.js";import{VComponent as u,classes as D,Slot as A,toLanguageTag as bt}from"@dropins/tools/lib.js";import{Incrementer as Ut,Image as At,Button as Pt,Icon as dt,Breadcrumbs as lt}from"@dropins/tools/components.js";/* empty css */import{Z as Vt,C as et,O as kt}from"../chunks/Zoom.js";import{useText as U}from"@dropins/tools/i18n.js";import{P as st}from"../chunks/PriceRange.js";import{S as Bt}from"../chunks/Swatches.js";import"@dropins/tools/preact.js";import{c as Nt,n as yt,h as ht,p as xt,o as St,t as Lt}from"../chunks/isProductConfigurationValid.js";import{events as W}from"@dropins/tools/event-bus.js";import{i as qt,t as Mt}from"../chunks/date.js";import"../fragments.js";import"@dropins/tools/fetch-graphql.js";const Rt=({title:o,breadcrumbs:S,galleryContent:y,infoContent:N,productContent:I,sku:O,outOfStock:V,shortDescription:x,description:r,attributes:nt,images:c,options:a,price:b,specialPrice:X,className:Q,children:it,quantity:Y,actions:L,carouselConfig:n,zoomType:f="overlay",closeButton:g=!0,...rt})=>{var P,j,Z,z,K,E,m,J,G;const pt=U("PDP.Product.RegularPrice.label").label,ct=U("PDP.Product.SpecialPrice.label").label,k=U("PDP.Product.OutOfStock.label").label,B=U("PDP.Product.Image.label").label,[F,C]=R(null),t=c!=null&&c.length?c.map((H,s)=>{var M;const q=((M=o==null?void 0:o.props)==null?void 0:M.children)&&(B==null?void 0:B.replace("{product}",o.props.children.toString()).replace("{key}",String(s+1)).replace("{total}",String(c.length)));return f==="zoom"?e(Vt,{closeButton:g,children:e(u,{node:H,loading:s===0?"eager":"lazy",alt:q},s)}):e(u,{node:H,loading:s===0?"eager":"lazy",alt:q,onClick:()=>C(s)},s)}):e("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0}),T=(P=n==null?void 0:n.thumbnails)!=null&&P.length?n.thumbnails.map((H,s)=>{var q;return e(u,{node:H,loading:(n==null?void 0:n.thumbnailsLoadingMode)||"lazy",alt:((q=o==null?void 0:o.props)==null?void 0:q.children)&&(B==null?void 0:B.replace("{product}",o.props.children.toString()).replace("{key}",String(s+1)).replace("{total}",String(c.length)))},s)}):e("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0});return w("div",{...rt,className:D(["pdp-product",Q]),children:[S&&e(u,{node:S,className:"pdp-product__breadcrumbs"}),w("div",{className:"pdp-product__column-container pdp-product__gallery-column",children:[e("div",{className:"pdp-product__column-body",children:(j=n==null?void 0:n.controls)!=null&&j.desktop?e(et,{className:"pdp-product__overlay__carousel",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?n.controls.desktop:"dots",arrowsOnMainImage:n==null?void 0:n.arrowsOnMainImage,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,peak:((Z=n==null?void 0:n.thumbnails)==null?void 0:Z.length)>1&&((z=n==null?void 0:n.peak)==null?void 0:z.desktop)||!1,gap:(n==null?void 0:n.gap)||null,width:"100%",height:"100%",defaultIndex:F||0,thumbnails:T,children:t}):e(Tt,{className:"pdp-product__images",gap:"small",children:t})}),y&&e(u,{node:y,className:"pdp-product__gallery-content"})]}),w("div",{className:"pdp-product__column-container pdp-product__content-column",children:[w("div",{className:"pdp-product__column-body",children:[w("div",{className:"pdp-product__header",children:[o&&e(u,{node:o,className:"pdp-product__title"}),O&&e(u,{node:O,className:"pdp-product__sku"})]}),w("div",{className:"pdp-product__prices",children:[X&&e(u,{node:X,className:D(["pdp-product__price-special","pdp-product__price"]),"aria-label":ct,role:"text"}),b&&e(u,{node:b,className:D(["pdp-product__price-regular","pdp-product__price--grey"]),"aria-label":pt,role:"text"})]}),(K=n==null?void 0:n.controls)!=null&&K.mobile&&((E=n==null?void 0:n.controls)==null?void 0:E.mobile)==="thumbnailsRow"?e(et,{className:"pdp-product__images pdp-product__images--carousel pdp-product__images--carousel--thumbnails",width:"100%",height:"auto",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"thumbnailsRow":null,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,peak:((m=n==null?void 0:n.thumbnails)==null?void 0:m.length)>1&&((J=n==null?void 0:n.peak)==null?void 0:J.mobile)||!1,gap:(n==null?void 0:n.gap)||null,thumbnails:T,children:t}):e(et,{className:"pdp-product__images pdp-product__images--carousel",peak:((G=n==null?void 0:n.peak)==null?void 0:G.mobile)&&(c==null?void 0:c.length)>1,gap:(n==null?void 0:n.gap)||null,width:"100%",height:"auto",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"dots":null,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,children:t}),w("div",{className:D(["pdp-product__actions",["pdp-product__actions--out-of-stock",V]]),children:[V&&e("div",{className:"pdp-product__out-of-stock__text",children:k}),a&&e(u,{node:a,className:D(["pdp-product__options"])}),Y&&e("div",{className:"pdp-product__quantity",children:e(u,{node:Y})}),L&&e(u,{node:L,className:D(["pdp-product__buttons"])})]}),x&&e(u,{node:x,className:D(["pdp-product__short_description"])}),r&&e(u,{node:r,className:D(["pdp-product__description"])}),nt?e("div",{className:"pdp-product__attributes",children:nt}):null]}),N&&e(u,{node:N,className:"pdp-product__info-content"})]}),I&&e(u,{node:I,className:"pdp-product__content"}),F===null?null:e(kt,{className:"pdp-product__overlay",onClose:()=>C(null),centered:!0,children:e(et,{className:"pdp-product__overlay__carousel",arrows:(c==null?void 0:c.length)>1,width:"100%",height:"100%",defaultIndex:F||0,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"dots":null,isZoomed:!0,children:t})})]})},Tt=({children:o,gap:S=null,className:y,style:N,...I})=>{const O=ut.count(o);return e("div",{...I,className:D(["pdp-gallery-grid",y]),style:{"--gap":S?`var(--spacing-${S})`:"0px",...N},children:ut.map(o,(V,x)=>e("div",{className:"pdp-gallery-grid__item",children:e(u,{node:V,loading:x===0?"eager":"lazy"},V.props.src)},O+x))})},jt=({sku:o,hideSku:S,hideQuantity:y,hideShortDescription:N,hideDescription:I,hideAttributes:O,hideURLParams:V,hideSelectedOptionValue:x,slots:r,children:nt,initialData:c,carousel:a,optionsConfig:b,useACDL:X,onAddToCart:Q,zoomType:it,closeButton:Y=!0,disableDropdownPreselection:L,...n})=>{var at,ot,mt,_t;const f=U("PDP.Product.AddToCart.label").label,g=U("PDP.Product.UpdateInCart.label").label,rt=U("PDP.Product.Incrementer.label").label,pt=U("PDP.Product.Details.label").label,ct=U("PDP.Swatches.ChooseOption.label").label,[k,B]=R(Nt.getConfig().defaultLocale||"en-US"),[F,C]=R(),[t=null,T]=R(c),[P,j]=R(()=>{const p=yt()||{};let d=1;const l=p.quantity;if(l){const i=parseInt(l,10);!isNaN(i)&&Number.isInteger(i)&&i>0&&(d=i)}const h={sku:o,quantity:d};return t!=null&&t.optionUIDs&&(h.optionsUIDs=t.optionUIDs),h}),[Z,z]=R(()=>{var p,d;return!(t!=null&&t.options&&((p=t==null?void 0:t.options)==null?void 0:p.length)>0&&((d=t==null?void 0:t.optionUIDs)==null?void 0:d.length)!==(t==null?void 0:t.options.length))}),[K,E]=R(!1),m={data:t,values:P,valid:Z};function J(p){return p==null?void 0:p.some(d=>(d==null?void 0:d.typename)==="ProductViewOptionValueProduct")}$(()=>{const p=W.on("pdp/data",l=>{l&&(T(l),j(h=>({...h,sku:l.sku,optionsUIDs:l.optionUIDs})))}),d=W.on("pdp/setValues",l=>{j(h=>({...h,...l}))});return()=>{d==null||d.off(),p==null||p.off()}},[]),$(()=>{const d=(yt()||{}).itemUid;if(!d){E(!1);return}const l=W.on("cart/data",h=>{const i=h==null?void 0:h.items;if(i&&Array.isArray(i)){const _=i.some(v=>v.uid===d);E(_)}else E(!1)});return()=>{l==null||l.off()}},[]),$(()=>{const p=W.on("locale",d=>{d!==k&&(B(d),ht(o,{preselectFirstOption:!L,anchors:b==null?void 0:b.anchorOptions}).then(T))});return()=>{p==null||p.off()}},[L,k,b==null?void 0:b.anchorOptions,o]),$(()=>{X&&c&&Object.keys(c).length>0&&xt(c)},[c]);const G=tt(p=>{j(d=>({...d,...p}))},[]);$(()=>{W.emit("pdp/values",P)},[JSON.stringify(P)]);const H=tt(async p=>{var h,i;let d=Object.entries(p).filter(([_,v])=>v.label!==ct).map(([_,v])=>p[_].value).filter(_=>_!==void 0);!V&&(t!=null&&t.options)&&!J(t.options)&&St({optionsUIDs:d.join(",")}),G({optionsUIDs:d}),z((d==null?void 0:d.length)===((h=t==null?void 0:t.options)==null?void 0:h.length));const l=await ht(o,{anchors:b==null?void 0:b.anchorOptions,isBundle:t==null?void 0:t.isBundle,optionsUIDs:d,preselectFirstOption:!L});T(l),(i=b==null?void 0:b.anchorOptions)!=null&&i.length&&s(l,d)},[o]),s=tt((p,d)=>{var i;const l=(p==null?void 0:p.optionUIDs)??[];d.every(_=>l.includes(_))||(C(p==null?void 0:p.options),G({optionsUIDs:l}),z((l==null?void 0:l.length)===((i=p==null?void 0:p.options)==null?void 0:i.length)))},[o]),q=tt(p=>{Object.keys(p).length!==0&&z(!1)},[]),M=wt(()=>{var p;return(p=t==null?void 0:t.attributes)==null?void 0:p.map(({label:d,value:l},h)=>{const i=qt(l)?Mt(l,k):l.toString();return w("li",{children:[d,": ",e("span",{dangerouslySetInnerHTML:{__html:i}})]},h)})},[t==null?void 0:t.attributes,k]),It=!y&&(t!=null&&t.inStock)?e(A,{name:"Quantity",slot:r==null?void 0:r.Quantity,context:{...m},children:e(Ut,{name:"quantity",defaultValue:P.quantity.toString(),value:P.quantity.toString(),min:1,"aria-label":rt,className:"pdp-product__quantity",onValue:p=>{const d=Number(p);G({quantity:d}),!V&&(t!=null&&t.options)&&(J(t.options)||St({quantity:d}))}},"quantity")}):void 0,Ot=()=>{if(t!=null&&t.options)return e(A,{name:"Options",slot:r==null?void 0:r.Options,context:{...m},children:e(Bt,{selectedUIDs:P.optionsUIDs,options:t.options,defaultOptions:P.optionsUIDs,selectionsToUpdate:F,hideSelectedValue:x,disablePreselections:L,onValues:H,onErrors:q})})};return e("div",{...n,children:e(Rt,{title:e(A,{name:"Title",slot:r==null?void 0:r.Title,context:{...m},children:t==null?void 0:t.name}),sku:S?void 0:e(A,{name:"SKU",slot:r==null?void 0:r.SKU,context:{...m},children:t==null?void 0:t.sku}),options:Ot(),breadcrumbs:(r==null?void 0:r.Breadcrumbs)&&e(A,{name:"Breadcrumbs",slot:r==null?void 0:r.Breadcrumbs,context:{...m,setSeparator(p){this._registerMethod((...d)=>{const l=p(...d),h=l&&e(dt,{source:l});this._setProps(i=>({...i,separator:h,children:[e(lt,{separator:h,categories:i.categories})]}))})},appendLink(p){this._registerMethod((...d)=>{const{text:l,...h}=p(...d),i=e("a",{...h,children:l});this._setProps(_=>{const v=[..._.categories||[],i];return{..._,categories:v,children:[e(lt,{separator:_.separator,categories:v})]}})})},appendHTMLElement(p){this._registerMethod((...d)=>{const l=p(...d),h=this._htmlElementToVNode(l);this._setProps(i=>{const _=[...i.categories||[],h];return{...i,categories:_,children:[e(lt,{separator:i.separator,categories:_})]}})})}}}),quantity:It,actions:e(A,{name:"Actions",slot:r==null?void 0:r.Actions,context:{...m,appendButton(p){this._registerMethod((...d)=>{const l=p(...d);if(!l)return;const{text:h,icon:i,..._}=l,v=e(Pt,{type:"button",..._,icon:i&&e(dt,{source:i}),children:h});this._setProps(vt=>({children:[...vt.children||[],v]}))})}},children:!(r!=null&&r.Actions)&&e(Pt,{size:"medium",type:"submit",icon:e(dt,{source:"Cart"}),disabled:!(t!=null&&t.inStock)||!Z,"aria-label":K?g:f,onClick:()=>Q==null?void 0:Q(P),children:K?g:f})}),shortDescription:N?void 0:e(A,{name:"ShortDescription",slot:r==null?void 0:r.ShortDescription,context:{...m},children:e("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.shortDescription)??""}})}),description:I?void 0:e(A,{name:"Description",slot:r==null?void 0:r.Description,context:{...m},children:e("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.description)??""}})}),images:((at=t==null?void 0:t.images)==null?void 0:at.map(({label:p,url:d})=>{var l,h;return e(At,{title:p,alt:p,src:d,width:((l=a==null?void 0:a.imageParams)==null?void 0:l.width)??960,height:((h=a==null?void 0:a.imageParams)==null?void 0:h.height)??1191,params:(a==null?void 0:a.imageParams)??{width:960}},d)}))??[],specialPrice:(ot=t==null?void 0:t.prices)!=null&&ot.visible?e(A,{name:"SpecialPrice",slot:r==null?void 0:r.SpecialPrice,context:{...m},children:e(st,{...t.prices.final,locale:bt(k)})}):void 0,price:(mt=t==null?void 0:t.prices)!=null&&mt.visible&&t.prices.regular&&t.prices.final.amount!==(t==null?void 0:t.prices.regular.amount)?e(A,{name:"RegularPrice",slot:r==null?void 0:r.RegularPrice,context:{...m},children:e(st,{...t.prices.regular,locale:bt(k)})}):void 0,zoomType:it,closeButton:Y,carouselConfig:{...a,thumbnails:a&&Object.keys(a).length?((_t=t==null?void 0:t.images)==null?void 0:_t.map(({label:p,url:d})=>{var l,h;return e(At,{title:p,alt:p,src:d,width:((l=a==null?void 0:a.thumbnailParams)==null?void 0:l.width)??200,height:((h=a==null?void 0:a.thumbnailParams)==null?void 0:h.height)??248,params:(a==null?void 0:a.thumbnailParams)??{width:200}},d)}))??[]:[]},outOfStock:!(t!=null&&t.inStock),attributes:O?void 0:e(A,{name:"Attributes",slot:r==null?void 0:r.Attributes,context:{...m},children:M!=null&&M.length?w(Dt,{children:[pt,e("ul",{children:M})]}):null}),galleryContent:(r==null?void 0:r.GalleryContent)&&e(A,{name:"GalleryContent",slot:r.GalleryContent,context:{...m}}),infoContent:(r==null?void 0:r.InfoContent)&&e(A,{name:"InfoContent",slot:r.InfoContent,context:{...m}}),productContent:(r==null?void 0:r.Content)&&e(A,{name:"Content",slot:r.Content,context:{...m}})})})};jt.getInitialData=async function({sku:o,disableDropdownPreselection:S=!1,optionsConfig:y}){var I,O;const N=(O=(I=Nt.getConfig().models)==null?void 0:I.ProductDetails)==null?void 0:O.initialData;return N?Lt(N):ht(o,{preselectFirstOption:!S,anchors:y==null?void 0:y.anchorOptions})};export{jt as ProductDetails,jt as default};
|
|
3
|
+
import{jsx as e,jsxs as V,Fragment as Nt}from"@dropins/tools/preact-jsx-runtime.js";import{useState as z,Children as ot,useEffect as f,useCallback as g,useMemo as vt}from"@dropins/tools/preact-compat.js";import{VComponent as o,classes as s,Slot as A,toLanguageTag as ut}from"@dropins/tools/lib.js";import{Incrementer as Ot,Image as bt,Button as At,Icon as dt,Breadcrumbs as lt}from"@dropins/tools/components.js";/* empty css */import{Z as It,C,O as Dt}from"../chunks/Zoom.js";import{useText as B}from"@dropins/tools/i18n.js";import{P as Pt}from"../chunks/PriceRange.js";import{S as wt}from"../chunks/Swatches.js";import"@dropins/tools/preact.js";import{c as St,h as ht,p as st,l as Vt,t as kt}from"../chunks/isProductConfigurationValid.js";import{events as tt}from"@dropins/tools/event-bus.js";import{i as Ut,t as Bt}from"../chunks/date.js";import"../fragments.js";import"@dropins/tools/fetch-graphql.js";import"../chunks/getProductConfigurationValues.js";const xt=({title:a,breadcrumbs:N,galleryContent:y,infoContent:v,productContent:O,sku:I,outOfStock:x,shortDescription:L,description:r,attributes:et,images:c,options:h,price:u,specialPrice:Z,className:G,children:it,quantity:K,actions:M,carouselConfig:n,zoomType:J="overlay",closeButton:nt=!0,...rt})=>{var q,F,E,m,$,j,W,X,Y;const pt=B("PDP.Product.RegularPrice.label").label,k=B("PDP.Product.SpecialPrice.label").label,ct=B("PDP.Product.OutOfStock.label").label,U=B("PDP.Product.Image.label").label,[H,t]=z(null),D=c!=null&&c.length?c.map((w,S)=>{var Q;const R=((Q=a==null?void 0:a.props)==null?void 0:Q.children)&&(U==null?void 0:U.replace("{product}",a.props.children.toString()).replace("{key}",String(S+1)).replace("{total}",String(c.length)));return J==="zoom"?e(It,{closeButton:nt,children:e(o,{node:w,loading:S===0?"eager":"lazy",alt:R},S)}):e(o,{node:w,loading:S===0?"eager":"lazy",alt:R,onClick:()=>t(S)},S)}):e("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0}),P=(q=n==null?void 0:n.thumbnails)!=null&&q.length?n.thumbnails.map((w,S)=>{var R;return e(o,{node:w,loading:(n==null?void 0:n.thumbnailsLoadingMode)||"lazy",alt:((R=a==null?void 0:a.props)==null?void 0:R.children)&&(U==null?void 0:U.replace("{product}",a.props.children.toString()).replace("{key}",String(S+1)).replace("{total}",String(c.length)))},S)}):e("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0});return V("div",{...rt,className:s(["pdp-product",G]),children:[N&&e(o,{node:N,className:"pdp-product__breadcrumbs"}),V("div",{className:"pdp-product__column-container pdp-product__gallery-column",children:[e("div",{className:"pdp-product__column-body",children:(F=n==null?void 0:n.controls)!=null&&F.desktop?e(C,{className:"pdp-product__overlay__carousel",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?n.controls.desktop:"dots",arrowsOnMainImage:n==null?void 0:n.arrowsOnMainImage,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,peak:((E=n==null?void 0:n.thumbnails)==null?void 0:E.length)>1&&((m=n==null?void 0:n.peak)==null?void 0:m.desktop)||!1,gap:(n==null?void 0:n.gap)||null,width:"100%",height:"100%",defaultIndex:H||0,thumbnails:P,children:D}):e(Lt,{className:"pdp-product__images",gap:"small",children:D})}),y&&e(o,{node:y,className:"pdp-product__gallery-content"})]}),V("div",{className:"pdp-product__column-container pdp-product__content-column",children:[V("div",{className:"pdp-product__column-body",children:[V("div",{className:"pdp-product__header",children:[a&&e(o,{node:a,className:"pdp-product__title"}),I&&e(o,{node:I,className:"pdp-product__sku"})]}),V("div",{className:"pdp-product__prices",children:[Z&&e(o,{node:Z,className:s(["pdp-product__price-special","pdp-product__price"]),"aria-label":k,role:"text"}),u&&e(o,{node:u,className:s(["pdp-product__price-regular","pdp-product__price--grey"]),"aria-label":pt,role:"text"})]}),($=n==null?void 0:n.controls)!=null&&$.mobile&&((j=n==null?void 0:n.controls)==null?void 0:j.mobile)==="thumbnailsRow"?e(C,{className:"pdp-product__images pdp-product__images--carousel pdp-product__images--carousel--thumbnails",width:"100%",height:"auto",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"thumbnailsRow":null,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,peak:((W=n==null?void 0:n.thumbnails)==null?void 0:W.length)>1&&((X=n==null?void 0:n.peak)==null?void 0:X.mobile)||!1,gap:(n==null?void 0:n.gap)||null,thumbnails:P,children:D}):e(C,{className:"pdp-product__images pdp-product__images--carousel",peak:((Y=n==null?void 0:n.peak)==null?void 0:Y.mobile)&&(c==null?void 0:c.length)>1,gap:(n==null?void 0:n.gap)||null,width:"100%",height:"auto",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"dots":null,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,children:D}),V("div",{className:s(["pdp-product__actions",["pdp-product__actions--out-of-stock",x]]),children:[x&&e("div",{className:"pdp-product__out-of-stock__text",children:ct}),h&&e(o,{node:h,className:s(["pdp-product__options"])}),K&&e("div",{className:"pdp-product__quantity",children:e(o,{node:K})}),M&&e(o,{node:M,className:s(["pdp-product__buttons"])})]}),L&&e(o,{node:L,className:s(["pdp-product__short_description"])}),r&&e(o,{node:r,className:s(["pdp-product__description"])}),et?e("div",{className:"pdp-product__attributes",children:et}):null]}),v&&e(o,{node:v,className:"pdp-product__info-content"})]}),O&&e(o,{node:O,className:"pdp-product__content"}),H===null?null:e(Dt,{className:"pdp-product__overlay",onClose:()=>t(null),centered:!0,children:e(C,{className:"pdp-product__overlay__carousel",arrows:(c==null?void 0:c.length)>1,width:"100%",height:"100%",defaultIndex:H||0,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"dots":null,isZoomed:!0,children:D})})]})},Lt=({children:a,gap:N=null,className:y,style:v,...O})=>{const I=ot.count(a);return e("div",{...O,className:s(["pdp-gallery-grid",y]),style:{"--gap":N?`var(--spacing-${N})`:"0px",...v},children:ot.map(a,(x,L)=>e("div",{className:"pdp-gallery-grid__item",children:e(o,{node:x,loading:L===0?"eager":"lazy"},x.props.src)},I+L))})},Mt=({sku:a,hideSku:N,hideQuantity:y,hideShortDescription:v,hideDescription:O,hideAttributes:I,hideURLParams:x,hideSelectedOptionValue:L,slots:r,children:et,initialData:c,carousel:h,optionsConfig:u,useACDL:Z,onAddToCart:G,zoomType:it,closeButton:K=!0,disableDropdownPreselection:M,...n})=>{var Q,at,_t,mt;const J=B("PDP.Product.AddToCart.label").label,nt=B("PDP.Product.Incrementer.label").label,rt=B("PDP.Product.Details.label").label,pt=B("PDP.Swatches.ChooseOption.label").label,[k,ct]=z(St.getConfig().defaultLocale||"en-US"),[U,H]=z(),[t=null,D]=z(c),[P,q]=z(()=>{const p={sku:a,quantity:1};return t!=null&&t.optionUIDs&&(p.optionsUIDs=t.optionUIDs),p}),[F,E]=z(()=>{var p,d;return!(t!=null&&t.options&&((p=t==null?void 0:t.options)==null?void 0:p.length)>0&&((d=t==null?void 0:t.optionUIDs)==null?void 0:d.length)!==(t==null?void 0:t.options.length))}),m={data:t,values:P,valid:F};function $(p){return p==null?void 0:p.some(d=>(d==null?void 0:d.typename)==="ProductViewOptionValueProduct")}f(()=>{const p=tt.on("pdp/data",l=>{D(l),q(i=>({...i,sku:l.sku,optionsUIDs:l.optionUIDs}))}),d=tt.on("pdp/setValues",l=>{q(i=>({...i,...l}))});return()=>{d==null||d.off(),p==null||p.off()}},[]),f(()=>{const p=tt.on("locale",d=>{d!==k&&(ct(d),ht(a,{preselectFirstOption:!M,anchors:u==null?void 0:u.anchorOptions}).then(D))});return()=>{p==null||p.off()}},[M,k,u==null?void 0:u.anchorOptions,a]),f(()=>{Z&&c&&Object.keys(c).length>0&&st(c)},[c]);const j=g(p=>{q(d=>({...d,...p}))},[]);f(()=>{tt.emit("pdp/values",P)},[JSON.stringify(P)]);const W=g(async p=>{var i,_;let d=Object.entries(p).filter(([b,T])=>T.label!==pt).map(([b,T])=>p[b].value).filter(b=>b!==void 0);!x&&(t!=null&&t.options)&&!$(t.options)&&Vt({optionsUIDs:d.join(",")}),j({optionsUIDs:d}),E((d==null?void 0:d.length)===((i=t==null?void 0:t.options)==null?void 0:i.length));const l=await ht(a,{anchors:u==null?void 0:u.anchorOptions,isBundle:t==null?void 0:t.isBundle,optionsUIDs:d,preselectFirstOption:!M});D(l),(_=u==null?void 0:u.anchorOptions)!=null&&_.length&&X(l,d)},[a]),X=g((p,d)=>{var _;const l=(p==null?void 0:p.optionUIDs)??[];d.every(b=>l.includes(b))||(H(p==null?void 0:p.options),j({optionsUIDs:l}),E((l==null?void 0:l.length)===((_=p==null?void 0:p.options)==null?void 0:_.length)))},[a]),Y=g(p=>{Object.keys(p).length!==0&&E(!1)},[]),w=vt(()=>{var p;return(p=t==null?void 0:t.attributes)==null?void 0:p.map(({label:d,value:l},i)=>{const _=Ut(l)?Bt(l,k):l.toString();return V("li",{children:[d,": ",e("span",{dangerouslySetInnerHTML:{__html:_}})]},i)})},[t==null?void 0:t.attributes,k]),S=!y&&(t!=null&&t.inStock)?e(A,{name:"Quantity",slot:r==null?void 0:r.Quantity,context:{...m},children:e(Ot,{name:"quantity",defaultValue:P.quantity.toString(),value:P.quantity.toString(),min:1,"aria-label":nt,className:"pdp-product__quantity",onValue:p=>{j({quantity:Number(p)})}},"quantity")}):void 0,R=()=>{if(t!=null&&t.options)return e(A,{name:"Options",slot:r==null?void 0:r.Options,context:{...m},children:e(wt,{selectedUIDs:P.optionsUIDs,options:t.options,defaultOptions:P.optionsUIDs,selectionsToUpdate:U,hideSelectedValue:L,disablePreselections:M,onValues:W,onErrors:Y})})};return e("div",{...n,children:e(xt,{title:e(A,{name:"Title",slot:r==null?void 0:r.Title,context:{...m},children:t==null?void 0:t.name}),sku:N?void 0:e(A,{name:"SKU",slot:r==null?void 0:r.SKU,context:{...m},children:t==null?void 0:t.sku}),options:R(),breadcrumbs:(r==null?void 0:r.Breadcrumbs)&&e(A,{name:"Breadcrumbs",slot:r==null?void 0:r.Breadcrumbs,context:{...m,setSeparator(p){this._registerMethod((...d)=>{const l=p(...d),i=l&&e(dt,{source:l});this._setProps(_=>({..._,separator:i,children:[e(lt,{separator:i,categories:_.categories})]}))})},appendLink(p){this._registerMethod((...d)=>{const{text:l,...i}=p(...d),_=e("a",{...i,children:l});this._setProps(b=>{const T=[...b.categories||[],_];return{...b,categories:T,children:[e(lt,{separator:b.separator,categories:T})]}})})},appendHTMLElement(p){this._registerMethod((...d)=>{const l=p(...d),i=this._htmlElementToVNode(l);this._setProps(_=>{const b=[..._.categories||[],i];return{..._,categories:b,children:[e(lt,{separator:_.separator,categories:b})]}})})}}}),quantity:S,actions:e(A,{name:"Actions",slot:r==null?void 0:r.Actions,context:{...m,appendButton(p){this._registerMethod((...d)=>{const l=p(...d);if(!l)return;const{text:i,icon:_,...b}=l,T=e(At,{type:"button",...b,icon:_&&e(dt,{source:_}),children:i});this._setProps(yt=>({children:[...yt.children||[],T]}))})}},children:!(r!=null&&r.Actions)&&e(At,{size:"medium",type:"submit",icon:e(dt,{source:"Cart"}),disabled:!(t!=null&&t.inStock)||!F,"aria-label":J,onClick:()=>G==null?void 0:G(P),children:J})}),shortDescription:v?void 0:e(A,{name:"ShortDescription",slot:r==null?void 0:r.ShortDescription,context:{...m},children:e("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.shortDescription)??""}})}),description:O?void 0:e(A,{name:"Description",slot:r==null?void 0:r.Description,context:{...m},children:e("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.description)??""}})}),images:((Q=t==null?void 0:t.images)==null?void 0:Q.map(({label:p,url:d})=>{var l,i;return e(bt,{title:p,alt:p,src:d,width:((l=h==null?void 0:h.imageParams)==null?void 0:l.width)??960,height:((i=h==null?void 0:h.imageParams)==null?void 0:i.height)??1191,params:(h==null?void 0:h.imageParams)??{width:960}},d)}))??[],specialPrice:(at=t==null?void 0:t.prices)!=null&&at.visible?e(A,{name:"SpecialPrice",slot:r==null?void 0:r.SpecialPrice,context:{...m},children:e(Pt,{...t.prices.final,locale:ut(k)})}):void 0,price:(_t=t==null?void 0:t.prices)!=null&&_t.visible&&t.prices.regular&&t.prices.final.amount!==(t==null?void 0:t.prices.regular.amount)?e(A,{name:"RegularPrice",slot:r==null?void 0:r.RegularPrice,context:{...m},children:e(Pt,{...t.prices.regular,locale:ut(k)})}):void 0,zoomType:it,closeButton:K,carouselConfig:{...h,thumbnails:h&&Object.keys(h).length?((mt=t==null?void 0:t.images)==null?void 0:mt.map(({label:p,url:d})=>{var l,i;return e(bt,{title:p,alt:p,src:d,width:((l=h==null?void 0:h.thumbnailParams)==null?void 0:l.width)??200,height:((i=h==null?void 0:h.thumbnailParams)==null?void 0:i.height)??248,params:(h==null?void 0:h.thumbnailParams)??{width:200}},d)}))??[]:[]},outOfStock:!(t!=null&&t.inStock),attributes:I?void 0:e(A,{name:"Attributes",slot:r==null?void 0:r.Attributes,context:{...m},children:w!=null&&w.length?V(Nt,{children:[rt,e("ul",{children:w})]}):null}),galleryContent:(r==null?void 0:r.GalleryContent)&&e(A,{name:"GalleryContent",slot:r.GalleryContent,context:{...m}}),infoContent:(r==null?void 0:r.InfoContent)&&e(A,{name:"InfoContent",slot:r.InfoContent,context:{...m}}),productContent:(r==null?void 0:r.Content)&&e(A,{name:"Content",slot:r.Content,context:{...m}})})})};Mt.getInitialData=async function({sku:a,disableDropdownPreselection:N=!1,optionsConfig:y}){var O,I;const v=(I=(O=St.getConfig().models)==null?void 0:O.ProductDetails)==null?void 0:I.initialData;return v?kt(v):ht(a,{preselectFirstOption:!N,anchors:y==null?void 0:y.anchorOptions})};export{Mt as ProductDetails,Mt as default};
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { HTMLAttributes } from 'preact/compat';
|
|
2
|
-
import { Container, ResolveImageUrlOptions } from '../../../@adobe-commerce/elsie/src/lib';
|
|
2
|
+
import { Container, ResolveImageUrlOptions, SlotProps } from '../../../@adobe-commerce/elsie/src/lib';
|
|
3
|
+
import { ImageProps } from '../../../@adobe-commerce/elsie/src/components';
|
|
3
4
|
import { ProductModel } from '../../data/models/product-model';
|
|
4
5
|
|
|
6
|
+
type DefaultSlotContext = {
|
|
7
|
+
data: ProductModel | null;
|
|
8
|
+
};
|
|
5
9
|
export interface ProductGalleryProps extends Omit<HTMLAttributes<HTMLDivElement>, 'controls'> {
|
|
6
10
|
controls?: 'thumbnailsRow' | 'thumbnailsColumn' | 'dots' | null;
|
|
7
11
|
loop?: boolean;
|
|
@@ -14,6 +18,15 @@ export interface ProductGalleryProps extends Omit<HTMLAttributes<HTMLDivElement>
|
|
|
14
18
|
zoom?: {
|
|
15
19
|
closeButton: boolean;
|
|
16
20
|
} | boolean;
|
|
21
|
+
slots?: {
|
|
22
|
+
CarouselThumbnail?: SlotProps<DefaultSlotContext & {
|
|
23
|
+
defaultImageProps: ImageProps;
|
|
24
|
+
}>;
|
|
25
|
+
CarouselMainImage?: SlotProps<DefaultSlotContext & {
|
|
26
|
+
defaultImageProps: ImageProps;
|
|
27
|
+
}>;
|
|
28
|
+
};
|
|
17
29
|
}
|
|
18
30
|
export declare const ProductGallery: Container<ProductGalleryProps, ProductModel | null>;
|
|
31
|
+
export {};
|
|
19
32
|
//# sourceMappingURL=ProductGallery.d.ts.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as A,jsxs as
|
|
3
|
+
import{jsx as A,jsxs as z}from"@dropins/tools/preact-jsx-runtime.js";import{useState as O,useEffect as J,useMemo as w}from"@dropins/tools/preact-compat.js";import{Slot as R}from"@dropins/tools/lib.js";import{Image as Z}from"@dropins/tools/components.js";import{events as K}from"@dropins/tools/event-bus.js";import{g as U}from"../chunks/getFetchedProductData.js";import{Z as V,C as j,O as W}from"../chunks/Zoom.js";/* empty css */import{useText as X}from"@dropins/tools/i18n.js";import"@dropins/tools/preact.js";const Y=({initialData:v=null,controls:G="dots",loop:I=!0,peak:k=!1,gap:H=null,arrows:N=!0,arrowsOnMainImage:Q=!1,zoom:h=!1,imageParams:t,thumbnailParams:o,children:$,slots:l,...F})=>{var x,y,T,_,S,D;const c=X("PDP.Product.Image.label").label,[e,q]=O(v),[f,C]=O(null);J(()=>{const n=K.on("pdp/data",q);return()=>{n==null||n.off()}},[]);const g=w(()=>({data:e}),[e]),B=w(()=>{var n;return((n=e==null?void 0:e.images)==null?void 0:n.map(({label:p,url:r},i)=>{const d=({...u})=>{var M;const E={title:p,src:r,alt:c==null?void 0:c.replace("{product}",p).replace("{key}",String(i+1)).replace("{total}",String((M=e==null?void 0:e.images)==null?void 0:M.length)),width:(t==null?void 0:t.width)??960,height:(t==null?void 0:t.height)??1191,params:t??{width:960},loading:i===0?"eager":"lazy",...u};return A(R,{name:"CarouselMainImage",slot:l==null?void 0:l.CarouselMainImage,context:{...g,defaultImageProps:E},children:A(Z,{...E})})};return h?A(V,{closeButton:typeof h=="object"?h.closeButton:!1,children:A(d,{})},r):A(d,{onClick:()=>C(i)},r)}))??A("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product-gallery__images__placeholder",width:(t==null?void 0:t.width)??960,height:(t==null?void 0:t.height)??1191,"aria-hidden":!0},"pleaceholder")},[c,e==null?void 0:e.images,t,h,g,l==null?void 0:l.CarouselMainImage]),s=w(()=>{var n;return((n=e==null?void 0:e.images)==null?void 0:n.map(({label:p,url:r},i)=>{var u;const d={title:p,src:r,alt:c==null?void 0:c.replace("{product}",p).replace("{key}",String(i+1)).replace("{total}",String((u=e==null?void 0:e.images)==null?void 0:u.length)),width:(o==null?void 0:o.width)??200,height:(o==null?void 0:o.height)??248,params:o??{width:200},loading:"lazy"};return A(R,{name:"CarouselThumbnail",slotTag:"span",contentTag:"span",slot:l==null?void 0:l.CarouselThumbnail,context:{...g,defaultImageProps:d},children:A(Z,{...d})},r)}))??A("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product-gallery__thumbnail__placeholder",width:(o==null?void 0:o.width)??200,height:(o==null?void 0:o.height)??248,"aria-hidden":!0},"pleaceholder")},[c,e==null?void 0:e.images,o,g,l==null?void 0:l.CarouselThumbnail]);return e?z("div",{...F,children:[A(j,{arrows:!!((x=e==null?void 0:e.images)!=null&&x.length)&&N,arrowsOnMainImage:Q,controls:(y=e==null?void 0:e.images)!=null&&y.length?G:void 0,loop:I&&!!((T=e.images)!=null&&T.length),peak:!!((_=e==null?void 0:e.images)!=null&&_.length)&&k,gap:H,defaultIndex:f||0,thumbnails:s,children:B}),f===null?null:A(W,{onClose:()=>C(null),centered:!0,children:A(j,{arrows:!!((S=e==null?void 0:e.images)!=null&&S.length),width:"100%",height:"100%",defaultIndex:f,loop:I&&!!((D=e.images)!=null&&D.length),controls:"dots",isZoomed:!0,children:B})})]}):null};Y.getInitialData=U;export{Y as ProductGallery,Y as default};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { HTMLAttributes } from 'preact/compat';
|
|
2
2
|
import { Container, SlotProps } from '../../../@adobe-commerce/elsie/src/lib';
|
|
3
3
|
import { ProductModel } from '../../data/models';
|
|
4
|
+
import { ImageNodeRenderProps, ImageProps } from '../../../@adobe-commerce/elsie/src/components';
|
|
4
5
|
|
|
5
6
|
export interface ProductOptionsProps extends HTMLAttributes<HTMLDivElement> {
|
|
6
7
|
hideSelectedValue?: boolean;
|
|
@@ -9,10 +10,16 @@ export interface ProductOptionsProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
9
10
|
[id: string]: string;
|
|
10
11
|
}) => void;
|
|
11
12
|
slots?: {
|
|
12
|
-
Swatches
|
|
13
|
+
Swatches?: SlotProps<{
|
|
13
14
|
data: ProductModel | null;
|
|
14
15
|
optionsUIDs: string[];
|
|
15
16
|
}>;
|
|
17
|
+
SwatchImage?: SlotProps<{
|
|
18
|
+
data: ProductModel | null;
|
|
19
|
+
optionsUIDs: string[];
|
|
20
|
+
imageSwatchContext: ImageNodeRenderProps['imageSwatchContext'];
|
|
21
|
+
defaultImageProps: ImageProps;
|
|
22
|
+
}>;
|
|
16
23
|
};
|
|
17
24
|
}
|
|
18
25
|
export declare const ProductOptions: Container<ProductOptionsProps, {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as
|
|
3
|
+
import{jsx as g}from"@dropins/tools/preact-jsx-runtime.js";import{useState as d,useEffect as q,useCallback as k}from"@dropins/tools/preact-compat.js";import{Slot as j}from"@dropins/tools/lib.js";import{events as h}from"@dropins/tools/event-bus.js";import"@dropins/tools/components.js";/* empty css */import{S as z}from"../chunks/Swatches.js";import"@dropins/tools/preact.js";import{c as C,l as A,h as G,j as v,p as H}from"../chunks/isProductConfigurationValid.js";import{g as y,s as b}from"../chunks/getProductConfigurationValues.js";import{g as J}from"../chunks/getFetchedProductData.js";import"@dropins/tools/i18n.js";import"../fragments.js";import"@dropins/tools/fetch-graphql.js";const K=({initialData:c={data:null,optionsUIDs:[]},hideSelectedValue:m=!1,slots:o,onValues:p,onErrors:f,children:Q,...O})=>{var S;const[t,B]=d(c.data),[u,T]=d(c.optionsUIDs),[F,M]=d();q(()=>{const i=h.on("pdp/data",B),s=h.on("pdp/values",({optionsUIDs:a})=>{a&&T(a)});return()=>{i==null||i.off(),s==null||s.off()}},[]);const L=k(async i=>{var I,P,U,w;if(!(t!=null&&t.sku))return;const{persistURLParams:s,anchors:a,acdl:R}=C.getConfig()??{};let n=Object.keys(i).map(e=>i[e].value).filter(e=>e!==void 0);if(s&&!(t!=null&&t.isBundle)&&A({optionsUIDs:n.join(",")}),((P=(I=y())==null?void 0:I.optionsUIDs)==null?void 0:P.join("|"))!==(n==null?void 0:n.join("|"))){b(r=>({...r,optionsUIDs:n})),p==null||p(n);const e=await G(t.sku,{optionsUIDs:n??[],isBundle:t==null?void 0:t.isBundle,anchors:a});h.emit("pdp/data",e);let D=(n==null?void 0:n.length)===((U=e==null?void 0:e.options)==null?void 0:U.length);if(a!=null&&a.length){const r=(e==null?void 0:e.optionUIDs)??[];n.every(l=>r.includes(l))||(M(e==null?void 0:e.options),b(l=>({...l,optionsUIDs:r})),D=(r==null?void 0:r.length)===((w=e==null?void 0:e.options)==null?void 0:w.length))}v(()=>D),R&&e&&(e==null?void 0:e.variantSku)!==t.sku&&H(e)}},[t==null?void 0:t.isBundle,t==null?void 0:t.sku,p]),N=k(i=>{Object.keys(i).length!==0&&(v(()=>!1),f==null||f(i))},[f]);return!t||!t.options?null:g(j,{name:"Swatches",slot:o==null?void 0:o.Swatches,context:{data:t,optionsUIDs:u},children:g(z,{...O,options:t.options,selectedUIDs:u,defaultOptions:u,selectionsToUpdate:F,hideSelectedValue:m,disablePreselections:!((S=C.getConfig())!=null&&S.preselectFirstOption),onValues:L,onErrors:N,imageSwatchNode:o!=null&&o.SwatchImage?({imageSwatchContext:i,...s})=>g(j,{name:"SwatchImage",slot:o==null?void 0:o.SwatchImage,slotTag:"span",contentTag:"span",context:{data:t,optionsUIDs:u,defaultImageProps:s,imageSwatchContext:i}}):void 0})})};K.getInitialData=async function(){var o;const c=await J(),m=((o=y())==null?void 0:o.optionsUIDs)??[];return{data:c,optionsUIDs:m}};export{K as ProductOptions,K as default};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsxs as D,jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{useState as d,useEffect as L}from"@dropins/tools/preact-compat.js";import{classes as s,VComponent as f,toLanguageTag as g}from"@dropins/tools/lib.js";import"@dropins/tools/components.js";/* empty css */import{P}from"../chunks/PriceRange.js";import"@dropins/tools/preact.js";import{useText as b}from"@dropins/tools/i18n.js";import{events as _}from"@dropins/tools/event-bus.js";import{g as h}from"../chunks/getFetchedProductData.js";import{c as v}from"../chunks/isProductConfigurationValid.js";import"../fragments.js";import"@dropins/tools/fetch-graphql.js";const S=({className:t,price:i,specialPrice:
|
|
3
|
+
import{jsxs as D,jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{useState as d,useEffect as L}from"@dropins/tools/preact-compat.js";import{classes as s,VComponent as f,toLanguageTag as g}from"@dropins/tools/lib.js";import"@dropins/tools/components.js";/* empty css */import{P}from"../chunks/PriceRange.js";import"@dropins/tools/preact.js";import{useText as b}from"@dropins/tools/i18n.js";import{events as _}from"@dropins/tools/event-bus.js";import{g as h}from"../chunks/getFetchedProductData.js";import{c as v}from"../chunks/isProductConfigurationValid.js";import"../fragments.js";import"@dropins/tools/fetch-graphql.js";import"../chunks/getProductConfigurationValues.js";const S=({className:t,price:i,specialPrice:o,children:n,...e})=>{const c=b("PDP.Product.RegularPrice.label").label,a=b("PDP.Product.SpecialPrice.label").label;return D("div",{...e,className:s(["pdp-price",t]),children:[o&&r(f,{node:o,className:s(["pdp-price__amount-special","pdp-price__amount"]),"aria-label":a,role:"text"}),i&&r(f,{node:i,className:s(["pdp-price__amount-regular","pdp-price__amount--grey"]),"aria-label":c,role:"text"})]})},N=({initialData:t=null,children:i,...o})=>{var m,u;const{defaultLocale:n="en-US"}=v.getConfig(),[e,c]=d(t),[a,x]=d(n);return L(()=>{const l=_.on("pdp/data",c),p=_.on("locale",x);return()=>{l==null||l.off(),p==null||p.off()}},[]),e?r(S,{...o,specialPrice:(m=e.prices)!=null&&m.visible?r(P,{...e.prices.final,locale:g(a)}):void 0,price:(u=e.prices)!=null&&u.visible&&e.prices.regular&&e.prices.final.amount!==e.prices.regular.amount?r(P,{...e.prices.regular,locale:g(a)}):void 0}):null};N.getInitialData=h;export{N as ProductPrice,N as default};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as
|
|
3
|
+
import{jsx as d}from"@dropins/tools/preact-jsx-runtime.js";import{useState as s,useEffect as g}from"@dropins/tools/preact-compat.js";import{classes as P}from"@dropins/tools/lib.js";import{Incrementer as y}from"@dropins/tools/components.js";import{events as u}from"@dropins/tools/event-bus.js";import{s as I}from"../chunks/getProductConfigurationValues.js";import{g as b}from"../chunks/getFetchedProductData.js";import{useText as q}from"@dropins/tools/i18n.js";const D=({initialData:i=null,onValue:r,children:h,...n})=>{const m=q("PDP.Product.Incrementer.label").label,[c,l]=s(i),[o,f]=s(1);g(()=>{const e=u.on("pdp/data",l),t=u.on("pdp/values",({quantity:a})=>{f(a)},{eager:!0});return()=>{e==null||e.off(),t==null||t.off()}},[]);const p=e=>{const t=parseInt(e,10);I(a=>({...a,quantity:t})),r==null||r(t)};return c?d(y,{name:"quantity",defaultValue:o.toString(),value:o.toString(),min:1,"aria-label":m,onValue:p,...n,className:P(["pdp-quantity",n.className])},"quantity"):null};D.getInitialData=b;export{D as ProductQuantity,D as default};
|
package/i18n/en_US.json.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name": "@dropins/storefront-pdp", "version": "1.
|
|
1
|
+
{"name": "@dropins/storefront-pdp", "version": "1.2.0-beta2", "@dropins/tools": "~1.2.0", "license": "SEE LICENSE IN LICENSE.md"}
|
package/render.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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,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%;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)}.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";import"./chunks/getProductConfigurationValues.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})},w=new u(r(D,{}));export{w as render};
|