@dropins/storefront-pdp 0.5.0-beta3 → 0.5.0-beta4
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/containers/ProductDetails.js +1 -1
- package/package.json +1 -1
- package/render.js +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as j,jsx as n,Fragment as Ae}from"@dropins/tools/preact-jsx-runtime.js";import*as fe from"@dropins/tools/preact-compat.js";import{useState as G,Children as he,useRef as Le,useMemo as Ne,useEffect as C,useCallback as se}from"@dropins/tools/preact-compat.js";import{debounce as Oe,classes as $,VComponent as F,toLanguageTag as Me,Slot as Q}from"@dropins/tools/lib.js";import{Button as Pe,Icon as Se,Price as ge,Picker as qe,ColorSwatch as je,ImageSwatch as Xe,TextSwatch as Fe,Incrementer as Ge,Breadcrumbs as De,Image as xe}from"@dropins/tools/components.js";import{useText as X}from"@dropins/tools/i18n.js";import{cloneElement as Ye}from"@dropins/tools/preact.js";import{c as Te,d as Be}from"../chunks/getRefinedProduct.js";import{events as ke}from"@dropins/tools/event-bus.js";import{c as We}from"../chunks/initialize.js";import"@dropins/tools/fetch-graphql.js";const Ke=e=>fe.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},fe.createElement("path",{d:"M7.74512 9.87701L12.0001 14.132L16.2551 9.87701",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"square",strokeLinejoin:"round"})),Ve=e=>fe.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},fe.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 5.64001L5.62988 18.37",stroke:"currentColor"}),fe.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 18.37L5.62988 5.64001",stroke:"currentColor"})),Ze=24,Ee=16,ve=2,Qe="32";var ze=(e=>(e[e.small=16]="small",e[e.medium=24]="medium",e[e.large=64]="large",e))(ze||{});const ye=({show:e=1,scrollbar:i=!1,peak:m=!1,arrows:p=!1,controls:s="dots",arrowsOnMainImage:y=!1,loop:u=!1,gap:P=null,direction:a="horizontal",width:Y="100%",height:o="100%",defaultIndex:b=0,className:R,children:M,thumbnails:W=null,isZoomed:Z,...re})=>{const le=X("PDP.Carousel.label").label,r=X("PDP.Carousel.Slide.label").label,w=X("PDP.Carousel.Previous.label").label,_=X("PDP.Carousel.Next.label").label,L=X("PDP.Carousel.Controls.label").label,O=X("PDP.Carousel.Controls.Button.label").label,[v,g]=G(()=>$e(e)),d=Math.ceil(he.count(M)/v),E=m?Ze:0,t=P?ze[P]:0,V=he.count(M)%v,[S,ae]=G(u?J()?b-1:b+1:b),K=Le([]),[te,z]=G(0),[ce,ue]=G(0),_e=Ne(()=>he.toArray(W),[W]),U=Ne(()=>{const l=he.toArray(M).reduce((c,D,N)=>N%v===0?[...c,[D]]:[...c.slice(0,-1),[...c[c.length-1],D]],[]);return!u||l.length===1?l:u&&he.count(M)%v===0?[l[d-1]].concat(l).concat([l[0],l[1]]):[he.toArray(M).slice(-v)].concat(l).concat([l[0],l[1]])},[M,v,d,u]),oe=Le(null),ne=Le(null),k=s==="thumbnailsRow"||s==="thumbnailsColumn";C(()=>{const l=document.body,c=Oe(()=>{var x,ie;z(((x=oe.current)==null?void 0:x.offsetWidth)??0),ue(((ie=oe.current)==null?void 0:ie.offsetHeight)??0);const N=window.innerWidth,I=$e(e,N);I!==v&&g(I)},50),D=new ResizeObserver(c);return D.observe(l),()=>{D.unobserve(l)}},[v,e]);const ee=se(l=>{const c=u?l-1:l,D=K==null?void 0:K.current[0],N=(D==null?void 0:D.offsetWidth)+Ee,I=(D==null?void 0:D.offsetHeight)+Ee,x=ne.current,ie=s==="thumbnailsRow",we=s==="thumbnailsColumn",de=ie?x==null?void 0:x.offsetWidth:x==null?void 0:x.offsetHeight,q=ie?N:I;(ie||we)&&de&&(q*(c+1)>de&&(x.style.scrollBehavior="smooth",ie?x.scrollLeft=J()?x.scrollWidth-x.clientWidth-(c+ve)*q:(c+ve)*q:x.scrollTop=(c+ve)*q),(J()&&(ie?x.scrollLeft:x.scrollTop)<=-q*c||!J()&&(ie?x.scrollLeft:x.scrollTop)>q*c)&&(x.style.scrollBehavior="smooth",ie?x.scrollLeft=J()?-(c-ve)*q:(c-ve)*q:x.scrollTop=(c-ve)*q))},[s,u]);C(()=>{ee(S)},[S,ee]);const T=se((l,c,D)=>{k&&ee(l);const N=oe.current,I=E?N.offsetWidth-E:N.offsetWidth-E+t;if(!Array.from(N.querySelectorAll("[data-index]")).filter(de=>{const q=Number(de.getAttribute("data-index"));return!isNaN(q)&&q>-1})[l])return;if(D){const de=l===0?d:0,q=I*(d+(V||v)/v);if(J()){if(N.scrollLeft<=0&&N.scrollLeft>-(I-5)){T(1,!0);return}if(N.scrollLeft<I-q&&N.scrollLeft>=-q){T(d,!0);return}N.style.scrollBehavior="auto",N.scrollLeft=de===0?0:-q,T(de===0?1:d,!0)}else{if(N.scrollLeft>=0&&N.scrollLeft<I-5){T(1,!0);return}if(N.scrollLeft>q-I&&N.scrollLeft<=q){T(d,!0);return}N.style.scrollBehavior="auto",N.scrollLeft=de===0?0:q,T(de===0?1:d,!0);return}}const we=(N.offsetWidth-t)/v*U[l].length-E;N.style.scrollBehavior=c?"smooth":"auto",N.scrollLeft=J()?-(U[l].length===v?I*l:I*(l-1)-we):U[l].length===v?I*l:I*(l-1)+we},[t,d,E,v,V,U,ee,s]),pe=se(()=>{if(u){const c=S-1;T(c,!0,J()?S===d-1:S===1);return}const l=S<=0?0:S-1;T(l,!0)},[S,T,u]),me=se(()=>{const l=U.length-1;if(u){const D=S+1;T(D,!0,J()?S===0:S===d);return}const c=S>=l?l:S+1;T(c,!0)},[U.length,u,S,T,d]);C(()=>{const l=c=>{c.key==="ArrowLeft"&&(c.preventDefault(),J()?me():pe()),c.key==="ArrowRight"&&(c.preventDefault(),J()?pe():me())};return window.addEventListener("keydown",l),()=>{window.removeEventListener("keydown",l)}},[me,pe]),C(()=>{T(u?b+1:b,!1)},[b,T,u]);const be=Oe(()=>{const l=oe.current,c=E?l.offsetWidth-E:l.offsetWidth-E+t,D=Math.abs(l.scrollLeft)/c,N=Math.abs(Math.round(D)-D<1?Math.round(D):Math.ceil(D));if(k&&ee(N),u){const I=c*(d+(V||v)/v),x=J()?-l.scrollLeft:l.scrollLeft;if(Math.ceil(Math.abs(x))>=Math.ceil(I)-5){l.style.scrollBehavior="auto",l.scrollLeft=J()?-l.offsetWidth+(Math.ceil(x)-Math.ceil(I)-E):l.offsetWidth+(Math.ceil(x)-Math.ceil(I)-E);return}if(Math.abs(x)===0){l.style.scrollBehavior="auto",l.scrollLeft=J()?-(I-l.offsetWidth+E):I-l.offsetWidth+E;return}}S!==N&&ae(N)},100);C(()=>{const l=oe.current;return l==null||l.addEventListener("scroll",be),()=>{l==null||l.removeEventListener("scroll",be)}},[be]);const h=(l,c,D)=>n(Pe,{className:$([["pdp-carousel__button",!l],[`pdp-carousel__button--${c}`,!l],[`pdp-carousel__button--${s}`,l]]),style:{"--height":`${ce}px`},variant:"tertiary","aria-label":c==="next"?_:w,onClick:D,disabled:u?!1:c==="next"?S>=U.length-1:S<1,children:n(Se,{className:$([["pdp-carousel__button__icon",!l],[`pdp-carousel__button__icon--${c}`,!l],[`pdp-carousel__button__icon--${s}--${c}`,l]]),size:Qe,source:Ke})}),f=p&&U.length!=1&&h(k,"prev",pe),A=p&&U.length!=1&&h(k,"next",me),B=p&&U.length!=1&&h(!1,"prev",pe),H=p&&U.length!=1&&h(!1,"next",me);return j("div",{role:"region","aria-roledescription":le,className:$(["pdp-carousel",["pdp-carousel--main-image-controls",y],["pdp-carousel--arrows",p&&!k],[`pdp-carousel--${s}`,k],R]),style:{"--flex-carousel":s==="thumbnailsColumn"?"row-reverse":"column","--gap":k?"0":"var(--spacing-small)","--width":Y},...re,children:[n("div",{ref:oe,className:$(["pdp-carousel__wrapper",`pdp-carousel__wrapper--${a}`,["pdp-carousel__wrapper--scrollbar",i],["pdp-carousel__wrapper--peak",m]]),style:{"--total-width":s==="thumbnailsColumn"?"81.6%":"100%","--height":s==="thumbnailsColumn"?"auto":o,"--gap":P?`var(--spacing-${P})`:"0px","--per-page":v},tabIndex:0,children:U.map((l,c)=>{const D=l.length<v;return n("div",{role:"group","aria-roledescription":r,"data-index":c,className:$(["pdp-carousel__slide",`pdp-carousel__slide--${a}`,["pdp-carousel__slide--active",S===c],["pdp-carousel__slide--orphan",D]]),style:{"--length":l.length},children:l},c)})}),!k&&j(Ae,{children:[f,A]}),k&&y&&j(Ae,{children:[B,H]}),s&&U.length!=1&&j("div",{className:$([[`pdp-carousel__controls__container--${s}`,k],["pdp-carousel__controls__container--no-arrows",!p||y]]),style:{"--width":s==="thumbnailsRow"?`${te}px`:Y,"--height":`${ce}px`,"--nr-thumbnails":_e.length},children:[(k||Z)&&!y&&f,n("div",{ref:ne,className:$([[`pdp-carousel__controls__wrapper--${s}`,k],["pdp-carousel__controls__wrapper",k]]),children:n("div",{role:"group","aria-label":L,className:$(["pdp-carousel__controls",[`pdp-carousel__controls--${s}`,k]]),children:(u?U.slice(0,d):U).map((l,c)=>{const D=u?d:U.length,N=u?S-1===c:S===c;return k?j("label",{className:$(["pdp-carousel__thumbnail__container"]),ref:I=>{I&&(K.current[c]=I)},children:[n("input",{type:"radio",name:"carousel-thumbnails","aria-label":O.replace("{key}",String(c+1)).replace("{total}",String(D)),checked:N&&te!==0,onChange:()=>{T(u?c+1:c,!0)},...re,className:$(["pdp-carousel__thumbnail",["pdp-carousel__thumbnail--selected",N&&te!==0]])}),n("span",{className:$(["pdp-carousel__thumbnail__span"]),children:_e[c]})]},c):n("button",{"aria-label":O.replace("{key}",String(c+1)).replace("{total}",String(D)),onClick:()=>{T(u?c+1:c,!0)},className:$(["pdp-carousel__controls__button",["pdp-carousel__controls__button--active",N]])},c)})})}),(k||Z)&&!y&&A]})]})};function $e(e,i=0){if(typeof e=="number")return e;const{small:m,medium:p,large:s}=e,u=[{breakpoint:1024,value:s},{breakpoint:786,value:p},{breakpoint:0,value:m}].find(({breakpoint:P})=>i>P);return u?u.value:m}function J(){return document.documentElement.dir==="rtl"}const Je=({title:e,breadcrumbs:i,galleryContent:m,infoContent:p,productContent:s,sku:y,outOfStock:u,shortDescription:P,description:a,attributes:Y,images:o,options:b,price:R,specialPrice:M,className:W,children:Z,quantity:re,actions:le,carouselConfig:r,zoomType:w="overlay",closeButton:_=!0,...L})=>{var ae,K,te,z,ce,ue,_e,U,oe;const O=X("PDP.Product.RegularPrice.label").label,v=X("PDP.Product.SpecialPrice.label").label,g=X("PDP.Product.OutOfStock.label").label,d=X("PDP.Product.Image.label").label,[E,t]=G(null),V=o!=null&&o.length?o.map((ne,k)=>{var T;const ee=((T=e==null?void 0:e.props)==null?void 0:T.children)&&(d==null?void 0:d.replace("{product}",e.props.children.toString()).replace("{key}",String(k+1)).replace("{total}",String(o.length)));return w==="zoom"?n(at,{closeButton:_,children:n(F,{node:ne,loading:k===0?"eager":"lazy",alt:ee},k)}):n(F,{node:ne,loading:k===0?"eager":"lazy",alt:ee,onClick:()=>t(k)},k)}):n("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0}),S=(ae=r==null?void 0:r.thumbnails)!=null&&ae.length?r.thumbnails.map((ne,k)=>{var ee;return n(F,{node:ne,loading:(r==null?void 0:r.thumbnailsLoadingMode)||"lazy",alt:((ee=e==null?void 0:e.props)==null?void 0:ee.children)&&(d==null?void 0:d.replace("{product}",e.props.children.toString()).replace("{key}",String(k+1)).replace("{total}",String(o.length)))},k)}):n("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0});return j("div",{...L,className:$(["pdp-product",W]),children:[i&&n(F,{node:i,className:"pdp-product__breadcrumbs"}),j("div",{className:"pdp-product__column-container pdp-product__gallery-column",children:[n("div",{className:"pdp-product__column-body",children:(K=r==null?void 0:r.controls)!=null&&K.desktop?n(ye,{className:"pdp-product__overlay__carousel",arrows:(o==null?void 0:o.length)>1,controls:(o==null?void 0:o.length)>1?r.controls.desktop:"dots",arrowsOnMainImage:r==null?void 0:r.arrowsOnMainImage,loop:(r==null?void 0:r.loopable)&&(o==null?void 0:o.length)>1,peak:((te=r==null?void 0:r.thumbnails)==null?void 0:te.length)>1&&((z=r==null?void 0:r.peak)==null?void 0:z.desktop)||!1,gap:(r==null?void 0:r.gap)||null,width:"100%",height:"100%",defaultIndex:E||0,thumbnails:S,children:V}):n(Ce,{className:"pdp-product__images",gap:"small",children:V})}),m&&n(F,{node:m,className:"pdp-product__gallery-content"})]}),j("div",{className:"pdp-product__column-container pdp-product__content-column",children:[j("div",{className:"pdp-product__column-body",children:[j("div",{className:"pdp-product__header",children:[e&&n(F,{node:e,className:"pdp-product__title"}),y&&n(F,{node:y,className:"pdp-product__sku"})]}),j("div",{className:"pdp-product__prices",children:[M&&n(F,{node:M,className:$(["pdp-product__price-special","pdp-product__price"]),"aria-label":v,role:"text"}),R&&n(F,{node:R,className:$(["pdp-product__price-regular","pdp-product__price--grey"]),"aria-label":O,role:"text"})]}),(ce=r==null?void 0:r.controls)!=null&&ce.mobile&&((ue=r==null?void 0:r.controls)==null?void 0:ue.mobile)==="thumbnailsRow"?n(ye,{className:"pdp-product__images pdp-product__images--carousel pdp-product__images--carousel--thumbnails",width:"100%",height:"auto",arrows:(o==null?void 0:o.length)>1,controls:(o==null?void 0:o.length)>1?"thumbnailsRow":null,loop:(r==null?void 0:r.loopable)&&(o==null?void 0:o.length)>1,peak:((_e=r==null?void 0:r.thumbnails)==null?void 0:_e.length)>1&&((U=r==null?void 0:r.peak)==null?void 0:U.mobile)||!1,gap:(r==null?void 0:r.gap)||null,thumbnails:S,children:V}):n(ye,{className:"pdp-product__images pdp-product__images--carousel",peak:((oe=r==null?void 0:r.peak)==null?void 0:oe.mobile)&&(o==null?void 0:o.length)>1,gap:(r==null?void 0:r.gap)||null,width:"100%",height:"auto",arrows:(o==null?void 0:o.length)>1,controls:(o==null?void 0:o.length)>1?"dots":null,loop:(r==null?void 0:r.loopable)&&(o==null?void 0:o.length)>1,children:V}),j("div",{className:$(["pdp-product__actions",["pdp-product__actions--out-of-stock",u]]),children:[u&&n("div",{className:"pdp-product__out-of-stock__text",children:g}),b&&n(F,{node:b,className:$(["pdp-product__options"])}),re&&n("div",{className:"pdp-product__quantity",children:n(F,{node:re})}),le&&n(F,{node:le,className:$(["pdp-product__buttons"])})]}),P&&n(F,{node:P,className:$(["pdp-product__short_description"])}),a&&n(F,{node:a,className:$(["pdp-product__description"])}),Y?n("div",{className:"pdp-product__attributes",children:Y}):null]}),p&&n(F,{node:p,className:"pdp-product__info-content"})]}),s&&n(F,{node:s,className:"pdp-product__content"}),E===null?null:n(et,{className:"pdp-product__overlay",onClose:()=>t(null),centered:!0,children:n(ye,{className:"pdp-product__overlay__carousel",arrows:(o==null?void 0:o.length)>1,width:"100%",height:"100%",defaultIndex:E||0,loop:(r==null?void 0:r.loopable)&&(o==null?void 0:o.length)>1,controls:(o==null?void 0:o.length)>1?"dots":null,isZoomed:!0,children:V})})]})},Ce=({children:e,gap:i=null,className:m,style:p,...s})=>{const y=he.count(e);return n("div",{...s,className:$(["pdp-gallery-grid",m]),style:{"--gap":i?`var(--spacing-${i})`:"0px",...p},children:he.map(e,(u,P)=>n("div",{className:"pdp-gallery-grid__item",children:n(F,{node:u,loading:P===0?"eager":"lazy"},u.props.src)},y+P))})},Ie=({amount:e,currency:i,locale:m,variant:p,sale:s,minimumAmount:y,maximumAmount:u,className:P,...a})=>n(Ae,{children:e||y===u?n("div",{className:"pdp-price-range",...a,children:n(ge,{amount:e||y,currency:i,locale:m,variant:p,sale:s,className:P})}):j("div",{className:"pdp-price-range",...a,children:[n(ge,{amount:y,currency:i,locale:m,className:P}),n("span",{className:"pdp-price-range__label",children:"-"}),n(ge,{amount:u,currency:i,locale:m,className:P})]})}),et=({centered:e,onClose:i,className:m,children:p,...s})=>{const y=X("PDP.Overlay.Close.label").label,u=se(()=>{i==null||i()},[i]);return C(()=>{const P=a=>{a.key==="Escape"&&u()};return document.addEventListener("keydown",P),()=>{document.removeEventListener("keydown",P)}},[u]),C(()=>{const P=document.scrollingElement,a=P.style.overflow;return P.style.overflow="hidden",()=>{P.style.overflow=a}},[]),j("div",{...s,className:$(["pdp-overlay",["pdp-overlay--centered",e],m]),children:[n("div",{className:"pdp-overlay__content",children:p}),n(Pe,{"aria-label":y,variant:"tertiary",className:"pdp-overlay__close-button",onClick:u,icon:n(Ve,{})})]})},tt=["text","image","color","dropdown"],nt=e=>e.map(i=>({...i,text:i.label,disabled:!i.inStock}));function rt(e,i){return e.reduce((m,p)=>{const s=i==null?void 0:i.find(u=>u.items.find(P=>P.id===p));if(!s)return m;const y=s.items.find(u=>u.id===p);return{...m,[s.id]:{label:y.label,value:y.id}}},{})}const lt=({options:e,hideSelectedValue:i,disablePreselections:m,selectedUIDs:p,onValues:s,onErrors:y,defaultOptions:u,selectionsToUpdate:P,className:a,children:Y,...o})=>{const b=X("PDP.Swatches.Required.label").label,R=X("PDP.Swatches.ChooseOption.label").label,[M,W]=G(()=>e==null?void 0:e.reduce((w,_)=>{const{items:L}=_,O=L==null?void 0:L.find(g=>u==null?void 0:u.includes(g.id)),v=L==null?void 0:L.find(g=>g.selected);return O?{...w,[_.id]:{label:O.label,value:O.id}}:v?{...w,[_.id]:{label:v.label,value:v.id}}:w},{}));C(()=>{var r;if(p){const w=rt(p,e);if(JSON.stringify(w)===JSON.stringify(M))return;Z(Object.keys(w)[0],(r=w[Object.keys(w)[0]])==null?void 0:r.label,p[0])}},[p]),C(()=>{P==null||P.forEach(r=>{W(w=>{var O;const _=(O=r==null?void 0:r.items)==null?void 0:O.find(v=>v.selected);return _?{...w,[r.id]:{label:_==null?void 0:_.label,value:_==null?void 0:_.id}}:w})})},[P,W]),Ne(()=>{const r=e==null?void 0:e.reduce((w,_)=>{var O;let L=!1;return(O=_==null?void 0:_.items)==null||O.forEach(v=>{var d;((d=M[_.id])==null?void 0:d.value)===v.id&&(L=!0)}),_.required&&!L&&(w[_.id]=b),w},{});return y==null||y(r),r},[M]);const Z=se((r,w,_)=>{W(L=>{let O={...L,...r&&{[r]:{label:w,value:_}}};return w===R&&delete O[r],s==null||s(O,_),O})},[s]),re=(r,w)=>{var L;const _=((L=w.selectedOptions[0])==null?void 0:L.label)??"";Z(r,_,w.value)},le=se(({items:r,id:w,required:_,type:L,selected:O,label:v})=>(r==null?void 0:r.length)>0&&n("div",{className:$(["pdp-swatches__options"]),children:(L==null?void 0:L.toLowerCase())==="dropdown"?n(qe,{"aria-label":v,placeholder:m?R:void 0,handleSelect:g=>re(w,g.target),options:nt(r),value:O}):r==null?void 0:r.map(g=>{const d={key:g.id,id:g.id,name:w,value:g.value,label:g.label,groupAriaLabel:v,selected:O===g.id,outOfStock:!g.inStock,required:_===null?!0:_,onValue:()=>{Z(w,g.label,g.id)}};switch(L){case"text":return n(Fe,{...d,label:g.label});case"image":return n(Xe,{...d,src:g.value,alt:g.label});case"color":return n(je,{...d,size:"large",color:g.value});default:return console.warn(`Invalid swatch type ${L}`),null}})}),[Z]);return n("div",{...o,className:$(["pdp-swatches",a]),children:e==null?void 0:e.map(({type:r,label:w,id:_,multiple:L,required:O,items:v})=>{var g;return tt.includes(r)||console.warn(`Invalid swatch type ${r}`),L&&console.warn("Multiple selection swatches are not currently supported."),j("div",{id:`swatch-item-${_}`,"data-slot-key":`product-swatch--${_}`,className:"pdp-swatches__field",children:[n("div",{className:"pdp-swatches__field__label",children:M[_]?i?`${w}`:`${w}: ${M[_].label}`:w}),n(le,{id:_,type:r,required:O,items:v,label:w,selected:(g=M[_])==null?void 0:g.value})]},`swatch-item-${_}`)})})},at=({children:e,scale:i=2,closeButton:m=!0})=>{const[p,s]=G(!1),[y,u]=G("pdp-zoom"),[P,a]=G(!1),[Y,o]=G({x:0,y:0}),[b,R]=G({x:0,y:0}),[M,W]=G({x:0,y:0}),Z=d=>{!p||d.type!=="touchstart"||(o({x:d.touches[0].clientX,y:d.touches[0].clientY}),R({x:M.x,y:M.y}),a(!0))},re=d=>{var ce;if(!P||d.type!=="touchmove")return;const E=(ce=d.currentTarget)==null?void 0:ce.getBoundingClientRect(),t=(100-100/i)/2,V=d.touches[0].clientX-Y.x,S=d.touches[0].clientY-Y.y,ae=V*100/(E.width*i),K=S*100/(E.height*i),te=b.x+ae,z=b.y+K;W({x:Math.max(-t,Math.min(te,t))||0,y:Math.max(-t,Math.min(z,t))||0}),d.preventDefault()},le=d=>{var K;const E=(K=d.currentTarget)==null?void 0:K.getBoundingClientRect(),t=(100-100/i)/2;let V;if("touches"in d)V=d.touches[0];else if(d instanceof MouseEvent)V=d;else return;const S=t-(V.clientX-E.left)/E.width*100,ae=t-(V.clientY-E.top)/E.height*100;W({x:Math.max(-t,Math.min(S,t))||0,y:Math.max(-t,Math.min(ae,t))||0})},r=d=>{if(!P){if(p){if(m&&"touches"in d){Z(d);return}m||s(!1)}else s(!0),le(d);d.preventDefault()}},w=d=>{if(m&&"touches"in d){re(d);return}p&&le(d)},_=()=>{if(m){a(!1);return}s(!1)},L=d=>{s(!1),d.stopPropagation()},O=p?`scale(${i}) translateX(${M.x}%) translateY(${M.y}%)`:"none",v=X("PDP.Zoom.Close.label").label,g=Ye(he.only(e),{draggable:!1,style:{"--transform":O}});return C(()=>{u(p?`pdp-zoom ${m?"pdp-zoom--no-effects":"pdp-zoom--zoomed"}`:"pdp-zoom")},[p,m]),j("figure",{className:y,onClick:r,onMouseMove:w,onMouseLeave:_,onTouchStart:r,onTouchMove:w,onTouchEnd:_,children:[g,m&&p&&n(Pe,{"aria-label":v,variant:"tertiary",className:"pdp-zoom__close-button",icon:n(Ve,{}),onClick:L})]})};function ct(e,i="en_US"){if(!Ue(e))throw Error("Invalid date string");return e.split(" ")[1]||(e=`${e} 00:00:00`),new Date(e).toLocaleDateString(Me(i)).toString()}function Ue(e){if(![/^\d{4}-\d{2}-\d{2}$/,/^\d{1,2}\/\d{1,2}\/\d{4}$/,/^\d{2}\/\d{2}\/\d{4}$/,/^\d{4}\/\d{2}\/\d{2}$/,/^\d{1,2}\.\d{1,2}\.\d{4}$/,/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/].some(p=>p.test(e)))return!1;const m=new Date(e);return!isNaN(m.getTime())}function ot(e){const i=new URLSearchParams(window.location.search);Object.entries(e).forEach(([p,s])=>{s===null?i.delete(p):i.set(p,String(s))});let m=window.location.pathname;m+=`?${i.toString()}`,m+=window.location.hash,window.history.replaceState({},"",m)}function it(){const e=new URLSearchParams(window.location.search),i={};return e.forEach((m,p)=>{i[p]=m}),i}function st(e){var i,m,p,s,y,u,P,a,Y,o,b,R;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:void 0,pricing:{regularPrice:((m=(i=e==null?void 0:e.prices)==null?void 0:i.regular)==null?void 0:m.amount)||0,minimalPrice:(s=(p=e==null?void 0:e.prices)==null?void 0:p.final)==null?void 0:s.minimumAmount,maximalPrice:(u=(y=e==null?void 0:e.prices)==null?void 0:y.final)==null?void 0:u.maximumAmount,specialPrice:(a=(P=e==null?void 0:e.prices)==null?void 0:P.final)==null?void 0:a.amount,tierPricing:void 0,currencyCode:((o=(Y=e==null?void 0:e.prices)==null?void 0:Y.final)==null?void 0:o.currency)||"USD"},canonicalUrl:e==null?void 0:e.url,mainImageUrl:(R=(b=e==null?void 0:e.images)==null?void 0:b[0])==null?void 0:R.url}}const dt={PRODUCT_CONTEXT:"productContext"},ht={PRODUCT_PAGE_VIEW:"product-page-view"};function He(){return window.adobeDataLayer=window.adobeDataLayer||[],window.adobeDataLayer}function ut(e,i){const m=He();m.push({[e]:null}),m.push({[e]:i})}function pt(e,i){He().push(p=>{const s=p.getState?p.getState():{};p.push({event:e,eventInfo:{...s,...i}})})}function Re(e){const i=st(e);ut(dt.PRODUCT_CONTEXT,i),pt(ht.PRODUCT_PAGE_VIEW)}const mt=({sku:e,hideSku:i,hideQuantity:m,hideShortDescription:p,hideDescription:s,hideAttributes:y,hideURLParams:u,hideSelectedOptionValue:P,slots:a,children:Y,initialData:o,carousel:b,optionsConfig:R,useACDL:M,onAddToCart:W,zoomType:Z,closeButton:re=!0,disableDropdownPreselection:le,...r})=>{var T,pe,me,be;const w=X("PDP.Product.AddToCart.label").label,_=X("PDP.Product.Incrementer.label").label,L=X("PDP.Product.Details.label").label,O=X("PDP.Swatches.ChooseOption.label").label,[v,g]=G(We.getConfig().defaultLocale||"en-US"),[d,E]=G(),[t=null,V]=G(o),[S,ae]=G(()=>{const h={sku:e,quantity:1};return t!=null&&t.optionUIDs&&(h.optionsUIDs=t.optionUIDs),h}),[K,te]=G(()=>{var h,f;return!(t!=null&&t.options&&((h=t==null?void 0:t.options)==null?void 0:h.length)>0&&((f=t==null?void 0:t.optionUIDs)==null?void 0:f.length)!==(t==null?void 0:t.options.length))}),z={data:t,values:S,valid:K};function ce(h){return h==null?void 0:h.some(f=>(f==null?void 0:f.typename)==="ProductViewOptionValueProduct")}C(()=>{const h=ke.on("pdp/setValues",f=>{ae(A=>({...A,...f}))});return()=>{h==null||h.off()}},[]),C(()=>{const h=ke.on("locale",f=>{f!==v&&(g(f),Te(e).then(V))});return()=>{h==null||h.off()}},[v,e]),C(()=>{M&&o&&Object.keys(o).length>0&&Re(o)},[o]);const ue=se(h=>{ae(f=>({...f,...h}))},[]);C(()=>{ke.emit("pdp/values",S)},[JSON.stringify(S)]);const _e=se(h=>{var B,H;let f=Object.entries(h).filter(([l,c])=>c.label!==O).map(([l,c])=>h[l].value).filter(l=>l!==void 0);!u&&(t!=null&&t.options)&&!ce(t.options)&&ot({optionsUIDs:f.join(",")}),ue({optionsUIDs:f}),te((f==null?void 0:f.length)===((B=t==null?void 0:t.options)==null?void 0:B.length));const A=(H=t==null?void 0:t.options)==null?void 0:H.some(l=>ce([l]));Be(e,f,R==null?void 0:R.anchorOptions,A).then(l=>{var c;V(l),(c=R==null?void 0:R.anchorOptions)!=null&&c.length&&U(l,f),M&&(l==null?void 0:l.variantSku)!==e&&Re(l)})},[e]),U=se((h,f)=>{var H;const A=(h==null?void 0:h.optionUIDs)??[];f.every(l=>A.includes(l))||(E(h==null?void 0:h.options),ue({optionsUIDs:A}),te((A==null?void 0:A.length)===((H=h==null?void 0:h.options)==null?void 0:H.length)))},[e]),oe=se(h=>{Object.keys(h).length!==0&&te(!1)},[]),ne=Ne(()=>{var h;return(h=t==null?void 0:t.attributes)==null?void 0:h.map(({label:f,value:A},B)=>{const H=Ue(A)?ct(A,v):A.toString();return j("li",{children:[f,": ",n("span",{dangerouslySetInnerHTML:{__html:H}})]},B)})},[t==null?void 0:t.attributes,v]),k=!m&&(t!=null&&t.inStock)?n(Q,{name:"Quantity",slot:a==null?void 0:a.Quantity,context:{...z},children:n(Ge,{name:"quantity",defaultValue:S.quantity.toString(),value:S.quantity.toString(),min:1,"aria-label":_,className:"pdp-product__quantity",onValue:h=>{ue({quantity:Number(h)})}},"quantity")}):void 0,ee=()=>{if(t!=null&&t.options)return n(Q,{name:"Options",slot:a==null?void 0:a.Options,context:{...z},children:n(lt,{selectedUIDs:S.optionsUIDs,options:t.options,defaultOptions:S.optionsUIDs,selectionsToUpdate:d,hideSelectedValue:P,disablePreselections:le,onValues:_e,onErrors:oe})})};return n("div",{...r,children:n(Je,{title:n(Q,{name:"Title",slot:a==null?void 0:a.Title,context:{...z},children:t==null?void 0:t.name}),sku:i?void 0:n(Q,{name:"SKU",slot:a==null?void 0:a.SKU,context:{...z},children:t==null?void 0:t.sku}),options:ee(),breadcrumbs:(a==null?void 0:a.Breadcrumbs)&&n(Q,{name:"Breadcrumbs",slot:a==null?void 0:a.Breadcrumbs,context:{...z,setSeparator(h){this._registerMethod((...f)=>{const A=h(...f),B=A&&n(Se,{source:A});this._setProps(H=>({...H,separator:B,children:[n(De,{separator:B,categories:H.categories})]}))})},appendLink(h){this._registerMethod((...f)=>{const{text:A,...B}=h(...f),H=n("a",{...B,children:A});this._setProps(l=>{const c=[...l.categories||[],H];return{...l,categories:c,children:[n(De,{separator:l.separator,categories:c})]}})})},appendHTMLElement(h){this._registerMethod((...f)=>{const A=h(...f),B=this._htmlElementToVNode(A);this._setProps(H=>{const l=[...H.categories||[],B];return{...H,categories:l,children:[n(De,{separator:H.separator,categories:l})]}})})}}}),quantity:k,actions:n(Q,{name:"Actions",slot:a==null?void 0:a.Actions,context:{...z,appendButton(h){this._registerMethod((...f)=>{const A=h(...f);if(!A)return;const{text:B,icon:H,...l}=A,c=n(Pe,{type:"button",...l,icon:H&&n(Se,{source:H}),children:B});this._setProps(D=>({children:[...D.children||[],c]}))})}},children:!(a!=null&&a.Actions)&&n(Pe,{size:"medium",type:"submit",icon:n(Se,{source:"Cart"}),disabled:!(t!=null&&t.inStock)||!K,"aria-label":w,onClick:()=>W==null?void 0:W(S),children:w})}),shortDescription:p?void 0:n(Q,{name:"ShortDescription",slot:a==null?void 0:a.ShortDescription,context:{...z},children:n("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.shortDescription)??""}})}),description:s?void 0:n(Q,{name:"Description",slot:a==null?void 0:a.Description,context:{...z},children:n("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.description)??""}})}),images:((T=t==null?void 0:t.images)==null?void 0:T.map(({label:h,url:f})=>{var A,B;return n(xe,{title:h,alt:h,src:f,width:((A=b==null?void 0:b.imageParams)==null?void 0:A.width)??960,height:((B=b==null?void 0:b.imageParams)==null?void 0:B.height)??1191,params:(b==null?void 0:b.imageParams)??{width:960}},f)}))??[],specialPrice:(pe=t==null?void 0:t.prices)!=null&&pe.visible?n(Q,{name:"SpecialPrice",slot:a==null?void 0:a.SpecialPrice,context:{...z},children:n(Ie,{...t.prices.final,locale:Me(v)})}):void 0,price:(me=t==null?void 0:t.prices)!=null&&me.visible&&t.prices.regular&&t.prices.final.amount!==(t==null?void 0:t.prices.regular.amount)?n(Q,{name:"RegularPrice",slot:a==null?void 0:a.RegularPrice,context:{...z},children:n(Ie,{...t.prices.regular,locale:Me(v)})}):void 0,zoomType:Z,closeButton:re,carouselConfig:{...b,thumbnails:b&&Object.keys(b).length?((be=t==null?void 0:t.images)==null?void 0:be.map(({label:h,url:f})=>{var A,B;return n(xe,{title:h,alt:h,src:f,width:((A=b==null?void 0:b.thumbnailParams)==null?void 0:A.width)??200,height:((B=b==null?void 0:b.thumbnailParams)==null?void 0:B.height)??248,params:(b==null?void 0:b.thumbnailParams)??{width:200}},f)}))??[]:[]},outOfStock:!(t!=null&&t.inStock),attributes:y?void 0:n(Q,{name:"Attributes",slot:a==null?void 0:a.Attributes,context:{...z},children:ne!=null&&ne.length?j(Ae,{children:[L,n("ul",{children:ne})]}):null}),galleryContent:(a==null?void 0:a.GalleryContent)&&n(Q,{name:"GalleryContent",slot:a.GalleryContent,context:{...z}}),infoContent:(a==null?void 0:a.InfoContent)&&n(Q,{name:"InfoContent",slot:a.InfoContent,context:{...z}}),productContent:(a==null?void 0:a.Content)&&n(Q,{name:"Content",slot:a.Content,context:{...z}})})})};mt.getInitialData=async function({sku:e,optionsConfig:i}){var P,a,Y,o,b,R,M;function m(W){return W.some(Z=>Z.__typename==="ProductViewOptionValueProduct")}let p;const s=We.getConfig(),y=((P=it().optionsUIDs)==null?void 0:P.split(","))||((o=(Y=(a=s==null?void 0:s.models)==null?void 0:a.ProductDetails)==null?void 0:Y.initialData)==null?void 0:o.optionsUIDs),u=(R=(b=s==null?void 0:s.models)==null?void 0:b.ProductDetails)==null?void 0:R.initialData;return u&&Object.keys(u).length>0&&(p=(M=u.options)==null?void 0:M.some(W=>m(W==null?void 0:W.values))),y!=null&&y.length?await Be(e,y,i==null?void 0:i.anchorOptions,p):await Te(e)};export{mt as ProductDetails,mt as default};
|
|
1
|
+
import{jsxs as j,jsx as n,Fragment as Ae}from"@dropins/tools/preact-jsx-runtime.js";import*as fe from"@dropins/tools/preact-compat.js";import{useState as G,Children as he,useRef as Le,useMemo as Ne,useEffect as J,useCallback as se}from"@dropins/tools/preact-compat.js";import{debounce as xe,classes as $,VComponent as F,toLanguageTag as Me,Slot as Z}from"@dropins/tools/lib.js";import{Button as Pe,Icon as Se,Price as ge,Picker as qe,ColorSwatch as je,ImageSwatch as Xe,TextSwatch as Fe,Incrementer as Ge,Breadcrumbs as De,Image as Oe}from"@dropins/tools/components.js";import{useText as X}from"@dropins/tools/i18n.js";import{cloneElement as Ye}from"@dropins/tools/preact.js";import{c as Te,d as Be}from"../chunks/getRefinedProduct.js";import{events as ke}from"@dropins/tools/event-bus.js";import{c as We}from"../chunks/initialize.js";import"@dropins/tools/fetch-graphql.js";const Ke=e=>fe.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},fe.createElement("path",{d:"M7.74512 9.87701L12.0001 14.132L16.2551 9.87701",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"square",strokeLinejoin:"round"})),ze=e=>fe.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},fe.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 5.64001L5.62988 18.37",stroke:"currentColor"}),fe.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 18.37L5.62988 5.64001",stroke:"currentColor"})),Ze=24,Ee=16,ve=2,Qe="32";var Ue=(e=>(e[e.small=16]="small",e[e.medium=24]="medium",e[e.large=64]="large",e))(Ue||{});const ye=({show:e=1,scrollbar:s=!1,peak:m=!1,arrows:u=!1,controls:i="dots",arrowsOnMainImage:w=!1,loop:p=!1,gap:P=null,direction:a="horizontal",width:Y="100%",height:o="100%",defaultIndex:b=0,className:R,children:M,thumbnails:T=null,isZoomed:C,...re})=>{const le=X("PDP.Carousel.label").label,r=X("PDP.Carousel.Slide.label").label,y=X("PDP.Carousel.Previous.label").label,_=X("PDP.Carousel.Next.label").label,L=X("PDP.Carousel.Controls.label").label,x=X("PDP.Carousel.Controls.Button.label").label,[v,g]=G(()=>$e(e)),d=Math.ceil(he.count(M)/v),E=m?Ze:0,t=P?Ue[P]:0,z=he.count(M)%v,[S,ae]=G(p?Q()?b-1:b+1:b),K=Le([]),[te,U]=G(0),[ce,pe]=G(0),_e=Ne(()=>he.toArray(T),[T]),V=Ne(()=>{const l=he.toArray(M).reduce((c,D,N)=>N%v===0?[...c,[D]]:[...c.slice(0,-1),[...c[c.length-1],D]],[]);return!p||l.length===1?l:p&&he.count(M)%v===0?[l[d-1]].concat(l).concat([l[0],l[1]]):[he.toArray(M).slice(-v)].concat(l).concat([l[0],l[1]])},[M,v,d,p]),oe=Le(null),ne=Le(null),k=i==="thumbnailsRow"||i==="thumbnailsColumn";J(()=>{const l=document.body,c=xe(()=>{var O,ie;U(((O=oe.current)==null?void 0:O.offsetWidth)??0),pe(((ie=oe.current)==null?void 0:ie.offsetHeight)??0);const N=window.innerWidth,I=$e(e,N);I!==v&&g(I)},50),D=new ResizeObserver(c);return D.observe(l),()=>{D.unobserve(l)}},[v,e]);const ee=se(l=>{const c=p?l-1:l,D=K==null?void 0:K.current[0],N=(D==null?void 0:D.offsetWidth)+Ee,I=(D==null?void 0:D.offsetHeight)+Ee,O=ne.current,ie=i==="thumbnailsRow",we=i==="thumbnailsColumn",de=ie?O==null?void 0:O.offsetWidth:O==null?void 0:O.offsetHeight,q=ie?N:I;(ie||we)&&de&&(q*(c+1)>de&&(O.style.scrollBehavior="smooth",ie?O.scrollLeft=Q()?O.scrollWidth-O.clientWidth-(c+ve)*q:(c+ve)*q:O.scrollTop=(c+ve)*q),(Q()&&(ie?O.scrollLeft:O.scrollTop)<=-q*c||!Q()&&(ie?O.scrollLeft:O.scrollTop)>q*c)&&(O.style.scrollBehavior="smooth",ie?O.scrollLeft=Q()?-(c-ve)*q:(c-ve)*q:O.scrollTop=(c-ve)*q))},[i,p]);J(()=>{ee(S)},[S,ee]);const B=se((l,c,D)=>{k&&ee(l);const N=oe.current,I=E?N.offsetWidth-E:N.offsetWidth-E+t;if(!Array.from(N.querySelectorAll("[data-index]")).filter(de=>{const q=Number(de.getAttribute("data-index"));return!isNaN(q)&&q>-1})[l])return;if(D){const de=l===0?d:0,q=I*(d+(z||v)/v);if(Q()){if(N.scrollLeft<=0&&N.scrollLeft>-(I-5)){B(1,!0);return}if(N.scrollLeft<I-q&&N.scrollLeft>=-q){B(d,!0);return}N.style.scrollBehavior="auto",N.scrollLeft=de===0?0:-q,B(de===0?1:d,!0)}else{if(N.scrollLeft>=0&&N.scrollLeft<I-5){B(1,!0);return}if(N.scrollLeft>q-I&&N.scrollLeft<=q){B(d,!0);return}N.style.scrollBehavior="auto",N.scrollLeft=de===0?0:q,B(de===0?1:d,!0);return}}const we=(N.offsetWidth-t)/v*V[l].length-E;N.style.scrollBehavior=c?"smooth":"auto",N.scrollLeft=Q()?-(V[l].length===v?I*l:I*(l-1)-we):V[l].length===v?I*l:I*(l-1)+we},[t,d,E,v,z,V,ee,i]),ue=se(()=>{if(p){const c=S-1;B(c,!0,Q()?S===d-1:S===1);return}const l=S<=0?0:S-1;B(l,!0)},[S,B,p]),me=se(()=>{const l=V.length-1;if(p){const D=S+1;B(D,!0,Q()?S===0:S===d);return}const c=S>=l?l:S+1;B(c,!0)},[V.length,p,S,B,d]);J(()=>{const l=c=>{c.key==="ArrowLeft"&&(c.preventDefault(),Q()?me():ue()),c.key==="ArrowRight"&&(c.preventDefault(),Q()?ue():me())};return window.addEventListener("keydown",l),()=>{window.removeEventListener("keydown",l)}},[me,ue]),J(()=>{B(p?b+1:b,!1)},[b,B,p]);const be=xe(()=>{const l=oe.current,c=E?l.offsetWidth-E:l.offsetWidth-E+t,D=Math.abs(l.scrollLeft)/c,N=Math.abs(Math.round(D)-D<1?Math.round(D):Math.ceil(D));if(k&&ee(N),p){const I=c*(d+(z||v)/v),O=Q()?-l.scrollLeft:l.scrollLeft;if(Math.ceil(Math.abs(O))>=Math.ceil(I)-5){l.style.scrollBehavior="auto",l.scrollLeft=Q()?-l.offsetWidth+(Math.ceil(O)-Math.ceil(I)-E):l.offsetWidth+(Math.ceil(O)-Math.ceil(I)-E);return}if(Math.abs(O)===0){l.style.scrollBehavior="auto",l.scrollLeft=Q()?-(I-l.offsetWidth+E):I-l.offsetWidth+E;return}}S!==N&&ae(N)},100);J(()=>{const l=oe.current;return l==null||l.addEventListener("scroll",be),()=>{l==null||l.removeEventListener("scroll",be)}},[be]);const h=(l,c,D)=>n(Pe,{className:$([["pdp-carousel__button",!l],[`pdp-carousel__button--${c}`,!l],[`pdp-carousel__button--${i}`,l]]),style:{"--height":`${ce}px`},variant:"tertiary","aria-label":c==="next"?_:y,onClick:D,disabled:p?!1:c==="next"?S>=V.length-1:S<1,children:n(Se,{className:$([["pdp-carousel__button__icon",!l],[`pdp-carousel__button__icon--${c}`,!l],[`pdp-carousel__button__icon--${i}--${c}`,l]]),size:Qe,source:Ke})}),f=u&&V.length!=1&&h(k,"prev",ue),A=u&&V.length!=1&&h(k,"next",me),W=u&&V.length!=1&&h(!1,"prev",ue),H=u&&V.length!=1&&h(!1,"next",me);return j("div",{role:"region","aria-roledescription":le,className:$(["pdp-carousel",["pdp-carousel--main-image-controls",w],["pdp-carousel--arrows",u&&!k],[`pdp-carousel--${i}`,k],R]),style:{"--flex-carousel":i==="thumbnailsColumn"?"row-reverse":"column","--gap":k?"0":"var(--spacing-small)","--width":Y},...re,children:[n("div",{ref:oe,className:$(["pdp-carousel__wrapper",`pdp-carousel__wrapper--${a}`,["pdp-carousel__wrapper--scrollbar",s],["pdp-carousel__wrapper--peak",m]]),style:{"--total-width":i==="thumbnailsColumn"?"81.6%":"100%","--height":i==="thumbnailsColumn"?"auto":o,"--gap":P?`var(--spacing-${P})`:"0px","--per-page":v},tabIndex:0,children:V.map((l,c)=>{const D=l.length<v;return n("div",{role:"group","aria-roledescription":r,"data-index":c,className:$(["pdp-carousel__slide",`pdp-carousel__slide--${a}`,["pdp-carousel__slide--active",S===c],["pdp-carousel__slide--orphan",D]]),style:{"--length":l.length},children:l},c)})}),!k&&j(Ae,{children:[f,A]}),k&&w&&j(Ae,{children:[W,H]}),i&&V.length!=1&&j("div",{className:$([[`pdp-carousel__controls__container--${i}`,k],["pdp-carousel__controls__container--no-arrows",!u||w]]),style:{"--width":i==="thumbnailsRow"?`${te}px`:Y,"--height":`${ce}px`,"--nr-thumbnails":_e.length},children:[(k||C)&&!w&&f,n("div",{ref:ne,className:$([[`pdp-carousel__controls__wrapper--${i}`,k],["pdp-carousel__controls__wrapper",k]]),children:n("div",{role:"group","aria-label":L,className:$(["pdp-carousel__controls",[`pdp-carousel__controls--${i}`,k]]),children:(p?V.slice(0,d):V).map((l,c)=>{const D=p?d:V.length,N=p?S-1===c:S===c;return k?j("label",{className:$(["pdp-carousel__thumbnail__container"]),ref:I=>{I&&(K.current[c]=I)},children:[n("input",{type:"radio",name:"carousel-thumbnails","aria-label":x.replace("{key}",String(c+1)).replace("{total}",String(D)),checked:N&&te!==0,onChange:()=>{B(p?c+1:c,!0)},...re,className:$(["pdp-carousel__thumbnail",["pdp-carousel__thumbnail--selected",N&&te!==0]])}),n("span",{className:$(["pdp-carousel__thumbnail__span"]),children:_e[c]})]},c):n("button",{"aria-label":x.replace("{key}",String(c+1)).replace("{total}",String(D)),onClick:()=>{B(p?c+1:c,!0)},className:$(["pdp-carousel__controls__button",["pdp-carousel__controls__button--active",N]])},c)})})}),(k||C)&&!w&&A]})]})};function $e(e,s=0){if(typeof e=="number")return e;const{small:m,medium:u,large:i}=e,p=[{breakpoint:1024,value:i},{breakpoint:786,value:u},{breakpoint:0,value:m}].find(({breakpoint:P})=>s>P);return p?p.value:m}function Q(){return document.documentElement.dir==="rtl"}const Je=({title:e,breadcrumbs:s,galleryContent:m,infoContent:u,productContent:i,sku:w,outOfStock:p,shortDescription:P,description:a,attributes:Y,images:o,options:b,price:R,specialPrice:M,className:T,children:C,quantity:re,actions:le,carouselConfig:r,zoomType:y="overlay",closeButton:_=!0,...L})=>{var ae,K,te,U,ce,pe,_e,V,oe;const x=X("PDP.Product.RegularPrice.label").label,v=X("PDP.Product.SpecialPrice.label").label,g=X("PDP.Product.OutOfStock.label").label,d=X("PDP.Product.Image.label").label,[E,t]=G(null),z=o!=null&&o.length?o.map((ne,k)=>{var B;const ee=((B=e==null?void 0:e.props)==null?void 0:B.children)&&(d==null?void 0:d.replace("{product}",e.props.children.toString()).replace("{key}",String(k+1)).replace("{total}",String(o.length)));return y==="zoom"?n(at,{closeButton:_,children:n(F,{node:ne,loading:k===0?"eager":"lazy",alt:ee},k)}):n(F,{node:ne,loading:k===0?"eager":"lazy",alt:ee,onClick:()=>t(k)},k)}):n("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0}),S=(ae=r==null?void 0:r.thumbnails)!=null&&ae.length?r.thumbnails.map((ne,k)=>{var ee;return n(F,{node:ne,loading:(r==null?void 0:r.thumbnailsLoadingMode)||"lazy",alt:((ee=e==null?void 0:e.props)==null?void 0:ee.children)&&(d==null?void 0:d.replace("{product}",e.props.children.toString()).replace("{key}",String(k+1)).replace("{total}",String(o.length)))},k)}):n("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0});return j("div",{...L,className:$(["pdp-product",T]),children:[s&&n(F,{node:s,className:"pdp-product__breadcrumbs"}),j("div",{className:"pdp-product__column-container pdp-product__gallery-column",children:[n("div",{className:"pdp-product__column-body",children:(K=r==null?void 0:r.controls)!=null&&K.desktop?n(ye,{className:"pdp-product__overlay__carousel",arrows:(o==null?void 0:o.length)>1,controls:(o==null?void 0:o.length)>1?r.controls.desktop:"dots",arrowsOnMainImage:r==null?void 0:r.arrowsOnMainImage,loop:(r==null?void 0:r.loopable)&&(o==null?void 0:o.length)>1,peak:((te=r==null?void 0:r.thumbnails)==null?void 0:te.length)>1&&((U=r==null?void 0:r.peak)==null?void 0:U.desktop)||!1,gap:(r==null?void 0:r.gap)||null,width:"100%",height:"100%",defaultIndex:E||0,thumbnails:S,children:z}):n(Ce,{className:"pdp-product__images",gap:"small",children:z})}),m&&n(F,{node:m,className:"pdp-product__gallery-content"})]}),j("div",{className:"pdp-product__column-container pdp-product__content-column",children:[j("div",{className:"pdp-product__column-body",children:[j("div",{className:"pdp-product__header",children:[e&&n(F,{node:e,className:"pdp-product__title"}),w&&n(F,{node:w,className:"pdp-product__sku"})]}),j("div",{className:"pdp-product__prices",children:[M&&n(F,{node:M,className:$(["pdp-product__price-special","pdp-product__price"]),"aria-label":v,role:"text"}),R&&n(F,{node:R,className:$(["pdp-product__price-regular","pdp-product__price--grey"]),"aria-label":x,role:"text"})]}),(ce=r==null?void 0:r.controls)!=null&&ce.mobile&&((pe=r==null?void 0:r.controls)==null?void 0:pe.mobile)==="thumbnailsRow"?n(ye,{className:"pdp-product__images pdp-product__images--carousel pdp-product__images--carousel--thumbnails",width:"100%",height:"auto",arrows:(o==null?void 0:o.length)>1,controls:(o==null?void 0:o.length)>1?"thumbnailsRow":null,loop:(r==null?void 0:r.loopable)&&(o==null?void 0:o.length)>1,peak:((_e=r==null?void 0:r.thumbnails)==null?void 0:_e.length)>1&&((V=r==null?void 0:r.peak)==null?void 0:V.mobile)||!1,gap:(r==null?void 0:r.gap)||null,thumbnails:S,children:z}):n(ye,{className:"pdp-product__images pdp-product__images--carousel",peak:((oe=r==null?void 0:r.peak)==null?void 0:oe.mobile)&&(o==null?void 0:o.length)>1,gap:(r==null?void 0:r.gap)||null,width:"100%",height:"auto",arrows:(o==null?void 0:o.length)>1,controls:(o==null?void 0:o.length)>1?"dots":null,loop:(r==null?void 0:r.loopable)&&(o==null?void 0:o.length)>1,children:z}),j("div",{className:$(["pdp-product__actions",["pdp-product__actions--out-of-stock",p]]),children:[p&&n("div",{className:"pdp-product__out-of-stock__text",children:g}),b&&n(F,{node:b,className:$(["pdp-product__options"])}),re&&n("div",{className:"pdp-product__quantity",children:n(F,{node:re})}),le&&n(F,{node:le,className:$(["pdp-product__buttons"])})]}),P&&n(F,{node:P,className:$(["pdp-product__short_description"])}),a&&n(F,{node:a,className:$(["pdp-product__description"])}),Y?n("div",{className:"pdp-product__attributes",children:Y}):null]}),u&&n(F,{node:u,className:"pdp-product__info-content"})]}),i&&n(F,{node:i,className:"pdp-product__content"}),E===null?null:n(et,{className:"pdp-product__overlay",onClose:()=>t(null),centered:!0,children:n(ye,{className:"pdp-product__overlay__carousel",arrows:(o==null?void 0:o.length)>1,width:"100%",height:"100%",defaultIndex:E||0,loop:(r==null?void 0:r.loopable)&&(o==null?void 0:o.length)>1,controls:(o==null?void 0:o.length)>1?"dots":null,isZoomed:!0,children:z})})]})},Ce=({children:e,gap:s=null,className:m,style:u,...i})=>{const w=he.count(e);return n("div",{...i,className:$(["pdp-gallery-grid",m]),style:{"--gap":s?`var(--spacing-${s})`:"0px",...u},children:he.map(e,(p,P)=>n("div",{className:"pdp-gallery-grid__item",children:n(F,{node:p,loading:P===0?"eager":"lazy"},p.props.src)},w+P))})},Ie=({amount:e,currency:s,locale:m,variant:u,sale:i,minimumAmount:w,maximumAmount:p,className:P,...a})=>n(Ae,{children:e||w===p?n("div",{className:"pdp-price-range",...a,children:n(ge,{amount:e||w,currency:s,locale:m,variant:u,sale:i,className:P})}):j("div",{className:"pdp-price-range",...a,children:[n(ge,{amount:w,currency:s,locale:m,className:P}),n("span",{className:"pdp-price-range__label",children:"-"}),n(ge,{amount:p,currency:s,locale:m,className:P})]})}),et=({centered:e,onClose:s,className:m,children:u,...i})=>{const w=X("PDP.Overlay.Close.label").label,p=se(()=>{s==null||s()},[s]);return J(()=>{const P=a=>{a.key==="Escape"&&p()};return document.addEventListener("keydown",P),()=>{document.removeEventListener("keydown",P)}},[p]),J(()=>{const P=document.scrollingElement,a=P.style.overflow;return P.style.overflow="hidden",()=>{P.style.overflow=a}},[]),j("div",{...i,className:$(["pdp-overlay",["pdp-overlay--centered",e],m]),children:[n("div",{className:"pdp-overlay__content",children:u}),n(Pe,{"aria-label":w,variant:"tertiary",className:"pdp-overlay__close-button",onClick:p,icon:n(ze,{})})]})},tt=["text","image","color","dropdown"],nt=e=>e.map(s=>({...s,text:s.label,disabled:!s.inStock}));function rt(e,s){return e.reduce((m,u)=>{const i=s==null?void 0:s.find(p=>p.items.find(P=>P.id===u));if(!i)return m;const w=i.items.find(p=>p.id===u);return{...m,[i.id]:{label:w.label,value:w.id}}},{})}const lt=({options:e,hideSelectedValue:s,disablePreselections:m,selectedUIDs:u,onValues:i,onErrors:w,defaultOptions:p,selectionsToUpdate:P,className:a,children:Y,...o})=>{const b=X("PDP.Swatches.Required.label").label,R=X("PDP.Swatches.ChooseOption.label").label,[M,T]=G(()=>e==null?void 0:e.reduce((y,_)=>{const{items:L}=_,x=L==null?void 0:L.find(g=>p==null?void 0:p.includes(g.id)),v=L==null?void 0:L.find(g=>g.selected);return x?{...y,[_.id]:{label:x.label,value:x.id}}:v?{...y,[_.id]:{label:v.label,value:v.id}}:y},{}));J(()=>{if(u){const r=rt(u,e);if(JSON.stringify(r)===JSON.stringify(M))return;T(y=>{let _={...y,...r};return i==null||i(_),_})}},[u]),J(()=>{P==null||P.forEach(r=>{T(y=>{var x;const _=(x=r==null?void 0:r.items)==null?void 0:x.find(v=>v.selected);return _?{...y,[r.id]:{label:_==null?void 0:_.label,value:_==null?void 0:_.id}}:y})})},[P,T]),Ne(()=>{const r=e==null?void 0:e.reduce((y,_)=>{var x;let L=!1;return(x=_==null?void 0:_.items)==null||x.forEach(v=>{var d;((d=M[_.id])==null?void 0:d.value)===v.id&&(L=!0)}),_.required&&!L&&(y[_.id]=b),y},{});return w==null||w(r),r},[M]);const C=se((r,y,_)=>{T(L=>{let x={...L,...r&&{[r]:{label:y,value:_}}};return y===R&&delete x[r],i==null||i(x,_),x})},[i]),re=(r,y)=>{var L;const _=((L=y.selectedOptions[0])==null?void 0:L.label)??"";C(r,_,y.value)},le=se(({items:r,id:y,required:_,type:L,selected:x,label:v})=>(r==null?void 0:r.length)>0&&n("div",{className:$(["pdp-swatches__options"]),children:(L==null?void 0:L.toLowerCase())==="dropdown"?n(qe,{"aria-label":v,placeholder:m?R:void 0,handleSelect:g=>re(y,g.target),options:nt(r),value:x}):r==null?void 0:r.map(g=>{const d={key:g.id,id:g.id,name:y,value:g.value,label:g.label,groupAriaLabel:v,selected:x===g.id,outOfStock:!g.inStock,required:_===null?!0:_,onValue:()=>{C(y,g.label,g.id)}};switch(L){case"text":return n(Fe,{...d,label:g.label});case"image":return n(Xe,{...d,src:g.value,alt:g.label});case"color":return n(je,{...d,size:"large",color:g.value});default:return console.warn(`Invalid swatch type ${L}`),null}})}),[C]);return n("div",{...o,className:$(["pdp-swatches",a]),children:e==null?void 0:e.map(({type:r,label:y,id:_,multiple:L,required:x,items:v})=>{var g;return tt.includes(r)||console.warn(`Invalid swatch type ${r}`),L&&console.warn("Multiple selection swatches are not currently supported."),j("div",{id:`swatch-item-${_}`,"data-slot-key":`product-swatch--${_}`,className:"pdp-swatches__field",children:[n("div",{className:"pdp-swatches__field__label",children:M[_]?s?`${y}`:`${y}: ${M[_].label}`:y}),n(le,{id:_,type:r,required:x,items:v,label:y,selected:(g=M[_])==null?void 0:g.value})]},`swatch-item-${_}`)})})},at=({children:e,scale:s=2,closeButton:m=!0})=>{const[u,i]=G(!1),[w,p]=G("pdp-zoom"),[P,a]=G(!1),[Y,o]=G({x:0,y:0}),[b,R]=G({x:0,y:0}),[M,T]=G({x:0,y:0}),C=d=>{!u||d.type!=="touchstart"||(o({x:d.touches[0].clientX,y:d.touches[0].clientY}),R({x:M.x,y:M.y}),a(!0))},re=d=>{var ce;if(!P||d.type!=="touchmove")return;const E=(ce=d.currentTarget)==null?void 0:ce.getBoundingClientRect(),t=(100-100/s)/2,z=d.touches[0].clientX-Y.x,S=d.touches[0].clientY-Y.y,ae=z*100/(E.width*s),K=S*100/(E.height*s),te=b.x+ae,U=b.y+K;T({x:Math.max(-t,Math.min(te,t))||0,y:Math.max(-t,Math.min(U,t))||0}),d.preventDefault()},le=d=>{var K;const E=(K=d.currentTarget)==null?void 0:K.getBoundingClientRect(),t=(100-100/s)/2;let z;if("touches"in d)z=d.touches[0];else if(d instanceof MouseEvent)z=d;else return;const S=t-(z.clientX-E.left)/E.width*100,ae=t-(z.clientY-E.top)/E.height*100;T({x:Math.max(-t,Math.min(S,t))||0,y:Math.max(-t,Math.min(ae,t))||0})},r=d=>{if(!P){if(u){if(m&&"touches"in d){C(d);return}m||i(!1)}else i(!0),le(d);d.preventDefault()}},y=d=>{if(m&&"touches"in d){re(d);return}u&&le(d)},_=()=>{if(m){a(!1);return}i(!1)},L=d=>{i(!1),d.stopPropagation()},x=u?`scale(${s}) translateX(${M.x}%) translateY(${M.y}%)`:"none",v=X("PDP.Zoom.Close.label").label,g=Ye(he.only(e),{draggable:!1,style:{"--transform":x}});return J(()=>{p(u?`pdp-zoom ${m?"pdp-zoom--no-effects":"pdp-zoom--zoomed"}`:"pdp-zoom")},[u,m]),j("figure",{className:w,onClick:r,onMouseMove:y,onMouseLeave:_,onTouchStart:r,onTouchMove:y,onTouchEnd:_,children:[g,m&&u&&n(Pe,{"aria-label":v,variant:"tertiary",className:"pdp-zoom__close-button",icon:n(ze,{}),onClick:L})]})};function ct(e,s="en_US"){if(!Ve(e))throw Error("Invalid date string");return e.split(" ")[1]||(e=`${e} 00:00:00`),new Date(e).toLocaleDateString(Me(s)).toString()}function Ve(e){if(![/^\d{4}-\d{2}-\d{2}$/,/^\d{1,2}\/\d{1,2}\/\d{4}$/,/^\d{2}\/\d{2}\/\d{4}$/,/^\d{4}\/\d{2}\/\d{2}$/,/^\d{1,2}\.\d{1,2}\.\d{4}$/,/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/].some(u=>u.test(e)))return!1;const m=new Date(e);return!isNaN(m.getTime())}function ot(e){const s=new URLSearchParams(window.location.search);Object.entries(e).forEach(([u,i])=>{i===null?s.delete(u):s.set(u,String(i))});let m=window.location.pathname;m+=`?${s.toString()}`,m+=window.location.hash,window.history.replaceState({},"",m)}function it(){const e=new URLSearchParams(window.location.search),s={};return e.forEach((m,u)=>{s[u]=m}),s}function st(e){var s,m,u,i,w,p,P,a,Y,o,b,R;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:void 0,pricing:{regularPrice:((m=(s=e==null?void 0:e.prices)==null?void 0:s.regular)==null?void 0:m.amount)||0,minimalPrice:(i=(u=e==null?void 0:e.prices)==null?void 0:u.final)==null?void 0:i.minimumAmount,maximalPrice:(p=(w=e==null?void 0:e.prices)==null?void 0:w.final)==null?void 0:p.maximumAmount,specialPrice:(a=(P=e==null?void 0:e.prices)==null?void 0:P.final)==null?void 0:a.amount,tierPricing:void 0,currencyCode:((o=(Y=e==null?void 0:e.prices)==null?void 0:Y.final)==null?void 0:o.currency)||"USD"},canonicalUrl:e==null?void 0:e.url,mainImageUrl:(R=(b=e==null?void 0:e.images)==null?void 0:b[0])==null?void 0:R.url}}const dt={PRODUCT_CONTEXT:"productContext"},ht={PRODUCT_PAGE_VIEW:"product-page-view"};function He(){return window.adobeDataLayer=window.adobeDataLayer||[],window.adobeDataLayer}function pt(e,s){const m=He();m.push({[e]:null}),m.push({[e]:s})}function ut(e,s){He().push(u=>{const i=u.getState?u.getState():{};u.push({event:e,eventInfo:{...i,...s}})})}function Re(e){const s=st(e);pt(dt.PRODUCT_CONTEXT,s),ut(ht.PRODUCT_PAGE_VIEW)}const mt=({sku:e,hideSku:s,hideQuantity:m,hideShortDescription:u,hideDescription:i,hideAttributes:w,hideURLParams:p,hideSelectedOptionValue:P,slots:a,children:Y,initialData:o,carousel:b,optionsConfig:R,useACDL:M,onAddToCart:T,zoomType:C,closeButton:re=!0,disableDropdownPreselection:le,...r})=>{var B,ue,me,be;const y=X("PDP.Product.AddToCart.label").label,_=X("PDP.Product.Incrementer.label").label,L=X("PDP.Product.Details.label").label,x=X("PDP.Swatches.ChooseOption.label").label,[v,g]=G(We.getConfig().defaultLocale||"en-US"),[d,E]=G(),[t=null,z]=G(o),[S,ae]=G(()=>{const h={sku:e,quantity:1};return t!=null&&t.optionUIDs&&(h.optionsUIDs=t.optionUIDs),h}),[K,te]=G(()=>{var h,f;return!(t!=null&&t.options&&((h=t==null?void 0:t.options)==null?void 0:h.length)>0&&((f=t==null?void 0:t.optionUIDs)==null?void 0:f.length)!==(t==null?void 0:t.options.length))}),U={data:t,values:S,valid:K};function ce(h){return h==null?void 0:h.some(f=>(f==null?void 0:f.typename)==="ProductViewOptionValueProduct")}J(()=>{const h=ke.on("pdp/setValues",f=>{ae(A=>({...A,...f}))});return()=>{h==null||h.off()}},[]),J(()=>{const h=ke.on("locale",f=>{f!==v&&(g(f),Te(e).then(z))});return()=>{h==null||h.off()}},[v,e]),J(()=>{M&&o&&Object.keys(o).length>0&&Re(o)},[o]);const pe=se(h=>{ae(f=>({...f,...h}))},[]);J(()=>{ke.emit("pdp/values",S)},[JSON.stringify(S)]);const _e=se(h=>{var W,H;let f=Object.entries(h).filter(([l,c])=>c.label!==x).map(([l,c])=>h[l].value).filter(l=>l!==void 0);!p&&(t!=null&&t.options)&&!ce(t.options)&&ot({optionsUIDs:f.join(",")}),pe({optionsUIDs:f}),te((f==null?void 0:f.length)===((W=t==null?void 0:t.options)==null?void 0:W.length));const A=(H=t==null?void 0:t.options)==null?void 0:H.some(l=>ce([l]));Be(e,f,R==null?void 0:R.anchorOptions,A).then(l=>{var c;z(l),(c=R==null?void 0:R.anchorOptions)!=null&&c.length&&V(l,f),M&&(l==null?void 0:l.variantSku)!==e&&Re(l)})},[e]),V=se((h,f)=>{var H;const A=(h==null?void 0:h.optionUIDs)??[];f.every(l=>A.includes(l))||(E(h==null?void 0:h.options),pe({optionsUIDs:A}),te((A==null?void 0:A.length)===((H=h==null?void 0:h.options)==null?void 0:H.length)))},[e]),oe=se(h=>{Object.keys(h).length!==0&&te(!1)},[]),ne=Ne(()=>{var h;return(h=t==null?void 0:t.attributes)==null?void 0:h.map(({label:f,value:A},W)=>{const H=Ve(A)?ct(A,v):A.toString();return j("li",{children:[f,": ",n("span",{dangerouslySetInnerHTML:{__html:H}})]},W)})},[t==null?void 0:t.attributes,v]),k=!m&&(t!=null&&t.inStock)?n(Z,{name:"Quantity",slot:a==null?void 0:a.Quantity,context:{...U},children:n(Ge,{name:"quantity",defaultValue:S.quantity.toString(),value:S.quantity.toString(),min:1,"aria-label":_,className:"pdp-product__quantity",onValue:h=>{pe({quantity:Number(h)})}},"quantity")}):void 0,ee=()=>{if(t!=null&&t.options)return n(Z,{name:"Options",slot:a==null?void 0:a.Options,context:{...U},children:n(lt,{selectedUIDs:S.optionsUIDs,options:t.options,defaultOptions:S.optionsUIDs,selectionsToUpdate:d,hideSelectedValue:P,disablePreselections:le,onValues:_e,onErrors:oe})})};return n("div",{...r,children:n(Je,{title:n(Z,{name:"Title",slot:a==null?void 0:a.Title,context:{...U},children:t==null?void 0:t.name}),sku:s?void 0:n(Z,{name:"SKU",slot:a==null?void 0:a.SKU,context:{...U},children:t==null?void 0:t.sku}),options:ee(),breadcrumbs:(a==null?void 0:a.Breadcrumbs)&&n(Z,{name:"Breadcrumbs",slot:a==null?void 0:a.Breadcrumbs,context:{...U,setSeparator(h){this._registerMethod((...f)=>{const A=h(...f),W=A&&n(Se,{source:A});this._setProps(H=>({...H,separator:W,children:[n(De,{separator:W,categories:H.categories})]}))})},appendLink(h){this._registerMethod((...f)=>{const{text:A,...W}=h(...f),H=n("a",{...W,children:A});this._setProps(l=>{const c=[...l.categories||[],H];return{...l,categories:c,children:[n(De,{separator:l.separator,categories:c})]}})})},appendHTMLElement(h){this._registerMethod((...f)=>{const A=h(...f),W=this._htmlElementToVNode(A);this._setProps(H=>{const l=[...H.categories||[],W];return{...H,categories:l,children:[n(De,{separator:H.separator,categories:l})]}})})}}}),quantity:k,actions:n(Z,{name:"Actions",slot:a==null?void 0:a.Actions,context:{...U,appendButton(h){this._registerMethod((...f)=>{const A=h(...f);if(!A)return;const{text:W,icon:H,...l}=A,c=n(Pe,{type:"button",...l,icon:H&&n(Se,{source:H}),children:W});this._setProps(D=>({children:[...D.children||[],c]}))})}},children:!(a!=null&&a.Actions)&&n(Pe,{size:"medium",type:"submit",icon:n(Se,{source:"Cart"}),disabled:!(t!=null&&t.inStock)||!K,"aria-label":y,onClick:()=>T==null?void 0:T(S),children:y})}),shortDescription:u?void 0:n(Z,{name:"ShortDescription",slot:a==null?void 0:a.ShortDescription,context:{...U},children:n("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.shortDescription)??""}})}),description:i?void 0:n(Z,{name:"Description",slot:a==null?void 0:a.Description,context:{...U},children:n("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.description)??""}})}),images:((B=t==null?void 0:t.images)==null?void 0:B.map(({label:h,url:f})=>{var A,W;return n(Oe,{title:h,alt:h,src:f,width:((A=b==null?void 0:b.imageParams)==null?void 0:A.width)??960,height:((W=b==null?void 0:b.imageParams)==null?void 0:W.height)??1191,params:(b==null?void 0:b.imageParams)??{width:960}},f)}))??[],specialPrice:(ue=t==null?void 0:t.prices)!=null&&ue.visible?n(Z,{name:"SpecialPrice",slot:a==null?void 0:a.SpecialPrice,context:{...U},children:n(Ie,{...t.prices.final,locale:Me(v)})}):void 0,price:(me=t==null?void 0:t.prices)!=null&&me.visible&&t.prices.regular&&t.prices.final.amount!==(t==null?void 0:t.prices.regular.amount)?n(Z,{name:"RegularPrice",slot:a==null?void 0:a.RegularPrice,context:{...U},children:n(Ie,{...t.prices.regular,locale:Me(v)})}):void 0,zoomType:C,closeButton:re,carouselConfig:{...b,thumbnails:b&&Object.keys(b).length?((be=t==null?void 0:t.images)==null?void 0:be.map(({label:h,url:f})=>{var A,W;return n(Oe,{title:h,alt:h,src:f,width:((A=b==null?void 0:b.thumbnailParams)==null?void 0:A.width)??200,height:((W=b==null?void 0:b.thumbnailParams)==null?void 0:W.height)??248,params:(b==null?void 0:b.thumbnailParams)??{width:200}},f)}))??[]:[]},outOfStock:!(t!=null&&t.inStock),attributes:w?void 0:n(Z,{name:"Attributes",slot:a==null?void 0:a.Attributes,context:{...U},children:ne!=null&&ne.length?j(Ae,{children:[L,n("ul",{children:ne})]}):null}),galleryContent:(a==null?void 0:a.GalleryContent)&&n(Z,{name:"GalleryContent",slot:a.GalleryContent,context:{...U}}),infoContent:(a==null?void 0:a.InfoContent)&&n(Z,{name:"InfoContent",slot:a.InfoContent,context:{...U}}),productContent:(a==null?void 0:a.Content)&&n(Z,{name:"Content",slot:a.Content,context:{...U}})})})};mt.getInitialData=async function({sku:e,optionsConfig:s}){var P,a,Y,o,b,R,M;function m(T){return T.some(C=>C.__typename==="ProductViewOptionValueProduct")}let u;const i=We.getConfig(),w=((P=it().optionsUIDs)==null?void 0:P.split(","))||((o=(Y=(a=i==null?void 0:i.models)==null?void 0:a.ProductDetails)==null?void 0:Y.initialData)==null?void 0:o.optionsUIDs),p=(R=(b=i==null?void 0:i.models)==null?void 0:b.ProductDetails)==null?void 0:R.initialData;return p&&Object.keys(p).length>0&&(u=(M=p.options)==null?void 0:M.some(T=>m(T==null?void 0:T.values))),w!=null&&w.length?await Be(e,w,s==null?void 0:s.anchorOptions,u):await Te(e)};export{mt as ProductDetails,mt as default};
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name": "@dropins/storefront-pdp", "version": "0.5.0-
|
|
1
|
+
{"name": "@dropins/storefront-pdp", "version": "0.5.0-beta4", "@dropins/tools": "0.33.0"}
|
package/render.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(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}.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__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}.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)}}",{styleId:"PDP"});
|
|
1
|
+
(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__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}.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)}}",{styleId:"PDP"});
|
|
2
2
|
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 f,useEffect as m}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/initialize.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 l;const[e,i]=f(),n=(l=g.getConfig())==null?void 0:l.langDefinitions;m(()=>{const o=d.on("locale",t=>{t!==e&&i(t)},{eager:!0});return()=>{o==null||o.off()}},[e]);const s=c(S,n??{});return r(b,{lang:e,langDefinitions:s,children:a})},k=new u(r(D,{}));export{k as render};
|