Komponenttipaneeli

Komponenttipaneeli muuttaa osaa, joka on kaikilla sivuilla, esimerkiksi ylätunnistetta.

Missä: Suunnittelutyökalun välilehti Components. Komponentit yksitellen ovat sivulla Komponentit yksitellen.

Välilehdellä on 8 komponenttia: Header, Menu panel, Footer, Product card, Product page, Gallery, Collection page ja Banners. Jokainen rivi näyttää luonnoksen komponentista ja yhteenvedon asetuksista.

#Kaksi tilaa

Suunnittelutyökalu käynnistyy Advanced pois päältä. Silloin vaihdat värejä, fontteja ja tekstejä, siirrät ja lisäät osioita ja valitset komponenttien ulkoasun. Koodia ei näy.

Advanced on kytkin suunnittelutyökalun ylälaidassa. Kun Advanced on päällä, näkyvissä on:

• painike Customize with code komponenttipaneelin alalaidassa
• koodieditori painikkeen takana
• osio Custom component osiokirjastossa, katso Oma koodi komponentissa
• paneeli Code kuvakepalkissa

Valinta tallentuu selaimeen ja on voimassa, kun avaat suunnittelutyökalun samalla tietokoneella seuraavan kerran. Kun kytket Advanced-tilan pois, reitit koodiin piiloutuvat. Jo kirjoittamasi koodi säilyy ja näkyy kaupassa.

#Yksi pinta komponenttia kohti

Napsauta komponenttia. Komponenttipaneeli avautuu oikealle, ja sivu pysyy työtilassa. Siinä ei ole välilehtiä. Paneelissa on viisi osaa ylhäältä alas:

• Look: kortit, jotka valitsevat ulkoasun.
• Options: komponentin valinnat ja lohko Shape.
• Colours: teeman värit, joita komponentti käyttää.
• Content: logo, tekstit ja yhteystiedot komponenteissa Header, Menu panel ja Footer.
• Customize with code: avaa koodieditorin. Vain kun Advanced on päällä.

Komponentin napsautus näyttää sen yksin työtilassa sen ensimmäisessä tilassa ja avaa paneelin. Paneelin ylimpänä ovat komponentin nimi ja rivi, jossa ovat tyyli ja asetukset. Työtilan yläpuolisen nauhan Back to page sulkee paneelin ja näyttää sivun taas. Osion napsautus sulkee paneelin ja avaa osion tarkastelijan.

#Kolme reittiä sisään

• Napsauta komponentin riviä välilehdellä Components.
• Napsauta ylä- tai alatunnistetta työtilassa.
• Pidä osoitinta tuotekortin tai bannerin päällä. Napsauta näkyviin tulevassa ruudussa Edit product card tai Edit banner.

#Tilat

Tila on komponentin näkymä. Valitse tila komponentin nimen alla olevilla siruilla. Työtila näyttää komponentin siinä tilassa, kun muutat sitä. Kaikki tilat käyttävät samaa tyyliä.

• Header: Top of page (ylälaidassa, läpinäkyvä heron päällä, kun valinta on päällä), Scrolled (yhtenäinen, kuten 24 px vierityksen jälkeen), Menu open (valikkopaneeli auki) ja Home screen (puhelimen kotinäyttö sovelluskuvakkeen, nimen ja värien kanssa, katso Kauppa sovelluksena).
• Product card: Default ja Hover (kuva zoomautuu, toinen kuva häivyttyy esiin ja pikaostopainike näkyy). Tilassa Hover oma kortti näyttää kuvan, toisen kuvan ja pikaostopainikkeen. Kortin omat :hover-säännöt eivät näy.
• Product page: In stock, Sold out ja Preorder. Varastorivi, ostopainike ja loppuunmyyty-teksti seuraavat sirua työtilassa. Kauppa näyttää aina tuotteen oman varaston.
• Collection page: Default (tuotteiden kanssa) ja Empty (ilman tuotteita, viestin ja paluureitin kanssa).

Komponenteilla Menu panel, Footer, Gallery ja Banners on yksi ulkoasu, joten niillä ei ole siruja.

#Look

Ylimpänä ovat vakioulkoasut kuvakortteina. Teeman tyyli määrää, mitkä kortit on olemassa. Tyyli valitaan, kun teema luodaan, katso Tyylit ja osat.

Niiden alla on Your header styles: komponentille tallentamasi tyylit. Alatunnisteella lista on Your footer styles, tuotekortilla Your product card styles.

• Valitulla kortilla on kehys.
• Tyylikortin napsautus asettaa tyylin komponenttiin: ulkoasun, valinnat, välilehden Design ja koodin.
• Vakiokortin napsautus irrottaa tyylin ja kirjoittaa ulkoasun teemaan. Tyyli jää kirjastoon, ja sen voi asettaa uudelleen.
• Tyyli ilman nimeä näkyy nimellä Custom style.
• Vakioulkoasuja ei voi korvata.

Käytössä olevan tyylin voi nimetä uudelleen ja poistaa. Rename ja Delete ovat korttien alla. Delete pyytää vahvistuksen kahdesti:

1. Paina Delete.
2. Lue, mitä jää jäljelle. Paina Continue, tai Keep keskeyttääksesi.
3. Kirjoita tyylin nimi kenttään, jonka yllä lukee Type Oma navbar to confirm. Isoilla ja pienillä kirjaimilla ei ole väliä.
4. Paina Delete "Oma navbar".

Tyyli katoaa kirjastosta kaikissa workspacen kaupoissa. Toimintoa ei voi kumota. Tyyliä käyttävä komponentti säilyttää ulkoasunsa.

#Options

Komponentin valinnat ovat kytkimiä ja listoja. Paneeli näyttää aina arvon, jota kauppa käyttää. Jos komponentilla on tallennettu tyyli, muutos kirjoitetaan tyyliin, ja koodieditorin Update tulee napsautettavaksi. Muuten muutos kirjoitetaan teemaan.

• Valinta, josta puuttuu sisältö, on himmennetty. Rivi kertoo, mitä puuttuu ja mistä sen lisäät. Esimerkki: someikonit ilman somelinkkejä.
• Valinnan, joka on jo päällä, voi aina kytkeä pois. Kytkimen alla oleva teksti kertoo silloin, miten sen saa taas päälle, esimerkiksi On. To turn it on again later, add a full-width image banner on Home first.
• Valinnalla, jonka tallennettu tyyli asettaa, on nimen vieressä reset. Reset irrottaa tyylin arvon, ja teeman arvo on voimassa.

Valintojen alla on Shape, jossa ovat komponentin kuvien ja painikkeiden kulmat. Katso Tyylit ja osat.

#Colours

Colours näyttää teeman värit, joita komponentti käyttää. Komponenttikohtainen lista on sivulla Tyylit ja osat.

Huom: Tämän kohdan värit ovat teeman värejä. Muutos muuttaa värin kaikkialla, missä sitä käytetään. Vain komponenttia koskevat värit asetat koodieditorin välilehdellä Design.

#Content

Komponenteissa Header, Menu panel ja Footer on kentät Logo, Light logo, Favicon, App icon, Tagline, Copyright line, ilmoituspalkin teksti ja Contact and social. Kentät kuvataan sivulla Komponentit yksitellen. Sisältö kuuluu teemalle tai kaupalle, ei koskaan tallennetulle tyylille. Sama koskee valikon linkkejä ja tuotteiden yläpuolista otsikkoa. Toisessa kaupassa käyttöön ottamasi tyyli ei tuo logoa mukanaan.

#Mitä työtila näyttää

Kun komponentti on valittuna, ”Lägg i varukorgen” ja suodattimet eivät toimi työtilassa. Hinnat ovat kaupan hintoja samassa valuutassa ja muunnoksessa kuin asiakkaalla.

Joskus työtila asettelee komponentin, jotta se näkyy. Valikkopaneeli pidetään auki. Tuotekortti näytetään 4 korttina 4 sarakkeessa. Kategoriasivu lainaa kaupan ensimmäiset tuotteet. Työtilan alla kerrotaan englanniksi, mitä on aseteltu:

• "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."

Kategoriasivun tyyli näkyy vain täällä. Työtilan sivu Collection piirtää osiot ilman kategorianauhaa ja suodattimia. Kauppa näyttää tyylin jokaisella kategoriasivulla.

#Koodieditori

Koodieditori on käytössä vain edistyneessä tilassa ja avautuu painikkeella Customize with code komponenttipaneelin alalaidassa. Työtila näyttää komponentin yksin. Ylimpänä lukee Custom style · Header tai tyylin nimi, jos komponentilla on tallennettu tyyli. Editorissa on kaksi välilehteä, Design ja Code. Back ylhäällä nimen vieressä tuo paneelin takaisin.

Ulkoasu ja valinnat pysyvät paneelissa. Muutoksesi näkyvät työtilassa heti ja tallentuvat komponentin aktiiviseen tyyliin.

#Design

Välilehti Design ohjaa komponentin juurta: typografiaa, värejä, marginaaleja, täytettä, reunoja ja varjoja. Asetat arvot näyttökoon (desktop, tablet, mobiili) ja tilan (hover, focus, active) mukaan. Välilehti on kaikissa 8 komponentissa. Arvoista tulee CSS:ää komponentin juureen, ja ne tulevat mukaan, kun teema julkaistaan.

#Code

Välilehdellä Code on kolme editoria, CSS, JS ja HTML, kaikissa 8 komponentissa.

Variables and actions avaa komponentin viiteosion. Insert lisää muuttujan kohdistimen kohdalle. JS-kentän yläpuolella on kytkin Run JS in the builder. Off keskeyttää JS:si työtilassa istunnon ajaksi. Kauppa ja Preview (⌘P) ajavat sen silti. Säännöt ovat sivuilla Oma koodi komponentissa ja Malliviite.

#Tallenna omaksi tyyliksi

Koodieditorin alalaidassa on kolme painiketta:

• Save as new style kysyy nimeä. Se tallentaa komponentin koko tyylin kirjastoon: ulkoasun, valinnat, välilehden Design ja koodin. Komponentti käyttää tyyliä, ja kortti näkyy kohdassa Your header styles.
• Update "nimi" näkyy, kun aktiivinen tyyli tulee kirjastosta, ja tulee napsautettavaksi, kun se poikkeaa tallennetusta. Tämä koskee myös paneelissa muuttamaasi valintaa. Painike korvaa tallennetun tyylin. Muut kaupat saavat muutoksen vasta, kun ne ottavat tyylin uudelleen käyttöön.
• Reset to standard pyytää ensin vahvistuksen. Se poistaa komponentin aktiivisen tyylin: ulkoasun, valinnat, välilehden Design ja koodin. Komponentti näyttää tyylin vakioulkoasun teeman asetuksin. Kirjasto ei muutu.

#Mihin tallennetaan

Tyylin poistaminen kirjastosta ei muuta yhtään kauppaa. Jos julkaiset teeman, jossa komponentilla ei ole omaa tyyliä, tyyli poistuu live-kaupasta.