Bygga en butik

I den här guiden kommer vi att visa dig hur du kan bygga en fullt utrustad butik i Bootstrap Studio som kan lista produkter, låta kunder lägga till varor i sina kundvagnar, ange betalningsinformation och gå till kassan. Ingen backend eller kodning behövs!

Du kan ladda ner hela exemplet som en bsdesign-fil. Ladda ner exemplet

## 1. Skapa en butik

Att registrera sig för Reflow och skapa en butik tar mindre än en minut. Det är en gratistjänst och du kan skapa ett obegränsat antal butiker och produkter i varje. Bli Medlem här.

När du är registrerad kommer Reflow att uppmana dig att skapa din första butik. Ange bara ett namn och tryck på Skapa. Du kan ändra namnet på din butik senare från Inställningar.

Notering

Du måste konfigurera en betalningsmetod för att kundvagnen ska fungera.

2. Ansluta Reflow

När du har ett konto, anslut Reflow till din design och välj den butik du just skapade från rullgardinsmenyn.

3. Skapa sidor

Skapa en ny tom design i Bootstrap Studio. Skapa fem tomma sidor inuti den (index.html kommer att finnas som standard):

• index.html - denna sida kommer att innehålla en Produktlista.
• product.html - den här sidan kommer att innehålla en dynamisk "produkt"-komponent.
• cart.html - denna sida kommer att innehålla din "varukorg".
• success.html - det är dit dina användarna omdirigeras till när de har slutfört sitt köp.
• cancel.html - det är dit dina användarna omdirigeras om ett betalningsfel uppstår.

Sedan, i index.html, kommer vi att skapa följande struktur genom att dra och släppa en Navbar och en 1 rad 1 kolumn in i Body.

Låt oss spara lite tid och kopiera den här strukturen till alla andra sidor:

1. Högerklicka på navigeringsfältet och välj Kopiera till > Flera och kopiera det till de andra sidorna. Se till att aktivera omkopplaren "Länkkopior" så att navigeringsfälten är länkade till varandra och redigeras synkroniserat.
2. Högerklicka på behållaren och välj även Kopiera till > Flera, men den här gången ska "Länkkopior" vara avstängd.

Vi kan nu fortsätta med att lägga till e-handelskomponenter på var och en av sidorna.

4. Bygga index.html

För indexsidan släpper vi en Produktlista från komponentpanelen till komponenten Kolumn. Vi lägger också till en "Rubrik" och ger den texten "Produkter".

Produktlistan visar alla produkter i din butik och ger dig många anpassningsmöjligheter.

Notering

Om din butik inte har några produkter ännu, kommer Produktlista att visa falska (mock) data så att du kan skapa din design.

Låt oss nu anpassa hur vår Produktlista ser ut. Här är vad vi är ute efter:

För att uppnå denna layout ändrar vi Layout till Kort i produktlistans alternativ och tar även bort utdraget genom att stänga av Visa utdrag.

Nu är det enda som återstår att göra att varje produkt i listan länkar till dess produktsida. Vi kan göra detta genom att ställa in Produktlänk alternativ till /product.html?product={id}. När du nu klickar på en produkt kommer du att omdirigeras till /product.html?product={id}, där {id} kommer att ersättas med faktiska produkt-ID.

Och det är allt! Vi är klara med produktlistan. Låt oss nu gå över till product.html för att skapa produktsidan.

5. Bygg product.html

I likhet med vad vi gjorde för indexsidan, i product.html drar och släpper vi en Produkt i "Kolumn"-komponent. Vi behöver ingen "Rubrik" den här gången.

För att "Produkt"-komponenten ska visa vilken produkt vi än har klickat på i Produktlistan måste vi göra den dynamisk.

Stäng av alternativet Använd mockdata och ställ in Produkttyp på Dynamisk. Nu måste vi tillhandahålla URL-parametern som produkten kommer att få sitt ID från. I index.html, vi ställ in Product Link till /product.html?product={id}, så parametern är product. Låt oss ställa in URL Parameter till "produkt", och vi är klara!

6. Bygg cart.html

Därefter behöver vi en kundvagn. Det är här användare kan se vilka produkter de har lagt till och slutföra sitt köp. Dra och släpp en varukorg i "kolumnen".

Detta kommer att ge oss en fullt fungerande kundvagn. Allt som återstår att göra är att länka kundvagnen till sidorna "framgång" och "avbryt", genom att ställa in dessa alternativ:

7. Sidor för framgång och avbryt

För success.html och cancel.html, släpp bara en rubrik och ett stycke på var och en av sidorna, och skriv några rader med hjälpsam text som kan ge användaren en uppfattning om vad nästa steg är och om det uppstod ett fel, hur man löser det.

Med detta är vår butik komplett!