Komponentpanelen

Komponentpanelen ändrar en del som finns på alla sidor, till exempel sidhuvudet.

Var: Fliken Components i designern. Varje komponent för sig: se Komponenterna en och en.

Fliken listar 8 komponenter: Header, Menu panel, Footer, Product card, Product page, Gallery, Collection page och Banners. Varje rad visar en skiss av komponenten och en sammanfattning av inställningarna.

#Två lägen

Designern startar med Advanced av. Då byter du färger, typsnitt och texter, flyttar och lägger till sektioner och väljer komponenternas utseende. Ingen kod visas.

Advanced är reglaget längst upp i designern. Med Advanced på visas:

• knappen Customize with code längst ner på komponentpanelen
• kodredigeraren bakom knappen
• sektionen Custom component i sektionsbiblioteket, se Egen kod på en komponent
• panelen Code i ikonlistan

Valet sparas i webbläsaren och gäller nästa gång du öppnar designern på samma dator. Slår du av Advanced döljs vägarna till koden. Kod du redan har skrivit ligger kvar och syns i butiken.

#En yta per komponent

Klicka på en komponent. Komponentpanelen öppnas till höger, och sidan ligger kvar på arbetsytan. Panelen har inga flikar. Den har fem delar, uppifrån och ner:

• Look: korten som väljer utseende.
• Options: komponentens val och blocket Shape.
• Colours: temafärgerna komponenten använder.
• Content: logotyp, texter och kontaktuppgifter på Header, Menu panel och Footer.
• Customize with code: öppnar kodredigeraren. Bara med Advanced på.

Ett klick på en komponent visar den ensam på arbetsytan, i sitt första tillstånd, och öppnar panelen. Överst i panelen står komponentens namn och en rad med stilen och inställningarna. Back to page i bandet ovanför arbetsytan stänger panelen och visar sidan igen. Ett klick på en sektion stänger panelen och öppnar sektionens inspektor.

#Tre vägar in

• Klicka på komponentens rad i fliken Components.
• Klicka på sidhuvudet eller sidfoten på arbetsytan.
• Håll pekaren över ett produktkort eller en banner. Klicka på Edit product card eller Edit banner i rutan som visas.

#Tillstånd

Ett tillstånd är ett läge för komponenten. Välj läge med chipsen under komponentens namn. Arbetsytan visar komponenten i det läget medan du ändrar den. Alla tillstånd använder samma stil.

• Header: Top of page (överst, genomskinligt över hero när alternativet är på), Scrolled (ogenomskinligt, som efter 24 px scroll), Menu open (menypanelen öppen) och Home screen (mobilens hemskärm med appikonen, namnet och färgerna, se Butiken som app).
• Product card: Default och Hover (bilden zoomar, den andra bilden tonas in och snabbköpsknappen visas). I läget Hover visar ett eget kort bilden, den andra bilden och snabbköpsknappen. Kortets egna :hover-regler syns inte.
• Product page: In stock, Sold out och Preorder. På arbetsytan visar lagerraden, köpknappen och slutsåld-texten läget i chipet. Butiken visar alltid produktens eget lager.
• Collection page: Default (med produkter) och Empty (utan produkter, med meddelandet och länken tillbaka).

Menu panel, Footer, Gallery och Banners har ett utseende och därför inga chips.

#Look

Överst står standardutseendena som bildkort. Temats stil bestämmer vilka kort som finns. Du väljer stilen när du skapar temat, se Stilar och delar.

Under dem står Your header styles: stilarna du har sparat för komponenten. För sidfoten heter listan Your footer styles, för produktkortet Your product card styles.

• Det valda kortet har en ram.
• Ett klick på ett stilkort lägger stilen på komponenten: utseende, alternativ, fliken Design och koden.
• Ett klick på ett standardkort tar bort stilen från komponenten och sparar utseendet i temat. Stilen ligger kvar i biblioteket och går att lägga på igen.
• En stil utan namn visas som Custom style.
• Standardutseendena går inte att skriva över.

Stilen som är på går att döpa om och ta bort. Rename och Delete står under korten. Delete frågar två gånger:

1. Tryck Delete.
2. Läs vad som blir kvar. Tryck Continue, eller Keep för att avbryta.
3. Skriv stilens namn i fältet under Type Min navbar to confirm. Stora eller små bokstäver spelar ingen roll.
4. Tryck Delete "Min navbar".

Stilen försvinner ur biblioteket i alla butiker i workspacet. Det går inte att ångra. En komponent som använder stilen behåller sitt utseende.

#Options

Komponentens val står som reglage och listor. Panelen visar alltid det värde butiken använder. Har komponenten en sparad stil sparas ändringen i stilen, och Update i kodredigeraren blir klickbar. Annars sparas ändringen i temat.

• Ett alternativ som saknar innehåll är dämpat. Raden visar vad som saknas och var du lägger till det. Exempel för sociala ikoner utan sociala länkar: No social links yet och Add them below, under Contact and social.
• Ett alternativ som redan är på går alltid att slå av. Texten under reglaget visar då hur du slår på det igen, till exempel On. To turn it on again later, add a full-width image banner on Home first.
• Ett alternativ som en sparad stil sätter har reset bredvid etiketten. Reset tar bort stilens värde, och temats värde gäller igen.

Under alternativen står Shape med hörnen för komponentens bilder och knappar. Se Stilar och delar.

#Colours

Colours visar temafärgerna komponenten använder. Listan per komponent finns under Stilar och delar.

Obs: Färgerna här är temats. En ändring ändrar färgen överallt där den används. Färger som bara gäller komponenten sätter du under fliken Design i kodredigeraren.

#Content

Header, Menu panel och Footer har fälten Logo, Light logo, Favicon, App icon, Tagline, Copyright line, annonsradens text och Contact and social. Komponenterna en och en beskriver fälten. Innehållet hör till temat eller butiken, aldrig till en sparad stil. Det gäller också menyns länkar och rubriken över produkterna. En stil du lägger på i en annan butik tar inte med logotypen.

#Vad arbetsytan visar

Medan en komponent är vald fungerar inte ”Lägg i varukorgen” och filtren på arbetsytan. Priserna är butikens, i samma valuta och omräkning som kunden ser.

Vissa komponenter syns inte utan vidare på arbetsytan. Därför står menypanelen öppen, produktkortet visas som 4 kort i 4 kolumner och kategorisidan visar butikens första produkter. Under arbetsytan står en förklaring på engelska:

• "The panel is held open so you can judge it. In the shop a shopper opens it from the header."
• "The category name is your shop’s. The products are the first in your shop, not this category’s, and the category description and image are left out."
• "Transparent over hero is on: shown on a dark studio surface here. In the shop it sits over the first full-width banner of the home page."

Kategorisidans stil syns bara när komponenten är vald. Sidan Collection på arbetsytan visar sektionerna utan kategoribandet och filtren. Butiken visar stilen på varje kategorisida.

#Kodredigeraren

Kodredigeraren finns bara i avancerat läge och öppnas med Customize with code längst ner på komponentpanelen. Arbetsytan visar komponenten ensam. Överst står Custom style · Header, eller stilens namn om komponenten har en sparad stil. Redigeraren har två flikar, Design och Code. Back överst, bredvid namnet, tar tillbaka panelen.

Utseende och alternativ står kvar i panelen. Det du ändrar syns på arbetsytan med en gång och sparas i komponentens aktiva stil.

#Design

Fliken Design styr komponentens rot: typografi, färger, marginaler, utfyllnad, kanter och skuggor. Du ställer in värden per brytpunkt (desktop, tablet, mobil) och per tillstånd (hover, focus, active). Fliken finns på alla 8 komponenter. Värdena blir CSS på komponentens rot och går live när du publicerar temat.

#Code

Fliken Code har tre redigerare, CSS, JS och HTML, på alla 8 komponenter.

Variables and actions öppnar referensen för komponenten. Insert sätter in en variabel där markören står. Ovanför JS-fältet finns reglaget Run JS in the builder. Slå av det för att pausa din JS på arbetsytan under sessionen. Butiken och Preview i designern (⌘P) kör den ändå. Reglerna finns under Egen kod på en komponent och Mallreferens.

#Spara som egen stil

Nederst i kodredigeraren finns tre knappar:

• Save as new style frågar efter ett namn. Den sparar komponentens hela stil i biblioteket: utseende, alternativ, fliken Design och koden. Komponenten får stilen, och kortet visas under Your header styles.
• Update "namn" visas när den aktiva stilen kommer från biblioteket och blir klickbar när den skiljer sig från den sparade. Det gäller även ett alternativ du har ändrat i panelen. Knappen skriver över den sparade stilen. Andra butiker får ändringen först när de lägger på stilen igen.
• Reset to standard frågar först, till exempel Put header back to the standard look? Den tar bort komponentens aktiva stil: utseende, alternativ, fliken Design och koden. Komponenten visar stilens standardutseende med temats inställningar. Biblioteket ändras inte.

#Var det sparas

Att ta bort en stil ur biblioteket ändrar ingen butik. Publicerar du ett tema där komponenten saknar egen stil tar BunStack bort stilen från live-butiken.