@dropins/storefront-pdp 1.0.2 → 1.0.3

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.
Files changed (2) hide show
  1. package/containers/ProductDetails.js +1 -1
  2. package/package.json +1 -1
package/containers/ProductDetails.js CHANGED
@@ -1,3 +1,3 @@
1
1
  /*! Copyright 2025 Adobe
2
2
  All Rights Reserved. */
3
- import{jsx as e,jsxs as V,Fragment as Nt}from"@dropins/tools/preact-jsx-runtime.js";import{useState as j,Children as ot,useEffect as f,useCallback as g,useMemo as vt}from"@dropins/tools/preact-compat.js";import{VComponent as o,classes as w,Slot as A,toLanguageTag as ut}from"@dropins/tools/lib.js";import{Incrementer as Ot,Breadcrumbs as ct,Button as bt,Icon as dt,Image as At}from"@dropins/tools/components.js";/* empty css */import{Z as It,C,O as Dt}from"../chunks/Zoom.js";import{useText as L}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 yt,h as ht,p as Vt,l as kt,t as Bt}from"../chunks/isProductConfigurationValid.js";import{events as lt}from"@dropins/tools/event-bus.js";import{i as xt,t as Lt}from"../chunks/date.js";import"@dropins/tools/fetch-graphql.js";import"../chunks/getProductConfigurationValues.js";const Ut=({title:a,breadcrumbs:N,galleryContent:S,infoContent:v,productContent:O,sku:I,outOfStock:U,shortDescription:s,description:r,attributes:tt,images:c,options:h,price:u,specialPrice:Z,className:z,children:at,quantity:K,actions:M,carouselConfig:n,zoomType:J="overlay",closeButton:et=!0,...nt})=>{var H,F,E,m,$,q,W,X,Y;const rt=L("PDP.Product.RegularPrice.label").label,k=L("PDP.Product.SpecialPrice.label").label,pt=L("PDP.Product.OutOfStock.label").label,B=L("PDP.Product.Image.label").label,[G,t]=j(null),x=c!=null&&c.length?c.map((D,y)=>{var Q;const R=((Q=a==null?void 0:a.props)==null?void 0:Q.children)&&(B==null?void 0:B.replace("{product}",a.props.children.toString()).replace("{key}",String(y+1)).replace("{total}",String(c.length)));return J==="zoom"?e(It,{closeButton:et,children:e(o,{node:D,loading:y===0?"eager":"lazy",alt:R},y)}):e(o,{node:D,loading:y===0?"eager":"lazy",alt:R,onClick:()=>t(y)},y)}):e("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0}),P=(H=n==null?void 0:n.thumbnails)!=null&&H.length?n.thumbnails.map((D,y)=>{var R;return e(o,{node:D,loading:(n==null?void 0:n.thumbnailsLoadingMode)||"lazy",alt:((R=a==null?void 0:a.props)==null?void 0:R.children)&&(B==null?void 0:B.replace("{product}",a.props.children.toString()).replace("{key}",String(y+1)).replace("{total}",String(c.length)))},y)}):e("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0});return V("div",{...nt,className:w(["pdp-product",z]),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:G||0,thumbnails:P,children:x}):e(st,{className:"pdp-product__images",gap:"small",children:x})}),S&&e(o,{node:S,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:w(["pdp-product__price-special","pdp-product__price"]),"aria-label":k,role:"text"}),u&&e(o,{node:u,className:w(["pdp-product__price-regular","pdp-product__price--grey"]),"aria-label":rt,role:"text"})]}),($=n==null?void 0:n.controls)!=null&&$.mobile&&((q=n==null?void 0:n.controls)==null?void 0:q.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:x}):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:x}),V("div",{className:w(["pdp-product__actions",["pdp-product__actions--out-of-stock",U]]),children:[U&&e("div",{className:"pdp-product__out-of-stock__text",children:pt}),h&&e(o,{node:h,className:w(["pdp-product__options"])}),K&&e("div",{className:"pdp-product__quantity",children:e(o,{node:K})}),M&&e(o,{node:M,className:w(["pdp-product__buttons"])})]}),s&&e(o,{node:s,className:w(["pdp-product__short_description"])}),r&&e(o,{node:r,className:w(["pdp-product__description"])}),tt?e("div",{className:"pdp-product__attributes",children:tt}):null]}),v&&e(o,{node:v,className:"pdp-product__info-content"})]}),O&&e(o,{node:O,className:"pdp-product__content"}),G===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:G||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:x})})]})},st=({children:a,gap:N=null,className:S,style:v,...O})=>{const I=ot.count(a);return e("div",{...O,className:w(["pdp-gallery-grid",S]),style:{"--gap":N?`var(--spacing-${N})`:"0px",...v},children:ot.map(a,(U,s)=>e("div",{className:"pdp-gallery-grid__item",children:e(o,{node:U,loading:s===0?"eager":"lazy"},U.props.src)},I+s))})},Mt=({sku:a,hideSku:N,hideQuantity:S,hideShortDescription:v,hideDescription:O,hideAttributes:I,hideURLParams:U,hideSelectedOptionValue:s,slots:r,children:tt,initialData:c,carousel:h,optionsConfig:u,useACDL:Z,onAddToCart:z,zoomType:at,closeButton:K=!0,disableDropdownPreselection:M,...n})=>{var Q,it,_t,mt;const J=L("PDP.Product.AddToCart.label").label,et=L("PDP.Product.Incrementer.label").label,nt=L("PDP.Product.Details.label").label,rt=L("PDP.Swatches.ChooseOption.label").label,[k,pt]=j(yt.getConfig().defaultLocale||"en-US"),[B,G]=j(),[t=null,x]=j(c),[P,H]=j(()=>{const p={sku:a,quantity:1};return t!=null&&t.optionUIDs&&(p.optionsUIDs=t.optionUIDs),p}),[F,E]=j(()=>{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=lt.on("pdp/setValues",d=>{H(l=>({...l,...d}))});return()=>{p==null||p.off()}},[]),f(()=>{const p=lt.on("locale",d=>{d!==k&&(pt(d),ht(a,{preselectFirstOption:!M,anchors:u==null?void 0:u.anchorOptions}).then(x))});return()=>{p==null||p.off()}},[M,k,u==null?void 0:u.anchorOptions,a]),f(()=>{Z&&c&&Object.keys(c).length>0&&Vt(c)},[c]);const q=g(p=>{H(d=>({...d,...p}))},[]);f(()=>{lt.emit("pdp/values",P)},[JSON.stringify(P)]);const W=g(async p=>{var i,_;let d=Object.entries(p).filter(([b,T])=>T.label!==rt).map(([b,T])=>p[b].value).filter(b=>b!==void 0);!U&&(t!=null&&t.options)&&!$(t.options)&&kt({optionsUIDs:d.join(",")}),q({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});x(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))||(G(p==null?void 0:p.options),q({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)},[]),D=vt(()=>{var p;return(p=t==null?void 0:t.attributes)==null?void 0:p.map(({label:d,value:l},i)=>{const _=xt(l)?Lt(l,k):l.toString();return V("li",{children:[d,": ",e("span",{dangerouslySetInnerHTML:{__html:_}})]},i)})},[t==null?void 0:t.attributes,k]),y=!S&&(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":et,className:"pdp-product__quantity",onValue:p=>{q({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:B,hideSelectedValue:s,disablePreselections:M,onValues:W,onErrors:Y})})};return e("div",{...n,children:e(Ut,{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(ct,{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(ct,{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(ct,{separator:_.separator,categories:b})]}})})}}}),quantity:y,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(bt,{type:"button",...b,icon:_&&e(dt,{source:_}),children:i});this._setProps(St=>({children:[...St.children||[],T]}))})}},children:!(r!=null&&r.Actions)&&e(bt,{size:"medium",type:"submit",icon:e(dt,{source:"Cart"}),disabled:!(t!=null&&t.inStock)||!F,"aria-label":J,onClick:()=>z==null?void 0:z(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(At,{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:(it=t==null?void 0:t.prices)!=null&&it.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:at,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(At,{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:D!=null&&D.length?V(Nt,{children:[nt,e("ul",{children:D})]}):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:S}){var O,I;const v=(I=(O=yt.getConfig().models)==null?void 0:O.ProductDetails)==null?void 0:I.initialData;return v?Bt(v):ht(a,{preselectFirstOption:!N,anchors:S==null?void 0:S.anchorOptions})};export{Mt as ProductDetails,Mt 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,Breadcrumbs as dt,Button as bt,Icon as lt,Image as At}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"@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(lt,{source:l});this._setProps(_=>({..._,separator:i,children:[e(dt,{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(dt,{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(dt,{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(bt,{type:"button",...b,icon:_&&e(lt,{source:_}),children:i});this._setProps(yt=>({children:[...yt.children||[],T]}))})}},children:!(r!=null&&r.Actions)&&e(bt,{size:"medium",type:"submit",icon:e(lt,{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(At,{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(At,{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};
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name": "@dropins/storefront-pdp", "version": "1.0.2", "@dropins/tools": "~0.36.0", "license": "SEE LICENSE IN LICENSE.md"}
1
+ {"name": "@dropins/storefront-pdp", "version": "1.0.3", "@dropins/tools": "~0.36.0", "license": "SEE LICENSE IN LICENSE.md"}