<blockquote>Trong phát triển ứng dụng thương mại điện tử, tính năng thêm sản phẩm vào giỏ hàng là một phần quan trọng. Trong bài hướng dẫn này, chúng ta sẽ tìm hiểu cách sử dụng Context API trong ReactJS để quản lý trạng thái giỏ hàng và triển khai tính năng thêm sản phẩm vào giỏ hàng.</blockquote>
Tham khảo source code tại: <a href="https://github.com/hoanganhtuanbkdn/reactjs-learning-create-context" target="_blank">https://github.com/hoanganhtuanbkdn/reactjs-learning-create-context</a>&nbsp;
Bước 1: Tạo Context cho Giỏ Hàng
<pre>import React, { useContext, useState } from 'react';</pre>
<pre>const ShopContext = React.createContext([]);</pre>
<pre>const ShopProvider = ({ children }) =&gt; {</pre>
<pre>	const [carts, setCarts] = useState([]);</pre>
<pre>	const addProductToCart = (newProduct) =&gt; {</pre>
<pre>		setCarts([newProduct, ...carts]);</pre>
<pre>	};</pre>
<pre>	const removeProductToCart = (product) =&gt; {</pre>
<pre>		const newCarts = carts.filter((item) =&gt; item.id !== product.id);</pre>
<pre>		setCarts(newCarts);</pre>
<pre>	};</pre>
<pre>	return (</pre>
<pre>		&lt;ShopContext.Provider</pre>
<pre>			value={{</pre>
<pre>				carts,</pre>
<pre>				addProductToCart,</pre>
<pre>				removeProductToCart,</pre>
<pre>			}}</pre>
<pre>		&gt;</pre>
<pre>			{children}</pre>
<pre>		&lt;/ShopContext.Provider&gt;</pre>
<pre>	);</pre>
<pre>};</pre>
<pre>const useShopContext = () =&gt; {</pre>
<pre>	const shopContext = useContext(ShopContext);</pre>
<pre>	return shopContext;</pre>
<pre>};</pre>
<pre>export { ShopProvider, useShopContext };</pre>
Bước 2: Sử dụng ShopProvider để kết nối tất cả component sử dụng Context
<pre>import React from 'react';</pre>
<pre>import Home from './pages/Home';</pre>
<pre>import { createBrowserRouter, RouterProvider } from 'react-router-dom';</pre>
<pre>import Detail from './pages/Detail';</pre>
<pre>import { ShopProvider } from './context/ShopContext';</pre>
<pre>const router = createBrowserRouter([</pre>
<pre>	{</pre>
<pre>		path: '/',</pre>
<pre>		element: &lt;Home /&gt;,</pre>
<pre>	},</pre>
<pre>	{</pre>
<pre>		path: '/detail/:id',</pre>
<pre>		element: &lt;Detail /&gt;,</pre>
<pre>	},</pre>
<pre>]);</pre>
<pre></pre>
<pre>const App = () =&gt; {</pre>
<pre>	return (</pre>
<pre>		&lt;ShopProvider&gt;</pre>
<pre>			&lt;RouterProvider router={router} /&gt;</pre>
<pre>		&lt;/ShopProvider&gt;</pre>
<pre>	);</pre>
<pre>};</pre>
<pre>export default App;</pre>
Bước 3: Tạo Component danh sách sản phẩm
<pre>import { useShopContext } from '../context/ShopContext';</pre>
<pre>const products = [</pre>
<pre>	{</pre>
<pre>		id: 1,</pre>
<pre>		name: 'Purple women shirt',</pre>
<pre>		image: '/images/product-1.webp',</pre>
<pre>		imageHover: '/images/product-1-hover.webp',</pre>
<pre>	},</pre>
<pre>	{</pre>
<pre>		id: 2,</pre>
<pre>		name: 'Purple women shirt',</pre>
<pre>		image: '/images/product-2.webp',</pre>
<pre>		imageHover: '/images/product-2-hover.webp',</pre>
<pre>	},</pre>
<pre>	{</pre>
<pre>		id: 3,</pre>
<pre>		name: 'Purple women shirt',</pre>
<pre>		image: '/images/product-3.webp',</pre>
<pre>		imageHover: '/images/product-3-hover.webp',</pre>
<pre>	},</pre>
<pre>	{</pre>
<pre>		id: 4,</pre>
<pre>		name: 'Purple women shirt',</pre>
<pre>		image: '/images/product-4.webp',</pre>
<pre>		imageHover: '/images/product-4-hover.webp',</pre>
<pre>	},</pre>
<pre>];</pre>
<pre>function List() {</pre>
<pre>	const { addProductToCart } = useShopContext();</pre>
<pre>	return (</pre>
<pre>		&lt;div className="container mx-auto py-10"&gt;</pre>
<pre>			&lt;div className="card"&gt;</pre>
<pre>				&lt;div className="text-center mb-6"&gt;</pre>
<pre>					&lt;h2 className="text-3xl"&gt;Best selling fashion items&lt;/h2&gt;</pre>
<pre>					&lt;h4 className="mt-4"&gt;</pre>
<pre>						Base optimal relaxation unlock my. Asserts too invite</pre>
<pre>						web cause eow can breakout ocean create.</pre>
<pre>					&lt;/h4&gt;</pre>
<pre>				&lt;/div&gt;</pre>
<pre>				&lt;div className="grid grid-cols-1 md:grid-cols-4 gap-5"&gt;</pre>
<pre>					{products.map((item, index) =&gt; (</pre>
<pre>						&lt;div</pre>
<pre>							className="group relative overflow-hidden"</pre>
<pre>							key={index}</pre>
<pre>							onClick={addProductToCart}</pre>
<pre>						&gt;</pre>
<pre>							&lt;img</pre>
<pre>								src={item.image}</pre>
<pre>								alt={item.name}</pre>
<pre>								className="w-full"</pre>
<pre>							/&gt;</pre>
<pre>							&lt;img</pre>
<pre>								src={item.imageHover}</pre>
<pre>								alt={item.name}</pre>
<pre>								className="absolute left-0 top-0 z-20 opacity-0 group-hover:opacity-100 group-hover:scale-125 transition-all duration-200 ease-linear"</pre>
<pre>							/&gt;</pre>
<pre>							&lt;div className="absolute z-30 delay-150 -bottom-20 left-0 right-0 flex items-center justify-center group-hover:bottom-10 transition-all duration-200 ease-linear"&gt;</pre>
<pre>								&lt;button className="hover:bg-[#DF4141] border py-[10px] px-5 text-sm hover:text-white bg-white transition-all duration-200"&gt;</pre>
<pre>									Add to cart</pre>
<pre>								&lt;/button&gt;</pre>
<pre>							&lt;/div&gt;</pre>
<pre>						&lt;/div&gt;</pre>
<pre>					))}</pre>
<pre>				&lt;/div&gt;</pre>
<pre>			&lt;/div&gt;</pre>
<pre>		&lt;/div&gt;</pre>
<pre>	);</pre>
<pre>}</pre>
<pre>export default List;</pre>
Bước 4: Tạo Header, nơi hiển thị thông tin sản phẩm được thêm vào giỏ hàng
<pre>import React from 'react';</pre>
<pre>import { useShopContext } from '../context/ShopContext';</pre>
<pre></pre>
<pre>export default function Header() {</pre>
<pre>	const { carts } = useShopContext();</pre>
<pre></pre>
<pre>	return (</pre>
<pre>		&lt;div className=" h-[75px] border border-[rgba(204, 199, 199, 0.35)]"&gt;</pre>
<pre>			&lt;div className="container mx-auto flex flex-row justify-between items-center h-full"&gt;</pre>
<pre>				&lt;div className=""&gt;</pre>
<pre>					&lt;img</pre>
<pre>						src="/images/logo.webp"</pre>
<pre>						alt=""</pre>
<pre>						className="w-[175px] h-[45px]"</pre>
<pre>					/&gt;</pre>
<pre>				&lt;/div&gt;</pre>
<pre>				&lt;div className="flex flex-row gap-5"&gt;</pre>
<pre>					&lt;div&gt;Home&lt;/div&gt;</pre>
<pre>					&lt;div&gt;Product&lt;/div&gt;</pre>
<pre>					&lt;div&gt;Contact&lt;/div&gt;</pre>
<pre>				&lt;/div&gt;</pre>
<pre>				&lt;div className="relative"&gt;</pre>
<pre>					Giỏ hàng</pre>
<pre>					&lt;p className="absolute top-[-10px] right-[-10px] text-xs font-bold"&gt;</pre>
<pre>						{carts.length}</pre>
<pre>					&lt;/p&gt;</pre>
<pre>				&lt;/div&gt;</pre>
<pre>			&lt;/div&gt;</pre>
<pre>		&lt;/div&gt;</pre>
<pre>	);</pre>
<pre>}</pre>
Khi bạn đã làm theo hướng dẫn này, ứng dụng của bạn sẽ có tính năng thêm sản phẩm vào giỏ hàng sử dụng Context API của ReactJS. Điều này cho phép bạn quản lý trạng thái giỏ hàng một cách hiệu quả và dễ dàng. Hãy tùy chỉnh và phát triển thêm tính năng để tạo ra một trải nghiệm mua sắm đáng nhớ, và để bình luận nếu mong muốn chúng tôi hỗ trợ thêm tính năng mới hoặc mô tả chi tiết hơn một nội dung nào đó mà chưa hiểu.
Chúc bạn thành công trên con đường của mình. 
Cảm ơn đã ủng hộ kênh Code4Change

Mang đến hướng dẫn chi tiết về cách tích hợp tính năng thêm sản phẩm vào giỏ hàng bằng ReactJS. Bài viết này sẽ hướng dẫn bạn qua từng bước triển khai tính năng quan trọng này trong phát triển ứng dụng thương mại điện tử. Tận dụng sự mạnh mẽ của ReactJS để tạo trải nghiệm mua sắm mượt mà và tùy chỉnh theo mong muốn của bạn.

Hướng dẫn tạo tính năng thêm sản phẩm vào giỏi hàng với Reactjs