Seeking Assistance with Shopify Product Carousel Customization

[Frozbee]

Hello,

I am attempting to create a product carousel to integrate into my Shopify contact form, allowing users to select a product. I have succeeded in this, but now I am seeking guidance on implementing an additional functionality: filtering the products displayed in the carousel based on the collection chosen in the radio button.

I am struggling to achieve this. Do you have any ideas on how to accomplish it?

You can access the contact form here.

Thank you for your help,

Froz,

<!-- Ajoutez ces boutons radio où vous voulez dans votre HTML -->
<input type="radio" id="canvas-collection" name="collection" value="canvas" checked>
<label for="canvas-collection">Canvas</label>
<input type="radio" id="accessories-collection" name="collection" value="Accessories">
<label for="accessories-collection">Accessories</label>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- Cette partie sera remplacée dynamiquement par JavaScript -->
  </div>
  <!-- Boutons de navigation -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- Pagination -->
  <div class="swiper-pagination"></div>
</div>

<input type="hidden" id="selected_product_id" name="contact[selected_product_id]" value="">

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Fonction pour charger les produits de la collection sélectionnée
    function loadProducts(collection) {
      fetch('/collections/' + collection + '/products.json')
        .then(response => response.json())
        .then(data => {
          var swiperWrapper = document.querySelector('.swiper-wrapper');
          swiperWrapper.innerHTML = ''; // Efface les produits précédents

          data.products.forEach(function(product) {
            var slideHTML = `
              <div class="swiper-slide">
                <a href="#" class="select-product" data-product-id="${product.id}">
                  <img src="${product.featured_image.src | img_url: 'large'}" alt="${product.title}">
                  <h3 class="product-title">${product.title}</h3>
                </a>
              </div>
            `;
            swiperWrapper.insertAdjacentHTML('beforeend', slideHTML);
          });

          swiper.update(); // Met à jour le carrousel avec les nouveaux produits
        })
        .catch(error => console.error('Erreur lors du chargement des produits :', error));
    }

    var swiper = new Swiper('.swiper-container', {
      loop: true,
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
      },
      on: {
        slideChange: function() {
          var middleSlide = this.slides[this.activeIndex];
          var productTitles = document.querySelectorAll('.product-title');
          productTitles.forEach(function(title) {
            title.style.display = 'none';
          });
          var productTitle = middleSlide.querySelector('.product-title');
          if (productTitle) {
            productTitle.style.display = 'block';
            var productId = middleSlide.querySelector('.select-product').getAttribute('data-product-id');
            document.getElementById('selected_product_id').value = productId;
          }
        },
      },
    });

    // Sélection par défaut
    loadProducts('canvas');

    // Gestion des changements de sélection de collection
    var collectionRadios = document.querySelectorAll('input[name="collection"]');
    collectionRadios.forEach(function(radio) {
      radio.addEventListener('change', function() {
        if (this.checked) {
          loadProducts(this.value);
        }
      });
    });
  });
</script>