كيفية إنشاء عربة تسوق في Next.js مع السياق و useReducer

تعتبر عربة التسوق جزءًا أساسيًا من أي موقع للتجارة الإلكترونية. يسمح للعملاء بتخزين وشراء المنتجات.

في تطبيق التجارة الإلكترونية Next.js ، يمكنك استخدام واجهة برمجة تطبيقات السياق وخطاف useReducer لإنشاء عربة. تعمل واجهة برمجة تطبيقات السياق على تبسيط مشاركة بيانات سلة التسوق بين المكونات بينما يتولى useReducer حالة سلة التسوق.

إنشاء صفحة المنتج

في مجلد الصفحات ، أنشئ ملفًا جديدًا يسمى Product.jsx يعرض منتجًا واحدًا.

يصدّرتقصيروظيفةمنتج({المعرف ، الاسم ، السعر}) {
يعود (


{name} </p>

{السعر} </p>
أضف إلى عربة التسوق </button>
 </div>
 )
}

يقبل مكون المنتج معرف المنتج واسمه وسعره ويعرضه. كما أن لديها زر "إضافة إلى عربة التسوق".

عندما تتم إضافة منتج بالفعل إلى عربة التسوق ، يجب أن يتحول الزر إلى زر "إزالة من سلة التسوق" وإذا لم يكن المنتج موجودًا في سلة التسوق ، فيجب أن تعرض الصفحة الزر "إضافة إلى عربة التسوق".

لتنفيذ هذه الوظيفة ، ستحتاج إلى تتبع العناصر الموجودة في سلة التسوق باستخدام سياق API و useReducer هوك.

إنشاء سلة تسوق باستخدام السياق API

تتيح لك واجهة برمجة تطبيقات السياق مشاركة البيانات عبر مكونات مختلفة دون الحاجة إلى تمرير الخاصيات يدويًا من الوالدين إلى الطفل. يمكن أن تكون هذه المكونات عبارة عن شريط التنقل أو صفحة تفاصيل المنتج أو صفحة الدفع.

قم بإنشاء ملف جديد يسمى cartContext.js في مجلد يسمى السياق وإنشاء السياق.

يستورد {createContext} من"تتفاعل";
يصدّرمقدار ثابت CartContext = createContext ({
 أغراض: []،
});

يأخذ CartContext مصفوفة من العناصر كقيمة افتراضية.

بعد ذلك ، قم بإنشاء موفر السياق. يسمح موفر السياق للمكونات التي تستهلك السياق بالاشتراك في تغييرات السياق.

في وظيفة جديدة تسمى cartProvider ، أضف ما يلي:

يصدّرمقدار ثابت CartProvider = ({ أطفال }) => {
يعود<CartContext. مزود>{أطفال}CartContext. مزود>;
};

لتتبع العناصر الموجودة في العربة ، ستستخدم الخطاف useReducer.

يعمل الخطاف useReducer مثل الخطاف useState إلا أنه يساعد في إدارة منطق الحالة الأكثر تعقيدًا. يقبل وظيفة المخفض والحالة الأولية. تقوم بإرجاع الحالة الحالية ووظيفة الإرسال التي تمرر إجراءً إلى وظيفة المخفض.

قم بإنشاء وظيفة جديدة تسمى CartReducer وأضف المخفض.

مقدار ثابت كارت مخفض = (الدولة والعمل) => {
مقدار ثابت {type، payload} = عمل؛
يُحوّل (يكتب) {
قضية"يضيف":
يعود {
 ...ولاية،
 العناصر: payload.items ،
 };
قضية"يزيل":
يعود {
 ...ولاية،
 العناصر: payload.items ،
 };
تقصير:
يرميجديدخطأ("لا توجد حالة لهذا النوع");
 }
};

تشتمل وظيفة المخفض على بيان تبديل يقوم بتحديث الحالة اعتمادًا على نوع الإجراء. تحتوي وظيفة مخفض العربة على عمليتي "إضافة" و "إزالة" تضيفان إلى العربة وإزالتها من العربة على التوالي.

بعد إنشاء وظيفة المخفض ، استخدمها في خطاف useReducer. ابدأ بإنشاء وظيفة CartProvider. هذه هي الوظيفة التي ستوفر السياق للمكونات الأخرى.

يصدّرمقدار ثابت CartProvider = ({أطفال}) => {
يعود<CartContext. مزود>{أطفال}CartContext. مزود>;
}

ثم قم بإنشاء خطاف useReducer.

يصدّرمقدار ثابت CartProvider = ({ أطفال }) => {
مقدار ثابت [state، dispatch] = useReducer (cartReducer ، { أغراض: [] });
يعود<CartContext. مزود>{أطفال}CartContext. مزود>;
};

وظيفة الإرسال مسؤولة عن تحديث حالة العربة ، لذا قم بتعديل وظيفة CartProvider لتشمل الوظائف التي ترسل المنتجات إلى خطاف useReducer عند تحديث العربة.

يستورد {createContext، useReducer} من"تتفاعل";
يصدّرمقدار ثابت CartProvider = ({ أطفال }) => {
مقدار ثابت [state، dispatch] = useReducer (cartReducer، initialState) ؛
مقدار ثابت addToCart = (منتج) => {
مقدار ثابت updatedCart = [... state.items، product] ؛
 إرسال({
 يكتب: "يضيف",
 الحمولة: {
 العناصر: updatedCart ،
 },
 });
 };
مقدار ثابت removeFromCart = (بطاقة تعريف) => {
مقدار ثابت updatedCart = state.items.filter (
 (currentProduct) => currentProduct.id! == معرف
 );
 إرسال({
 يكتب: "يزيل",
 الحمولة: {
 العناصر: updatedCart ،
 },
 });
 };
يعود<CartContext. مزود>{أطفال}CartContext. مزود>;
};

تلحق الدالة addToCart المنتج الجديد بالمنتجات الحالية وترجع المنتجات المحدثة في كائن الحمولة لوظيفة الإرسال. وبالمثل ، تقوم وظيفة removeFromCart بتصفية العنصر حسب المعرف وإرجاع القائمة المحدثة.

تحتاج أيضًا إلى إرجاع خاصية القيمة في موفر CartContext.

يصدّرمقدار ثابت CartProvider = ({ أطفال }) => {
مقدار ثابت [state، dispatch] = useReducer (cartReducer ، {
 أغراض: []،
 });
مقدار ثابت addToCart = (منتج) => {};
مقدار ثابت removeFromCart = (بطاقة تعريف) => {};
مقدار ثابت القيمة = {
 العناصر: state.items ،
 أضف إلى السلة،
 removeFromCart ،
 };
يعود<CartContext. مزودقيمة={قيمة}>{أطفال}CartContext. مزود>;
}

تُستهلك خاصية value عبر الخطاف useContext.

استهلاك سياق سلة التسوق

لقد أنشأت حتى الآن سياق سلة التسوق وأنشأت وظيفة useReducer التي تُحدِّث سلة التسوق. بعد ذلك ، ستستهلك سياق سلة التسوق في مكون المنتج باستخدام الخطاف useContext.

ابدأ بلف index.js ، المكون الأعلى ، بموفر السياق لإتاحة قيم السياق عبر التطبيق بأكمله.

يستورد {CartProvider} من"../context/cartContext";
وظيفةتطبيقي({مكون ، pageProps}) {
يعود (


 </CartProvider>
 );
}
يصدّرتقصير تطبيقي؛

ثم قم باستيراد الخطاف useContext وموفر سياق سلة التسوق في Product.js

يستورد {useContext} من"تتفاعل"
يستورد {CartContext} من"../context/cartContext"
يصدّرتقصيروظيفةمنتج() {
مقدار ثابت {items، addToCart، removeFromCart} = useContext (CartContext)
يعود (
 <>


{name} </p>

{السعر} </p>
أضف إلى عربة التسوق </button>
 </div>
 </>
 )
}

تعتمد وظيفة الزر على ما إذا كان العنصر موجودًا بالفعل في سلة التسوق. في حالة وجود عنصر في سلة التسوق ، يجب على الزر إزالته من السلة وإذا لم يكن العنصر موجودًا بالفعل في سلة التسوق ، فيجب إضافته. هذا يعني أنه يجب عليك تتبع حالة العنصر باستخدام useEffect و useState. يتحقق رمز useEffect مما إذا كان العنصر موجودًا في سلة التسوق بعد عرض المكون أثناء قيام useState بتحديث حالة العنصر.

مقدار ثابت [موجود ، setExists] = useState (خطأ شنيع);
useEffect (() => {
مقدار ثابت inCart = items.find ((غرض) => معرف البند) ؛
لو (في العربة) {
 setExists (حقيقي);
 } آخر {
 setExists (خطأ شنيع);
 } 
} ، [العناصر ، معرف]) ؛

الآن، استخدام العرض الشرطي لإظهار الزر بناءً على حالة الوجود.

يعود (


{name} </p>

{السعر} </p>
 {
 موجود
? <زرعند النقر={() => removeFromCart (id)}> إزالة من السلةزر>
: <زرعند النقر={() => addToCart ({id، name، price})}> أضف إلى عربة التسوقزر>
 }
 </div>
)

لاحظ أن وظائف معالج onClick هي وظائف removeFromCart و addToCart المحددة في موفر السياق.

إضافة المزيد من الوظائف إلى عربة التسوق

لقد تعلمت كيفية إنشاء عربة تسوق باستخدام واجهة برمجة تطبيقات السياق وخطاف useReducer.

على الرغم من أن هذا الدليل يغطي فقط وظائف الإضافة والإزالة ، يمكنك استخدام نفس المفاهيم لإضافة المزيد من الميزات مثل ضبط كميات عناصر سلة التسوق. الشيء المهم هو فهم واجهة برمجة تطبيقات السياق وكيفية استخدام الخطافات لتحديث تفاصيل سلة التسوق.