Ostoskori on olennainen osa mitä tahansa verkkokauppasivustoa. Sen avulla asiakkaat voivat säilyttää ja ostaa tuotteita.
Next.js-verkkokauppasovelluksessa voit luoda ostoskorin Context API: n ja useReducer-koukun avulla. Konteksti-API yksinkertaistaa ostoskorin tietojen jakamista komponenttien välillä, kun taas useReducer käsittelee ostoskorin tilan.
Tuotesivun luominen
Luo sivut-kansioon uusi tiedosto nimeltä Product.jsx, joka hahmontaa yhden tuotteen.
viedäoletuksenatoimintoTuote({id, nimi, hinta}) {
palata (
{nimi}</p>
{hinta}</p>
Tuotekomponentti hyväksyy tuotteen tunnuksen, nimen ja hinnan ja näyttää sen. Siinä on myös "Lisää ostoskoriin" -painike.
Kun tuote on jo lisätty ostoskoriin, painikkeen tulee vaihtaa "poista ostoskorista" -painikkeeksi ja jos tuotetta ei ole ostoskorissa, sivulla tulee näkyä "Lisää ostoskoriin" -painike.
Jotta voit ottaa tämän toiminnon käyttöön, sinun on seurattava ostoskorissa olevia tuotteita konteksti-API: n avulla ja useReducer-koukku.
Ostoskorin luominen kontekstisovellusliittymän avulla
Konteksti-sovellusliittymän avulla voit jakaa tietoja eri komponenttien välillä ilman, että sinun tarvitsee siirtää rekvisiitta manuaalisesti vanhemmalta lapselle. Nämä osat voivat olla navigointipalkki, tuotetietosivu tai kassasivu.
Luo uusi tiedosto nimeltä cartContext.js kansioon nimeltä konteksti ja luo konteksti.
tuonti { CreateContext } alkaen"reagoi";
viedäkonst CartContext = createContext({
tuotteet: [],
});
CartContext ottaa oletusarvoksi joukon kohteita.
Luo seuraavaksi kontekstin tarjoaja. Kontekstintarjoaja sallii kontekstia kuluttavien komponenttien tilata kontekstin muutoksia.
Lisää uuteen toimintoon nimeltä cartProvider seuraava:
viedäkonst CartProvider = ({lapset }) => {
palata<CartContext. Palveluntarjoaja>{lapset}CartContext. Palveluntarjoaja>;
};
Käytä useReducer-koukkua seurataksesi ostoskorissa olevia tuotteita.
UseReducer-koukku toimii kuten useState-koukku, paitsi että se auttaa hallitsemaan monimutkaisempaa tilalogiikkaa. Se hyväksyy vähennystoiminnon ja alkutilan. Se palauttaa nykyisen tilan ja lähetystoiminnon, joka välittää toiminnon vähennystoiminnolle.
Luo uusi toiminto nimeltä CartReducer ja lisää supistin.
konst cartReducer = (tila, toiminta) => {
konst { tyyppi, hyötykuorma } = toiminta;vaihtaa (tyyppi) {
tapaus"LISÄTÄ":
palata {
...osavaltio,
tuotteet: payload.items,
};tapaus"POISTA":
palata {
...osavaltio,
tuotteet: payload.items,
};
oletuksena:
heittääUusiVirhe("Ei tapausta tälle tyypille");
}
};
Reduktoritoiminto sisältää kytkinkäskyn, joka päivittää tilan toimenpiteen tyypistä riippuen. Kärryn pienennystoiminnolla on "LISÄÄ" ja "POISTA"-toiminnot, jotka lisätään ostoskoriin ja poistetaan kärrystä.
Kun olet luonut vähennystoiminnon, käytä sitä useReducer-koukussa. Aloita luomalla CartProvider-toiminto. Tämä on toiminto, joka tarjoaa kontekstin muille komponenteille.
viedäkonst CartProvider = ({lapset}) => {
palata<CartContext. Palveluntarjoaja>{lapset}CartContext. Palveluntarjoaja>;
}
Luo sitten useReducer-koukku.
viedäkonst CartProvider = ({lapset }) => {
konst [tila, lähetys] = useReducer (cartReducer, { kohteita: [] });
palata<CartContext. Palveluntarjoaja>{lapset}CartContext. Palveluntarjoaja>;
};
Lähetystoiminto on vastuussa ostoskorin tilan päivityksestä, joten muokkaa CartProvider-toimintoa sisältämään toimintoja, jotka lähettävät tuotteet useReducer-koukkuun, kun ostoskori päivittyy.
tuonti { CreateContext, useReducer } alkaen"reagoi";viedäkonst CartProvider = ({lapset }) => {
konst [tila, lähetys] = useReducer (cartReducer, originState);konst addToCart = (tuote) => {
konst updatedCart = [...state.items, product];lähettää({
tyyppi: "LISÄTÄ",
hyötykuorma: {
tuotteet: updatedCart,
},
});
};konst RemoveFromCart = (id) => {
konst updatedCart = state.items.filter(
(currentProduct) => currentProduct.id !== id
);lähettää({
tyyppi: "POISTA",
hyötykuorma: {
tuotteet: updatedCart,
},
});
};
palata<CartContext. Palveluntarjoaja>{lapset}CartContext. Palveluntarjoaja>;
};
AddToCart-toiminto liittää uuden tuotteen olemassa oleviin tuotteisiin ja palauttaa päivitetyt tuotteet lähetysfunktion hyötykuormaobjektiin. Samoin removeFromCart-toiminto suodattaa tuotteen tunnuksen perusteella ja palauttaa päivitetyn luettelon.
Sinun on myös palautettava arvoehdotus CartContext-toimittajassa.
viedäkonst CartProvider = ({lapset }) => {
konst [tila, lähetys] = useReducer (cartReducer, {
tuotteet: [],
});konst addToCart = (tuote) => {};
konst RemoveFromCart = (id) => {};konst arvo = {
kohteet: state.items,
Lisää ostoskoriin,
poista Ostoskorista,
};
palata<CartContext. Palveluntarjoajaarvo={arvo}>{lapset}CartContext. Palveluntarjoaja>;
}
Arvo-potti kulutetaan useContext-koukun kautta.
Ostoskori-kontekstin käyttäminen
Tähän mennessä olet luonut ostoskorikontekstin ja luonut useReducer-toiminnon, joka päivittää ostoskorin. Seuraavaksi käytät ostoskorin kontekstia tuotekomponentissa useContext-koukun avulla.
Aloita käärimällä index.js, ylin komponentti, kontekstin tarjoajan kanssa, jotta kontekstiarvot ovat käytettävissä koko sovelluksessa.
tuonti { CartProvider } alkaen"../context/cartContext";toimintoOmaApp({ Komponentti, sivuprops }) {
palata (
</CartProvider>
);
}
viedäoletuksena MyApp;
Tuo sitten useContext-koukku ja ostoskorin kontekstin tarjoaja Product.js-tiedostoon
tuonti { useContext } alkaen"reagoi"
tuonti { CartContext } alkaen"../context/cartContext"viedäoletuksenatoimintoTuote() {
konst {items, addToCart, removeFromCart} = useContext (CartContext)
palata (
<>{nimi}</p>
{hinta}</p>
Painikkeen toiminta riippuu siitä, onko tuote jo ostoskorissa. Jos ostoskorissa on tuote, painikkeen tulee poistaa se ostoskorista ja jos tuotetta ei ole vielä ostoskorissa, se tulee lisätä. Tämä tarkoittaa, että sinun on seurattava kohteen tilaa käyttämällä useEffect ja useState. UseEffect-koodi tarkistaa, onko tuote ostoskoriin sen jälkeen, kun komponentti on hahmontunut, kun useState päivittää tuotteen tilan.
konst [exists, setExists] = useState(väärä);useEffect(() => {
konst inCart = tuotteet.find((kohde) => item.id id);
jos (inCart) {
setExists(totta);
} muu {
setExists(väärä);
}
}, [kohteet, tunnus]);
Nyt, käytä ehdollista renderöintiä näyttääksesi painikkeen olemassa olevan tilan perusteella.
palata (
{nimi}</p>
{hinta}</p>
{
olemassa
? <-painikettaklikkaamalla={() => RemoveFromCart (id)}> Poista ostoskorista-painiketta>
: <-painikettaklikkaamalla={() => addToCart({id, name, price})}>Lisää ostoskoriin-painiketta>
}
</div>
)
Huomaa, että onClick-käsittelijän toiminnot ovat kontekstin tarjoajassa määritettyjä removeFromCart- ja addToCart-funktioita.
Lisää toimintoja ostoskoriin
Olet oppinut luomaan ostoskorin kontekstisovellusliittymän ja useReducer-koukun avulla.
Vaikka tämä opas käsitti vain lisäys- ja poistotoiminnot, voit käyttää samoja käsitteitä lisäominaisuuksien lisäämiseen, kuten ostoskorin tuotteiden määrien säätämiseen. Ratkaisevaa on ymmärtää konteksti-API ja kuinka koukkujen avulla voit päivittää ostoskorin tiedot.
