Designdokumentation

Välkommen till Quickbutiks designdokumentation av underliggande källkoden som du har åtkomst till via Utseende > Tema > Kod under huven i din kontrollpanel.

För tekniska frågor och funderingar: support@quickbutik.com

Senast uppdaterad: 24/07 - 2018

Navigera till



Introduktion

Mustache är det open-source språk som används i butiksteman hos Quickbutik för att ladda dynamiskt innehåll. I denna dokumentation vill du hitta alla tillgängliga möjligheter för att ladda in dynamisk innehåll och här kommer termerna objekt, attribut samt if-satser att nämnas regelbundet.

Dessa vill vi introducera här, så att ni är helt redo att börja arbeta i butikens källkod.

Objekt & attribut

En objekt är en serie av data, som består av attributen. Till exempel, innehåller product.*  all information om produkten som kan nås via olika attribut:

  • product.title - skriver ut produktens titel.

  • product.price - skriver ut produktens pris.

  • (...)

Alla objekt och attribut som används börjar med {{ och avslutas med }}.

Testa att ange t.ex {{product.price}} någonstans valfritt i filen Produktsida. Då ser du att produktens pris vill synas här. Enkelt eller hur?

If-satser

Det kan komma lägen där man endast vill visa XX om YY och det är här kommer if-satser in.

If-satser används på följande sätt i taggarna:

  • # = om

  • ^ = om inte

Detta läggs till i början på taggen och kräver då även att taggen avslutas, för att veta vad som ska ingå i "om"/"om inte"-delen.

Exempel: Vi vill skriva ut ett meddelande om produkten är slut i lager eller inte.

{{#product.soldOut}}
Produkten är tyvärr slut i lager. :-(
{{/product.soldOut}}
{{^product.soldOut}}
Produkten finns i lager! Köp nu!
{{/product.soldOut}}

Här ser vi hur ^ betyder att om inte produkten är slut i lager, så skriver vi ut en annan text.

Om kan användas lika mycket som Om inte. Vid en annan attribut som t.ex "Är varukorgen tom?" kan alltså tvärtom användas, "Är varukogen inte tom?" - detta görs alltså genom att använda istället för #.

Nedan hittar du tillgängliga objekt & attribut som kan användas i butikens källkod.

seo.* [Global]

Kan användas i:
Alla sidor

seo innehåller data avsedd för sökmotorer (meta-data).

seo.title
Söktiteln för nuvarande sida
seo.description
Sökbeskrivningen för nuvarande sida

shop.* [Global]

Kan användas i:
Alla sidor

shop innehåller butikens grundläggande inställningar.

shop.name
Butikens namn
shop.url
Butikens länkadress
shop.cconverter_active
Är valutaomvandlaren i butiken aktiv?
shop.languages_active
Är flerspråk i butiken aktiv?
shop.taxtoggle_active
Är momsväljaren i butiken aktiv?
shop.exclude_tax
Är butiken i exklusiv moms läge?
shop.contact_text
Kontaktsidans text
shop.address
Butikens adress: Adress
shop.zipcode
Butikens adress: Postnummer
shop.city
Butikens adress: Stad
shop.phone
Butikens telefonnummer
shop.soldout_text
Meddelandet om en produkt är slut i lager
shop.incl_tax_url
Butikens länkadress för priser inklusive moms.
shop.excl_tax_url
Butikens länkadress för priser exklusive moms.

basket.* [Global]

Kan användas i:
Alla sidor

basket innehåller aktuell data av varukorgen. Datan som lagras här är tillfällig (per besök).

basket.isEmpty
Är varukorgen tom?
basket.items_count
Antal varor i varukorgen
basket.total_amount
Totalsumma för varorna i varukorgen

basket.items

basket.items är objektet som innehåller alla varukorgens produkter.

item.id
Produktens ID
item.url
Produktens länkadress
is_variant
Är produkten en variant?
variant_name
Produktens variant
item.price
Produktens styckpris
amount
Produktens totalsumma

settings.* [Global]

Kan användas i:
Alla sidor

settings är objektet för temaspecifika inställningar och är helt upp till det temat som du använder. Dessa är inställningar som kan ställas in via Anpassa tema.

Dynamiska element

Ibland vill man kunna erbjuda dynamiska element som öppnar upp möjligheten för butiksägaren att själv kunna välja vad för element som bör finnas, hur och i vilken ordning dessa ska visas. Vanligast är startsidan.

Nedan visas ett exempel på dynamiska element med objektet "home_elements".

Ovanstående innehåller HTML-strukturen för fyra element:

  • Bildspel

  • Rubrik (h1)

  • Rubrik 2 (h2)

  • Sida, infogande av en sida.

Men fungerar inte direkt - utan det är helt beroende på vad butiksägaren väljer att ha för element på sin startsida, samt i vilken ordning. {{#is_****}} {{/is_****}} bidrar till detta.

linklist.* [Global]

Kan användas i:
Alla sidor

linklist innehåller alla navigeringsmenyer och menypunkter därtill.

linklist.main
Huvudmeny
linklist.top
Toppmeny
linklist.footer
Sidfotsmeny

Varje navigeringsmeny, som t.ex linklist.main, är en objekt som innehåller menypunkterna. Följande attribut kan användas:

url
Menypunkt länkadress (destination)
name
Menypunktens namn
hasChildren (if)
children (objekt)
hasChildren2 (if)
children (objekt)
Har menypunkten en/flera undermenypunkter?
children innehåller {{url}} och {{name}}
Har undermenypunkten även undermenypunkter?
children innehåller {{url}} och {{name}}

Exempel:

Ifs & wrappers [Global]

Kan användas i:
Alla sidor

ifs är if-satser som antingen kan vara sann eller falsk.

wrappers är inbyggda funktioner i temamotorn, där du skickar ett värde med till funktionen som sedan returnerar svar vid samma placering som värdet har skickats in från.

Globala ifs

isProduct
Är detta en produktsida?
isStart
Är detta startsidan?
isCategory
Är detta en kategorisida?
isPage
Är detta en statisk innehållssida?
url_current
Nuvarande länkadress

Globala wrappers

{{#assets}}css/style.css{{/assets}}
Länkar till rätt sökväg för specifik fil.
{{#lang}}My text here{{/lang}}
Statisk text i temat som förbereder texten för översättning via kontrollpanelen.
{{#img}}{{product.firstimage}}_400x400
{{/img}}
Används för att länka korrekt till bild samt aktivera bildmanipulering till att optimera för ett 400x400px format.
{{#breadcrumbs}}
{{url}} {{title}}
{{^last}} {{/last}}
{{/breadcrumbs}}
Utskrift av brödsmulor / kategoristruktur, oberoende sida.

Exempel:

{{#breadcrumbs}}
{{title}}
{{^last}}  {{/last}}
{{/breadcrumbs}}

product.*

Kan användas i:
Produktsida, Produktlista, Startsida (element)

product.* är objektet som innehåller all produktinformation.

product.title
Produktens titel
product.id
Produktens id
product.price
Produktens pris
product.before_price
Produktens jämförelsepris
product.description
Produktens beskrivning
product.firstimage
Produktens första bild
product.secondimage
Produktens andra bild
{{#product.images}}
{{image}} - Bildlänk
{{image_id}} - Bild ID
{{alttext}} - Bildtext
{{/product.images}}
Alla produktens bilder
{{#product.has_before_price}}
{{/product.has_before_price}}
Har produkten en jämförelsepris
Har produkten inte en jämförelsepris
{{#product.soldOut}} {{/product.soldOut}}}
{{^product.soldOut}} {{/product.soldOut}}}
Om produkten är slut i lager
Om produkten inte är slut i lager
{{#product.hasOptions}} {{/product.hasOptions}}
{{^product.hasOptions}} {{/product.hasOptions}}
Har produkten varianter
Har produkten inte varianter

product.options (produktval & varianter)

{{option_title}}
Valens titel
{{#option_values}}
{{id}} - valmöjlighetens id
{{name}} - valmöjlighetens titel
{{/options_values}}
Valmöjligheterna

page.*

Kan användas i:
Innehållssida, Startsida (element)

page innehåller statiska sidans innehåll.

page.title
Sidans titel
&page.content
Sidans innehåll
page.qbuilder
Används Sidbyggaren för sidans innehåll?

category.*

category.name
Kategorins namn
category.description1
Kategorins beskrivningsfält 1
category.description2
Kategorins beskrivningsfält 2

blog.*

is_list
Visas bloggens översikt?
is_post
Visas ett specifikt blogginlägg?
url
Bloggens länkadress
filter_tags
Objekt med bloggens taggar
rss
Bloggens RSS-länkadress
title_current
Bloggens titel
isBlogTag
Visas bloggens översikt utifrån en tagg?
posts
Objekt som innehåller blogginläggen

posts + post.*

hasImage
Har blogginlägget en bild?
image
Blogginlägg bild
title
Blogginläggets titel
&content_short
Blogginläggets innehåll (kort)
&content
Blogginläggets innehåll
author
Blogginläggets författare
date_pretty
Blogginläggets datum
url
Blogginläggets länkadress

blog.filter_tags

url
Länkadressen för taggfiltreringen
title
Tagg


Övriga kodsnuttar & "inline"-funktioner

1. Produktval & varianter

Exempel:

2. Svar från e-postformulärer

Formulärer i butikens källkod där innehållet från fälten skickas till butikens e-postadress, som på t.ex kontaktsidan, returneras det ett svar (success eller error) som sedan kan fångas upp och hanteras på följande sätt:

response_data
Finns något aktuellt svar? (form submit)
success
Lyckad svar?
errors
Felmeddelanden
error_message
Objekt med felmeddelande(n).

3. Funktion: Relaterade produkter

rp.* är alias till objektet product och kan därför användas på samma sätt som product.*

Exempel:

{{#has_related_products}}
{{#related_products}}
{{rp.title}}
{{rp.url}}
{{/related_products}}
{{/has_related_products}}

4. Funktion: Valutaomvandlare

Exempel:

5. Funktion: Flera språk

Skapa en flaggväljare för när funktionen Flera språk har aktiverats.

Exempel:

6. Funktion: Inloggningskonto

Exempel:

7. Funktion: Momsväljare



Observera att samtliga kodsnuttar (exempel) innehåller HTML-fel (<> saknas).

Har ni frågor, funderingar eller förslag till förbättringar.

så tveka inte att kontakta support@quickbutik.com


Quickbutik AB - Copyright 2018