https://ziggyfamily.com/cdn/shop/t/77/assets/element-loox-reviews-swiper.js?v=156074464841246785521790767878

1import{S as M,N as b,M as S}from"./chunk-vendor-swiper-Dc9eGxIH.js";class L extends HTMLElement{connectedCallback(){this.__init||(this.__init=!0,this.wrapper=this.querySelector("[data-loox-reviews-wrapper]"),this.publicStoreId=this.dataset.publicStoreId,!(!this.wrapper||!this.publicStoreId)&&this.loadReviews())}disconnectedCallback(){this.swiper?.destroy(!0,!0),this.swiper=null}async loadReviews(){try{if(window.location.port==="9292"){console.warn("Loox Storefront API may block localhost via CORS.");return}const e=Number(this.dataset.maxReviews||20),t=Number(this.dataset.minProductReviews||5),o=this.dataset.onlyFiveStars==="true",i=this.dataset.productId||"",r=async({productId:n=""}={})=>{const l=[],u=new URL(`https://storefront-api.loox.io/storefront/v1/store/${this.publicStoreId}/product-reviews`);n&&u.searchParams.set("product_id",n),u.searchParams.set("limit",String(e)),u.searchParams.set("locale",document.documentElement.lang||"fr"),o&&u.searchParams.set("rating","5");let p=u.toString();for(;p&&l.length<e;){const h=await fetch(p);if(!h.ok)throw new Error(`Loox API error: ${h.status}`);const v=await h.json();l.push(...v.reviews||[]),p=v.pagination?.hasMore?v.pagination.nextPageUrl:null}return l.slice(0,e)},s=n=>{const l=n.filter(u=>(u.media||[]).some(p=>this.getMediaUrl(p)||this.getMediaPreview(p)));return l.length>=t?l.slice(0,e):n.slice(0,e)};let c=await r({productId:i});i&&c.length<t&&(c=await r());const a=s(c);if(!a.length){this.closest("[data-product-loox-reviews]")?.remove();return}this.closest("[data-product-loox-reviews]")?.classList.remove("hidden"),this.reviews=a,this.wrapper.innerHTML=a.map((n,l)=>this.renderReview(n,l)).join(""),this.bindReviewClicks(),this.initSwiper()}catch(e){console.error("LOOX REVIEWS ERROR",e)}}initSwiper(){const e=this.closest("[data-loox-reviews-section]"),t=e?.querySelector("[data-loox-next-button]"),o=e?.querySelector("[data-loox-prev-button]");this.swiper=new M(this,{modules:[b,S],slidesPerView:2,spaceBetween:16,threshold:10,grabCursor:!0,loop:!1,mousewheel:{forceToAxis:!0,releaseOnEdges:!0},breakpoints:{600:{slidesPerView:3,spaceBetween:12},720:{slidesPerView:4,spaceBetween:18},978:{slidesPerView:5,spaceBetween:20}},navigation:{nextEl:t,prevEl:o},on:{init(i){x(i)},update(i){x(i)},resize(i){x(i)}}})}renderReview(e,t){const o=e.media?.[0];this.getMediaUrl(o)||e.product?.imageUrl;const i=this.getMediaPreview(o)||e.product?.imageUrl||"",r=this.isVideoMedia(o),s=this.dataset.playIcon||"",c=e.reviewer?.name||"Client vérifié",a=Math.round(Number(e.rating||5));return`
2      <article class="swiper-slide custom-loox-review !h-auto cursor-pointer" data-review-index="${t}">
3        <div class="h-full flex flex-col bg-white shadow rounded-lg overflow-hidden z-1">
4          <div class="relative shrink-0">
5            ${i?`
6                <div class="relative w-full h-60 bg-primary/20">
7                    <img
8                    class="custom-loox-review__image w-full h-60 object-cover"
9                    src="${d(i)}"
10                    alt=""
11                    loading="lazy"
12                    >
13
14                    ${r&&s?`
15                        <div class="video-play pointer-events-none absolute z-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-18 lg:w-26">
16                            <img
17                            class="w-full m-0 p-0 z-50 opacity-80"
18                            src="${d(s)}"
19                            alt="Play video"
20                            >
21                        </div>
22                        `:""}
23                </div>
24                `:""}
25
26            <div class="custom-loox-review__stars absolute -bottom-2.5 left-1/2 -translate-x-1/2 inline-flex justify-center gap-1 px-2 py-1 bg-white rounded-lg shadow-sm loox-rating" aria-label="${a} sur 5">
27              ${this.renderStars(a,"size-7")}
28            </div>
29          </div>
30
31          <div class="custom-loox-review__content flex flex-col flex-1 p-4 pt-5">
32            <div class="custom-loox-review__name font-title text-lg text-center pb-1 shrink-0">
33              ${d(c)}
34            </div>
35            <p class="custom-loox-review__text text-sm line-clamp-2 overflow-hidden">
36              ${d(e.body)}
37            </p>
38          </div>
39        </div>
40      </article>
41    `}bindReviewClicks(){this.querySelectorAll("[data-review-index]").forEach(e

41=>{e.addEventListener("click",()=>{this.openReviewModal(Number(e.dataset.reviewIndex))})})}openReviewModal(e){this.currentReviewIndex=e,this.currentMediaIndex=0,this.fillReviewModal(),this.bindModalMediaNavigation(),this.bindInfoPopover();const t=document.querySelector("#PopupModal-LooxReview");typeof t?.show=="function"?t.show(this):t?.setAttribute("open","")}bindModalMediaNavigation(){const e=document.querySelector("#PopupModal-LooxReview");!e||e.__looxMediaNavBound||(e.__looxMediaNavBound=!0,e.querySelector("[data-loox-prev]")?.addEventListener("click",()=>{this.goToModalMedia(-1)}),e.querySelector("[data-loox-next]")?.addEventListener("click",()=>{this.goToModalMedia(1)}),e.addEventListener("modal:close",()=>{this.stopModalVideo()}))}stopModalVideo(){const t=document.querySelector("#PopupModal-LooxReview")?.querySelector("[data-loox-modal-video]");t&&(t.pause(),t.removeAttribute("src"),t.load())}goToModalMedia(e){const o=this.reviews?.[this.currentReviewIndex]?.media||[];o.length<=1||(this.currentMediaIndex=(this.currentMediaIndex+e+o.length)%o.length,this.updateModalMedia())}fillReviewModal(){const e=this.reviews?.[this.currentReviewIndex],t=document.querySelector("#PopupModal-LooxReview");if(!e||!t)return;const o=e.reviewer?.name||"Client vérifié",i=Math.round(Number(e.rating||5)),r=t.querySelector("[data-loox-modal-name]"),s=t.querySelector("[data-loox-modal-body]"),c=t.querySelector("[data-loox-modal-date]"),a=t.querySelector("[data-loox-modal-stars]"),n=this.dataset.verifiedLabel||"Vérifié",l=t.querySelector("[data-loox-modal-verified]"),u=t.querySelector("[data-loox-modal-product]"),p=t.querySelector("[data-loox-modal-questions]"),h=this.dataset.showBrandReply==="true",v=this.dataset.brandReplyTitle||"Ziggy a répondu :",w=t.querySelector("[data-loox-modal-reply]");if(r&&(r.textContent=o),s&&(s.textContent=e.body||""),c&&(c.textContent=e.date?new Date(e.date).toLocaleDateString("fr-FR"):""),a&&(a.innerHTML=this.renderStars(i,"size-6")),l&&(l.innerHTML=e.verified?`
42        <span class="inline-flex items-center gap-1">
43          <span class="inline-flex size-4 items-center justify-center rounded-full bg-primary text-white text-xs">✓</span>
44          ${d(n)}
45        </span>
46      `:""),u){const f=t.querySelector("[data-loox-modal-product-name]"),g=t.querySelector("[data-loox-modal-product-link]"),y=t.querySelector("[data-loox-modal-product-image]");y&&(y.src=e.product?.imageUrl||""),f&&(f.textContent=e.product?.name||""),g&&(g.href=e.product?.url||"#")}p&&(p.innerHTML=(e.customQuestions||[]).map(f=>`
47          <div>
48            <p class="text-sm text-primary/70">${d(f.question||"")}</p>
49            <p class="text-base">${d(f.answer||"")}</p>
50          </div>
51        `).join("")),w&&(h&&e.reply?.body?(w.classList.remove("hidden"),w.innerHTML=`
52      <div class="rounded-lg bg-(--composer-color-light-pink) p-3">
53        <p class="font-title text-sm mb-1">${d(v)}</p>
54        <p class="text-sm leading-relaxed">${d(e.reply.body)}</p>
55      </div>
56    `):(w.classList.add("hidden"),w.innerHTML="")),this.updateModalMedia()}updateModalMedia(){const e=this.reviews?.[this.currentReviewIndex],t=document.querySelector("#PopupModal-LooxReview"),o=t?.querySelector("[data-loox-modal-media]");if(!e||!t||!o)return;const i=e.media||[],r=i[this.currentMediaIndex],s=this.getMediaUrl(r)||e.product?.imageUrl||"",c=this.isVideoMedia(r);if(!s){o.innerHTML="";return}if(c)o.innerHTML=`
57        <div class="relative w-full max-h-[70vh] h-140 md:h-130 bg-black">
58          <iframe
59            class="absolute inset-0 w-full h-full"
60            src="${d(this.getAutoplayUrl(s))}"
61            style="border: none;"
62            allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
63            allowfullscreen="true"
64          ></iframe>
65        </div>
66    `;else{const n=new Image;n.onload=()=>{o.innerHTML=`
67        <img
68          class="h-full max-h-[70vh] max-w-full object-contain"
69          src="${d(s)}"
70          alt=""
71        >
72      `},n.src=s}const a=i.length>1;t.querySelector("[data-loox-prev]")?.toggleAttribute("hidden",!a),t.querySelector("[data-loox-next]")?.toggleAttribute("hidden",!a)}isVideoMedia(e,t=""){const o=String(e?.type||e?.mediaType||"").toLowerCase(),i=String(e?.mimeType||e?.mime||"").toLowerCase(),r=String(t||"").toLowerCase();return o.includes("video")||i.includes("video")||r.includes(".mp4")||r.includes(".mov")||r.includes(".webm")||r.includes("video")}renderStars(e,t="size-6"){return Array.from({length:e}).map(()=>`
73          <svg class="loox-icon ${t}

73" viewBox="0 0 24 24" data-lx-fill="full" aria-hidden="true">
74            <use href="#looxicons-rating-icon"></use>
75          </svg>
76        `).join("")}bindInfoPopover(){const e=document.querySelector("#PopupModal-LooxReview");if(!e||e.__looxInfoBound)return;e.__looxInfoBound=!0;const t=e.querySelector("[data-loox-info-toggle]"),o=e.querySelector("[data-loox-info-popover]");!t||!o||(t.addEventListener("click",i=>{i.stopPropagation(),o.classList.toggle("hidden")}),document.addEventListener("click",i=>{e.contains(i.target)&&(i.target.closest("[data-loox-info-wrapper]")||o.classList.add("hidden"))}),e.addEventListener("modal:close",()=>{o.classList.add("hidden")}))}getMediaUrl(e){return e?.url||""}getMediaPreview(e){return e?.thumbnailUrl||e?.url||""}getAutoplayUrl(e){if(!e)return"";const t=e.includes("?")?"&":"?";return`${e}${t}controls=true&autoplay=true&muted=true&preload=auto`}isPhotoMedia(e){return e?.type==="photo"||e?.type==="image"}}function x(m){const e=m.params.slidesOffsetBefore-m.params.spaceBetween;if(e<=0)return;const t=m.snapGrid.length-1;m.snapGrid=m.snapGrid.map((o,i)=>i===0||i===t?o:o+e)}function d(m){return String(m||"").replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"})[e])}customElements.get("loox-reviews-swiper")||customElements.define("loox-reviews-swiper",L);
77//# sourceMappingURL=element-loox-reviews-swiper.js.map