Shoporama Templates

# 1. Klon repository
git clone https://github.com/blinksbjerg/hackorama.git
cd hackorama

# 2. Konfigurer din API-nøgle i setup.php
# Rediger setup.php og indsæt din Shoporama API-nøgle

# 3. Start lokal PHP server
php -S localhost:8080

# 4. Åbn din browser
# Naviger til http://localhost:8080

# I din template fil (f.eks. product.html)
<div class="product-detail">
    <h1><{$product->getName()|escape}></h1>
    <div class="price">
        <{$product->getPrice()|currency}>
    </div>
    <div class="description">
        <{$product->getDescription()}>
    </div>
</div>

# Test i Hackorama ved at navigere til:
# http://localhost:8080/product?id=123

<h1>Velkommen til <{$webshop->getName()|escape}></h1>

<{$order|var_dump}>

<{* Typisk tilstrækkelig *}>
<{if $profile}>
    <{$profile->getName()}>
<{/if}>

<{* Lidt grundigere *}>
<{if is_object($profile)}>
    <{$profile->getName()}>
<{/if}>

<{* Meget grundig *}>
<{if is_a($profile, "SafeProfile")}>
    <{$profile->getName()}>
<{/if}>

<{debug}>

<{if in_array($product->getProductId(), $featured_ids) && isset($show_badge)}>
    Featured
<{/if}>

<!DOCTYPE html>
<html>
<head>
    <title><{$webshop->getName()|escape}></title>
</head>

<body>

    <nav>
        <!-- Din navigation -->
    </nav>

    <div>
        <{$contents}>
    </div>

</body>

</html>

<{if $inc}>

    <{include file=$inc}>

<{elseif $category}>

    <{include file="category.html"}>

<{elseif $landing_page}>

    <{include file="landing_page.html"}>

<{elseif $product}>

    <{include file="product.html"}>

<{elseif $page}>

    <{include file="page.html"}>

<{elseif $blog_post}>

    <{include file="blog_post.html"}>

<{/if}>

<{if $subject}>

    Emnet på mailen

<{else}>

    Indholdet af mailen

<{/if}>

Images, stylesheets, etc. in the theme

You can place your images, stylesheets, etc., wherever you like, but we recommend that you use a structure such as /{name}/images and /{name}/css. When referencing the files, you must use the variable $theme_url, which contains the theme’s URL. Note that this may change, so you cannot always enter the URL manually in your theme. However, the variable will always work. If you want to link to the image /{name}/images/img.gif, you should therefore write <img src="<{$theme_url}>/images/img.gif">.

Extensions

Shoporama contains several different data types, such as products and categories. These data types include some predefined fields, such as title, description, and price. It is possible to extend the most common data types with your own fields. Extensions must be placed in the theme in the file /{name}/extensions/{datatype}.json, where the possible data types are product, landing_page, category, static_page, and blog_post.

The json-file must contain an array of groups. Each group contains a row of fields. The format is as this:

"options": {
    "foo": "Foo",
    "bar": "Bar",
    "baz": "Baz"
}

Below is an example of json in the file extensions/product.json:

[
    {
        "name": "Billeder",
        "description": "Her kan du tilføje billeder",
        "fields": [
            {
                "title": "Et enkelt billede",
                "id": "my-image",
                "type": "image"
            },
            {
                "title": "En serie af billeder",
                "id": "my-images",
                "type": "images"
            }
        ]
    },
    {
        "name": "Indstillinger",
        "description": "Herunder kan du indstille diverse",
        "fields": [
            {
                "title": "my-setting",
                "description": "Vælg flere ..",
                "id": "tags",
                "type": "multi",
                "options": {
                    "foo": "Foo",
                    "bar": "Bar",
                    "baz": "Baz"
                }
            }
        ]
    },
    {
        "name": "Features",
        "description": "Produktfeatures med ikoner",
        "fields": [
            {
                "title": "Features",
                "id": "features",
                "type": "repeater",
                "field_title": "Feature",
                "description": "Tilføj features for produktet",
                "fields": [
                    {
                        "id": "title",
                        "type": "text",
                        "title": "Overskrift",
                        "placeholder": "Fx: Vandtæt"
                    },
                    {
                        "id": "description",
                        "type": "longtext",
                        "title": "Beskrivelse"
                    },
                    {
                        "id": "icon",
                        "type": "image",
                        "title": "Ikon"
                    }
                ]
            }
        ]
    }
]

Will produce this interface:

For data types that support extensions, the values must be retrieved using the getExtensionValue('ID') method, where ID is the ID from the JSON file. Depending on the field's data type, the content may be returned as text, an array, or an object. Ex.:

Materiale: <{$product->getExtensionValue('materiale')}>

Or:

<{if $img = $product->getExtensionValue('img')}>
    <{$img->getSrc(50, 50, 'fit')}>
<{/if}>

Or if you want to loop images:

<{foreach $product->getExtensionValue('my-images') as $image}>
    <img src="<{$image->getSrc(50, 50, 'box')}>">
<{/foreach}>

For repeater fields you can loop through items. Image fields in repeaters are returned as Image objects:

<{foreach $product->getExtensionValue('features') as $feature}>
    <div class="feature">
        <{if $feature.icon}>
            <img src="<{$feature.icon->getSrc(64, 64, 'box')}>" alt="">
        <{/if}>
        <h3><{$feature.title|escape}></h3>
        <div><{$feature.description|escape|nl2br}></div>
    </div>
<{/foreach}>

For date and datetime fields, the value can be used directly or formatted with Smarty's date_format:

<{* Date felt - vis kun dato *}>
Lanceringsdato: <{$product->getExtensionValue('publishdate')|date_format:'%d/%m/%Y'}>

<{* Datetime felt - vis dato og tid *}>
Publiceringsdato: <{$product->getExtensionValue('publishdatetime')|date_format:'%d/%m/%Y kl. %H:%M'}>

<{* Tjek om produktet skal vises baseret på dato *}>
<{if $launch_date = $product->getExtensionValue('publishdate')}>
    <{if $launch_date|strtotime <= $smarty.now}>
        <!-- Produktet er lanceret -->
    <{/if}>
<{/if}>

<{* Sammenlign datoer *}>
<{if $product->getExtensionValue('publishdatetime')|strtotime > $smarty.now}>
    Kommer snart: <{$product->getExtensionValue('publishdatetime')|date_format:'%d. %B %Y'}>
<{/if}>

Reference fields return the objects directly: a single field returns an object (or null), and a plural field returns a list. Only visible content is included (products and categories that are online, posts that are online), in the order they were selected in the admin panel:

<{* Udvidelse på blogindlæg: {"id": "opskrift", "type": "content_entry", "content_type": "opskrift"} *}>
<{if $opskrift = $blog_post->getExtensionValue('opskrift')}>
    <a href="<{$opskrift->getUrl()}>"><{$opskrift->getTitle()|escape}></a>
<{/if}>

<{* products giver en liste af produkter *}>
<{foreach $product->getExtensionValue('tilbehoer') as $p}>
    <a href="<{$p->getUrl()}>"><{$p->getName()|escape}></a>
<{/foreach}>

Content Types

Under Content → Content Types, the store owner can create new content types—such as Recipes, Hotels, or Retailers—with the fields required for each type. Each type gets its own menu item where entries are created. The types are stored in the store and not in the theme, so they are retained when you switch themes. The fields have the same types as the extensions mentioned above.

The theme only recognizes the type's key, such as " recipe." The key is specified for the type in the admin panel and cannot be changed, so the store owner can rename the type without breaking the theme. Field values are retrieved using the field's key.

<{* De 6 første opskrifter i admin-rækkefølge *}>
<{foreach $webshop->getContentEntries('opskrift', 6) as $opskrift}>
    <article>
        <{if $image = $opskrift->getImage()}>
            <img src="<{$image->getSrc(400, 300, 'box')}>" alt="">
        <{/if}>
        <h3><a href="<{$opskrift->getUrl()}>"><{$opskrift->getTitle()|escape}></a></h3>
        <p><{$opskrift->getValue('tilberedningstid')}> min. · <{$opskrift->getLabel('svaerhedsgrad')}></p>
    </article>
<{/foreach}>

<{* Én bestemt post ud fra slug eller id *}>
<{if $hotel = $webshop->getContentEntry('hotel', 'strandhotellet')}>
    <{$hotel->getTitle()|escape}>: <{$hotel->getValue('stjerner')}> stjerner
<{/if}>

The type is defined in the admin panel, so the theme must always handle situations where the type or a field is missing: use an `if` statement to check before using a value. All methods are described under SafeContentEntry, SafeContentType, and SafeWebshop in the class documentation. The most important ones:

Dedicated pages for the entries

If the shop owner enables "Custom URL" for the type, each post gets a page at /prefix/slug and the type gets an overview page at /prefix, e.g., /recipes/rhubarb-trifle and /recipes. The pages are displayed via $inc just like the other pages, using these templates:

• content_opskrift.html (the type's key) or the generic content_entry.html for an entry. Variables: $content_entry, $content_type, and $breadcrumbs
• content_opskrift_list.html or the generic content_list.html for the overview. Variables: $content_entries, $content_type, $pager, and $breadcrumbs

If the theme does not include any of the templates, the URL returns a 404 error, and the shop owner receives a notification in the admin panel. Shoporama’s default themes include the generic templates. The title, description, canonical tag, and noindex attribute are set the same way as on other pages, and the entries are included in sitemap.xml.

The Page Designer

A field of type `content_type` in a section appears in the Page Builder as a list of the store's content types, and the value is the type's key. The default themes include a "Content Items" section that displays items from a selected type:

{"id": "content_type", "type": "content_type", "title": "Indholdstype"}

<{if $section.content_type}>
    <{foreach $webshop->getContentEntries($section.content_type, $section.max) as $entry}>
        ...
    <{/foreach}>
<{/if}>

Page types with their own URL can also be designed in the Page Designer, just like blog posts. The page types are named content_entry:<key> (the entries, either specific entries or all of them) and content_list:<key> (the list). In sections.json, the theme specifies the sections under content_entry and content_list. A list for a specific type, such as content_entry:recipe, takes precedence over the general one. The templates display the blocks using $page_blocks_top and $page_blocks_bottom (or $page_blocks, if the theme does not split them up):

{
    "content_entry": ["hero", "text", "product-list"],
    "content_list": ["hero", "text"]
}

Global variables

<{foreach $webshop->getCategories() as $category}>
    <{$category->getName()|escape}>
<{/foreach}>

<{if $webshop->hasNewsletters()}>
    <{foreach $webshop->getNewsletters(12) as $nl}>
        <a href="<{$nl->getUrl()}>">
            <{if $nl->getImage()}><img src="<{$nl->getImage()|escape}>" alt=""><{/if}>
            <time><{$nl->getDate()|date_format:"%d. %B %Y"}></time>
            <h3><{$nl->getTitle()|escape}></h3>
            <p><{$nl->getExcerpt()|escape}></p>
        </a>
    <{/foreach}>
<{/if}>

<{if $inc}>
    <{include file=$inc}>
<{/if}>

<{foreach $basket as $row}>
    <{if $image = $row.product->getImage()}>
        <img src="<{$image->getSrc(50, 50, 'box')|escape}>">
    <{/if}>

    <{$row.amount}> x <{$row.product->getName()|escape}>

    i alt

    <{$row.product->getRealPrice($row.amount, $row.attributes)|number_format:2:",":"."}>
    <{$webshop->getCurrency()}>

<{/foreach}>

Template functions

The following are the Shoporama-specific features that can be used in templates:

t

Template language support

It is possible to build language support into your templates. However, this is not traditional language support, where you can choose the text in multiple languages, but rather language support that allows you to change the text in the admin panel. This works by wrapping the text in a <{t}> block. After the template has been rendered in the browser, the text can then be edited in the admin panel. Example:

<{t}>Din kurv<{/t}>

Please note that if you change the text in your template files, the new text will appear in the admin panel as a new text entry. There are no IDs or names; it is the content itself that makes the text unique.

You can set the "section" attribute on the block to divide your text into more manageable sections. You can also add a hint if you want to display a hint in the admin panel when the text is being edited:

<{t section="basket" hint="Bruger i overskriften"}>Din kurv<{/t}>

If you have variable content that you want to include without the value appearing in the admin panel, you can use the following syntax:

<{t amount=$total_amount price=$total_price|number_format:2:",":"." hint="Til kurven"}>
    Du har {amount} ting til {price} kroner i kurven.
<{/t}>

If it fits better into your structure, you can also use `t` as a modifier for your variables/functions:

<{$title = "Min titel her"}>
<{$title|t}>

The above will display the following in admin:

Arguments

section

Section for partitioning in admin

hint

Hint used in admin as help text

cache

Template caching

If a template contains a lot of resource-intensive calls that don’t need to be updated in real time—such as product variants, the menu, or the category overview—Shoporama includes a caching feature that can make the store run significantly faster. The functions used are `cache ` and `get_cache`, respectively. First, it marks the section to be cached, and later retrieves the cached data. Example:

<{get_cache name="my_cache" ttl=3600 assign="c"}>

<{if $c}>

    Fra cache: <{$c}>

<{else}>

    Live:

    <{cache name="my_cache"}>
        <{$smarty.now}>
    <{/cache}>

<{/if}>

The cache function wraps the content and assigns it the name specified in ` name`. When the content needs to be retrieved, ` get_cache` is used, which takes the arguments `name`, as used previously, and `ttl`, which specifies in seconds how old the content may be. If the argument is omitted, the default is one hour.

Arguments

name

Used to specify the name of the cached item. It is possible to use dynamic names from variables.

get_cache

Cache content retrieval

Function that returns the cached content from the cache function.

Arguments

name

The name of the cached item used in cache.

ttl

Time To Live. Number of seconds the cache is allowed to remain valid for.

assign

The name of the variable to which the content should be assigned.

Theme settings

You can add some general settings to themes by adding a theme_settings.json file to the root of the theme, resulting in something like the following:

The structure is as follows:

[
    {
        "name": "cheese",
        "value": "Ost"
    },
    {
        "name": "ham",
        "value": "Skinke"
    }
]

{
    "info": "Mit tema",
    "smarty_version": 4,
    "split_blocks": true,
    "accordion": true,
    "settings": [
        {
            "path": "design",
            "name": "Design",
            "description": "Indstillinger for dit design",
            "fields": [
                {
                    "path": "logo",
                    "name": "Toplogo",
                    "description": "Upload dit logo her",
                    "type": "image"
                },
                {
                    "path": "background_color",
                    "name": "Baggrundsfarve",
                    "description": "Baggrundsfarven på shoppen",
                    "type": "color"
                },
                {
                    "path": "size",
                    "name": "Bredde",
                    "description": "Bredden på siden",
                    "type": "list",
                    "values": [
                        {
                            "name": "Afgrænset",
                            "value": "boxed"
                        },
                        {
                            "name": "Fuld bredde",
                            "value": "fullwidth"
                        }
                    ]
                }
            ]
        },
        {
            "path": "contact",
            "name": "Kontaktoplysninger",
            "description": "Dine kontaktoplysninger der vises i temaet",
            "fields": [
                {
                    "path": "mail",
                    "name": "E-mail-adresse",
                    "description": "Indtast din e-mail-adresse her",
                    "type": "string"
                }
            ]
        },
    ]
}

Both "info " and " settings " must be included; otherwise, the admin won't recognize the format and won't display the settings.

Settings configured via the REST API (PUT /theme-settings) or by an AI assistant are validated against this specific file: only fields declared here can be set; boolean, color, and list values must be valid; image fields must point to an image in the store’s image archive; and scripts and other dangerous HTML are removed from text fields. If even one value is invalid, nothing is saved. If the theme does not have a` theme_settings.json` file, settings cannot be set via the API.

Color schemes

If your theme uses color fields in theme_settings.json, you can offer predefined color schemes by adding a color_scheme.json file in the theme root. When the file is found, an additional menu item "Color schemes" appears under Design in the admin, where the store owner can select a color scheme with one click.

Color schemes only save the color fields defined in the file - all other theme settings remain untouched.

Example of color_scheme.json

{
    "groups": [
        {
            "label": "Grundfarver",
            "fields": ["theme.primary", "theme.action", "theme.background"]
        },
        {
            "label": "Sektioner",
            "fields": ["theme.header_bg", "theme.footer_bg"]
        }
    ],
    "schemes": [
        {
            "id": "default",
            "name": "Standard",
            "description": "Det klassiske look.",
            "colors": {
                "theme.primary": "#111827",
                "theme.action": "#2563eb",
                "theme.background": "#ffffff",
                "theme.header_bg": "#ffffff",
                "theme.footer_bg": "#111827"
            }
        },
        {
            "id": "warm",
            "name": "Varm",
            "description": "Varme jordtoner.",
            "colors": {
                "theme.primary": "#292524",
                "theme.action": "#c2410c",
                "theme.background": "#fffbeb",
                "theme.header_bg": "#fef3c7",
                "theme.footer_bg": "#292524"
            }
        }
    ]
}

Translations (long/)

All text in your templates is wrapped in <{t}>...<{/t}>. The first time a page is displayed, each string is detected and added to the store owner’s text list under Design → Texts, where it can be translated. The downside is that the strings only appear as pages are visited—and that the store owner must translate everything from scratch.

By placing a "lang" folder in the root directory of your theme, you can provide pre-translated strings that are automatically populated when the theme is activated. This way, the store owner has all the strings available from the start and doesn't have to translate them manually.

Folder Structure

{navn}/
  langs/
    da.json
    de.json
    no.json
    sv.json

There is no en.json file —the theme's default text is written in English directly within <{t}>, so English-language stores do not need translations.

JSON format

Each file is divided into sections (typically the filename where the text is used). Under each section, the key is the original <{t}> string, and the value is the translation. The section becomes the "Section" filter in the text list.

{
    "product.html": {
        "Add to cart": "Læg i kurv",
        "Sold out": "Udsolgt"
    },
    "basket.html": {
        "Checkout": "Gå til betaling"
    },
    "404.html": {
        "We could not find what you were looking for": "Vi kunne ikke finde det, du søgte"
    }
}

How Imports Work

• The import runs automatically when the theme is activated on a store.
• The file is selected based on the store's language: a Danish store gets da.json, a German store gets de.json, and so on. Swedish is accepted as both sv.json and se.json.
• All entries are created in the text list, even if the translation is empty—so the store owner can see the entire list from the start.
• Only empty fields are filled in. If the store owner has already edited a text, their version is retained—the import never overwrites it.

Page designer

The Page Designer is a tool for building content using sections based on JSON files. These sections can be placed on different pages in the online store. The pages on which they can be placed are defined in the file /{name}/components/sections.json. The content of each section is defined in its own file, which is located in /{name}/components/sections/{section}.json.

If you have followed the steps above, the "Design " link at the top of the admin panel will automatically take you to the Page Designer:

The structure in the construction of sections is as follows:

/{navn}/components/sections.json

File: sections.json

Contains a list of page types and an array of permitted sections. In addition to page types, you can also use custom tags.

{
    "Sidetype": ["sektionA", "sektionB"]
}

The following types of pages exist:

product

Product pages

category

Categories

landing_page

Dynamic categories

static_page

Pages

blog_post

Blog post

basket

The basket

address

Address page

shipping

Shipping page

approve

Approval page

thanks

Takkesiden, som kunden typisk ser efter ordren er gennemført. Understøtter mersalg efter køb (se nedenfor).

upsell-order

Endpoint til mersalg efter køb. Modtager kundens valg fra takkesiden og opretter en ny ordre med samme oplysninger som den netop gennemførte, og sender kunden direkte til betaling.

search

Search result page

also

The upsell page, which can be used if you show an upsell page after the customer has added products to the cart

order

Order page, which displays the contents of the order via a link

#tags

Optional tags you create yourself

An example of a sections.json file, where the user can add the " slider," " photos," and "quiz" sections to landing pages, but only the "slider" section to product pages, and where an "about" section must be inserted in the #footer, would look like this:

{
    "landing_page": ["slider", "photos", "quiz"],
    "product":      ["slider"],
    "#footer":      ["about"]
}

/{navn}/components/tags.json

File: tags.json

Tags are used for custom locations that you create yourself and can display as you see fit. For example, you might need a #footer that you can display at the bottom of the store, or a #xmas layout that you only use in December. The format for tags.json is:

{
    "tag1": "Beskrivelse ...",
    "tag2": "Beskrivelse ...",
    "tag3": "Beskrivelse ..."
}

The individual tags automatically appear in the admin when the user creates a new configuration.

To extract the content of tags into the theme, use the getBlocks() function as follows:

<{if $blocks = $webshop->getBlocks("#foo")}>
    <{foreach $blocks as $block=>$elements}>
        [...]
    <{/foreach}>
<{/if}>

/{navn}/components/menu_tags.json

File: menu_tags.json

This is not the same as `tags.json`. `tags.json` lists Page Builder regions that the theme retrieves using ` getBlocks("#tag")`. ` menu_tags.json ` lists the tags the theme uses to build a menu with ` getMenu("tag")`. Don’t mix them up: a tag in the wrong file will appear as an option in the wrong part of the admin panel and point to something the theme never renders.

If your theme retrieves a menu based on a specific tag, that tag must be listed in this file. It will then be suggested to the shop owner under Content → Menus, along with a description, and a single click will insert the tag into the field. Without the file, the tag field will be empty, and the shop owner will have no way of guessing what the theme is looking for. The format is:

{
    "footer_menu_1": "Footer-kolonne 1 – vises som første menukolonne i footeren. Menuens navn bliver overskriften over kolonnen. Placeringen er uden betydning.",
    "footer_menu_2": "Footer-kolonne 2 – vises som anden menukolonne i footeren."
}

Write the description for the shop owner, not for a developer: where the menu will appear on the page, what the name is used for, and whether the placement matters. The text will appear exactly as written in the admin panel.

Menus that are retrieved by location rather than by tag (e.g., a top menu via `getMenuByLocation("top")`) do not belong in the file. The store owner already selects these from the "Menu Location" drop-down list.

The file is optional. If it's missing, the admin will simply skip the suggestions.

/{navn}/components/menu_capabilities.json

File: menu_capabilities.json

Here, the theme specifies which menus it can actually display. The admin uses this to hide fields that the theme doesn’t use, suggest the correct CSS classes, and prevent the store owner from creating levels that the theme never renders. All three keys are optional, and the admin won’t interfere with anything you don’t declare.

{
    "levels": 3,
    "locations": ["top"],
    "classes": {
        "megamenu": "Viser undermenuen som en bred mega-menu i kolonner.",
        "show_image": "Sættes på en kolonneoverskrift. Viser kategoriens billede."
    }
}

"Levels" refers to the DEEPEST level your theme can display, anywhere. Not the typical one. If the theme renders three levels in a mega menu and two in a regular dropdown, it should say "3." If it renders three levels on mobile and two on desktop, it should show “3.” The admin panel blocks anything below that number, and setting the number too low prevents the store owner from building something that works.

levels (integers): Level 1 consists of the items in the menu that the theme retrieves itself. The admin disables the indent button at the top level and rejects indentation attempts, both in the admin interface and via the API. Items that are already indented deeper remain as is and are simply highlighted.

locations (list): the locations from which the theme retrieves menus. The admin panel only displays them in the "Menu Location" drop-down list. An empty list means that the theme doesn’t use locations at all, in which case the field is hidden. If a menu already has a location that isn’t on the list, it will still be displayed so the shop owner can remove it.

classes (map): The CSS classes on menu items that serve a FUNCTION in the theme, with an explanation for the store owner. They are suggested in the “class” field. An empty map means the class has no significance in your theme, and the field is hidden. The field is never a fixed list: a store may have a purely cosmetic class, and that must not be lost.

The file is optional, and a theme without it behaves exactly as before. However, it must be kept up to date: if you change how deeply the theme renders, you must update the number; otherwise, the admin will block something that works.

/{navn}/components/sections

Library: sections

In this library, each section is placed in its own JSON file. Each file is named after the section. If the section is named “slider,” its content must be located in /{name}/components/sections/slider.json. The structure of the files is as follows

"preview_svg": "<rect x='0' y='0' width='200' height='80' rx='4' fill='currentColor' opacity='0.08'/><rect x='55' y='30' width='90' height='8' rx='2' fill='currentColor' opacity='0.25'/>"

[...]
"options": {
    "hat": "Hat",
    "glasses": "Briller",
    "beard": "Skæg"
},
[...]

[...]
"type": "repeater",
"fields": [
    {
        "id": "headline",
        "type": "text",
        "title": "Overskrift"
    },
    {
        "id": "img",
        "type": "image",
        "title": "Billedet"
    }
]
[...]

Views

There are various strategies for extracting data. As a starting point, there will be a $page_blocks on the pages that match a configuration. You can loop through it, or the content can be extracted using $webshop->getBlocks('#foo'). Alternatively, the content can be accessed using the section name.

As a general rule, we recommend placing the display of each section in separate files, such as /{name}/templates/sections/{section}.html. This makes it easy to loop through $page_blocks and include the correct display as follows:

<{if $page_blocks}>

    <{foreach $page_blocks as $section}>
        <{$type = $section._type}>

        <{if $webshop->templateExists("sections/$type.html")}>

            <{include file="sections/$type.html"}>

        <{/if}>

    <{/foreach}>

<{/if}>

Note that the row type is in the variable _type

We refer to the section below as " images "—the content is therefore located in /{name}/components/sections/images.json.

{
    "title": "Overskrift og billeder",
    "fields": [
        {
            "id": "headline",
            "type": "text",
            "title": "Overskrift"
        },
        {
            "id": "images",
            "type": "images",
            "title": "Billeder"
        }
    ]
}

It will produce the following interface in admin

To extract the content using the method described above, /{name}/templates/sections/images.html can contain the following:

<h1><{$section.headline|escape}></h1>

<{foreach $section.images as $image}>
    <img src="<{$image->getSrc(150, 150, 'box')}>">
<{/foreach}>

When it comes to data types, it's important to pay attention to what each field contains. They can be either a string, an array, or an object. In other words, you should do something like this:

[...]
<{foreach $section as $name=>$val}>
    <{if is_array($val)}>
        Repeater or array of images
    <{elseif is_object($val)}>
        An image
    <{else}>
        Text, number or such
    <{/if}>
<{/foreach}>
[...]

The video field type allows the customer to upload or select a background video directly in the page designer (e.g. for a hero section). The video is saved raw and unscaled in the shop's public files and the field returns a string with the URL of the video. Supported formats are mp4 and webm. Use an image field in the same section as items that are displayed while the video loads. Recommend the customer a short, compressed loop (preferably under 5 MB).

<{if $section.video}>
    <video class="w-full h-full object-cover" autoplay muted loop playsinline<{if $section.image}> poster="<{$section.image->getSrc(1600, 900, 'fit', 'webp')}>"<{/if}>>
        <source src="<{$section.video|escape}>">
    </video>
<{elseif $section.image}>
    ... show background image ...
<{/if}>

If you use the types `product`, `category`, or ` landing_page `, the selected ID in the theme is returned, and you must retrieve the object yourself using the methods `$webshop->getProductById(id)`, $webshop->getCategory(id), or $webshop->getLandingPage(id). For example:

[...]
<{if $product = $webshop->getProductById($section.product_id)}>
    <{$product->getName()|escape}>
<{/if}>
[...]

Note that you can always use `var_dump` to check the contents of the variable and that way loop through it correctly.

Views

Based on the structure mentioned earlier, the individual views are reviewed below. To understand the individual objects and the methods available, we recommend consulting our Template API.

Download our Alaska theme to see examples of the different views.

Products

The product view can be located in product.html, but this is optional. It is always index.html that handles the individual views. However, we recommend using this structure. To determine whether a product view is being rendered, the system checks whether $product is present.

Add to cart

Products are added to the cart by making a POST request to any page—typically just the page you are already viewing—with the arguments product_id, attributes[{attribut_id}]={attribut_value_id}, and amount. The attribute should only be added if products have variants.

A simple example of how to add products to basket may be:

<form action="" method="post">
    <input type="hidden" name="product_id" value="<{$product->getProductId()}>"/>
    <input type="number" name="amount" value="1" min="1"/>
    <input type="submit" value="Læg i kurv">
</form>

With variants

<form action="" method="post">
    <input type="hidden" name="product_id" value="<{$product->getProductId()}>"/>

    <{foreach $product->getProfile()->getAttributeList() as $attribute}>
        <{if $attribute->getIsVariant() && $attribute->getDataType() == "valuelist"}>
            <select name="attributes[<{$attribute->getAttributeId()}>]">
                <{foreach $attribute->getValues() as $value}>
                    <option value="<{$value->getAttributeValueId()}>">
                        <{$attribute->getName()|escape}>: <{$value->getVal()|escape}>
                    </option>
                <{/foreach}>
            </select>
        <{/if}>
    <{/foreach}>

    <input type="number" name="amount" value="1" min="1"/>
    <input type="submit" value="Læg i kurv">
</form>

The above can of course be made more complicated if you wish to display stock availability, bundled packages, etc.

Shared Values

The store owner can create shared values (e.g., Small, Medium, Large) and link the profile values to them so that the same value applies across all profiles. $webshop->getSharedValues() returns the store’s shared values in the shop owner’s order as an array, where each entry has an id, value, and num_value. A profile value has a getAttributeSharedValueId() method that returns the ID of the shared value or null. The ID can be used with shared_values on /ajax:

<{* Links til /ajax (JSON) med alle produkter i hver delt værdi, uanset profil *}>
<ul>
    <{foreach $webshop->getSharedValues() as $shared_value}>
        <li><a href="/ajax?shared_values=<{$shared_value.id}>"><{$shared_value.value|escape}></a></li>
    <{/foreach}>
</ul>

<{* Er en variantværdi koblet til en delt værdi? *}>
<{foreach $attribute->getValues() as $value}>
    <{if $value->getAttributeSharedValueId()}>
        <a href="/ajax?shared_values=<{$value->getAttributeSharedValueId()}>"><{$value->getVal()|escape}></a>
    <{/if}>
<{/foreach}>

Dynamic categories

Landing pages contain a $landingpage as well as $products, which is an array of products to be displayed on the page.

If a pager is needed it will be included this way

<{if $pager}>
    <{$pager->render()}>
<{/if}>

Categories

Categories contain a $category as well as $products, which is an array of products to be displayed on the page.

If a pager is needed it will be included this way

<{if $pager}>
    <{$pager->render()}>
<{/if}>

Pages

Static pages will contain a $page.

Blog

The blog can be divided into two pages: blog.html and blog_post.html, where the first can retrieve a list of blog posts via:

<{$blog_posts = $webshop->getBlogPosts()}>

Viewing the individual blog posts is through the variable $blog_post

If the list of blogposts is from a category there will be a $category available at the category.

Product reviews

In product_review.html, you have access to $order, which is the user's order. You can only review products you have purchased. Based on the order, you can retrieve the products using $order->getOrderProducts(). To save the product reviews, you must make a POST request to the same page with the following content:

<{if $order}>
    <{if $get.voted}>
        Tak!
    <{else}>
        <form action="" method="post">
            <{foreach $order->getOrderProducts() as $product}>
                <{$product->getName()|escape}>
                Stjerner:
                <input type="number" min="1" max="5" name="rating[<{$product->getProductId()}>]">
                Anmeldelse
                <textarea name="description[<{$product->getProductId()}>]"></textarea>
            <{/foreach}>
            <input type="submit" value="Skriv anmeldelse"/>
        </form>
    <{/if}>
<{/if}>

$get.voted is set to true when the customer has written a review.

To link to the review page from your order use $order->getReviewUrl().

Search

The search works by making a GET request to /search, where the argument ?search= must be your search term. For example:

<form action="/search">
    <input type="text" name="search" value="<{$get.search|escape}>"/>
    <input type="submit" value="Søg"/>
</form>

Searches are performed across products, categories, blog posts, and landing pages. To display the results, you must therefore consider the following four variables: $products, $categories, $blog_posts, $pages, and $landing_pages.

If searching in static pages is to be enabled, it must be activated in the admin.

Wish List

If your customers can log in to your store, you can let them create wish lists. They can create as many wish lists as they want, and each wish list has a name, a description, and a list of products. The wish list itself has a public URL so your customers can share a link.

The wishlist uses the following templates:

To create a wish list, a POST request must be sent from user-wishlists.html with the "name" field and an optional " description" field. For example:

<form action="" method="post">
    Navn
    <input type="text" name="name">

    Beskrivelse
    <textarea name="description"></textarea>

    <input type="submit" value="Opret">
</form>

Please note that you can use the methods $wishlist->getRemoteUrl() and $wishlist->getEditUrl() to create links for viewing and editing wish lists.

In the user-wishlist.html file, where the wish list is edited, the name and description must be sent as name, description, and status, which can be either active or closed. The products themselves, their quantities, and any comments must be sent as an array in the following format:

wishlist_product[{id}][name] = 'navn'
wishlist_product[{id}][comments] = 'kommentar'
wishlist_product[{id}][remove] = '1' // kun hvis produktet skal fjernes

Example code:

<{foreach $wishlist->getWishlistProducts() as $wp}>
    <{* Fordi der er forskel på produkter og ønskelisteprodukter }*>
    <{$product = $wp->getProduct()}>

    <input type="checkbox" name="wishlist_product[<{$wp->getWishlistProductId()}>][remove]" value="1">

    <a href="<{$product->getUrl()|escape}>"><{$product->getName()|escape}></a>

    <{if $variant = $wp->getVariantValue()}>
        <{$wp->getVariantName()|escape}>: <{$variant|escape}>
    <{/if}>

    <input type="number" name="wishlist_product[<{$wp->getWishlistProductId()}>][amount]" value="<{$wp->getAmount()}>">

    <textarea name="wishlist_product[<{$wp->getWishlistProductId()}>][comments]"><{$wp->getComments()|escape}></textarea>

<{/foreach}>

If a variable named "edit" is submitted, the page will return to the same edit page. Otherwise, the user will be redirected to the wish list overview. To delete the wish list, a variable named "remove" must be submitted. For example:

<input type="submit" name="remove" value="Slet" onclick="return confirm('Er du sikker?');">

To add products to a wish list from the store, you can make a POST request from any page using the fields wishlist_id, product_id, and an optional attribute_value_id if the product has variants. Ex.:

<{if $product && $customer}>

    <{if $wishlists = $customer->getWishlists()}>

        <form action="" method="post">
            <input type="hidden" name="product_id" value="<{$product->getProductId()}>"/>

            <label>Vælg ønskeliste:</label>
            <select name="wishlist_id">
                <{foreach $wishlists as $wishlist}>
                    <option value="<{$wishlist->getWishlistId()}>">
                        <{$wishlist->getName()|escape}>
                    </option>
                <{/foreach}>
            </select>

            <{if $variant = $product->getVariant()}>
                <label>Vælg variant:</label>

                <select name="attribute_value_id">
                    <{foreach $variant->getValues() as $value}>
                        <option value="<{$value->getAttributeValueId()}>">
                            <{$variant->getName()|escape}>: <{$value->getVal()|escape}>
                        </option>
                    <{/foreach}>
                </select>
            <{/if}>

            <input type="submit" value="Tilføj til ønskeliste">
        </form>

    <{/if}>

<{/if}>

Return center

The Returns Center allows your customers to create returns on their own. It must be enabled under the store settings. Once a customer has created a return, it must be approved in the admin panel, and a credit memo will be generated.

The return center uses the following templates:

<{if $offer_exchange}>
    <button type="submit" name="exchange" value="1" formnovalidate>Ombyt valgte</button>
<{elseif $order->isExchangeOrder()}>
    <p>Denne ordre er allerede en ombytning, og der kan kun byttes én gang.</p>
<{elseif $order->hasExchange()}>
    <p>Du har allerede oprettet en ombytning på denne ordre.</p>
<{/if}>

There are two ways for a customer to access the returns page. One is by entering the order number and email address associated with their order. The other is by following a direct link. The direct link is retrieved from the order using $order->getReturnUrl(). For example

<{if $webshop->useReturnCenter() && !$order->getIsCreditNote()}>
    <a href="<{$order->getReturnUrl()|escape}>">Retuner varer</a>
<{/if}>

As shown in the example, it’s a good idea to check that the order isn’t a credit memo and to verify whether the online store has enabled the returns center. The example can be used anywhere there is a $order. For example, in the customer’s own order summary or in emails.

If you do not use a login, or if you want customers to be able to search for their order in some other way, you must implement a search feature on return.html using the order number and email address. The fields ` webshop_order_id ` and `email` must be POSTed to /return. If the order is found, the customer is redirected to the return process; if not, $get.not_found will be set, and you can display an error message in the theme. A minimal form might look like this:

<{if $get.not_found}>
    <p>Der blev ikke fundet nogen ordre.</p>
<{/if}>

<h1>Returcenter</h1>

<form method="post" action="">
    <input type="number" name="webshop_order_id" placeholder="Ordrenummer">
    <input type="email" name="email" placeholder="E-mail-adresse">

    <input type="submit" value="Søg">
</form>

Creation of return

In the return.html file, a list of order lines must be displayed, and the customer can select which products to return and, if applicable, why. Unlike standard order views, the returns list must contain one line per order line.

<form action="" method="post">
    <{$line = 0}>

    <!-- Looper ordrelinjerne igennem -->
    <{foreach $order->getOrderProducts() as $product}>

        <!-- getReturned() returnerer antallet der tidligere er returneret -->
        <{$returned = $product->getReturned()}>

        <!-- Løkke for hver antal -->
        <{section name="i" loop=$product->getAmount()}>
            <{$line = $line+1}>

            <!-- Viser ikke flere end det er muligt at returnere -->
            <{if $line - $returned > 0}>

                <{$product->getName()|escape}>

                <{if $attributes = $product->getAttributes()}>
                    <{foreach $attributes as $attribute}>
                        <{$attribute.name}>: <{$attribute.val}>
                    <{/foreach}>
                <{/if}>

                <!-- Check hvilken pris der skal vises -->
                <{if $webshop->getUseCalculatedUnitPrice()}>
                    <{$webshop->getCurrency()}> <{$product->getCalculatedUnitPrice()|number_format:2:",":"."}>
                <{else}>
                    <{$webshop->getCurrency()}> <{$product->getUnitPrice()|number_format:2:",":"."}>
                <{/if}>

                <!-- Checkbox og en grund -->
                <input type="checkbox" name="return[<{$line}>]" value="<{$product->getOrderProductId()}>">Vælg
                <input type="text" name="reason[<{$line}>]" placeholder="Evt. årsag til returnering"/>

            <{/if}>
        <{/section}>

     <{/foreach}>
</form>

In the admin panel, you can specify a fixed shipping method and price. If this has been done, the shipping method is retrieved via $webshop->getReturnShipping($country_id), and if the price is fixed, it is retrieved via $webshop->getReturnShippingPrice($country_id). For example:

<{if $return_shipping = $webshop->getReturnShipping($order->getDelCountryId())}>
    Varer skal returneres via <{$return_shipping->getName()|escape}>.

    <{if $price = $webshop->getReturnShippingPrice($order->getDelCountryId())}>
        Prisen er <{$price|number_format:2:",":"."}>
    <{else}>
        Prisen er <{$return_shipping->getCost()|number_format:2:",":"."}>
    <{/if}>
<{else}>
    <!-- Vis en liste over shoppens almindelige leveringsmetoder her -->
<{/if}>

The selected delivery method, if optional, should be sent as shipping_id.

Display of return

Once the return is created, it appears in order-return.html, which contains a $order_return with the relevant methods.

Digital fortrydelse

The digital cancellation feature is available at /withdrawal and allows the customer to exercise their right of cancellation online (a legal requirement under the Consumer Contracts Act). It is a legal declaration of intent (“I am canceling order #1234”) and is separate from the returns center, which handles the actual return of goods. The feature works for all stores, but only themes that have a withdrawal.html file can display it —if the file is missing, a standard 404 error is returned.

Butikken kan slå funktionen fra i tema-indstillingerne via boolean-feltet checkout.disable_withdrawal. Er den slået fra, skjules alle "Fortryd købet"-links ($order->isWithinWithdrawalPeriod() returnerer false), og hele /withdrawal-ruten giver 404.

Fristen er 14 dage plus 3 dages transporttid fra ordren blev sendt eller afhentet. Giver butikken længere fortrydelsesret, kan fristen forlænges med string-feltet checkout.withdrawal_days (fx 90). Tal under 14 ignoreres. $order->getWithdrawalDays() returnerer den gældende frist i dage (mindst 14), så du kan vise den i teksten på fortryd-siden.

Flow og variabler

Hele to-trins-flowet ligger i én fil, withdrawal.html. Controlleren sætter variablen $step, som du forgrener på:

• lookup — kunden er kommet uden token og skal finde sin ordre (felterne webshop_order_id + email)
• start — ordren vises sammen med en valgfri begrundelse og en "Fortryd købet"-knap (POST withdraw=1)
• confirm — bekræftelsestrin med en "Bekræft fortrydelse"-knap (POST confirm=1)
• receipt — kvittering efter at fortrydelsen er registreret
• expired — ordren er uden for fortrydelsesfristen (eller annulleret/krediteret) og kan ikke fortrydes. Trinnet vises både når kunden åbner et gammelt link, og når et POST-forsøg afvises — så en forældet eller manipuleret token-URL ikke kan registrere en fortrydelse efter fristen

I trinene start, confirm, receipt og expired har du adgang til $order (et SafeOrder). I lookup kan du vise en fejl med $get.not_found. En udfyldt begrundelse ligger i $reason.

<{if $step == "receipt"}>
    <h1>Din fortrydelse er registreret</h1>
    <p>Ordre #<{$order->getWebshopOrderId()}></p>

<{elseif $step == "confirm"}>
    <form method="post">
        <input type="hidden" name="reason" value="<{$reason|escape}>">
        <button type="submit" name="confirm" value="1">Bekræft fortrydelse</button>
    </form>

<{elseif $step == "start"}>
    <form method="post">
        <textarea name="reason"><{$reason|escape}></textarea>
        <button type="submit" name="withdraw" value="1">Fortryd købet</button>
    </form>

<{elseif $step == "expired"}>
    <h1>Fortrydelsesfristen er udløbet</h1>
    <p>Ordre #<{$order->getWebshopOrderId()}></p>

<{else}>
    <!-- lookup: kunden finder sin ordre uden token -->
    <form method="post">
        <input type="text" name="webshop_order_id" required>
        <input type="email" name="email" required>
        <button type="submit">Fortsæt</button>
    </form>
<{/if}>

Link til fortrydelse

Brug $order->getWithdrawalUrl() til at lave et token-link til en konkret ordre (fx i order.html eller på "min konto"). Linket virker uden login. Vil du have et generelt link (fx i footeren), peg blot på /withdrawal — så lander kunden på lookup-trinnet.

<a href="<{$order->getWithdrawalUrl()|escape}>">Fortryd købet</a>

<!-- eller et generelt link, fx i footeren -->
<a href="/withdrawal">Fortryd købet</a>

Digitalt indhold

Har ordren digitalt indhold som kunden allerede har downloadet, kan fortrydelsesretten på de varer være bortfaldet. Du kan vise en oplysende note på confirm-trinnet med $order->hasDownloadedDigitalContent() (returnerer true/false) — den blokerer ikke fortrydelsen, men oplyser kunden.

Kvitterings-mail

Når kunden bekræfter, sendes en kvittering via mail-templaten mails/withdrawal_received.html (varigt medium, lovkrav). Den har adgang til $order (SafeOrder), $reason og $withdrawal_time. Mangler templaten, sendes ingen kvittering — så husk den i temaet ved siden af selve withdrawal.html.

Legal Requirements for This Topic (Consumer Contracts Act, effective June 19, 2026)

Shoporama's default themes meet the requirements below. If you have your own theme that is sold to consumers, you must add them yourself:

• Link on all pages (Section 20a): The feature must be prominently displayed and easily accessible throughout the entire period. Place a link to /withdrawal in the footer, visible without having to expand anything. Hide it when $settings.checkout.disable_withdrawal is set.
• Name, order, and email (Section 20a, paragraph 2): Display $order->getOrderName(), $order->getWebshopOrderId(), and $order->getEmail() ("The receipt will be sent to") on the "Start " and "Confirm" steps. The button on the " confirm " page must be labeled "Confirm Cancellation" or something similarly unambiguous.
• Exempt Items Before Purchase (Section 8, Paragraph 1, Item 12): Display $product->getWithdrawalExemptText() on the product page when $product->isWithdrawalExempt() is true, and list the exempt items at checkout based on $basket[i].product.
• Digital content (Section 18(2)(13)): If an item in the shopping cart has getWithdrawalExemptReason() == 'digital_content', the customer must check a required box to indicate consent and acknowledgment that the right of withdrawal is waived.
• Order Confirmation (Section 13): List $order->getWithdrawalExemptProducts() (array with name, amount, reason, and text) in mails/invoice.html, and display the link $order->getWithdrawalUrl() when $order->isWithinWithdrawalPeriod() is true.
• Notice Prior to Purchase (Section 8(1)(11)): State during checkout—for example, when the customer accepts the terms and conditions—that the customer may cancel the order online via the link in the footer or in the order confirmation.

<!-- produktside -->
<{if $product->isWithdrawalExempt()}>
    <p class="notice"><{$product->getWithdrawalExemptText()|escape}></p>
<{/if}>

<!-- checkout, ved accept af handelsbetingelser -->
<{$has_digital_content = false}>
<{section name="w" loop=$basket}>
    <{if $basket[w].product && $basket[w].product->isWithdrawalExempt()}>
        <p><{$basket[w].product->getName()|escape}>: <{$basket[w].product->getWithdrawalExemptText()|escape}></p>
        <{if $basket[w].product->getWithdrawalExemptReason() == 'digital_content'}><{$has_digital_content = true}><{/if}>
    <{/if}>
<{/section}>
<{if $has_digital_content}>
    <label><input type="checkbox" name="digital_content_consent" value="1" required>
        Jeg giver samtykke til, at leveringen af det digitale indhold begynder med det samme, og jeg anerkender, at jeg dermed mister min fortrydelsesret.</label>
<{/if}>

/also

also.html er vores side til mersalg. Som udgangspunkt er der adgang til $product, og udfra den kan man komme med forslag til kunden. Det kan fx være relevant at bruge $product->getRelatedProducts(), $product->getAlsoBought(), eller $webshop->getPopularProducts().

404

Only used to show 404 pages

410

Only used to show 410 pages

Captcha

Der indsættes automatisk en captcha når man prøver at tilmelde sig nyhedsbrev, eller skrive kommentarer. Dette er for at undgå spam. Det er muligt selv at designe siden i captcha.html, og den skal som minimum indeholde:

<form action="" method="post">
    <{$form}>

    <{if $error}>Fejl i koden<{/if}>

    <img src="<{$imgstr}>">

    Skriv indholdet at ovenstående felt:
    <input type="text" name="c">

    <input type="submit" value="OK">
</form>

Sign Up for the Newsletter

Enhver formular i shoppen der sendes med POST og indeholder email og mailinglist sat til 1, tilmelder kunden til shoppens nyhedsbrev. Det gælder fx kassen (address.html), oprettelse af profil (user-sign-up.html), "giv besked når varen er på lager" og en tilmeldingsformular i sidens bund. Tilmeldingen sendes til den nyhedsbrevstjeneste shoppen har sat op (fx Klaviyo, Mailchimp eller Brevo), eller til Shoporamas eget nyhedsbrev. Der gemmes samtidig et samtykke med tidspunkt og IP-adresse.

Always use a checkbox that the customer checks themselves, so that the registration is based on active consent:

<label>
    <input type="checkbox" name="mailinglist" value="1">
    Tilmeld mig nyhedsbrevet
</label>

Log In

Det er muligt at lade ens kunder logge ind i shoppen. Hvis vedkommende er er logget ind vil der være en $customer der indeholder informationer om brugeren. Alle sider der redigerer, logger ind, m.m. skal submitte via POST til siden selv.

Custom fields for customers

In admin it is possible to define custom fields for users. These fields are edited this way:

<{foreach $webshop->getCustomerFields() as $field}>
    <{if $field->getType() == "list"}>
        <{$field->getName()|escape}>
        <select name="field[<{$field->getCustomerFieldId()}>]">
            <{foreach $field->getValues() as $value}>
                <option <{if $field->getVal() == $value}>selected="selected"<{/if}> value="<{$value|escape}>">
                    <{$value|escape}>
                </option>
            <{/foreach}>
        </select>
    <{elseif $field->getType() == "string"}>
        <{$field->getName()|escape}>
        <input type="text" name="field[<{$field->getCustomerFieldId()}>]" value="<{$field->getVal()|escape}>">
    <{/if}>
<{/foreach}>

Loyalty programme

Loyalitetsprogrammet giver mulighed for at dine kunder kan optjene, og bruge, point når de gennemfører ordrer. Opsætningen styres under Kunder > Loyalitetsprogram.

Du kan bruge nedenstående metoder til at checke om shoppen har aktiveret loyalitetsprogrammet, og om kunden er logget ind, samt har optjent point de kan bruge:

<{if $webshop->hasLoyaltyProgram() && $customer && $customer->getActivePoints()}>
    [Visning af point m.m.]
<{/if}>

For at vise hvor mange point kunden har optjent, samt hvor mange de kan bruge på den aktuelle ordre kan du bruge følgende kodeeksempel:

Du har optjent <{$customer->getActivePoints()|number_format:0:",":"."}> point.

<{if $points = $customer->getPointsAvailable()}>
    Du kan bruge <{$points|number_format:0:",":"."}> point på denne ordre.
<{else}>
    Du har ingen optjente point du kan bruge på denne ordre.
<{/if}>

Det felt du POST'er til kurven, der angiver hvor mange point kunden vil bruge, skal hedde use_points, og kan se ud som følgende:

<input type="number" name="use_points" value="<{$use_points}>" min="0" max="<{$customer->getPointsAvailable()}>"/>

You can use $earns to see how much the customer earns on the order:

Du optjener <{$earns|number_format:0:",":"."}> point på denne ordre.

You can use the example below to describe your loyalty program:

Du optjener <{$webshop->getLoyaltyProgramBasePoints()|number_format:0:",":"."}> point hver
gang du køber for 1 <{$webshop->getCurrency()}>. Når du betaler med point svarer
<{$webshop->getLoyaltyProgramBaseCost()|number_format:0:",":"."}> point til 1 <{$webshop->getCurrency()}>.

Hvis du vil lave en side med pointoversigt kan du bruge user-points.html, hvor du kan loope $my_points igennem, og præsentere indholdet. Kig på SafePoint-klassen for at se hvilke metoder der er tilgængelig.

Tip: You can style your order overview by using the following CSS classes: points_used, points_earned, and has_profile.

Check-out

Check ud flowet er simpelt set en serie af html-sider der hver især indeholder en formular der POST'er noget data til sig selv, og hvis feltet next er sat, vil Shoporama sende videre til næste side i flowet. Typisk vil man sætte "Næste" knappen til name="next". Der kan altid linkes til tidligere sider i flowet. Når kunden har indtastet sine oplysninger ligger disse i to arrays hhv. $session_order og $session_del. Fx $session_order.name.

<{foreach $basket as $line}>
    <{$line.amount}> x <{$line.product->getName()}>

    <{foreach $line.attributes as $a}>
        <{$a.name|escape}>: <{$a.value|escape}>
    <{/foreach}>
<{/foreach}>

[...]
<input name="amount[<{$line.id}>]" value="<{$line.amount}>" />
[...]

[...]
<{if $shipping->getModule()}>
    <select name="shop">
        <{foreach $shipping->getDeliveryShops() as $shop}>
            <option value="<{$shop.number}>">
                <{$shop.name|escape}>
                <{$shop.street|escape}>
                <{$shop.zip|escape}>
                <{$shop.city|escape}>
            </option>
        <{/foreach}>
    </select>
<{/if}>
[...]

Mersalg efter køb (upsell)

Mersalg efter køb viser foreslåede produkter på takkesiden (thanks.html), efter kunden har gennemført sit køb. Kunden kan tilføje et eller flere produkter med ét klik, og der oprettes en ny ordre med samme adresse, fragt, og betalingsmetode som det netop gennemførte køb. Produkterne og indstillingerne styres af butiksejeren i admin under Produkter → Mersalg efter køb.

Funktionen er allerede indbygget i temaerne Montana, Delaware, og DelawareDK. Bruger du et eget tema, kan du selv tilføje den. Backend gør alt arbejdet (udvælgelse af produkter, ordreoprettelse, betaling, lager, jura) — dit tema skal blot vise produkterne og sende kundens valg til endpointet /upsell-order. Nedenfor er kontrakten og et komplet eksempel.

Variabler på takkesiden

Når mersalg er aktivt og ordren er bekræftet, assigner Shoporama disse variabler til thanks.html (de er kun sat, når der er noget at vise):

• $upsell_products — array af SafeProduct. Allerede filtreret server-side (ekskluderer netop købte produkter og samlepakker, respekterer "Kun simple produkter", og fylder op med bedst solgte).
• $upsell_order_id — den netop gennemførte ordres webshop_order_id (sendes med som skjult felt).
• $upsell_chk — sikkerhedstoken (md5 af e-mail), der verificerer ejerskab af ordren.
• $upsell_order_time — ordrens tidspunkt (unix). Brug den til at forankre en nedtælling, så den ikke nulstilles ved reload.
• $upsell_free_shipping — 1 hvis der er gratis fragt på mersalgsordren, ellers 0.
• $settings.checkout_upsell.* — temaindstillingerne (se nedenfor).

Temaindstillinger (theme_settings.json)

Tilføj en checkout_upsell-gruppe til dit temas theme_settings.json, så butiksejeren kan styre overskrift, intro, og nedtælling. Brug kun understøttede felttyper (string, textarea, bool — IKKE number):

{
  "path": "checkout_upsell",
  "name": "Checkout: Mersalg",
  "fields": [
    { "path": "title",            "name": "Overskrift",                       "type": "string" },
    { "path": "intro",            "name": "Intro-tekst",                      "type": "textarea" },
    { "path": "enable_countdown", "name": "Vis nedtælling",                   "type": "bool" },
    { "path": "countdown_minutes","name": "Nedtælling (minutter)",            "type": "string" },
    { "path": "countdown_text",   "name": "Nedtællingstekst ({time})",        "type": "string" }
  ]
}

Endpoint: POST /upsell-order

Hele sektionen er ét <form method="post" action="/upsell-order"> (ingen nestede forms). Felterne:

• order_id + chk — skjulte felter med $upsell_order_id og $upsell_chk (verificerer ejerskab).
• terms — obligatorisk afkrydsning (accept af handelsbetingelser). Påkrævet server-side.
• buy_single — ét product_id (køb af ét produkt). Knappens name/value.
• product_ids[] — flere product_id'er (multi-køb via afkrydsning + en "Køb valgte"-knap med name="buy_selected").
• attributes[product_id][attribute_id] — valgt attribut-værdi-id for variant-produkter (fra en select pr. variant-attribut).

Backend opretter ordren og redirecter selv til betaling. Du skal IKKE selv håndtere adresse, fragt, pris eller betaling.

Eksempel: minimal partial

Et komplet, fungerende udgangspunkt. Inkludér den i thanks.html med <{include file="partials/checkout.upsell.html"}>. Simple produkter får en "Køb og betal"-knap; variant-produkter får en variant-vælger (samlepakker er allerede filtreret fra server-side). Knapteksten skal signalere betalingsforpligtelse (jura).

<{* Vises kun når butiksejeren har aktiveret mersalg i admin — backend sætter $upsell_products derefter *}>
<{if $upsell_products && $upsell_order_id}>
  <section data-upsell-order-time="<{$upsell_order_time}>"
    <{if $settings.checkout_upsell.enable_countdown && $settings.checkout_upsell.countdown_minutes}>data-upsell-countdown="<{$settings.checkout_upsell.countdown_minutes}>"<{/if}>>

    <h2><{if $settings.checkout_upsell.title}><{$settings.checkout_upsell.title|escape}><{else}><{t}>Glemte du noget?<{/t}><{/if}></h2>
    <{if $settings.checkout_upsell.intro || $upsell_free_shipping}>
      <p><{if $settings.checkout_upsell.intro}><{$settings.checkout_upsell.intro|escape}> <{/if}><{if $upsell_free_shipping}><{t}>Fri fragt på det, du tilføjer her.<{/t}><{/if}></p>
    <{/if}>

    <form method="post" action="/upsell-order" data-upsell-form>
      <input type="hidden" name="order_id" value="<{$upsell_order_id}>">
      <input type="hidden" name="chk" value="<{$upsell_chk}>">

      <{foreach from=$upsell_products item=p}>
        <div data-upsell-item>
          <{include file="components/product-card.html" product=$p show_add_to_cart="false"}>

          <{if $p->hasVariants()}>
            <{$prof = $p->getProfile()}>
            <{if $prof}><{foreach from=$prof->getAttributeList() item=attr}>
              <{if $attr->getIsVariant() && $attr->getDataType() == "valuelist"}>
                <select name="attributes[<{$p->getProductId()}>][<{$attr->getAttributeId()}>]" data-upsell-variant>
                  <option value=""><{t}>Vælg<{/t}> <{$attr->getName()|escape}></option>
                  <{foreach from=$attr->getValues() item=val}>
                    <option value="<{$val->getAttributeValueId()}>"><{$val->getVal()|escape}></option>
                  <{/foreach}>
                </select>
              <{/if}>
            <{/foreach}><{/if}>
          <{/if}>

          <button type="submit" name="buy_single" value="<{$p->getProductId()}>" data-upsell-buy><{t}>Køb og betal<{/t}></button>

          <label><input type="checkbox" name="product_ids[]" value="<{$p->getProductId()}>" data-upsell-checkbox> <{t}>Vælg til samlet køb<{/t}></label>
          <label><input type="checkbox" name="terms" value="1" required> <{t}>Accepter handelsbetingelser<{/t}></label>
        </div>
      <{/foreach}>

      <button type="submit" name="buy_selected" value="1" data-upsell-multi><{t}>Køb og betal valgte<{/t}></button>
    </form>
  </section>
<{/if}>

Vigtige noter

• Varianter og samlepakker: Et produkt kan kun ét-klik-bestilles hvis det er simpelt. Tjek $p->hasVariants() og vis en variant-vælger (select pr. variant-attribut) for variant-produkter. Samlepakker er allerede fjernet fra $upsell_products server-side, så du behøver ikke håndtere dem.
• Handelsbetingelser: Terms-feltet er obligatorisk (kortindløser-krav). Knapteksten skal signalere betalingsforpligtelse, fx "Køb og betal" — ikke bare "Tilføj".
• Nedtælling: Forankr den til $upsell_order_time (ordretid + minutter), ikke til "nu", så den ikke nulstilles ved reload. Det er rent visuelt — backend bestemmer reelt om ordren kan oprettes.
• Produktkort: Inkludér components/product-card.html med show_add_to_cart="false", så kortets egen "læg i kurv" ikke renderer en form inde i upsell-formularen.
• JS (valgfrit, anbefales): Aktivér "Køb"-knappen først når variant er valgt og terms er accepteret, og spær knapperne ved indsendelse mod dobbeltklik. Se Montana/Delaware-temaerne for et færdigt eksempel.

B2B

A theme can run in B2B mode: prices are displayed excluding VAT (with an optional VAT toggle), the store may require a login, and customers can be offered quick reordering and company management. Shoporama Core knows nothing about B2B —the theme activates and manages everything itself, so you’re free to build your own B2B theme without hard-coded theme name detection. The built-in MontanaB2B is the reference implementation.

The pricing logic itself (customer groups, fixed group prices, volume discounts, brand access, VIES-validated reverse charge) is managed by the store owner in the admin panel and via the backend. Your theme simply needs to call getRealPrice() as usual—it automatically returns the correct price for the logged-in customer. The rest of this section covers the theme primitives that make a theme B2B-ready.

Enable B2B mode ($b2b)

Set $b2b to true at the top of index.html (the theme's entry template). The variable is available in all templates and controls the display of prices excluding VAT and the B2B UI. A B2C theme does not set it—in that case, it is falsy, and everything behaves as usual.

<{* index.html — dette tema er kodet som B2B *}>
<{$b2b = true}>

Login barrier (soft gate)

If you want to require a login to view the store, display the login template instead of the content when the customer is not logged in—except on the auth pages (login/create/reset/token), so they can access the site. Do this in index.html. Login is handled at /user-sign-in, so have the login form submit to that URL (not to the current page); Shoporama will then redirect the customer back via the referrer.

<{$auth_page = ($inc == 'user-sign-in.html' || $inc == 'user-sign-up.html' || $inc == 'user-reset-password.html' || $inc == 'user-token.html')}>

<{if !$customer && !$auth_page}>
    <{include file="user-sign-in.html"}>
<{elseif $inc}>
    <{include file=$inc}>
<{elseif $product}>
    <{include file="product.html" product=$product}>
    <{* ... øvrige content-grene (kategori, forside, side ...) *}>
<{/if}>

Custom storefront routes (storefront_routes)

If your theme offers additional pages such as quick order or company administration, declare their routes in theme_settings.json using `grandefront_routes`. Shoporama will then make those routes valid for your theme. This covers template routes (e.g., user-order → user-order.html), plain JSON endpoints without a template (e.g., user-order-search), and redirect routes (e.g., user-company-login-as).

{
  "info": "Mit B2B-tema",
  "storefront_routes": [
    "user-order",
    "user-order-search",
    "user-company",
    "user-company-login-as",
    "user-company-switch-back"
  ]
}

Declare only the routes that your theme actually uses. Routes that a theme does not declare are invalid (404)—so two themes cannot conflict over the same route name.

Prices exclude VAT + VAT varies

getRealPrice() ALWAYS returns the price including tax (the order calculations remain unchanged)—the "excluding tax" display is purely cosmetic. Calculate a tax factor and divide the displayed price by it:

<{$b2b_factor = 1}>
<{if $b2b}><{$b2b_factor = 1 + ($product->getProductVat() / 100)}><{/if}>

<{$price = $product->getRealPrice() / $b2b_factor}>  <{* pris ekskl. moms til visning *}>

An optional VAT toggle lets the customer switch between exclusive and inclusive prices without reloading the page. Enable it with a boolean theme setting ($settings.product.enable_vat_toggle) and display both values for each amount in a .vat-num element(format the numbers with number_format as usual). The built-in JavaScript in MontanaB2B’s `partials/assets.html` toggles the display on all `.vat-num` elements, switches between `.vat-suffix-excl` and `.vat-suffix-incl`, and stores the selection in `localStorage ` (`vatMode`, default: excl.):

<{$vt_on = ($b2b && $settings.product.enable_vat_toggle)}>

<span class="vat-num"<{if $vt_on}> data-excl="<{$price}>" data-incl="<{$price*$b2b_factor}>"<{/if}>><{$price}></span>

<{* Suffiks der følger skifteren *}>
<span class="vat-suffix-excl"><{t}>ekskl. moms<{/t}></span>
<span class="vat-suffix-incl" style="display:none"><{t}>inkl. moms<{/t}></span>

<{* Skifte-knapper et centralt sted, fx i headeren *}>
<div data-vat-toggle>
  <button data-vat-mode="excl"><{t}>Ekskl. moms<{/t}></button>
  <button data-vat-mode="incl"><{t}>Inkl. moms<{/t}></button>
</div>

Group Rates

Customer-specific prices (fixed group prices, volume discounts, brand discounts) are automatically applied by getRealPrice() for the logged-in customer—your theme does not need to do anything special. Prices respect the customer group’s brand access: a product from a brand that the group is not allowed to purchase will display the regular price and cannot be added to the cart. Simply display getRealPrice() as you normally would.

Reorder CSV in order email

If your theme has a quick order page (user-order in storefront_routes), Shoporama automatically attaches a reorder CSV (product code;quantity) to the order confirmation email for registered customers. Display a note about this in your mails/order_sent.html file —only when a CSV is actually attached—using the $has_reorder_csv variable. If you want to disable the attachment, set the following in theme_settings.json:

{
  "order_mail_reorder_csv": false
}

Product Filtering

Shoporama can provide faceted filtering on category pages, search pages, and dedicated filter pages. The shop owner builds the filter themselves in the admin panel under Design → Filter, and the theme renders it as a standard GET form. Filtering occurs on the server side, so it works without JavaScript, and the customer’s selections are reflected in the URL.

Enable it in your theme

Set `supports_filters` in `theme_settings.json`. Without it, the "Design → Filter" menu item won't appear at all, and the shop owner won't be able to create a filter. This flag is your promise that the theme will actually render `$facets` where it displays products:

{
  "info": "Mit tema",
  "supports_filters": true
}

Variables

If there is a filter for the page being rendered, Shoporama assigns these variables. If there is no filter, $facets is empty, and your template should behave as before.

Render the facets

The control type is determined by the facet's FORM and not by its type. If multiple options can be selected, they are checkboxes in an array. If there is only one option, only one checkbox is correct, so the customer can uncheck it again. Multiple options without multiple selection are a radio button group:

<{if $facets}>
<form method="get" action="<{$filter_base_url|escape}>">

    <{foreach $filter_hidden_args as $arg_name => $arg_value}>
        <{if $arg_value !== "" && $arg_value !== null}>
            <input type="hidden" name="<{$arg_name|escape}>" value="<{$arg_value|escape}>">
        <{/if}>
    <{/foreach}>

    <{foreach $facets as $facet}>
        <fieldset>
            <legend><{$facet.name|escape}></legend>
            <{$option_count = $facet.options|@count}>
            <{foreach $facet.options as $option}>
                <label>
                    <{if $facet.multi}>
                        <input type="checkbox" name="<{$facet.param|escape}>[]" value="<{$option.value|escape}>"<{if $option.selected}> checked<{/if}>>
                    <{elseif $option_count == 1}>
                        <input type="checkbox" name="<{$facet.param|escape}>" value="<{$option.value|escape}>"<{if $option.selected}> checked<{/if}>>
                    <{else}>
                        <input type="radio" name="<{$facet.param|escape}>" value="<{$option.value|escape}>"<{if $option.selected}> checked<{/if}>>
                    <{/if}>
                    <span><{$option.name|escape}></span>
                    <span><{$option.count}></span>
                </label>
            <{/foreach}>
        </fieldset>
    <{/foreach}>

    <button type="submit"><{t}>Vis resultater<{/t}></button>
</form>
<{/if}>

The selected filters are typically displayed as clickable labels above the results. Each one is simply a link:

<{foreach $active_filters as $chip}>
    <a href="<{$chip.url|escape}>"><{$chip.group|escape}>: <{$chip.name|escape}> ×</a>
<{/foreach}>
<{if $active_filters}><a href="<{$filter_clear_url|escape}>"><{t}>Ryd alle<{/t}></a><{/if}>

The Filter Page

If the shop owner provides the filter with a URL, it gets its own page at /filter/<slug>, and Shoporama includes filter.html from your theme. It looks like a category page without a category: it receives $products, $pager, $count, and the same filter variables, plus $filter_name. If your theme does not have a filter.html file, do not assign an address to filters.

Ajax

Shoporama har to indbyggede ajax-kald. Det ene kan trække produkter ud på forskellige måder (filtrering), og det andet er en generel og simpel søgning der søger i produkter, kategorier, og landingssider.

Filtering

The filtering is located in the file /ajax which is located at the root of all shops.

The response from /ajax is an array in the following format:

[
    {
        "product_id": 139735,
        "own_id": "skunumme",
        "name": "Produktnavn",
        "supplier_id": 0,
        "supplier_name": "",
        "category_ids": [
            3661,
            2113,
            2106,
            1973
        ],
        "category_names": [
            "Bob",
            "Forside",
            "Ged",
            "Giraf"
        ],
        "description": "<p>...</p>",
        "list_description": "",
        "profile_name": "Default m. variant",
        "allow_negative_stock": 1,
        "brand_name": "TESTBRAND",
        "sale_price": 0,
        "real_price": 80,
        "price": 80,
        "price_dk": "80,00",
        "approx_shipping": 0,
        "delivery_time": "",
        "delivery_time_not_in_stock": "",
        "url": "https://example.com/produkt",
        "stock": 0,
        "attr_stock": null,
        "variant_stock": [
            {
                "attribute_id": 2740,
                "attribute_value_id": 16287,
                "name": "S",
                "weight": 10,
                "cnt": 4
            },
            {
                "attribute_id": 2740,
                "attribute_value_id": 16289,
                "name": "L",
                "weight": 30,
                "cnt": 9
            }
        ],
        "stock_string_da": "Nej",
        "avg_rating": null,
        "thumbnail": "https://example.com/cache/1/9/6/9/bob-fit-200x200x90.png",
        "meta_values": [
            null
        ],
        "online_since": 1651685711,
        "has_campaigns": true,
        "campaign_info": [
            {
                "name": "Bob",
                "price_model": "cheapest_free",
                "min_product_count": 4,
                "price": 0,
                "percent": 0,
                "created": "2023-02-01 14:55:47",
                "expires": null
            }
        ]
    }
]

Af hastighedsmæssige årsager cacher vi svaret fra ajax-filen, men i testmiljø kan der tilføjes rebuild=1 som argument for at siden genopbygges. Vi anbefaler at man ikke gør det i produktionsmiljøet, da det kan sløve siden markant.

Search

Siden /ajax_search indeholder en generel søgning til produkter, kategorier, og landingssider. Den kan fx bruges til en autocomplete i ens søgefelt. Den tager følgende argumenter:

Result is an array in this format:

[
    {
        "name": "Produkt et",
        "supplier": "",
        "description": "<p>...</p>",
        "price": 80,
        "sale_price": null,
        "normal_price": 80,
        "currency": "DKK",
        "price_dk": "80,00",
        "url": "https://example.com/produkt-et",
        "stock": 0,
        "stock_string_da": "Nej",
        "review_avg": 0,
        "thumbnail": "https://example.com/cache/1/9/8/4/box-100x100x90.png",
        "type": "product",
        "variants": [],
        "categories": [
            {
                "category_id": 12,
                "parent_id": null,
                "name": "Frokost",
                "url": "https://example.com/frokost"
            }
        ]
    },
    {
        "name": "Produkt to",
        "supplier": "",
        "description": "<p>...</p>",
        "price": 80,
        "sale_price": null,
        "normal_price": 80,
        "currency": "DKK",
        "price_dk": "80,00",
        "url": "https://example.com/produkt-to",
        "stock": 0,
        "stock_string_da": "Nej",
        "review_avg": 0,
        "thumbnail": "https://example.com/cache/1/9/6/9/bob-box-100x100x90.png",
        "type": "product",
        "variants": [],
        "categories": [
            {
                "category_id": 12,
                "parent_id": null,
                "name": "Frokost",
                "url": "https://example.com/frokost"
            },
            {
                "category_id": 17,
                "parent_id": 12,
                "name": "Smørrebrød",
                "url": "https://example.com/smoerrebroed"
            }
        ]
    }
]

Tracking

Der findes to generationer af tracking i Shoporama, og det er vigtigt at kende forskellen som temaudvikler.

Indbygget sporing (temaet skal intet gøre)

Shoporamas indbyggede sporingsmodul (Webshop → Sporing i admin) injiceres server-side uden om temaet. Som temaudvikler skal du ikke tilføje partials, scripts eller dataLayer-kode for at understøtte det. Modulet sender automatisk e-handels-events (view_item, view_item_list, search, add_to_cart, view_cart, begin_checkout-trinene og purchase) til de annonceplatforme shoppen har aktiveret, og produkt-id'et i alle events matcher automatisk shoppens Google Shopping-feed, så katalogmatch hos Meta og Google virker uden temaets medvirken.

Eget dataLayer i temaet (ældre mønster)

Shops med egen Google Tag Manager-opsætning kan pushe events fra temaet via en datalayer-partial (typisk partials/datalayer.html), gated på shoppens gamle tracking-flag ($webshop->getEnableTracking()). Bruger du det mønster, er der to faldgruber:

1. Byg aldrig produkt-id'er i hånden. Brug getTrackingId() på produktet, så id'et altid matcher shoppens feed (numerisk produkt-id, varianter som produktid:variantid, eller SKU for shops med lands-/sprogfeeds):

<{* Produkt uden variant *}>
'item_id': '<{$product->getTrackingId()}>'

<{* Produkt med valgt variant *}>
'item_id': '<{$product->getTrackingId(null, $attribute_value_id)}>'

Ældre datalayer-partials sammensætter variant-id'er i omvendt rækkefølge (variantværdi:produktid) på produktvisninger. Det matcher hverken feedet eller købs-events, og det ødelægger katalogmatch. Skift til getTrackingId() i stedet for at sammensætte id'et selv.

2. Beskyt konverteringskode mod dobbelt-fyring. Kvitteringssiden kan genindlæses, så konverterings-snippets på thanks-siden skal gates på ordrens tracking-flag:

<{if $order && !$order->getTrackingCalled()}>
    <!-- konverterings-scripts/pixels her -->
    <{$order->setTrackingCalled()}>
<{/if}>

Se den fulde guide med GTM-opsætning, triggers og custom events i Implement tracking in a Shoporama theme.