İçindekiler
Giriş
Bir Magento 2 mağazasında kullanıcı deneyimini optimize etmenin yolunu merak ettiniz mi? Bir e-ticaret web sitesi çalıştırıyorsanız ve müşterilerinizin sorunsuz bir alışveriş deneyimi yaşamasını istiyorsanız, bir ürün sepete eklendikten sonra "Sepete Ekle" butonunu gizlemek ve yerine "miktar artırma" veya "kaldırma" gibi kontrol seçenekleri sunmak isteyebilirsiniz. Bu blog yazısı, mağazanızı daha sezgisel ve kullanıcı dostu hale getirmenin nasıl mümkün olduğunu detaylı bir şekilde ele alacaktır.
Bu kılavuz, gerekli adımları kapsayacak ve Magento 2'ye odaklanarak teknik bir genel bakış sunacaktır. Bu makalenin sonunda, "Sepete Ekle" butonunu tıkladıktan sonra gizlemeyi ve yerine ürün miktarını değiştirme veya sepetten kaldırma seçeneklerini eklemeyi nasıl başarabileceğinizi anlayacaksınız.
Genel Kavram
Temel fikir, kullanıcı eylemlerine dayanarak kullanıcı arayüzünü dinamik olarak kontrol etmek üzerine kuruludur. Bir müşteri "Sepete Ekle" butonuna tıkladığında, düğme kaybolmalı ve ürünü artırma, azaltma veya silme seçenekleri görünmelidir. Bu tür bir işlevsellik, alışveriş sürecini daha etkileşimli ve yönetilebilir hale getirerek kullanıcı deneyimini geliştirir.
Uygulama Adımları
1. Müşteri Veri Yönetimi
Magento 2, alışveriş sepetiyle ilgili bilgileri yönetmek için müşteri verilerini kullanır. Düğme görünürlüğünü dinamik olarak yönetmek için bir require-js modülü oluşturmak bu sorunu çözebilir.
Adım 1: Bir RequireJS Modülü Oluşturma
İlk olarak, sepete eklenen ürün sayısına göre düğmeleri gizleme ve göstermeyi yöneten bir RequireJS modülü oluşturun. Bu modülü temanıza veya özel modül dizinine yerleştirin.
// app/design/frontend/{Vendor}/{theme}/web/js/hide-add-to-cart.js
define([
'jquery',
'mage/url',
'Magento_Customer/js/customer-data'
], function ($, urlBuilder, customerData) {
'use strict';
return function (config, element) {
var cart = customerData.get('cart');
var productId = config.productId;
cart.subscribe(function (cartData) {
updateButton(cartData);
});
function updateButton(cartData) {
var item = cartData.items.find(item => item.product_id === productId);
if (item && item.qty > 0) {
$(element).hide();
$('.quantity-controls[data-product-id="' + productId + '"]').show();
} else {
$(element).show();
$('.quantity-controls[data-product-id="' + productId + '"]').hide();
}
}
updateButton(cart());
$('.quantity-controls[data-product-id="' + productId + '"] .btn-remove').on('click', function () {
// Sepetten ürünü kaldırma mantığı
});
$('.quantity-controls[data-product-id="' + productId + '"] .btn-increment').on('click', function () {
// Ürün miktarını artırma mantığı
});
$('.quantity-controls[data-product-id="' + productId + '"] .btn-decrement').on('click', function () {
// Ürün miktarını azaltma mantığı
});
};
});
Adım 2: Ürün Şablonunda RequireJS Modülünü Entegre Etme
Ürün şablonlarına JavaScript modülünü ekleyin. Ürün görünüm şablonunu bu komut dosyasını içerecek şekilde güncelleyin.
<!-- app/design/frontend/{Vendor}/{theme}/Magento_Catalog/templates/product/view/addtocart.phtml -->
<button type="button" class="action tocart"
id="product-addtocart-button" title="<?= $block->escapeHtml(__('Sepete Ekle')) ?>"
data-role="tocart" data-product-sku="<?= $block->escapeHtml($block->getProduct()->getSku()) ?>">
<span><?= /* @escapeNotVerified */ __('Sepete Ekle') ?></span>
</button>
<div class="quantity-controls" data-product-id="<?= $block->escapeHtml($block->getProduct()->getId()) ?>" style="display: none;">
<button class="btn-decrement">-</button>
<input type="text" class="item-qty" value="1">
<button class="btn-increment">+</button>
<button class="btn-remove">Kaldır</button>
</div>
<script>
require(['jquery', 'hide-add-to-cart'], function ($, hideAddToCart) {
$(document).ready(function () {
hideAddToCart({
productId: '<?= $block->escapeHtml($block->getProduct()->getId()) ?>'
}, $('#product-addtocart-button'));
});
});
</script>
2. Düğme Görünürlük Mantığı
"Sepete Ekle" düğmesinin gizlendiğinden ve miktar denetimlerinin düzgün göründüğünden emin olmak için Knockout.js gözlemlenebilirlerini kullanarak sepet değişikliklerini izleyin.
Adım 1: Düzen XML'i Güncelleme
hide-add-to-cart.js dosyasını düzen içine dahil edin. Bunun için default_head_blocks.xml dosyasına ekleyin.
<!-- app/design/frontend/{Vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="js/hide-add-to-cart.js"/>
</head>
</page>
3. Test ve Hata Ayıklama
Değişiklikleri uyguladıktan sonra:
- Önbelleği Temizleyin: Magento önbelleğinizi temizleyerek değişikliklerin düzgün bir şekilde yansıdığından emin olun.
- Fonksiyonelliği Test Edin: "Sepete Ekle" düğmesinin tıklandığında gizlendiğini ve miktar denetimlerinin göründüğünü doğrulayın.
- Çoklu Tarayıcı Testi: Uyumluluğu sağlamak için işlevselliği farklı tarayıcılarda test edin.
- Özel Durumlar: Aynı ürünün birden fazla örneğinin eklenmesi gibi durumları dikkate alın ve arayüzün beklenildiği gibi davranmasını sağlayın.
Sonuç
Magento 2'de düğme davranışını dinamik olarak uygulamak, sadece kullanıcı etkileşimini iyileştirmekle kalmaz, aynı zamanda alışveriş sürecini de daha verimli hale getirir. Ön uçta küçük değişiklikler yaparak kullanıcılara ürün sayfasından doğrudan ürünlerini yönetme konusunda daha kolay bir yol sunabilirsiniz.
Bu adımları izlemek, e-ticaret platformunuzun üstün bir kullanıcı deneyimi sunması için önemlidir. Müşterilere ürünleri gerçek zamanlı olarak kolayca eklemelerine, değiştirmelerine ve kaldırmalarına olanak tanımak, müşteri memnuniyetini önemli ölçüde artırabilir ve daha yüksek dönüşüm oranlarına yol açabilir.
S.S.S.
Magento önbelleğini nasıl temizlerim?
Magento önbelleğinizi yönetim paneli aracılığıyla temizleyebilirsiniz. "Sistem > Önbellek Yönetimi"ne gidin ve "Magento Önbelleğini Temizle" seçeneğine tıklayın.
Bu yöntem özel temalarla uyumlu mudur?
Evet, bu yöntem esnektir ve özel temalara uyarlanabilir. RequireJS modülünü tamamlamayı ve şablonları buna göre güncellemeyi unutmayın.
Miktar denetimlerinin tasarımını kişiselleştirebilir miyim?
Tamamen. Miktar denetimleri için HTML ve CSS'yi mağazanızın temasına uyacak şekilde stilize edebilirsiniz.
Bu kılavuzu takip etmek, Magento 2 mağazanızın kullanıcı dostu hale gelmesini sağlar ve işletme ihtiyaçlarınıza özelleştirilmiş önyüz gereksinimleriyle başa çıkmanızı kolaylaştırır.
