Malreferanse

Hvordan du åpner koderedigereren, står på Egen kode på en komponent.

Hvor: designeren, Customize with code › Code på en komponent, i modusen Advanced. Seksjonen Custom component følger de samme reglene.

#Roten er butikkens

Hver komponent har en rot som butikken tegner. Malen din er innholdet i roten.

• Toppfeltets rot er [data-bs-header]. Butikken setter tilstandene [data-bs-transparent], [data-bs-scrolled] og [data-bs-sticky] på roten, også når toppfeltet er din egen HTML.
• Skriv ikke noe eget <header> i malen. Begynn med det som skal stå inni.
• CSS-en din avgrenses til roten. JS-en din får roten som root.
• En Custom component-seksjon har roten [data-bs-block="<seksjons-id>"].

Alle røtter står under Kroker og CSS-referanse.

#Malsyntaks

Malen er HTML med variabler i doble krøllparenteser. Dette er hele syntaksen.

• Tom tekst, 0, tom liste og false regnes som usant.
• Det finnes ingen måte å skrive ut HTML uten escaping på.
• Det finnes ingen hjelpefunksjoner og ingen inkluderte maler.

#Grenser

• Det som er lengre, klippes, med en advarsel som viser hvor, for eksempel css cut at 200 000 characters.
• En tegning avbrytes etter 50 000 steg. En løkke i en løkke kan ikke få butikken til å henge.
• En mal på 33 333 tegn eller mer tegnes én gang uten data i designeren. Treffer den da en grense, står det under May cut with some data på fanen Code.
• Butikken viser bare det dens egen tegning klipper.

#Feil og advarsler

En mal som ikke kan leses, tegner ingenting. Det gjelder for eksempel en {{#each}} som aldri lukkes, eller en blokk som lukkes med feil tagg. Butikken viser da standardutseendet, og designeren viser feilen ved koden.

En advarsel kan gjelde en CSS-regel som ikke kunne avgrenses, eller et alternativ som ble avvist.

#Variabler

#Header, Menu panel og Footer

De tre deler ett sett variabler. Seksjonen Custom component får det samme settet.

#Product card

Én mal per kort. Den tegnes for hvert produkt i et rutenett.

#Product page

Galleriet og kjøpspanelet, tegnet for varianten som vises. Velger kunden en annen variant med select-variant, tegnes malen på nytt. Prisen, artikkelnummeret, lagerlinjen, product.variantId og hver selected følger med. Resten av siden er standardsidens: detaljer, anmeldelser og relaterte produkter. Under malen tegner butikken produktets spørsmål, linjen om tillegg i handlekurven og boksen Optional add-ons. add-to-cart i malen legger med tilvalgene kunden har krysset av for, og stopper ved et obligatorisk spørsmål som er tomt, som standardknappen.

#Gallery

Produktbildene på produktsiden. Er produktsiden egen HTML, tegner den malen galleriet selv, og galleriets design tegnes ikke i det hele tatt. Koderedigereren, butikkens rapport og arbeidsflaten viser det.

#Category

Samlingssiden med produktene den viser: en kategori, All products eller søkeresultater. Malen får sidens filtre som data i filters[]: hver gruppe med verdiene, antallene, kryssene og en lenke som krysser av eller fjerner krysset. Butikken legger ingen filtre i malens egen markup. En mal viser det adressen angir (?sort=…&f.…&category=…). Malen erstatter Collection-sidens seksjoner, produktrutenettet inkludert. Sidens egen CSS (fanen Code på Collection-siden) gjelder fortsatt.

#Banner

Seksjonens egne innstillinger.

Skriv overskriften som <h1> når banneret er sidens tittelblokk. Da er den sidens tittel. Mangler malen <h1>, legger butikken en skjult sidetittel etter banneret når banneret er sidens tittelblokk. Banneret er tittelblokk når det er det første banneret eller heroen på siden og ingen overskriftsseksjon på nivå 1 tar tittelen.

#Actions

Markupen din har ingen egne hendelseshåndterere. Sett data-bs-action på et element, så gjør butikken resten ved klikk. Butikken bruker de samme lytterne som for standardmarkupen. Attributtet kan sitte på hvilket element som helst, også på en <svg>.

• Mangler et attributt som kreves, skjer ingenting ved klikket.
• data-bs-quantity skal være et positivt heltall. Annet leses som 1.
• En action som ikke finnes, eller som mangler et attributt som kreves, gir en advarsel når malen kompileres. Advarselen står ved koden og som <!-- bs-component-warning: … --> i butikkens HTML.
• subscribe-newsletter krever et skjema med data-bs-newsletter og et felt name="email". Den kjøres når skjemaet sendes, så Enter i feltet virker. Adressen får samme kontroll og samme svar som i standardbunnteksten.

add-to-cart uten data-bs-variant-id, for eksempel på et kort, spør butikken om produktet:

#Kroker

Krokene er attributtene i butikkens HTML som CSS-en og JS-en din retter seg mot: komponentens rot, indre elementer og tilstander på roten. Alle kroker per komponent, krokene på siden og reglene i tokens-CSS-en står under Kroker og CSS-referanse.

#Rensing

Den tegnede malen renses før den når siden, på samme måte på serveren og i nettleseren.

Attributter som beholdes:

• på alle elementer: class, id, title, role, tabindex, lang, dir, hidden, style, translate, alle aria-*, alle data-bs-* og data-footer-*
• på lenker: href, target, rel
• på bilder: src, srcset, sizes, alt, width, height, loading
• på knapper og felt: type, name, value, placeholder, disabled
• på form: action når det er en sti i butikken, for eksempel /search, og method når det er get eller post
• på SVG: viewBox, fill, stroke, stroke-width, d, points og de andre tegneattributtene

Det som fjernes:

• script, style, iframe, object, embed, noscript, template, textarea, select, video, audio, canvas, dialog, math og title, med alt innhold
• alle on*-attributter og alle kommentarer
• andre data-* enn data-bs-* og data-footer-*
• adresser som ikke er relative, https:, http:, mailto: eller tel:, unntatt data:-bilder på img
• en action som peker utenfor butikken

Et element som ikke står i listen, fjernes, men innholdet beholdes. style="…" renses som annen CSS. På lenker beholdes target="_blank", som får rel="noopener", og target="_self". Andre target fjernes. Åpne elementer lukkes til slutt, så resultatet er alltid balansert HTML.

#Klasser og størrelser

Standardmarkupen har noen Tailwind-klasser, for eksempel flex, items-center og gap-4. Designeren kompilerer ingen nye klasser fra malen din. En klasse som ikke allerede finnes i butikken, gjør ingenting. Sett størrelse og avstand i fanen Design, i Code › CSS på krokene eller som style på elementet.

#CSS

CSS-en på fanen Code gjelder bare komponenten. Hvordan selektorene avgrenses til roten, hva rensingen fjerner og hvordan du laster egne skrifttyper, står under Kroker og CSS-referanse.

Om px og rem: se Egen CSS og kode i head.

#JS

• JS-en kjører én gang per sidelasting, når siden er lastet, på hver side der komponenten finnes.
• Den får komponentens rotelement som root. Finnes ikke komponenten på siden, kjører den ikke.
• Menypanelets rot finnes bare mens panelet er åpent. JS-en kjører hver gang panelet åpnes, mot den nye roten. Bind lyttere på root, ikke på document.
• En feil, også en syntaksfeil, logges i nettleserens konsoll med stilens navn. Den stopper verken siden eller andre komponenters JS.
• Koden kjører også på arbeidsflaten. Bryteren Run JS in the builder setter den på pause der i økten. Butikken og Preview (⌘P) kjører den som vanlig.

root.querySelectorAll('[data-bs-header-icons] a').forEach((a) => {
  a.addEventListener('mouseenter', () => a.classList.add('is-hot'));
});

Et produktkort finnes mange ganger på en side. root er da det første kortet. Bruk document.querySelectorAll('[data-bs-card]') for alle.

Sidens JS på fanen Code kjører på samme måte, uten root. Det du skriver på siden Collection, gjelder alle kategorisider.

#Eksempel: navbar på en Classic-butikk

Målet er et toppfelt i full bredde. Det er gjennomsiktig over hero-bildet med hvit logo og hvite ikoner, og hvitt når siden har scrollet 24 px. Til høyre står fire ikoner på 30 px: søk, ønskeliste, handlekurv og meny. Det meste er kontroller. Resten er seks linjer CSS.

Kontrollene på komponentpanelet for Header:

1. Bytt startsidens teksthero mot et Image banner med Width full og et mørkt foto.
2. Velg Look: Icons + panel.
3. Sett Options: Sticky på, Transparent over hero på, Menu label av, Search på, Cart på, Announcement bar av.
4. Velg den svarte logoen som Logo under Content, med høyde 40. Velg den hvite som Light logo.
5. Kontroller at Theme › Colours › Header text over hero er hvit.

Slå på Advanced, trykk Customize with code og skriv under Code › CSS:

[data-bs-header] { padding: 16px; }
@media (min-width: 768px) { [data-bs-header] { padding: 32px; } }
[data-bs-header-inner] { max-width: none; }
[data-bs-header-icons] { gap: 16px; }
[data-bs-header-icons] a, [data-bs-header-icons] button { opacity: 1; }
[data-bs-header-icons] svg { width: 30px; height: 30px; stroke-width: 1.6; }

Trykk Save as new style og gi stilen navnet "Min navbar". Stilen ligger nå under Your header styles i alle butikker i workspacet. Logoene hører til temaet og stilles inn under Content i hver butikk.

#Samme navbar som egen HTML

Åpne Code › HTML og trykk Start from the standard markup. Feltet fylles med standardutseendets markup. Malen nedenfor er samme navbar skrevet fra bunnen. Den bruker de samme indre krokene, så CSS-en ovenfor gjelder uendret. Burgeren åpner butikkens standardpanel, som har en egen Close-knapp og lukkes med Escape.

<div data-bs-header-inner>
  <a href="/" aria-label="{{storefront.name}}">
    <img src="{{brand.logoUrl}}" alt="{{storefront.name}}" height="{{brand.logoHeight}}" class="logo-dark">
    <img src="{{brand.footerLogoUrl}}" alt="" height="{{brand.logoHeight}}" class="logo-light">
  </a>
  <div data-bs-header-icons>
    <button type="button" data-bs-action="open-search" aria-label="{{i18n.search}}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    </button>
    <a href="/wishlist" data-bs-wishlist-icon aria-label="{{i18n.wishlist}}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8z"/></svg>
    </a>
    <button type="button" data-bs-action="open-cart" data-bs-cart-icon aria-label="{{i18n.cart}}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M6 6h15l-1.5 9h-12z"/><circle cx="9" cy="20" r="1"/><circle cx="18" cy="20" r="1"/><path d="M6 6 5 3H2"/></svg>
      <span data-bs-cart-count>{{cart.count}}</span>
    </button>
    <button type="button" data-bs-action="open-menu" data-bs-menu-button aria-label="{{i18n.menu}}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
    </button>
  </div>
</div>

I standardmarkupen bytter butikken logo selv. I en egen mal ligger begge bildene i markupen, og CSS-en velger med tilstanden på roten:

[data-bs-header-inner] { display: flex; align-items: center; justify-content: space-between; }
[data-bs-header-icons] { display: flex; align-items: center; }
.logo-light { display: none; }
[data-bs-transparent]:not([data-bs-scrolled]) .logo-dark { display: none; }
[data-bs-transparent]:not([data-bs-scrolled]) .logo-light { display: inline; }

#Menypanelet som egen HTML

Butikken tegner panelets rot [data-bs-menu] og åpner det med open-menu. Malen går gjennom menyens lenker fra Menu panel › Links, de store med underkategorier og deretter de små:

<nav aria-label="{{i18n.menu}}">
  <ul>
    {{#each menu.links}}
    <li>
      <a href="{{this.href}}">{{this.label}}</a>
      {{#if this.children}}
      <ul>{{#each this.children}}<li><a href="{{this.href}}">{{this.label}}</a></li>{{/each}}</ul>
      {{/if}}
    </li>
    {{/each}}
    {{#each menu.secondary}}<li><a href="{{this.href}}">{{this.label}}</a></li>{{/each}}
  </ul>
  {{#if contact.email}}<p data-bs-menu-contact><a href="mailto:{{contact.email}}">{{contact.email}}</a></p>{{/if}}
  <button type="button" data-bs-action="close-menu">{{i18n.close}}</button>
</nav>

open-search åpner butikkens søkefelt som et lag over toppfeltet og panelet. Har markupen din et element med [data-bs-search-slot], tegnes søkefeltet der i stedet. Et eget søkeskjema virker også:

<form action="/search" method="get" role="search">
  <input type="search" name="q" placeholder="{{i18n.searchPlaceholder}}" aria-label="{{i18n.search}}">
  <button type="submit">{{i18n.search}}</button>
</form>

#Et produktkort som egen HTML

Butikken tegner kortets rot [data-bs-card]. Malen er innsiden. Knappen får produktet sitt gjennom attributtene.

<a href="{{product.href}}">
  <div data-bs-card-media>
    {{#if product.image}}<img src="{{product.image}}" alt="{{product.imageAlt}}" loading="lazy">{{/if}}
    {{#if product.badge}}<span class="badge">{{product.badge}}</span>{{/if}}
  </div>
  <div data-bs-card-body>
    <h3 data-bs-card-title>{{product.title}}</h3>
    <p data-bs-card-price>{{#if product.compareAtPrice}}<s>{{product.compareAtPrice}}</s> {{/if}}{{product.price}}</p>
  </div>
</a>
<button type="button" data-bs-action="add-to-cart" data-bs-product-id="{{product.id}}">Add to cart</button>