Personalized checkout and custom promotions with Shopify Scripts
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>
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025