Shop (Shop)
Anwendungsseiten
Übersicht / Produktauflistung (section=Shop)
Allgemein
[[SHOP_CART_INFO]]Warenkorbinhalt (Kurzfassung) - Dieser Platzhalter wird nur angezeigt, wenn auf der gleichen Seite der interaktive Warenkorb nicht im Einsatz ist.
Filter / Such-Funktion
Die Produktauflistung kann nach Hersteller, Rubrik und Keywords gefiltert werden.
Entweder:
Automatische Generierung des Such-Formulars mit dem folgenden Platzhalter:
Oder:
Alternativ besteht die Möglichkeit, das Filter/Such-Formular individuell zu gestalten. Dazu stehen folgende Platzhalter zur Verfügung:
Beispiel:
<form name="shopSearch" action="[[NODE_SHOP]]" method="post">
<select name="manufacturerId">
[[SHOP_MANUFACTURER_MENUOPTIONS]]
</select>
<select name="catId">
[[SHOP_CATEGORIES_MENUOPTIONS]]
</select>
<input type="text" name="term" value="[[SHOP_SEARCH_TERM]]" />
<input type="submit" name="bsubmit" value="[[TXT_SHOP_SEARCH]]" />
</form>Paging
Shop-Betreiber Daten
Rubrikdaten
Produktauflistung / Anzeige
Sortierung von Produktelisten
Mittels eines einfachen Templateblocks kann in der Produkteliste eine Auswahl verschiedener Sortierungen angezeigt werden. Die entsprechenden Blöcke müssen in jeder gewünschten Seitenvorlage eingefügt bzw. angepasst werden (z.B. neben der Standardansicht auch in die "Sonderangebote"):
<!--
This containing template block is never parsed.
It ensures that the sorting order selection is completely hidden when it's not active
-->
<!-- BEGIN shop_product_orders -->
<!--
Standard sorting headers, alternating between ascending and descending.
Includes all available criteria.
The block name is shop_product_order, the placeholder SHOP_PRODUCT_ORDER.
-->
<div class="product_orders">
<!-- BEGIN shop_product_order -->
<div class="product_order">{SHOP_PRODUCT_ORDER}</div>
<!-- END shop_product_order -->
</div>
<!--
Custom sorting headers, fixed or alternating
Column and functionality are determined by the block name:
"shop_product_order_" + field name [ + "_" + optional fixed direction ]
-->
<div class="product_orders">
<!-- BEGIN shop_product_order_name_asc -->
<div class="product_order">{SHOP_PRODUCT_ORDER}</div>
<!-- END shop_product_order_name_asc -->
<!-- BEGIN shop_product_order_name_desc -->
<div class="product_order">{SHOP_PRODUCT_ORDER}</div>
<!-- END shop_product_order_name_desc -->
<!-- BEGIN shop_product_order_bestseller_desc -->
<div class="product_order">{SHOP_PRODUCT_ORDER}</div>
<!-- END shop_product_order_bestseller_desc -->
</div>
<!-- END shop_product_orders -->In der ersten Variante ("standard sorting headers") werden die verfügbaren Sortierungen aufgelistet. Eine bestimmte Sortierung kann deaktiviert werden, indem der Wert des entsprechenden Spracheintrags in allen betroffenen Sprachen auf den leeren String ("") gesetzt wird. Betroffene Spracheinträge:
Spracheintrag Feldname Beschreibung
--------------------------------------------------------------------------------------------------------------
TXT_SHOP_ORDER_PRODUCT_ORD product_ord "Vorgabe" gemäss der im Backend erfassten Ordnungszahl
TXT_SHOP_ORDER_PRODUCT_TITLE name Produkttitel
TXT_SHOP_ORDER_PRODUCT_CODE code Artikelnummer
TXT_SHOP_ORDER_PRODUCT_PRICE price Preis (*)
TXT_SHOP_ORDER_PRODUCT_DATE id Erstelldatum (**)
TXT_SHOP_ORDER_PRODUCT_BESTSELLER bestseller "Beliebtheit" gemäss Anzahl Verkäufe (***)(*) Preis: Pro Produkt und Kunde wird jeweils der korrekte Preis (Endkunde, Wiederverkäufer oder Aktionspreis) für die Sortierung herangezogen. Mengen- und andere Kundenrabatte werden dabei allerdings nicht berücksichtigt -- es kann bei Verwendung von Kundenrabattgruppen zu Abweichungen kommen.
(**) Tatsächlich wird die Sortierung nach Produkt ID vorgenommen. Dadurch ergibt sich im Normalfall die selbe Ordnung wie auf Grund des Erstelldatums, sofern Produkt IDs automatisch und aufsteigend vergeben werden. Bei einem Import von Produktdaten ist es möglich, dass die IDs in einer anderen Reihenfolge vergeben werden.
(***) Pro Bestellung wird jeder Artikel genau ein Mal gezählt, selbst wenn der Kunde mehrere identische Produkte bestellt hat. Damit werden Verzerrungen durch grosse Bestellungen vermieden.
Beispiel: Die Sortierung nach "Vorgabe" (Reihenfolge wie im Backend definiert) soll nicht zur Auswahl stehen. Finden Sie in der Sprachdatei (z.B. modules/shop/lang/de/frontend.php) den passenden Eintrag:
$_ARRAYLANG['TXT_SHOP_ORDER_PRODUCT_ORD'] = "Vorgabe";
Setzen Sie dessen Wert auf "":
$_ARRAYLANG['TXT_SHOP_ORDER_PRODUCT_ORD'] = "";
Die "Vorgabe" wird nun nicht mehr angezeigt.
In der zweiten Variante ("custom sorting headers") können gezielt einzelne Sortiermöglichkeiten vorgegeben werden. Dafür werden der Feldname und optional die Sortierrichtung im Blocknamen hinzugefügt. Die passenden Feldnamen entnehmen Sie bitte der Tabelle der Spracheinträge. Im Beispiel oben werden separate Links für die Sortierung nach dem Produktnamen auf- und absteigend, sowie ein weiterer für die Sortierung nach absteigender "Beliebtheit" generiert:
-
Feld "name" (Produkttitel), Reihenfolge "asc" -> aufsteigend:
<!-- BEGIN shop_product_order_name_asc --> [...] -
Feld "name" (Produkttitel), Reihenfolge "desc" -> absteigend:
<!-- BEGIN shop_product_order_name_desc --> [...] -
Feld "bestseller", Reihenfolge "desc" -> absteigend (meistverkaufte Produkte zuerst):
<!-- BEGIN shop_product_order_bestseller_desc --> [...]
Sonderangebote (section=Shop&cmd=discounts)
Es stehen die gleichen Platzhalter wie bei der Übersicht / Produktauflistung zur Verfügung.
Produkt-Detailansicht (section=Shop&cmd=details)
Es stehen die gleichen Platzhalter wie bei der Übersicht / Produktauflistung zur Verfügung.
Warenkorb (section=Shop&cmd=cart)
Zusammenfassung
[[SHOP_PRODUCT_TOTALPRICE_PLUS_VAT]]Gesamtpreis aller Produkte (nach Abzug Rabatte) inkl. MwSt. (falls Produkte exkl. MwSt. erfasst sind, ansonsten ist der Platzhalter identisch mit[[SHOP_PRODUCT_TOTALPRICE]])
Gutscheincode
MWST
Lieferland
Hinweise
Meta-Navigation
Kontoangaben (section=Shop&cmd=account)
Rechnungsadresse
Lieferadresse
Kontodaten
Oberflächentexte
Es stehen alle Oberflächentext des E-Commerce Shop Anwendung zur Verfügung. Für diesen Bereich nützliche Platzhalter sind nachfolgend aufgeführt:
Geburtsdatum des Rechnungsempfängers (Kunden)
entweder:
oder:
Beispiel als HTML-date-input
<input name="shop_birthday_date_format" type="text" value="Y-m-d" />
<input name="shop_birthday_date" type="date" value="<!-- BEGIN shop_account_birthday -->[[SHOP_ACCOUNT_BIRTHDAY_TIMESTAMP]] 2025-04-15<!-- END shop_account_birthday -->" />Bezahlung und Versand (section=Shop&cmd=payment)
Zusammenfassung
Zahlungsart
Versandart
Rabatte
MwSt.
Zusatzinformationen
Allgemeine Geschäftsbedingungen
Hinweis: Wenn der Platzhalter [[SHOP_AGB]] in der Anwendungsvorlage enthalten ist,
kann dieser Bestellschritt nur fortgesetzt werden, wenn das entsprechende
Kontrollkästchen ausgewählt wurde.
Widerrufsbelehrung
Hinweis: Wenn der Platzhalter [[SHOP_CANCELLATION_TERMS_CHECKED]] in der
Anwendungsvorlage enthalten ist, kann dieser Bestellschritt nur fortgesetzt
werden, wenn das entsprechende Kontrollkästchen ausgewählt wurde.
Bestellen (section=Shop&cmd=confirm)
Produktdaten
Zusammenfassung
Rechnungsadresse
Lieferadresse
Kontodaten
Zahlungsart
Versandart
Bemerkungen zur Bestellung
Rabatte
MwSt.
Google Analytics
Die folgenden Platzhalter können verwendet werden, um strukturierte Daten in die Inhaltsseite einzusetzen.
Mustercode; JavaScript in <script>...</script> Tags einfügen
window.dataLayer = window.dataLayer || [];
const orderGa = {
event: 'orderCompleted',
transactionId: '[[SHOP_GA_ID]]',
transactionTotal: [[SHOP_GA_TOTAL]],
transactionTax: [[SHOP_GA_TAX]],
transactionShipping: [[SHOP_GA_SHIPPING]],
transactionProducts: []
}; // <!-- BEGIN shopGaItem -->
orderGa.transactionProducts.push({
sku: '[[SHOP_GA_SKU]]',
name: '[[SHOP_GA_NAME]]',
price: [[SHOP_GA_PRICE]],
quantity: [[SHOP_GA_QUANTITY]]
}); // <!-- END shopGaItem -->
dataLayer.push(orderGa);Layout / Inhaltsseiten
Produktedaten auf beliebigen Seiten
Innerhalb eines Templateblocks können Daten ausgewählter Produkte auf beliebigen Seiten angezeigt werden.
Alle in der regulären Ansicht der Produkteliste verfügbaren Templateblöcke und Platzhalter sind verwendbar.
Anzeige von Produkten gemäss Einstellung "Produkte auf der Startseite anzeigen"
Anzeige von Produkten einer Rubrik
Shop Navigation (shopnavbar.html)
Die Shop Navigation kann über den Platzhalter [[SHOPNAVBAR_FILE]] (oder [[SHOPNAVBAR2_FILE]] / [[SHOPNAVBAR3_FILE]]) eingebunden werden.
Für die Shop Navigation (shopnavbar.html / shopnavbar2.html / shopnavbar3.html) stehen die folgenden Platzhalter und Blöcke zur Verfügung:
Allgemein
[[SHOP_CART_INFO]]Warenkorbinhalt (Kurzfassung) - Dieser Platzhalter wird nur angezeigt, wenn auf der gleichen Seite der interaktive Warenkorb nicht im Einsatz ist.
Rubrik Navigation
Breadcrumb
Beispiel:
<!-- BEGIN shop_breadcrumb -->
<ul>
<!-- BEGIN shop_breadcrumb_part -->
<li>
<a href="[[SHOP_BREADCRUMB_PART_SRC]]">[[SHOP_BREADCRUMB_PART_TITLE]]</a>
</li>
<!-- END shop_breadcrumb_part -->
</ul>
<!-- END shop_breadcrumb -->Währungen
Interaktiver Warenkorb
Der interaktive Warenkorb (auch JavaScript-Warenkorb genannt) kann über
das Widget <!-- BEGIN/END shopJsCart --> im Theme eingebunden werden.
Das Widget <!-- BEGIN/END shopJsCart --> kann in den folgenden Theme-Dateien
verwendet werden:
index.htmlhome.html(inkl. individuelle Inhaltsvorlagen der Formhome_custom_<custom>.html)content.html(inkl. individuelle Inhaltsvorlagen der Formcontent_custom_<custom>.html)navbar.html(inkl.navbar2.htmlundnavbar3.html)subnavbar.html(inkl.subnavbar2.htmlundsubnavbar3.html)shopnavbar.html(inkl.shopnavbar2.htmlundshopnavbar3.html)
Das Widget <!-- BEGIN/END shopJsCart --> kann momentan nur einmal verwendet werden.
Die Mehrfachplatzierung im gleichen Theme wird nicht unterstützt (siehe
Alternative: Zusätzliche Darstellungen). Soll das Widget jedoch in mehreren
Inhaltsvorlagen (z.B. home.html und content.html) platziert werden, so ist
dies möglich, wobei dazu zwingend der funktionale Platzhalter [[SHOP_FORCE_JS_CART]]
in jeder Template-Datei (z.B. home.html) platziert werden muss, in der das Widget
<!-- BEGIN/END shopJsCart --> eingebunden wird. Das Layout des Widgets
<!-- BEGIN/END shopJsCart --> muss dabei immer identisch sein.
Benötigte Konfiguration:
- Damit der interaktive Warenkorb funktioniert, muss im Backend unter E-Commerce > Stammdaten > Allgemein > Erweiterte Einstellungen die Option Dynamischen JavaScript Warenkorb verwenden aktiviert sein.
- Soll der interaktive Warenkorb nicht nur auf den Anwendungsseiten des Shops funktionieren, sondern auf jeder Seite, dann muss im Backend unter E-Commerce > Stammdaten > Allgemein > Erweiterte Einstellungen die Option Shop Navigation auf jeder Seite anzeigen aktiviert werden.
Struktur
Code Beispiel
Wichtig: Das äußerste Blockelement, welches den Warenkorb definiert, muss ein
Attribut id mit dem Wert shopJsCart haben.
<!-- BEGIN shopJsCart -->
<ul id="shopJsCart">
<!-- BEGIN shopJsCartProducts -->
<li>[[TXT_SHOP_CART_JS_FORMAT_PRODUCT]]</li>
<!-- END shopJsCartProducts -->
<!-- BEGIN shopJsCartTotal -->
<li class="total">[[TXT_SHOP_CART_JS_FORMAT_TOTAL]]</li>
<!-- END shopJsCartTotal -->
<li class="link cart"><a href="[[NODE_SHOP_CART]]" title="[[TXT_SHOP_MAKE_ORDER]]">[[TXT_SHOP_SHOW_CART]]</a></li>
<li class="link destroy"><a href="[[NODE_SHOP]]?act=destroy" title="[[TXT_SHOP_NEW_ORDER]]">[[TXT_SHOP_EMPTY_CART]]</a></li>
</ul>
<!-- END shopJsCart -->Zusätzliche Darstellungen
Soll nebst dem interaktiven Warenkorb zusätzliche Anzeigen im Theme integriert werden (z.B. Anzeige eines Warenkorb-Icons mit der Anzahl darin befindlicher Artikel), so kann dies mittels JavaScript realisiert werden.
Achtung: Für diesen Abschnitt werden Kenntnisse in JavaScript vorausgesetzt.
Zur Realisation zusätzlicher Anzeigen des Warenkorbs kann die JavaScript-Funktion
shopUpdateCart() überladen werden. Dazu kann folgender Code z.B. in der index.html
(nach dem Platzhalter [[JAVASCRIPT]]) eingefügt werden:
<script>
const originalShopUpdateCart = shopUpdateCart;
shopUpdateCart = function(data, textStatus, jqXHR) {
// insert custom code here to render additional carts
return originalShopUpdateCart(data, textStatus, jqXHR);
}
</script>Die Funktion shopUpdateCart() wird vom Shop immer aufgerufen, wenn sich der Inhalt
des Warenkorbs ändert oder dieser geladen wird. Das Argument data ist ein JSON-Objekt
mit folgender Struktur:
{
"item_count": <item_count>,
"items": <items>,
"total_price": "<total_price>",
"total_price_cart": "<total_price_cart>",
"total_price_cart_without_vat": "<total_price_cart_without_vat>",
"total_price_without_vat": "<total_price_without_vat>",
"unit": "<unit>",
"vat_amount": <vat_amount>,
"var_included": <vat_included>,
"vat_enabled": <vat_enabled>,
"total_discount_amount": <total_discount_amount>
}| Platzhalter | Beschreibung |
|---|---|
<item_count> |
Gesamtzahl aller Artikel im Warenkorb |
<items> |
Artikeldaten; Array von <item> Objekten. |
<total_price_cart> |
Gesamtpreis aller Artikel im Warenkorb (vor Abzug Rabatte); Format: 0.00 |
<total_price_cart_without_vat> |
Gesamtpreis aller Artikel im Warenkorb (vor Abzug Rabatte) ohne MwSt.; Format: 0.00 |
<total_price> |
Gesamtpreis aller Artikel im Warenkorb (nach Abzug Rabatte); Format: 0.00 |
<total_price_without_vat> |
Gesamtpreis aller Artikel im Warenkorb (nach Abzug Rabatte) ohne MwSt.; Format: 0.00 |
<unit> |
Währungscode (z.B. CHF) |
<vat_amount> |
Gleiche Ausgabe wie [[SHOP_TOTAL_TAX_AMOUNT]], aber als reine Zahl. |
<vat_included> |
Ob die Preise inkl. oder exkl. MwSt. gerechnet sind als Boolean-Wert (true/false). |
<vat_enabled> |
Ob die MwSt.-Berechnung aktiv ist als Boolean-Wert (true/false). |
<total_discount_amount> |
Gleiche Ausgabe wie [[SHOP_DISCOUNT_COUPON_TOTAL_AMOUNT]], aber als reine Zahl. |
Item-Struktur
Ein Artikel im Warenkorb weisst die folgende Struktur auf:
{
"id": <id>,
"product_id": "<product_id>",
"cart_id": <cart_id>,
"title": "<title>",
"options": <options>,
"options_count": <options_count>,
"options_long": "<options_long>",
"options_cart": "<options_cart>",
"price": "<price>",
"sale_price": "<sale_price>",
"quantity": <quantity>,
"itemprice": "<itemprice>",
"vat_rate": "<vat_rate>",
"itemweight": <itemweight>,
"weight": <weight>,
"group_id": <group_id>,
"article_id": <article_id>,
"product_images": "<product_images>",
"minimum_order_quantity": <minimum_order_quantity>,
"discount_amount": <discount_amount>,
"vat_amount": "<vat_amount>"
}| Platzhalter | Beschreibung |
|---|---|
<id> |
Produkt ID |
<product_id> |
Produkt Code |
<cart_id> |
Index im Warenkorb |
<title> |
Bezeichnung des Artikels, Produktename |
<options> |
Ausgewählte Produktoptionen; Objekt mit folgender Struktur:{"<option_id>": ["<option_value_id|user_input>", ...], ...} |
<options_count> |
Anzahl ausgewählter Produktoptionen |
<options_long> |
Liste der ausgewählten Produkteoptionen inkl. Kosten |
<options_cart> |
Zusammenfassung der ausgewählten Produkteoptionen |
<price> |
Preissumme, Einzelpreis inkl. Produktoptionen x Menge |
<sale_price> |
Preissumme, Einzelpreis inkl. Produktoptionen x Menge |
<quantity> |
Menge pro Artikel im Warenkorb |
<itemprice> |
Einzelpreis pro Artikel, inkl. Produktoptionen |
<vat_rate> |
MwSt. Satz in % |
<itemweight> |
Gewicht des Einzelartikels, in Gramm |
<weight> |
Gewicht des Artikels x Menge, in Gramm |
<group_id> |
ID der dem Artikel zugeordneten Mengenrabattgruppe |
<article_id> |
ID der dem Artikel zugeordneten Artikelgruppe [Hinweis: das ist NICHT die Rubrik!] |
<product_images> |
Base64-Codierte Liste der Bilder |
<minimum_order_quantity> |
Mindestbestellmenge des Artikels |
<discount_amount> |
Total rabattierter Betrag gemäss Gutscheincode auf diesem Artikel |
<vat_amount> |
MwSt. Betrag |
E-Mail Vorlagen
Informationen zu den E-Mail Vorlagen, wann diese ausgelöst werden und welche der nachfolgenden Platzhalter in welchen Vorlagen verfügbar sind, ist aus dem Artikel E-Commerce Shop zu entnehmen.
Kontaktdaten
Hinweis: Die Kontaktdaten des Shop-Betreibers können unter E-Commerce > Shop > Einstellungen > Allgemein > Allgemeine Einstellungen definiert werden.
Kundendaten
Kontoinformationen
Bestelldaten
Versandart
Lieferadresse
Bezahlart
Mehrwertsteuer
Gutschein
Artikeldaten