קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

עגלת קניות היא חלק חיוני בכל אתר מסחר אלקטרוני. זה מאפשר ללקוחות לאחסן ולרכוש מוצרים.

באפליקציית מסחר אלקטרוני של Next.js, אתה יכול להשתמש ב-Context API וב-useReducer Hook כדי ליצור עגלה. ה-Context API מפשט את השיתוף של נתוני העגלה בין רכיבים בעוד useReducer מטפל במצב העגלה.

יצירת דף המוצר

בתיקיית pages, צור קובץ חדש בשם Product.jsx שמציג מוצר בודד.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהמוצר({מזהה, שם, מחיר}) {
לַחֲזוֹר (


{name}</p>


{price}</p>

רכיב המוצר מקבל את המזהה, השם והמחיר של מוצר ומציג אותו. יש לו גם כפתור "הוסף לעגלה".

כאשר מוצר כבר נוסף לעגלת הקניות, הכפתור אמור לעבור לכפתור "הסר מהסל" ואם מוצר לא נמצא בעגלה, הדף אמור להציג את כפתור "הוסף לעגלה".

כדי ליישם את הפונקציונליות הזו, תצטרך לעקוב אחר הפריטים בעגלה באמצעות ה-Context API ו- UseReducer וו.

יצירת עגלת קניות באמצעות ה-Context API

ה-Context API מאפשר לך לשתף נתונים על פני רכיבים שונים מבלי שתצטרך להעביר אביזרים ידנית מהורה לילד. רכיבים אלה יכולים להיות סרגל הניווט, דף פרטי המוצר או דף התשלום.

instagram viewer

צור קובץ חדש בשם cartContext.js בתיקייה בשם context וצור את ההקשר.

יְבוּא { createContext } מ"לְהָגִיב";
יְצוּאconst CartContext = createContext({
 פריטים: [],
});

CartContext לוקח מערך של פריטים כערך ברירת המחדל.

לאחר מכן, צור את ספק ההקשר. ספק הקשר מאפשר לרכיבים שצורכים את ההקשר להירשם לשינויי הקשר.

בפונקציה חדשה בשם cartProvider, הוסף את הדברים הבאים:

יְצוּאconst CartProvider = ({ ילדים }) => {
לַחֲזוֹר<CartContext. ספק>{יְלָדִים}CartContext. ספק>;
};

כדי לעקוב אחר הפריטים בעגלה, תשתמש ב-useReducer וו.

ה-useReducer hook פועל כמו ה-useState, אלא שהוא עוזר לנהל לוגיקה מצב מורכבת יותר. הוא מקבל פונקציית מפחית ואת המצב ההתחלתי. הוא מחזיר את המצב הנוכחי ופונקציית שיגור המעבירה פעולה לפונקציית המפחית.

צור פונקציה חדשה בשם CartReducer והוסף את המפחית.

const cartReducer = (מדינה, פעולה) => {
const { type, payload } = פעולה;
החלף (סוג) {
מקרה"לְהוֹסִיף":
לַחֲזוֹר {
 ...מדינה,
 פריטים: payload.items,
 };


מקרה"לְהַסִיר":
לַחֲזוֹר {
 ...מדינה,
 פריטים: payload.items,
 };
בְּרִירַת מֶחדָל:
לזרוקחָדָשׁשְׁגִיאָה("אין תיק לסוג הזה");
 }
};

פונקציית המפחית כוללת הצהרת מתג שמעדכנת את המצב בהתאם לסוג הפעולה. לפונקציית הפחתת העגלה יש פעולות "הוספה" ו"הסרה" המוסיפות לעגלה ומסירות מהעגלה בהתאמה.

לאחר יצירת פונקציית המפחית, השתמש בה ב-useReducer Hook. התחל ביצירת הפונקציה CartProvider. זו הפונקציה שתספק את ההקשר לרכיבים אחרים.

יְצוּאconst CartProvider = ({יְלָדִים}) => {
לַחֲזוֹר<CartContext. ספק>{יְלָדִים}CartContext. ספק>;
}

לאחר מכן, צור את הוו useReducer.

יְצוּאconst CartProvider = ({ ילדים }) => {
const [state, dispatch] = useReducer (cartReducer, { פריטים: [] });
לַחֲזוֹר<CartContext. ספק>{יְלָדִים}CartContext. ספק>;
};

פונקציית השיגור אחראית לעדכון מצב העגלה, לכן שנה את הפונקציה CartProvider כך שתכלול פונקציות המשגרות מוצרים ל-useReducer הוק כאשר העגלה מתעדכנת.

יְבוּא { createContext, useReducer } מ"לְהָגִיב";
יְצוּאconst CartProvider = ({ ילדים }) => {
const [state, dispatch] = useReducer (cartReducer, initialState);


const addToCart = (מוצר) => {
const updatedCart = [...state.items, product];


 לְשַׁגֵר({
 סוּג: "לְהוֹסִיף",
 מטען: {
 פריטים: updatedCart,
 },
 });
 };


const removeFromCart = (תְעוּדַת זֶהוּת) => {
const updatedCart = state.items.filter(
 (currentProduct) => currentProduct.id !== מזהה
 );


 לְשַׁגֵר({
 סוּג: "לְהַסִיר",
 מטען: {
 פריטים: updatedCart,
 },
 });
 };
לַחֲזוֹר<CartContext. ספק>{יְלָדִים}CartContext. ספק>;
};

הפונקציה addToCart מוסיפה את המוצר החדש למוצרים הקיימים ומחזירה את המוצרים המעודכנים באובייקט המטען של פונקציית השילוח. באופן דומה, הפונקציה removeFromCart מסננת את הפריט לפי מזהה ומחזירה את הרשימה המעודכנת.

אתה גם צריך להחזיר את ה-value prop בספק CartContext.

יְצוּאconst CartProvider = ({ ילדים }) => {
const [state, dispatch] = useReducer (cartReducer, {
 פריטים: [],
 });
const addToCart = (מוצר) => {};
const removeFromCart = (תְעוּדַת זֶהוּת) => {};


const ערך = {
 פריטים: state.items,
 הוסף לעגלה,
 RemoveFromCart,
 };
לַחֲזוֹר<CartContext. ספקערך={ערך}>{יְלָדִים}CartContext. ספק>;
}

אבזר הערך נצרך באמצעות ה- useContext hook.

צריכת ההקשר של העגלה

עד כה יצרת את הקשר העגלה ויצרת פונקציית useReducer שמעדכנת את העגלה. לאחר מכן, תצרוך את הקשר העגלה ברכיב המוצר באמצעות ה-useContext hook.

התחל על ידי גלישת index.js, הרכיב העליון, עם ספק ההקשר כדי להפוך את ערכי ההקשר לזמינים בכל האפליקציה.

יְבוּא { CartProvider } מ"../context/cartContext";
פוּנקצִיָהMyApp({ Component, pageProps }) {
לַחֲזוֹר (


 </CartProvider>
 );
}
יְצוּאבְּרִירַת מֶחדָל MyApp;

לאחר מכן ייבא את ה-useContext hook ואת ספק ההקשר של העגלה ב-Product.js

יְבוּא { useContext } מ"לְהָגִיב"
יְבוּא { CartContext } מ"../context/cartContext"
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהמוצר() {
const {items, addToCart, removeFromCart} = useContext (CartContext)
לַחֲזוֹר (
 <>


{name}</p>


{price}</p>

פונקציית הכפתור תלויה אם הפריט כבר נמצא בעגלה. אם קיים פריט בעגלה, הכפתור אמור להסיר אותו מהסל ואם פריט לא נמצא כבר בעגלה, עליו להוסיף אותו. המשמעות היא שעליך לעקוב אחר מצב הפריט באמצעות useEffect ו-useState. קוד useEffect בודק אם הפריט נמצא בעגלה לאחר עיבוד הרכיב בזמן ש-useState מעדכן את מצב הפריט.

const [exists, setExists] = useState(שֶׁקֶר);
useEffect(() => {
const inCart = items.find((פריט) => מזהה item.id);
אם (בעגלה) {
 setExists(נָכוֹן);
 } אַחֵר {
 setExists(שֶׁקֶר);
 } 
}, [פריטים, מזהה]);

עַכשָׁיו, השתמש בעיבוד מותנה כדי להציג את הכפתור בהתבסס על המצב הקיים.

לַחֲזוֹר (


{name}</p>


{price}</p>
 {
 קיים
? <לַחְצָןבלחיצה={() => removeFromCart (id)}>הסר מהסללַחְצָן>
: <לַחְצָןבלחיצה={() => addToCart({id, name, price})}>הוסף לעגלהלַחְצָן>
 }
 </div>
)

שימו לב שהפונקציות של המטפל onClick הן הפונקציות removeFromCart ו-addToCart המוגדרות בספק ההקשר.

הוספת פונקציונליות נוספת לעגלה

למדת כיצד ליצור עגלת קניות באמצעות ה-Context API וה-UseReducer Hook.

למרות שמדריך זה עסק רק בפונקציונליות של הוספה והסרה, אתה יכול להשתמש באותם מושגים כדי להוסיף תכונות נוספות כמו התאמת כמויות פריטי העגלה. הדבר החשוב הוא הבנת ה-API של ההקשר וכיצד להשתמש ב-hooks כדי לעדכן את פרטי העגלה.