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.

Download Start.bsdesign

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 Productcomponent 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 Navbaren a te slepen en neer te zetten 1 Row 1 Columnin het Body.

Laten we onszelf wat tijd besparen en deze structuur naar alle andere pagina's kopiëren :

1. Klik met de rechtermuisknop op de navigatiebalk en kies Copy to > Multipleen 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.
2. 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 Headingen geven deze de tekst "Producten".

Het Product Listtoont alle producten in uw winkel en geeft u veel aanpassingsmogelijkheden.

Laten we nu de manier waarop we Product Listeruitzien 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.htmlhet maken van de productpagina gaan.

Vergelijkbaar met wat we deden voor de indexpagina, slepen we in product.html een product naar de Columncomponent. We hebben deze keer geen nodig Heading.

Om ervoor te zorgen dat de Productcomponent 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.htmlstellen 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!

Include the Library

Add the CSS to the <head> of your pages, and the JS before the closing body tag:

You can copy your store's id from the URL on the Reflow website after you login. In this example, 999999 is your store's ID

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Reflow Example</title>
	<link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet">
</head>
<body>
	<p> Your Content is Here </p>
	<script src="https://cdn.reflowhq.com/v2/toolkit.min.js" data-reflow-store="999999" defer></script>
</body>
</html>

<div data-reflow-type="product-list" data-reflow-order="date_desc"> </div>

Detailpagina

Maak een nieuwe pagina (dupliceer de index.html) en noem deze pagina details.html

<div data-reflow-type="product" data-reflow-product="111111"> </div>

Add a Shopping Cart

<div data-reflow-type="shopping-cart"> </div>