Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Alışveriş sepeti, herhangi bir e-ticaret sitesinin önemli bir parçasıdır. Müşterilerin ürünleri depolamasına ve satın almasına olanak tanır.

Bir Next.js e-ticaret uygulamasında, alışveriş sepeti oluşturmak için Bağlam API'sini ve useReducer kancasını kullanabilirsiniz. Bağlam API'si, sepet verilerinin bileşenler arasında paylaşımını basitleştirirken, useReducer sepet durumunu yönetir.

Ürün Sayfası Oluşturma

Sayfalar klasöründe, tek bir ürünü işleyen Product.jsx adlı yeni bir dosya oluşturun.

ihracatvarsayılanişlevÜrün({kimlik, ad, fiyat}) {
geri dönmek (


{isim}/p>


{fiyat}/p>

Ürün bileşeni, bir ürünün kimliğini, adını ve fiyatını kabul eder ve görüntüler. Ayrıca “Sepete Ekle” düğmesi de vardır.

Sepete ürün eklendiğinde buton “sepetten çıkar” butonuna dönüşmeli ve ürün sepette yok ise sayfada “Sepete ekle” butonu görünmelidir.

Bu işlevi uygulamak için alışveriş sepetindeki ürünleri takip etmeniz gerekir. bağlam API'sini kullanma ve useReducer kancası.

Bağlam API'sini Kullanarak Alışveriş Sepeti Oluşturma

Bağlam API'si, donanımları ebeveynden çocuğa manuel olarak aktarmak zorunda kalmadan verileri farklı bileşenler arasında paylaşmanıza olanak tanır. Bu bileşenler gezinme çubuğu, ürün ayrıntıları sayfası veya ödeme sayfası olabilir.

Bağlam adlı bir klasörde cartContext.js adlı yeni bir dosya oluşturun ve bağlamı oluşturun.

içe aktarmak {bağlam oluştur} itibaren"tepki";
ihracatsabit CartContext = içerik oluştur({
 öğeler: [],
});

CartContext, bir öğe dizisini varsayılan değer olarak alır.

Ardından, içerik sağlayıcıyı oluşturun. Bağlam sağlayıcı, bağlamı kullanan bileşenlerin içerik değişikliklerine abone olmasına izin verir.

cartProvider adlı yeni bir işleve aşağıdakileri ekleyin:

ihracatsabit Sepet Sağlayıcı = ({ çocuklar }) => {
geri dönmek<CartContext. Sağlayıcı>{çocuklar}CartContext. Sağlayıcı>;
};

Sepetteki ürünleri takip etmek için useReducer kancasını kullanacaksınız.

useReducer kancası, daha karmaşık durum mantığını yönetmeye yardımcı olması dışında useState kancası gibi çalışır. Bir indirgeyici işlevi ve başlangıç ​​durumunu kabul eder. Mevcut durumu ve indirgeme işlevine bir eylem ileten bir gönderme işlevini döndürür.

CartReducer adlı yeni bir işlev oluşturun ve redüktörü ekleyin.

sabit cartReducer = (durum, eylem) => {
sabit { tip, yük } = eylem;
anahtar (tip) {
dava"EKLEMEK":
geri dönmek {
 ...durum,
 öğeler: payload.items,
 };


dava"KALDIRMAK":
geri dönmek {
 ...durum,
 öğeler: payload.items,
 };
varsayılan:
fırlatmakyeniHata("Bu tür için dava yok");
 }
};

Redüktör işlevi, eylemin türüne bağlı olarak durumu güncelleyen bir switch ifadesinden oluşur. Sepet küçültme işlevi, sırasıyla sepete ekleyen ve sepetten çıkaran “EKLE” ve “KALDIR” eylemlerine sahiptir.

Redüktör fonksiyonunu oluşturduktan sonra useReducer kancasında kullanın. CartProvider işlevini oluşturarak başlayın. Bu, diğer bileşenlere bağlam sağlayacak olan işlevdir.

ihracatsabit Sepet Sağlayıcı = ({çocuklar}) => {
geri dönmek<CartContext. Sağlayıcı>{çocuklar}CartContext. Sağlayıcı>;
}

Ardından, useReducer kancasını oluşturun.

ihracatsabit Sepet Sağlayıcı = ({ çocuklar }) => {
sabit [durum, gönderim] = useReducer (cartReducer, { öğeler: [] });
geri dönmek<CartContext. Sağlayıcı>{çocuklar}CartContext. Sağlayıcı>;
};

Sevk işlevi, sepet durumunu güncellemekten sorumludur, bu nedenle, sepet güncellendiğinde ürünleri useReducer kancasına gönderen işlevleri içerecek şekilde CartProvider işlevini değiştirin.

içe aktarmak { createContext, useReducer } itibaren"tepki";
ihracatsabit Sepet Sağlayıcı = ({ çocuklar }) => {
sabit [durum, gönderme] = reducer kullan (cartReducer, initialState);


sabit sepete ekle = (ürün) => {
sabit güncelSepet = [...durum.öğeler, ürün];


 sevk etmek({
 tip: "EKLEMEK",
 yük: {
 öğeler: güncellendiSepet,
 },
 });
 };


sabit Sepetten Kaldır = (İD) => {
sabit güncelSepet = state.items.filter(
 (currentProduct) => currentProduct.id !== id
 );


 sevk etmek({
 tip: "KALDIRMAK",
 yük: {
 öğeler: güncellendiSepet,
 },
 });
 };
geri dönmek<CartContext. Sağlayıcı>{çocuklar}CartContext. Sağlayıcı>;
};

addToCart işlevi, yeni ürünü mevcut ürünlere ekler ve güncellenen ürünleri gönderim işlevinin yük nesnesinde döndürür. Benzer şekilde, removeFromCart işlevi, öğeyi kimliğe göre filtreler ve güncellenmiş listeyi döndürür.

Ayrıca CartContext sağlayıcısında prop değerini döndürmeniz gerekir.

ihracatsabit Sepet Sağlayıcı = ({ çocuklar }) => {
sabit [durum, gönderim] = useReducer (cartReducer, {
 öğeler: [],
 });
sabit sepete ekle = (ürün) => {};
sabit Sepetten Kaldır = (İD) => {};


sabit değer = {
 öğeler: durum.öğeler,
 Sepete ekle,
 Sepetten kaldır,
 };
geri dönmek<CartContext. Sağlayıcıdeğer={değer}>{çocuklar}CartContext. Sağlayıcı>;
}

Value prop, useContext kancası aracılığıyla tüketilir.

Sepet İçeriğini Kullanma

Şu ana kadar sepet içeriğini oluşturdunuz ve sepeti güncelleyen bir useReducer işlevi yarattınız. Ardından, useContext kancasını kullanarak ürün bileşenindeki sepet içeriğini kullanacaksınız.

Bağlam değerlerinin tüm uygulamada kullanılabilir olmasını sağlamak için en üstteki bileşen olan index.js'yi bağlam sağlayıcıyla sarmalayarak başlayın.

içe aktarmak { Sepet Sağlayıcı } itibaren"../bağlam/cartContext";
işlevUygulamam({ Bileşen, pageProps }) {
geri dönmek (


 </CartProvider>
 );
}
ihracatvarsayılan Uygulamam;

Ardından, Product.js'de useContext kancasını ve alışveriş sepeti bağlamı sağlayıcısını içe aktarın

içe aktarmak { bağlamı kullan } itibaren"tepki"
içe aktarmak { CartContext } itibaren"../bağlam/cartContext"
ihracatvarsayılanişlevÜrün() {
sabit {items, addToCart, removeFromCart} = useContext (CartContext)
geri dönmek (
 <>


{isim}/p>


{fiyat}/p>

Düğme işlevi, öğenin zaten sepette olup olmadığına bağlıdır. Sepette bir ürün varsa, düğme onu sepetten çıkarmalı ve bir ürün sepette yoksa, eklemelidir. Bu, öğenin durumunu useEffect ve useState kullanarak takip etmeniz gerektiği anlamına gelir. UseEffect kodu, bileşen oluşturulduktan sonra öğenin sepette olup olmadığını kontrol ederken, useState öğenin durumunu günceller.

sabit [var, setExists] = useState(YANLIŞ);
useEffect(() => {
sabit sepette = item.find((öğe) => öğe.id kimliği);
eğer (sepetinde) {
 setVar(doğru);
 } başka {
 setVar(YANLIŞ);
 } 
}, [öğeler, kimlik]);

Şimdi, koşullu oluşturmayı kullan mevcut duruma göre düğmeyi göstermek için.

geri dönmek (


{isim}/p>


{fiyat}/p>
 {
 var
? <düğmetıklamada={() => removeFromCart (id)}>Sepetten Kaldırdüğme>
: <düğmetıklamada={() => addToCart({id, name, price})}>Sepete Ekledüğme>
 }
 </div>
)

onClick işleyici işlevlerinin, içerik sağlayıcıda tanımlanan removeFromCart ve addToCart işlevleri olduğunu unutmayın.

Sepete Daha Fazla İşlevsellik Ekleme

Bağlam API'sini ve useReducer kancasını kullanarak bir alışveriş sepetini nasıl oluşturacağınızı öğrendiniz.

Bu kılavuz yalnızca ekleme ve kaldırma işlevlerini ele alsa da, aynı kavramları, sepet öğelerinin miktarlarını ayarlamak gibi daha fazla özellik eklemek için kullanabilirsiniz. En önemli şey, içerik API'sini ve alışveriş sepeti ayrıntılarını güncellemek için kancaların nasıl kullanılacağını anlamaktır.