1. Een winkel maken
Aanmelden voor Reflow en het maken van een winkel duurt minder dan een minuut. Het is een gratis service en u kunt in elk een onbeperkt aantal winkels en producten maken. Schrijf je hier in .
Zodra je bent geregistreerd, zal Reflow je vragen om je eerste winkel te maken. Voer gewoon een naam in en klik op Maken . U kunt de naam van uw winkel later wijzigen via Instellingen.
2. Reflow aansluiten
Nadat je een account hebt, koppel je Reflow aan je ontwerp in Bootstrap Studio en kies je de winkel die je zojuist hebt gemaakt in de vervolgkeuzelijst.
We gaan deze webshop na maken.
Pagina's maken
Maak een nieuw leeg ontwerp in Bootstrap Studio. Maak daarin vijf lege pagina's (index.html zal standaard bestaan):
- index.html - deze pagina zal een
Product List
. - product.html - deze pagina zal een dynamische
Product
component bevatten. - cart.html - deze pagina zal onze
Shopping Cart
. - success.html - dit is waar gebruikers naar worden doorverwezen nadat ze hun aankoop hebben voltooid.
- cancel.html - dit is waar gebruikers naar worden doorverwezen als er een betalingsfout optreedt.
Vervolgens zullen we in index.html de volgende structuur maken door a Navbar
en a te slepen en neer te zetten 1 Row 1 Column
in het Body
.
Laten we onszelf wat tijd besparen en deze structuur naar alle andere pagina's kopiëren :
- Klik met de rechtermuisknop op de navigatiebalk en kies
Copy to > Multiple
en kopieer deze naar de andere pagina's. Zorg ervoor dat u de schakelaar "Kopie koppelen" inschakelt, zodat de navigatiebalken aan elkaar zijn gekoppeld en synchroon worden bewerkt. - Klik met de rechtermuisknop op de container en kies ook
Copy to > Multiple
, maar deze keer zou "Kopie koppelen" uitgeschakeld moeten zijn.
We kunnen nu doorgaan met het toevoegen van e-commercecomponenten aan elk van de pagina's.
Voor de index plaatsen we een productlijst van het componentenpaneel in de kolomcomponent . We voegen ook een a toe Heading
en geven deze de tekst "Producten".
Het Product List
toont alle producten in uw winkel en geeft u veel aanpassingsmogelijkheden.
Opmerking
Als uw winkel nog geen producten heeft, Product List
worden nepgegevens weergegeven zodat u uw ontwerp kunt maken.
Laten we nu de manier waarop we Product List
eruitzien aanpassen. Dit is waar we naar op zoek zijn:
Om deze lay-out te bereiken, schakelen we in de productlijstopties de lay -out naar Kaarten en verwijderen we ook het fragment door Uittreksel weergeven uit te schakelen.
Nu hoef je alleen nog maar van elk product in de lijst een link naar de productpagina te maken. We kunnen dit doen door de optie Productlink/product.html?product={id}
in te stellen op . Wanneer u nu op een product klikt, wordt u doorgestuurd naar /product.html?product={id}
, waar {id}
het wordt vervangen door de daadwerkelijke product-ID.
En dat is het! We zijn klaar met de productlijst. Laten we nu naar product.html
het maken van de productpagina gaan.
Vergelijkbaar met wat we deden voor de indexpagina, slepen we in product.html een product naar de Column
component. We hebben deze keer geen nodig Heading
.
Om ervoor te zorgen dat de Product
component het product weergeeft waarop we in de Product List
, hebben geklikt, moeten we deze dynamisch maken .
Schakel de optie Gebruik nepgegevens uit en stel het producttype in op Dynamisch . Nu moeten we de URL-parameter opgeven waarvan het product zijn ID krijgt. In index.html
stellen we de Product Link in op /product.html?product={id}
, dus de parameter is product
. Laten we de URL-parameter instellen op product
, en we zijn klaar!
#
Vervolgens hebben we een winkelwagen nodig. Hier kunnen gebruikers zien welke producten ze hebben toegevoegd en hun aankoop voltooien. Sleep een winkelwagentje naar het Column
.
Dit geeft ons een volledig functionele winkelwagen. Het enige dat u hoeft te doen, is de winkelwagen te koppelen aan de pagina's "succes" en "annuleren", door deze opties in te stellen:
Voor de success.html en cancel.html plaatst u gewoon een kop en een alinea in elk van de pagina's en schrijft u een paar regels nuttige tekst die de gebruiker een idee kan geven van wat de volgende stappen zijn en of er een fout is opgetreden , hoe dit op te lossen.
Hiermee is onze winkel compleet!