Dragspelslayout för temainställningar i Shoporama

Vad är dragspelslayout?

När ett Shoporama-tema har många temaalternativ kan den klassiska kortlayouten med sidofält snabbt bli rörig. Accordion-layouten löser detta genom att organisera alla sektioner i vikbara paneler som kan öppnas och stängas individuellt. Detta ger butiksägaren en ren och fokuserad översikt - även med 15+ sektioner.

Montana-temat - Shoporamas senaste Tailwind CSS-baserade tema - använder dragspelslayouten med hela 16 sektioner och är det perfekta exemplet på hur det fungerar i praktiken.

Dragspel vs. klassisk layout

Det finns två layoutalternativ för temainställningar i Shoporama:

• Klassisk layout - Tvåkolumnslayout (9+3 kolumner) med Bootstrap-kort och ett sidofält med scroll-spy-navigering. Lämplig för teman med få sektioner.
• Accordion-layout - Centrerad enspaltig layout med vikbara sektioner, sökfunktion och localStorage. Perfekt för teman med många sektioner och fält.

Så här aktiverar du dragspelslayout

Allt du behöver göra är att lägga till "accordion": true i ditt temas theme_settings.json-fil. Filen ligger i roten av ditt tema.

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

Utan denna rad - eller med " accordion " : false - används automatiskt den klassiska kartlayouten.

Funktioner i dragspelslayouten

Dragspelslayouten har ett antal funktioner som gör det enkelt att navigera i temainställningarna:

• Vikbara sek tioner - Varje sektion kan öppnas och stängas med ett klick. Chevron-ikoner visar tydligt om sektionen är öppen eller stängd.
• Sökfunktion - En sökruta längst upp filtrerar sektioner och fält i realtid. Matchande text markeras och endast relevanta avsnitt visas.
• Memorerar status - Vilka sektioner som är öppna/stängda sparas i localStorage, så att butiksägaren inte behöver börja om vid nästa besök.
• Centrerad layout - Innehållet visas i en enda kolumn (col-lg-10), vilket ger mer utrymme för varje fält och tar bort behovet av sidofältnavigering.

Strukturen i theme_settings.json

Filen theme_settings.json definierar hela strukturen för temainställningarna. Här är ett komplett exempel inspirerat av Montana-temat:

{ "info": "Montana", "accordion": true, "features": [ "Tailwind CSS-baserad responsiv design", "Fullt anpassningsbara färger, logotyp och favicon ","USP bar med anpassningsbara ikoner i header"], "settings": [ { { "path": "general", "name":" General", "description": "Betalnings- och leveransmetoder samt leveranstider.", "fields": [ { "path": "payment_methods", "name": "Betalningsmetoder", "description": "Kommaseparerad lista, t.ex: dankort,visa,mastercard", "type": "string"}, { "path": "shipping_time_in_stock", "name": "Leveranstid (i lager)", "description": "Ex: 1-3 arbetsdagar", "type":" string" } ] }, { " path":" theme", "name": "Tema & färger", "description": "Färger , logotyp och favicon för din butik.", "fields": [ { { "path": "primary", "name": "Primärfärg", "description": "Används för text, rubriker och mörka element.", "type":" color", "default_value":" #111827 "}, { "path":" action", "name":" Action  colour ", "description": "Används för knappar, länkar och CTA-element."," type": "color", "default_value":" #2563eb" }, { " path": "background", "name":" Bakgrundsfärg", "description": "Sidans  bakgrundsfärg.", "type":" color", "default_value":" #ffffff" } ] }, { " path":" value_propositions", "name": "USP\u0027s ", "description": "Upp till 4 korta meddelanden i sidhuvudet . ", "fields": [ { { "path": "text_1", "name": "USP #1 - Text", "type":" string"}, { " path":" icon_1", "name": "USP #1 - Icon", "type": "list", "values": [ { " value ": "" ," name ": "(None)" }, { " value": "truck", " name": " Truck" }, { " value": "check", " name": " Tick " }, { "value": "star", "name": " Star " } ] } ] }, { "path": "shipping_alert", "name": "Shipping alert", "description": "Beställ före .  14 och vi skickar idag.", "fields": [ { { "path": "enable", "name": "Enable", "type":" bool" }, { " path ": " time" , " name ": "Closing  time ", "description": "Tidpunkt för sista sändning, t.ex. 14:00", "type": "string"}, { "path":" days "," name ": "Dispatch days", "description ":"Veckodagsnummer: 1=Man, 7=Sön.  Ex: 1,2,3,4,5", "type": "string"} ] }, { " path":" product", "name": "Produktsida", "description": "Lager, varianter, flikar etc.", "fields": [ { "path": "show_sku", "name":" Visa artikelnummer (SKU)"," type":" bool "}, { " path": "show_stock_count", "name":" Visa  lagerantal", "description":" Visa exakt antal i lager.", "type":" bool" }, { "path": "enable_omnibus_price"," name ": " Visa förpris enligt Omnibusdirektivet ", "description": " Visa förpris enligt  Omnibusdirektivet  Omnibus-direktivet", "description":"Visar  lägsta pris från de senaste 30 dagarna som förpris."," type": "bool" } ] }, { "path":" newsletter", "name":" Nyhetsbrev", "description": "Anmälningsformulär i sidfot.", "fields": [ { " path": "enable", "name": "Visa nyhetsbrev", "type":" bool" }, { " path":" title"," name":" Rubrik"," description": "Standard:  Prenumerera på vårt nyhetsbrev", "type": "string"}, { " path": "lead", "name": "Body"," type": "text"} ] }, { " path": "custom_code " , " name": "Custom JavaScript", "description": "Lägg till anpassad JavaScript-kod.", "fields": [ { " path":" js"," name": "Custom JavaScript", "description": "Infoga längst ner på sidan."," type":" text"} ] }

Tillgängliga fälttyper

Varje fält i ett avsnitt definieras med en typegenskap. Här är de tillgängliga fälttyperna:

• string - Fält med enstaka text. För korta värden som betalningsmetoder, webbadresser eller leveranstider.
• bool - Checkbox (på/av). Visas som en märkt kryssruta. Värdet lagras som 0 eller 1.
• color - Färgväljare med hex-ingång. Stöder default_value med en reset-knapp.
• text - Stort textfält (textarea). För längre texter, ansvarsfriskrivningar eller JavaScript-kod.
• wysiwyg - Redigeringsprogram för rik text. För formaterat HTML-innehåll med WYSIWYG-redigering.
• image - Uppladdning av bild. Visar den uppladdade bilden med möjlighet att radera den.
• list - Rullgardinsmeny. Kräver en värdearray med objekt som har värde och namn.

Så här använder du temainställningar i Smarty-mallar

Inställningarna hämtas i dina Smarty-mallar via metoden $webshop->getThemeSetting(). Den första parametern är sökvägen till avsnittet, den andra parametern är sökvägen till fältet:

<!-- Hämta ett färgvärde--><{$primary = $webshop->getThemeSetting('theme', 'primary')}><!-- Använd värdet i inline CSS --> <divstyle="color: <{$primary}>">Header</div><!-- Kontrollera ett booleansktvärde--> <{if $webshop->getThemeSetting('product', 'show_sku')}><span>Produkt: <{$product->getSku()}></span><{/if}><!-- Hämta en bild (returnerar ett Image-objekt)--><{$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 för en bra struktur

Här är några rekommendationer för att få ut mesta möjliga av dragspelslayouten:

• Grupperalogiskt - Gruppera relaterade fält i samma avsnitt. Till exempel alla färger under "Tema & färger" och alla utcheckningsalternativ under "Utcheckning".
• Skriv bra beskrivningar - Både sektioner och fält har en egenskap för beskrivning. Använd den för att förklara vad inställningen gör och ge exempel.
• Använd default_value på färger - Färgfält har stöd för default_value, vilket ger butiksägaren en återställningsknapp så att de alltid kan återgå till standardfärgen.
• Håll sökvägsnamnen korta och engelska - Använd snake_case och engelska namn för sökvägsfält(t.ex. shipping_alert, product_card). Användarvänliga namn hör hemma i namnfältet.
• Använd listtyp för begränsade val - Istället för att be butiksägaren att skriva in ikonnamn kan du ge dem en rullgardinsmeny med fördefinierade alternativ.

För att sammanfatta

Accordion-layouten är det rekommenderade sättet att organisera temaalternativ i nya Shoporama-teman - särskilt när temat har mer än en handfull sektioner. Det ger butiksägaren en bättre översikt, snabbare navigering via sökning och kommer ihåg användarens preferenser mellan sessioner. Allt som krävs är en enda rad i din theme_settings.json.