merge sliders

Fix Snipcart v3 API compatibility for order completion redirect
Update event listener from deprecated v2 Snipcart.execute to v3 Snipcart.events.on API. Change event from 'order.completed' (webhook-only) to 'cart.confirmed' (client-side) and update parameter from order to cartState to match v3 structure. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-22 10:22:36 +01:00 · 2025-12-22 10:21:28 +01:00 · 2025-12-19 19:36:44 +01:00 · 2025-12-19 19:35:22 +01:00
13 changed files with 391 additions and 352 deletions
--- a/assets/css/base/_body.scss
+++ b/assets/css/base/_body.scss
@ -40,5 +40,6 @@ body{

 main{
    padding-top:  var(--header-h);
-    // padding-bottom: 10vh;
+    min-height: calc(100vh - var(--spacing)*2);
+    min-height: calc(100dvh - var(--spacing)*2);
 }
--- a/assets/css/base/_var.scss
+++ b/assets/css/base/_var.scss
@ -33,6 +33,7 @@

  --color-bg: #161616;
  --color-txt: #ffffff;
+  --color-txt-light: #b9b9b9;
  --color-accent: #00ff00;
  --color-accent-50: #e9ffe9;
  --color-accent-100: #d8fdd8;
--- a/assets/css/partials/_site-footer.scss
+++ b/assets/css/partials/_site-footer.scss
@ -1,14 +1,13 @@
 #site-footer {
  background-color: black;
-
  width: 100vw;
-  position: relative;
-  left: calc(var(--padding-body) * -1);
-  padding: calc(var(--padding-body) * 2) var(--padding-body);
-  //    border-top: var(--border-light);
-
-  p {
-    margin: calc(var(--spacing) * 0.5) 0;
+  position: relative; 
+  left: calc(var(--padding-body)*-1);
+  height: calc(var(--spacing)*2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  

    a {
      text-decoration: none;
@ -16,97 +15,11 @@
        text-decoration: underline;
      }
    }
-  }
+  

  .p__small {
    font-size: var(--fs-x-small);
-    // margin-top: calc(var(--spacing)*0.5)
+    text-align: center;
  }

-  #list-socials {
-    list-style: none;
-    columns: 2;
-    max-width: 500px;
-    margin: 0;
-    a {
-      display: flex;
-      align-items: center;
-      gap: 1ch;
-      text-decoration: none;
-      height: calc(var(--spacing) * 1);
-
-      &::after {
-        content: "↗";
-        color: var(--grey-300);
-      }
-    }
-
-    .text {
-      line-height: 1;
-    }
-
-    .icon {
-      width: 20px;
-      height: 20px;
-      position: relative;
-      top: -2px;
-    }
-    svg {
-      display: flex;
-      align-items: center;
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  @media #{$small} {
-    margin-top: calc(var(--spacing) * 2);
-    .footer__socials {
-      margin-top: calc(var(--spacing) * 1.5);
-    }
-    .footer__mentions {
-      margin-top: calc(var(--spacing) * 0.5);
-      p {
-        // font-size: var(--font-size);
-        margin-top: calc(var(--spacing) * 2);
-      }
-    }
-  }
-
-  @media #{$small-up} {
-    .site-footer__container {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      column-gap: calc(var(--spacing) * 2);
-
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-
-    .footer__mentions {
-      grid-column: span 2;
-      text-align: center;
-      p {
-        font-size: var(--font-size);
-        margin-top: calc(var(--spacing) * 2);
-      }
-    }
-  }
-
-  @media #{$medium-up} {
-    .site-footer__container {
-      column-gap: calc(var(--spacing) * 4);
-    }
-  }
-
-  @media #{$small} {
-    .footer__mentions {
-      padding-top: calc(var(--spacing) * 1);
-      p {
-        margin-top: 0;
-      }
-
-      text-align: center;
-    }
-  }
 }
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -16,6 +16,7 @@
  --fw-bold: 600;
  --color-bg: #161616;
  --color-txt: #ffffff;
+  --color-txt-light: #b9b9b9;
  --color-accent: #00ff00;
  --color-accent-50: #e9ffe9;
  --color-accent-100: #d8fdd8;
@ -79,6 +80,8 @@ body {

 main {
  padding-top: var(--header-h);
+  min-height: calc(100vh - var(--spacing) * 2);
+  min-height: calc(100dvh - var(--spacing) * 2);
 }

 .nav--tabs {
@ -556,99 +559,20 @@ main {
  width: 100vw;
  position: relative;
  left: calc(var(--padding-body) * -1);
-  padding: calc(var(--padding-body) * 2) var(--padding-body);
+  height: calc(var(--spacing) * 2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-#site-footer p {
-  margin: calc(var(--spacing) * 0.5) 0;
-}
-#site-footer p a {
+#site-footer a {
  text-decoration: none;
 }
-#site-footer p a:hover {
+#site-footer a:hover {
  text-decoration: underline;
 }
 #site-footer .p__small {
  font-size: var(--fs-x-small);
-}
-#site-footer #list-socials {
-  list-style: none;
-  -moz-columns: 2;
-       columns: 2;
-  max-width: 500px;
-  margin: 0;
-}
-#site-footer #list-socials a {
-  display: flex;
-  align-items: center;
-  gap: 1ch;
-  text-decoration: none;
-  height: calc(var(--spacing) * 1);
-}
-#site-footer #list-socials a::after {
-  content: "↗";
-  color: var(--grey-300);
-}
-#site-footer #list-socials .text {
-  line-height: 1;
-}
-#site-footer #list-socials .icon {
-  width: 20px;
-  height: 20px;
-  position: relative;
-  top: -2px;
-}
-#site-footer #list-socials svg {
-  display: flex;
-  align-items: center;
-  width: 20px;
-  height: 20px;
-}
-@media screen and (max-width: 720px) {
-  #site-footer {
-    margin-top: calc(var(--spacing) * 2);
-  }
-  #site-footer .footer__socials {
-    margin-top: calc(var(--spacing) * 1.5);
-  }
-  #site-footer .footer__mentions {
-    margin-top: calc(var(--spacing) * 0.5);
-  }
-  #site-footer .footer__mentions p {
-    margin-top: calc(var(--spacing) * 2);
-  }
-}
-@media screen and (min-width: 720px) {
-  #site-footer .site-footer__container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    -moz-column-gap: calc(var(--spacing) * 2);
-         column-gap: calc(var(--spacing) * 2);
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-  #site-footer .footer__mentions {
-    grid-column: span 2;
-    text-align: center;
-  }
-  #site-footer .footer__mentions p {
-    font-size: var(--font-size);
-    margin-top: calc(var(--spacing) * 2);
-  }
-}
-@media screen and (min-width: 1080px) {
-  #site-footer .site-footer__container {
-    -moz-column-gap: calc(var(--spacing) * 4);
-         column-gap: calc(var(--spacing) * 4);
-  }
-}
-@media screen and (max-width: 720px) {
-  #site-footer .footer__mentions {
-    padding-top: calc(var(--spacing) * 1);
-    text-align: center;
-  }
-  #site-footer .footer__mentions p {
-    margin-top: 0;
-  }
+  text-align: center;
 }

 [data-template=support] section {
@ -1016,39 +940,36 @@ body.is-fullscreen {
  overflow: hidden;
 }

-[data-template=home] main {
-  margin-bottom: calc(var(--spacing) * 2);
-}
-[data-template=home] .p__baseline-big {
+[data-template=store] .p__baseline-big {
  margin-top: calc(var(--spacing) * 2);
 }
-[data-template=home] #store__container {
+[data-template=store] #store__container {
  margin-top: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 4);
  width: 100%;
  max-width: 1000px;
 }
-[data-template=home] #store__container .store__product {
+[data-template=store] #store__container .store__product {
  position: relative;
 }
-[data-template=home] #store__container .store__product figure {
+[data-template=store] #store__container .store__product figure {
  aspect-ratio: 4/3;
  background-color: var(--color-bg);
  background-color: var(--data-bg);
  margin-bottom: calc(var(--spacing) * 0.5);
  overflow: hidden;
 }
-[data-template=home] #store__container .store__product img {
+[data-template=store] #store__container .store__product img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: var(--curve) 0.5s;
 }
-[data-template=home] #store__container .store__product a {
+[data-template=store] #store__container .store__product a {
  text-decoration: none;
 }
-[data-template=home] #store__container .store__product .link-block {
+[data-template=store] #store__container .store__product .link-block {
  display: block;
  height: 100%;
  width: 100%;
@ -1057,23 +978,23 @@ body.is-fullscreen {
  left: 0;
  cursor: pointer;
 }
-[data-template=home] #store__container .store__product:hover figure {
+[data-template=store] #store__container .store__product:hover figure {
  overflow: hidden;
 }
-[data-template=home] #store__container .store__product:hover img {
+[data-template=store] #store__container .store__product:hover img {
  transform: scale(1.05);
 }
-[data-template=home] #store__container .store__product:hover .line-1 {
+[data-template=store] #store__container .store__product:hover .line-1 {
  text-decoration: underline;
 }
@media screen and (max-width: 720px) {
-  [data-template=home] #store__container .store__product {
+  [data-template=store] #store__container .store__product {
    margin-top: calc(var(--spacing) * 1.5);
    margin-bottom: calc(var(--spacing) * 0.5);
  }
 }
@media screen and (min-width: 720px) {
-  [data-template=home] #store__container {
+  [data-template=store] #store__container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    -moz-column-gap: calc(var(--padding-body) * 0.75);
@ -1082,24 +1003,34 @@ body.is-fullscreen {
    margin-left: auto;
    margin-right: auto;
  }
-  [data-template=home] #store__container .store__product {
+  [data-template=store] #store__container .store__product {
    grid-column: span 2;
  }
-  [data-template=home] #store__container .store__product:nth-of-type(1),
-  [data-template=home] #store__container .store__product:nth-of-type(2) {
+  [data-template=store] #store__container .store__product:nth-of-type(1),
+  [data-template=store] #store__container .store__product:nth-of-type(2) {
    grid-column: span 3;
  }
 }

 .section__product,
 .store__nav {
-  max-width: 1000px;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.section__product,
+.store__nav {
+  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
 }

 .store__nav {
  padding-top: calc(var(--spacing) * 1);
+  padding-bottom: calc(var(--spacing) * 0.5);
+  color: var(--color-txt-light);
+  font-size: var(--fs-small);
 }
 .store__nav a {
  text-decoration: none;
@ -1111,32 +1042,27 @@ body.is-fullscreen {
  content: "← ";
 }

-.section__product .product-gallery li {
-  list-style: none;
+.section__product .details ul {
+  margin-left: 2ch;
 }
-.section__product .product-gallery figure {
-  aspect-ratio: 1/1;
+.section__product .details ul li {
+  padding-bottom: 0.2em;
 }
-.section__product .product-gallery figure img {
-  width: 100%;
-  height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-.section__product .product-options__list {
+
+.product-options__list {
  list-style: none;
  display: flex;
  gap: 2ch;
 }
-.section__product .product-options__list li {
+.product-options__list li {
  position: relative;
 }
-.section__product .product-options__list li input[type=radio] {
+.product-options__list li input[type=radio] {
  position: fixed;
  opacity: 0;
  pointer-events: none;
 }
-.section__product .product-options__list li label {
+.product-options__list li label {
  font-family: var(--title);
  font-size: var(--fs-normal);
  height: 4ch;
@ -1150,31 +1076,87 @@ body.is-fullscreen {
  padding-top: 0px;
  cursor: pointer;
 }
-.section__product .product-options__list li input[type=radio]:checked + label {
+.product-options__list li input[type=radio]:checked + label {
  border-color: var(--color-txt);
 }
-.section__product .product-options__list li input[type=radio]:not(:checked) + label:hover {
+.product-options__list li input[type=radio]:not(:checked) + label:hover {
  border-color: var(--grey-600);
  background-color: var(--grey-800);
 }
-.section__product .hero {
-  margin-bottom: calc(var(--spacing) * 1);
-  padding-top: calc(var(--spacing) * 0.5);
-  border-top: var(--border-light);
+
+.product-gallery {
+  position: relative;
+  aspect-ratio: 4/3;
 }
-.section__product .hero .p__baseline-big {
+.product-gallery .swiper-slide {
+  width: 100%;
+}
+.product-gallery .swiper-slide figure {
+  aspect-ratio: 4/3;
+  width: 100%;
+  height: 100%;
+}
+.product-gallery .swiper-slide figure img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.product-gallery .swiper-button-prev,
+.product-gallery .swiper-button-next {
+  color: var(--color-txt);
+  width: 20px;
+  height: 20px;
+}
+.product-gallery .swiper-button-prev:after,
+.product-gallery .swiper-button-next:after {
+  font-size: 20px;
+  font-weight: bold;
+}
+.product-gallery .swiper-button-prev:hover,
+.product-gallery .swiper-button-next:hover {
+  opacity: 0.7;
+}
+.product-gallery .swiper-pagination {
+  position: relative;
+  margin-top: calc(var(--spacing) * 0.5);
+  bottom: 0;
+}
+.product-gallery .swiper-pagination .swiper-pagination-bullet {
+  width: 8px;
+  height: 8px;
+  background: var(--grey-600);
+  opacity: 0.5;
+  transition: opacity 0.3s;
+}
+.product-gallery .swiper-pagination .swiper-pagination-bullet:hover {
+  opacity: 0.7;
+}
+.product-gallery .swiper-pagination .swiper-pagination-bullet-active {
+  background: var(--color-txt);
+  opacity: 1;
+}
+
+.hero {
+  margin-bottom: calc(var(--spacing) * 1);
+  padding: calc(var(--spacing) * 0.5) 0;
+  border-top: var(--border-light);
+  border-bottom: var(--border-light);
+}
+.hero .p__baseline-big {
  margin: 0;
  text-align: left;
 }
-.section__product .add-to-cart,
-.section__product .product-options {
+
+.add-to-cart {
  margin: 0;
  border-bottom: var(--border-light);
  padding: calc(var(--spacing) * 0.5) 0;
 }
-.section__product .product-options__label {
-  font-weight: 600;
-  margin-bottom: calc(var(--spacing) * 0.25);
+
+.product-options {
+  border-bottom: var(--border-light);
+  padding: calc(var(--spacing) * 0.25) 0;
 }

@media screen and (max-width: 720px) {
@ -1185,6 +1167,7 @@ body.is-fullscreen {
  .section__product {
    display: flex;
    flex-direction: column;
+    margin-bottom: 10vh;
  }
  .section__product .col-left {
    display: contents;
@ -1208,34 +1191,39 @@ body.is-fullscreen {
  .section__product .add-to-cart {
    order: 5;
  }
+  .section__product .product-gallery {
+    width: 100vw;
+    position: relative;
+    left: calc(var(--padding-body) * -1);
+  }
+  .section__product .product-gallery .swiper-button-prev,
+  .section__product .product-gallery .swiper-button-next {
+    display: none;
+  }
 }
@media screen and (min-width: 720px) {
  .section__product {
    display: grid;
-    grid-template-columns: 50% 50%;
-    aspect-ratio: 2/1;
-    margin-top: calc(var(--spacing) * 0.5);
-    position: relative;
-  }
-  .section__product .col-left {
-    padding-right: var(--padding-body);
-  }
-  .section__product .details {
+    grid-template-columns: 1fr 1fr;
+    gap: calc(var(--padding-body) * 2);
    margin-bottom: calc(var(--spacing) * 3);
  }
-  .section__product .add-to-cart,
-  .section__product .product-options {
-    width: calc(50% - var(--padding-body));
-  }
-  .section__product .add-to-cart {
-    position: absolute;
-    bottom: 10px;
+  .section__product .details {
+    margin-bottom: calc(var(--spacing) * 2);
+    flex-grow: 1;
  }
  .section__product .product-options {
-    position: absolute;
-    bottom: calc(var(--spacing) * 2);
    border-top: var(--border-light);
  }
+  .section__product .col-left {
+    min-height: 100%;
+    padding-bottom: 40px;
+    display: flex;
+    flex-direction: column;
+  }
+  .product-gallery .swiper-slide figure {
+    width: calc(100% - 60px);
+  }
 }
 [data-template=thanks] .thanks-page {
  min-height: 60vh;
--- a/assets/css/style.css.map
+++ b/assets/css/style.css.map
--- a/assets/css/template/shop/_layout.scss
+++ b/assets/css/template/shop/_layout.scss
@ -1,8 +1,4 @@
-[data-template="home"] {
-  main {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-
+[data-template="store"] {
  .p__baseline-big {
    margin-top: calc(var(--spacing) * 2);
  }
--- a/assets/css/template/shop/_section--product.scss
+++ b/assets/css/template/shop/_section--product.scss
@ -1,12 +1,28 @@
+.section__product,
+.store__nav{
+  max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+
+
 .section__product,
 .store__nav {
-  max-width: 1000px;
+  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
 }

+
+
+
+
 .store__nav {
  padding-top: calc(var(--spacing) * 1);
+  padding-bottom: calc(var(--spacing) * 0.5);
+  color: var(--color-txt-light);
+  font-size: var(--fs-small);

  a {
    text-decoration: none;
@ -21,13 +37,80 @@
  }
 }

-.section__product {
-  .product-gallery {
-    li {
-      list-style: none;
+
+
+.section__product .details {
+  // margin-bottom: calc(var(--spacing) * 2);
+
+  ul{
+    margin-left: 2ch;
+    li{
+      padding-bottom: 0.2em;
    }
+  }
+}
+
+
+.product-options__list {
+      list-style: none;
+      display: flex;
+      gap: 2ch;
+  
+      li {
+        position: relative;
+  
+        input[type="radio"] {
+          position: fixed;
+          opacity: 0;
+          pointer-events: none;
+        }
+  
+        label {
+          font-family: var(--title);
+          font-size: var(--fs-normal);
+          height: 4ch;
+          width: 4ch;
+          border-radius: 50%;
+          border: var(--border);
+          border-color: transparent;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding-top: 0px;
+          cursor: pointer;
+        }
+  
+        input[type="radio"]:checked + label {
+          border-color: var(--color-txt);
+        }
+  
+        input[type="radio"]:not(:checked) + label:hover {
+          border-color: var(--grey-600);
+          background-color: var(--grey-800);
+        }
+      }
+    }
+  
+
+
+
+
+
+
+
+
+.product-gallery {
+  position: relative;
+  aspect-ratio: 4 / 3;
+
+  .swiper-slide {
+    width: 100%;
+  
    figure {
-      aspect-ratio: 1/1;
+      
+      aspect-ratio: 4 / 3;
+      width: 100%;
+      height: 100%;

      img {
        width: 100%;
@ -37,50 +120,54 @@
    }
  }

-  .product-options__list {
-    list-style: none;
-    display: flex;
-    gap: 2ch;
+  // Swiper navigation arrows
+  .swiper-button-prev,
+  .swiper-button-next {
+    color: var(--color-txt);
+    width: 20px;
+    height: 20px;

-    li {
-      position: relative;
+    &:after {
+      font-size: 20px;
+      font-weight: bold;
+    }

-      input[type="radio"] {
-        position: fixed;
-        opacity: 0;
-        pointer-events: none;
-      }
-
-      label {
-        font-family: var(--title);
-        font-size: var(--fs-normal);
-        height: 4ch;
-        width: 4ch;
-        border-radius: 50%;
-        border: var(--border);
-        border-color: transparent;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding-top: 0px;
-        cursor: pointer;
-      }
-
-      input[type="radio"]:checked + label {
-        border-color: var(--color-txt);
-      }
-
-      input[type="radio"]:not(:checked) + label:hover {
-        border-color: var(--grey-600);
-        background-color: var(--grey-800);
-      }
+    &:hover {
+      opacity: 0.7;
    }
  }

+  // Swiper pagination dots
+  .swiper-pagination {
+    position: relative;
+    margin-top: calc(var(--spacing) * 0.5);
+    bottom: 0;
+
+    .swiper-pagination-bullet {
+      width: 8px;
+      height: 8px;
+      background: var(--grey-600);
+      opacity: 0.5;
+      transition: opacity 0.3s;
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+
+    .swiper-pagination-bullet-active {
+      background: var(--color-txt);
+      opacity: 1;
+    }
+  }
+}
+
+
  .hero {
    margin-bottom: calc(var(--spacing) * 1);
-    padding-top: calc(var(--spacing) * 0.5);
+    padding: calc(var(--spacing) * 0.5) 0;
    border-top: var(--border-light);
+    border-bottom: var(--border-light);

    .p__baseline-big {
      margin: 0;
@ -88,18 +175,18 @@
    }
  }

-  .add-to-cart,
-  .product-options {
+  .add-to-cart {
    margin: 0;
    border-bottom: var(--border-light);
    padding: calc(var(--spacing) * 0.5) 0;
  }

-  .product-options__label {
-    font-weight: 600;
-    margin-bottom: calc(var(--spacing) * 0.25);
+  .product-options {
+    border-bottom: var(--border-light);
+    padding: calc(var(--spacing) * 0.25) 0;
  }
-}
+
+

@media #{$small} {
  .store__nav a {
@ -110,6 +197,7 @@
  .section__product {
    display: flex;
    flex-direction: column;
+    margin-bottom: 10vh;

    .col-left {
      display: contents;
@ -137,40 +225,47 @@
    .add-to-cart {
      order: 5;
    }
+
+    .product-gallery{
+      width: 100vw;
+      position: relative;
+      left: calc(var(--padding-body)*-1);
+
+      .swiper-button-prev,
+      .swiper-button-next{ display: none; }
+    }
  }
 }

@media #{$small-up} {
-  .section__product {
+
+
+  .section__product{
    display: grid;
-    grid-template-columns: 50% 50%;
-    aspect-ratio: 2/1;
-
-    margin-top: calc(var(--spacing) * 0.5);
-    position: relative;
-
-    .col-left {
-      padding-right: var(--padding-body);
-    }
+    grid-template-columns: 1fr 1fr;
+    gap: calc(var(--padding-body)*2);
+    margin-bottom: calc(var(--spacing)*3);

    .details {
-      margin-bottom: calc(var(--spacing) * 3);
-    }
-
-    .add-to-cart,
-    .product-options {
-      width: calc(50% - var(--padding-body));
-    }
-
-    .add-to-cart {
-      position: absolute;
-      bottom: 10px;
+      margin-bottom: calc(var(--spacing) * 2);
+      flex-grow: 1;
    }

    .product-options {
-      position: absolute;
-      bottom: calc(var(--spacing) * 2);
      border-top: var(--border-light);
    }
+
+    .col-left{
+      min-height: 100%;
+      padding-bottom: 40px; //dots
+
+      display: flex;
+      flex-direction: column;
+    }
+
+  }
+
+  .product-gallery .swiper-slide figure{
+    width: calc(100% - 60px);
  }
 }
--- a/assets/js/product-gallery.js
+++ b/assets/js/product-gallery.js
@ -0,0 +1,31 @@
+// Initialize Swiper for product gallery
+document.addEventListener('DOMContentLoaded', function() {
+    const productGallery = document.querySelector('.product-gallery.swiper');
+
+    if (productGallery) {
+        const swiper = new Swiper('.product-gallery.swiper', {
+            // Enable loop if there are multiple slides
+            loop: true,
+
+            // Let CSS control the width
+            slidesPerView: 'auto',
+
+            // Navigation arrows
+            navigation: {
+                nextEl: '.swiper-button-next',
+                prevEl: '.swiper-button-prev',
+            },
+
+            // Pagination dots
+            pagination: {
+                el: '.swiper-pagination',
+                clickable: true,
+            },
+
+            // Keyboard navigation
+            keyboard: {
+                enabled: true,
+            }
+        });
+    }
+});
--- a/assets/js/snipcart.js
+++ b/assets/js/snipcart.js
@ -6,13 +6,13 @@ window.SnipcartSettings = {

 // Redirection après paiement réussi
 document.addEventListener('snipcart.ready', function() {
-  Snipcart.execute('bind', 'order.completed', function(order) {
+  Snipcart.events.on('cart.confirmed', function(cartState) {
    // Détecter la langue actuelle depuis l'URL
    const currentPath = window.location.pathname;
    const langMatch = currentPath.match(/^\/([a-z]{2})(\/|$)/);
    const langPrefix = langMatch ? '/' + langMatch[1] : '';

-    window.location.href = langPrefix + '/thanks?order=' + order.token;
+    window.location.href = langPrefix + '/thanks?order=' + cartState.token;
  });
 });

--- a/site/templates/product.php
+++ b/site/templates/product.php
@ -78,24 +78,38 @@
                </div>
            </div>

-            <?php if ($page->hasFiles()): ?>
-            <ul class="product-gallery">
-                <?php foreach($page->files()->sort() as $image): ?>
-                    <li>
-                        <figure>
-                            <?php snippet('picture', [
-                                'file' => $image,
-                                'alt' => $page->title()->html(),
-                                'preset' => 'product-detail',
-                                'size' => 50,
-                                'lazy' => false
-                            ]) ?>
-                        </figure>
-                    </li>
-                <?php endforeach ?>
-            </ul>
-            <?php endif ?>
+            <div class="product-gallery swiper">
+                <div class="swiper-wrapper">
+                    <?php
+                    // Afficher uniquement les vraies images du produit
+                    if ($page->hasFiles()):
+                        foreach($page->files()->sortBy('sort', 'asc') as $image):
+                    ?>
+                        <div class="swiper-slide">
+                            <figure>
+                                <?php snippet('picture', [
+                                    'file' => $image,
+                                    'alt' => $page->title()->html(),
+                                    'preset' => 'product-detail',
+                                    'size' => 50,
+                                    'lazy' => false
+                                ]) ?>
+                            </figure>
+                        </div>
+                    <?php
+                        endforeach;
+                    endif;
+                    ?>
+                </div>
+
+                <!-- Navigation arrows -->
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-button-next"></div>
+
+                <!-- Pagination dots -->
+                <div class="swiper-pagination"></div>
+            </div>
        </section>
    </main>

-<?php snippet('footer', ['scripts' => ['assets/js/product-size.js', 'assets/js/snipcart.js']]) ?>
+<?php snippet('footer', ['scripts' => ['assets/js/product-size.js', 'assets/js/snipcart.js', 'assets/js/product-gallery.js']]) ?>
--- a/vendor/composer/autoload_psr4.php
+++ b/vendor/composer/autoload_psr4.php
@ -16,7 +16,7 @@ return array(
    'PHPMailer\\PHPMailer\\' => array($vendorDir . '/phpmailer/phpmailer/src'),
    'League\\ColorExtractor\\' => array($vendorDir . '/league/color-extractor/src'),
    'Laminas\\Escaper\\' => array($vendorDir . '/laminas/laminas-escaper/src'),
-    'Kirby\\' => array($vendorDir . '/getkirby/composer-installer/src', $baseDir . '/kirby/src'),
+    'Kirby\\' => array($baseDir . '/kirby/src', $vendorDir . '/getkirby/composer-installer/src'),
    'Composer\\Semver\\' => array($vendorDir . '/composer/semver/src'),
    'Base32\\' => array($vendorDir . '/christian-riesen/base32/src'),
 );
--- a/vendor/composer/autoload_static.php
+++ b/vendor/composer/autoload_static.php
@ -96,8 +96,8 @@ class ComposerStaticInit0b7fb803e22a45eb87e24172337208aa
        ),
        'Kirby\\' => 
        array (
-            0 => __DIR__ . '/..' . '/getkirby/composer-installer/src',
-            1 => __DIR__ . '/../..' . '/kirby/src',
+            0 => __DIR__ . '/../..' . '/kirby/src',
+            1 => __DIR__ . '/..' . '/getkirby/composer-installer/src',
        ),
        'Composer\\Semver\\' => 
        array (
--- a/vendor/composer/installed.php
+++ b/vendor/composer/installed.php
@ -1,9 +1,9 @@
 <?php return array(
    'root' => array(
        'name' => 'getkirby/plainkit',
-        'pretty_version' => '5.1.4',
-        'version' => '5.1.4.0',
-        'reference' => null,
+        'pretty_version' => 'dev-main',
+        'version' => 'dev-main',
+        'reference' => '44ed53aae0b7128526b1fe9c2c66e80b18df323f',
        'type' => 'project',
        'install_path' => __DIR__ . '/../../',
        'aliases' => array(),
@ -65,9 +65,9 @@
            'dev_requirement' => false,
        ),
        'getkirby/plainkit' => array(
-            'pretty_version' => '5.1.4',
-            'version' => '5.1.4.0',
-            'reference' => null,
+            'pretty_version' => 'dev-main',
+            'version' => 'dev-main',
+            'reference' => '44ed53aae0b7128526b1fe9c2c66e80b18df323f',
            'type' => 'project',
            'install_path' => __DIR__ . '/../../',
            'aliases' => array(),
Author	SHA1	Message	Date
isUnknown	b59d841d39	merge sliders All checks were successful Deploy / Deploy to Production (push) Successful in 6s Details	2025-12-22 10:22:36 +01:00
isUnknown	3ba37020ff	Fix Snipcart v3 API compatibility for order completion redirect Update event listener from deprecated v2 Snipcart.execute to v3 Snipcart.events.on API. Change event from 'order.completed' (webhook-only) to 'cart.confirmed' (client-side) and update parameter from order to cartState to match v3 structure. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2025-12-22 10:21:28 +01:00
Julie Blanc	48b744e8f1	delete temp img	2025-12-19 19:36:44 +01:00
Julie Blanc	14438b642b	style gallery	2025-12-19 19:35:22 +01:00