-
ÜRün varyasyonlarında sadece seçilen renk görsellerini göstermek
Merhaba,
Bir müşterim tek ürün sayfasında sadece seçilen rengin görsellerini göstermek istiyor.
Örneğin; X ürün ve 2 renk varyasyonu var. Beyaz ve siyah. Kullanıcı Siyahı seçtiğinde galeride sadece siyahlar olacak beyazı seçtiğinde sadece beyazlar olacak. Standart olarak her renk varyasyonunun görselleri görünmeyecek
Not olarak bunu URL değişmeden yapmak istiyorum.
Teşekkürler
-
8 Cevap
-
1 saate yakındır cevap yazamıyorum şuraya
-
chatgpt ye sorduk. işte cevaplar; 😆
bir web sitem var. burada t-shirt satıyorum. müşterilerin ürün sayfasına geldiğinde t-shirt renklerini seçtiğinde sayfadaki ana ürün görselinin o rengi almasını istiyorum. bunu yaparken de sayfanın url adresi değişmeden gerçekleşmesini istiyorum. yapılan renk seçimine göre sayfadaki ana ürün görselinin değişmesini sağlamak için bir kod yazar mısın?
<!DOCTYPE html>
<html>
<head>
<title>T-Shirt Seçimi</title>
<style>
/* Örnek CSS stilleri */
.color-option {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 5px;
cursor: pointer;
}
.selected {
border: 2px solid #000;
}
</style>
</head>
<body>
<h1>T-Shirt Renk Seçimi</h1>
<div>
<span class="color-option" style="background-color: red;"></span>
<span class="color-option" style="background-color: blue;"></span>
<span class="color-option" style="background-color: green;"></span>
<!-- Diğer renk seçeneklerini buraya ekleyebilirsiniz -->
</div>
<img id="main-image" src="default.jpg" alt="Ana Ürün Görseli">
<script>
// Renk seçeneklerini al
var colorOptions = document.getElementsByClassName('color-option');
// Her bir renk seçeneği için click olayını dinle
for (var i = 0; i < colorOptions.length; i++) {
colorOptions[i].addEventListener('click', function() {
// Seçilen rengi al
var selectedColor = this.style.backgroundColor;
// Ana ürün görselini seçilen renge göre değiştir
var mainImage = document.getElementById('main-image');
mainImage.src = selectedColor + '.jpg';
});
}
</script>
</body>
</html>
-
Bu kod örneği, t-shirt renklerini gösteren küçük kutucuklar olarak düzenlenmiş bir renk seçeneği listesi oluşturur. JavaScript kullanarak her bir renk seçeneği üzerinde bir tıklama dinleyicisi eklenir. Kullanıcı bir renk seçtiğinde, ana ürün görseli seçilen renge göre güncellenir.
Bu örnek, seçilen renge göre main-image id’sine sahip olan <img> öğesinin src özelliğini değiştirerek görseli günceller. Görselleri red.jpg, blue.jpg, green.jpg gibi dosya isimleriyle kaydetmiş olmanız gerekiyor.
-
bir örnek daha
<!DOCTYPE html>
<html>
<head>
<title>T-Shirt Seçimi</title>
<style>
/* Örnek CSS stilleri */
.color-option {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 5px;
cursor: pointer;
}
.selected {
border: 2px solid #000;
}
</style>
</head>
<body>
<h1>T-Shirt Renk Seçimi</h1>
<div>
<span class="color-option" style="background-color: red;"></span>
<span class="color-option" style="background-color: blue;"></span>
<span class="color-option" style="background-color: green;"></span>
<!-- Diğer renk seçeneklerini buraya ekleyebilirsiniz -->
</div>
<img id="main-image" src="default.jpg" alt="Ana Ürün Görseli">
<script>
// Renk seçeneklerini al
var colorOptions = document.getElementsByClassName('color-option');
// Her bir renk seçeneği için click olayını dinle
for (var i = 0; i < colorOptions.length; i++) {
colorOptions[i].addEventListener('click', function() {
// Seçilen rengi al
var selectedColor = this.style.backgroundColor;
// Ana ürün görselini seçilen renge göre değiştir
var mainImage = document.getElementById('main-image');
mainImage.src = selectedColor + '.jpg';
// Seçilen renkteki kutuyu vurgula
for (var j = 0; j < colorOptions.length; j++) {
colorOptions[j].classList.remove('selected');
}
this.classList.add('selected');
});
}
</script>
</body>
</html>
-
Evet, WordPress’te ürün renk seçimine dayalı ana ürün görselini değiştirebileceğiniz bazı eklentiler bulunmaktadır. İşte tavsiye edebileceğim bazı WordPress eklentileri:
1. WooCommerce Variation Swatches: Bu eklenti, WooCommerce tabanlı bir mağazada ürün renklerini göstermek ve renk seçimine göre ana ürün görselini değiştirmek için popüler bir seçenektir. Görsel swatch’ları veya renk kutucuklarını kullanabilirsiniz.
2. Variation Swatches for WooCommerce: Bu eklenti de WooCommerce mağazaları için ürün varyasyonları için renk seçeneklerini destekler. Renk seçimine dayalı olarak ürün görsellerini değiştirmenizi sağlar.
3. YITH WooCommerce Color and Label Variations: Bu eklenti, WooCommerce mağazalarında renk ve etiket varyasyonlarını yönetmek için kullanışlı bir araçtır. Renk seçeneklerini etiketlerle birlikte gösterir ve seçilen renge göre ana ürün görselini değiştirebilirsiniz.
Bu eklentiler, WooCommerce tabanlı bir mağaza için renk seçimine dayalı ürün görseli değişikliği yapmanıza yardımcı olur. WordPress eklenti yöneticisi üzerinden bu eklentileri aratarak ve yükleyerek sitenize entegre edebilirsiniz. Her bir eklenti, kendi belgeleri ve ayarlarıyla birlikte gelir, bu nedenle kullanmadan önce talimatları dikkatlice takip etmeniz önemlidir.
Unutmayın, belirli bir eklentinin gereksinimlerinizi tam olarak karşıladığından emin olmak için eklenti ayrıntılarını ve kullanıcı yorumlarını kontrol etmeniz önemlidir.
-
bence prompt daha iyi olursa daha verimli sonuçlar alınır. ben dümdüz yazdım 😆
-
-
Merhabalar,
Daha önce kullanmadım fakat araştırdığımda şöyle bir eklenti buldum
https://woocommerce.com/products/variation-swatches-and-photos/
Ücretli bir eklenti*
Demo sitede yalnızca bir resim var, birden fazla resim olduğunda iş görür mü bilmiyorum.
-
https://yithemes.com/themes/plugins/yith-woocommerce-color-and-label-variations/
Bu da ücretli başka bir eklenti
-
Log in to reply.