Trekkspilloppsett for temainnstillinger i Shoporama

Hva er trekkspilloppsett?

Når et Shoporama-tema har mange temaalternativer, kan det klassiske kortoppsettet med sidefelt fort bli uoversiktlig. Trekkspilloppsettet løser dette ved å organisere alle seksjonene i sammenleggbare paneler som kan åpnes og lukkes individuelt. Dette gir butikkeieren en ren og fokusert oversikt - selv med mer enn 15 seksjoner.

Montana-temaet - Shoporamas nyeste Tailwind CSS-baserte tema - bruker trekkspilloppsettet med hele 16 seksjoner og er det perfekte eksempelet på hvordan det fungerer i praksis.

Trekkspill vs. klassisk layout

Det finnes to layoutalternativer for temainnstillinger i Shoporama:

• Klassisk layout - To-kolonne layout (9+3 kolonner) med Bootstrap-kort og et sidefelt med scroll-spy-navigasjon. Passer for temaer med få seksjoner.
• Trekkspilloppsett - Sentrert enspaltet oppsett med sammenleggbare seksjoner, søkefunksjon og localStorage. Ideell for temaer med mange seksjoner og felt.

Slik aktiverer du trekkspilloppsett

Alt du trenger å gjøre er å legge til "accordion": true i temaets theme_settings.json-fil. Filen ligger i roten av temaet ditt.

{ "info": "My Theme", " accordion": true, "settings": [ ... ] } }

Uten denne linjen - eller med " accordion " : false - brukes automatisk det klassiske kartoppsettet.

Funksjoner i trekkspilloppsettet

Trekkspilloppsettet har en rekke funksjoner som gjør det enkelt å navigere i temainnstillingene:

• Sammenleggbare seksjoner - Hver seksjon kan åpnes og lukkes med et klikk. Chevron-ikonene viser tydelig om seksjonen er åpen eller lukket.
• Søkefunksjon - En søkeboks øverst filtrerer seksjoner og felt i sanntid. Matchende tekst utheves, og bare relevante seksjoner vises.
• Husker status - Hvilke seksjoner som er åpne/lukkede, lagres i localStorage, slik at butikkeieren ikke trenger å begynne på nytt ved neste besøk.
• Sentrert layout - Innholdet vises i én kolonne (col-lg-10), noe som gir mer plass til hvert felt og fjerner behovet for sidefeltnavigering.

Strukturen i theme_settings.json

Filen theme_settings.json definerer hele strukturen for temainnstillinger. Her er et komplett eksempel inspirert av Montana-temaet:

{ "info": " Montana ", "accordion": true, "features": [ "Tailwind CSS-basert responsivt design", "Fullt tilpassbare farger, logo og favicon", "USP bar med tilpassbare ikoner i header"], " settings": [ { { "path": "general", "name": " General", "description": "Payment and shipping methods and delivery times.", "fields": [ { "path": " general", "name": " General ", "description": "Payment and shipping methods and delivery times.", "fields": [ { { "path": "payment_methods", "name":" Betalingsmåter", "description": "Kommaseparert liste, f.eks: dankort,visa,mastercard", "type": "string"}, { " path": "shipping_time_in_stock", "name": "Leveringstid (på lager)", "description": "Ex: 1-3 virkedager", "type": "string"} ] }, { "path": " theme", "name": " Theme & Colours", "description": " Farger,  logo og favicon for butikken din.", "fields": [ { { "path": " primary", "name": "Primary color", "description": "Brukes for tekst, overskrifter og mørke elementer.", "type": " color", "default_value": "#111827" }, { " path ": " action", "name": "Action color", "description": "Brukes for knapper, lenker og CTA-elementer. " , " type": " color", " default_value": " #111827 "}, { " path": "action", "name": "Action colour", " description": " Brukes  for knapper, lenker og CTA-elementer . ", "type": "color", "default_value": "#2563eb"}, { "path": "background", " name ": " Background  color", "description": " Page background color.", "type": " color", "default_value": " #ffffffff" } ] }, { "path": "value_propositions", "name": "USP\u0027s", "description": "Opptil 4 korte meldinger i overskriften ." , "fields ": [ { " path": "value_propositions ", " name": "USP\u0027s ". ", "fields": [ { { "path": "text_1", "name":" USP #1 - Text", "type":" string"}, { " path":" icon_1", " name ": " USP #1 - Icon", "type": "list", "values": [ { { " value ": "", " name": "(Ingen)" }, { " value": "truck", " name": " Truck" }, { " value": "check", " name": " Tick " }, { "value": "star", " name": " Star " } ] } ] } }, { "path": "shipping_alert", " name": "Shipping alert", "description": "Bestill før .  14 og vi sender i dag.", "fields": [ { { "path": "enable", "name": "Enable", "type": "bool" }, { " path ": " time", " name": "Closing  time", "description": "Tidspunkt for siste utsendelse, f.eks. 14:00", "type": "string"}, { " path ": " days", "name": "Dispatch days" , " description" : "Ukedagsnummer: 1=Man, 7=Søn.  Eks: 1,2,3,4,5", "type": "string"} ] }, { "path": " product", "name": "Product page", "description": "Lager, varianter, faner osv.", "fields": [ { { "path": "show_sku", "name":" Vis varenummer (SKU)", " type ":" bool "}, { " path": "show_stock_count", "name":" Vis  antall på lager", "description":" Vis nøyaktig antall på lager", " type":" bool "}, { " path": "enable_omnibus_price", " name ": "Vis førpris i henhold til Omnibus-direktivet ", " description": "Vis førpris i henhold til  Omnibus-direktivet  Omnibus-direktivet", "description": " Viser laveste pris fra de siste 30 dagene som førpris.", "type": "bool" } ] }, { "path": " newsletter ", " name ": " Newsletter", "description": "Sign up form in footer.", "fields": [ { " path": "enable", " name": "Show newsletter", "type": "bool" }, { "path": "title", " name": "Heading", " description": " Default:  Abonner på nyhetsbrevet vårt", " type": "string"}, { " path": "lead", "name": "Body", " type": "text"} ] }, { " path": "custom_code ", " name": "Custom JavaScript", "description": "Add custom JavaScript code.", "fields": [ { " path": "js", " name": "Custom JavaScript", "description": "Insert at bottom of page.", " type": " text"} ] } }

Tilgjengelige felttyper

Hvert felt i en seksjon er definert med en typeegenskap. Her er de tilgjengelige felttypene:

• string - Enkelt tekstfelt. For korte verdier som betalingsmåter, nettadresser eller leveringstider.
• bool - Avkrysningsboks (på/av). Vises som en merket avkrysningsboks. Verdien lagres som 0 eller 1.
• color - Fargevelger med hex-inndata. Støtter default_value med en tilbakestillingsknapp.
• text - Stort tekstfelt (textarea). For lengre tekster, ansvarsfraskrivelser eller JavaScript-kode.
• wysiwyg - Rich text-editor. For formatert HTML-innhold med WYSIWYG-redigering.
• image - Bildeopplasting. Viser det opplastede bildet med mulighet for å slette det.
• list - Nedtrekksmeny. Krever en verdimatrise med objekter som har verdi og navn.

Slik bruker du temainnstillinger i Smarty-maler

Innstillingene hentes i Smarty-malene dine via metoden $webshop->getThemeSetting(). Første parameter er seksjonsbanen, andre parameter er feltbanen:

<!-- Hent en fargeverdi--><{$primary = $webshop->getThemeSetting('theme', 'primary')}><!-- Bruk verdien i inline CSS --> <divstyle="color: <{$primary}>">Header</div><!-- Sjekk en boolskverdi--> <{{if $webshop->getThemeSetting('product', 'show_sku')}><span>Produkt: <{$product->getSku()}></span><{/if}><!-- Hent et bilde (returnerer et bildeobjekt)--><{$og_image = $webshop->getThemeSetting('open_graph', 'image')}>><{if $og_image && is_object($og_image)}><{meta property="and:image" content="<{$og_image->getSrc(1200, 630, 'fit')}>"><{/if}>

Tips for en god struktur

Her er noen anbefalinger for å få mest mulig ut av trekkspilloppsettet:

• Grupperlogisk - Grupper relaterte felt i samme seksjon. For eksempel alle farger under "Tema og farger" og alle betalingsalternativer under "Betaling".
• Skriv gode beskrivelser - Både seksjoner og felt har en egenskap for beskrivelse. Bruk den til å forklare hva innstillingen gjør, og gi eksempler.
• Bruk default_value på farger - Fargefeltene støtter default_value, som gir butikkeieren en tilbakestillingsknapp slik at de alltid kan gå tilbake til standardfargen.
• Hold banenavnene korte og engelske - Bruk snake_case og engelske navn for sti-felt(f.eks. shipping_alert, product_card). Brukervennlige navn hører hjemme i navnefeltet.
• Bruk listetype for begrensede valg - I stedet for å be butikkeieren om å skrive inn ikonnavn, kan du gi dem en nedtrekksmeny med forhåndsdefinerte alternativer.

For å oppsummere

Trekkspilloppsettet er den anbefalte måten å organisere temaalternativer på i nye Shoporama-temaer - spesielt når temaet har mer enn en håndfull seksjoner. Det gir butikkeieren bedre oversikt, raskere navigering via søk og husker brukerpreferanser mellom økter. Alt det krever er en enkelt linje i theme_settings.json.