B2B - Beispielmodifikationen

Einleitung

In diesem Artikel erhältst du die Informationen über ein zusätzliches Widget z. B. Ceneo Trusted Reviews, Facebook Messenger oder andere. Du kannst selbst es im Template-Code implementiert werden. Es sind nur ein paar einfache Schritte, mit denen du deinen Kunden ein zusätzliches Widget auf jeder Seite im Webshop anzeigen kannst. Alle Plugins verfügen über ein individuelles Skript, das an der entsprechenden Stelle im Template-Code eingefügt werden muss.

Konfiguration in der Topas-Vorlage

Schriit 1. Im Administrationspanel des Webshops klickst du auf Webshop Layout ➞ Einstellungen ➞ drei Punkten in der rechten Ecke ➞ Erweiterte Einstellungen bearbeiten  Schritt 2. Jetzt klicke auf die oben rechte Schaltfläche drei Punkte erneut und wähle HTML bearbeiten.  Schritt 3. Suche die Datei base_layout.html und bearbeite sie. Kopiere das Skript des Widgets und füge es in den entsprechenden Abschnitt am Ende der Datei ein. Unterhalb des eingefügten Skripts sollten nur Zeilen verbleiben, die das Ende des html-Tags, das Ende des body-Tags und das Ende ( {%endif -%} ) einer Bedingung enthalten. Über dem eingefügten Code sollte sich die {%endif -%} -Bedingung {% if config.External.SalesManago -%}. Schritt 4. Speichere und Veröffentliche alle Änderungen mi der oben rechte Diskette.

Tipp

Die obige Anleitung gilt für die Topaz-Vorlage. Beachte auch, dass verschiedene Arten von Plugins eine separate Implementierung in verschiedenen Template-Dateien erfordern können. Lies immer die Dokumentation und die Anforderungen des Plug-in-Anbieters. Wenn die obige Anleitung nicht ausreicht, um ein zusätzliches Plugin in der Vorlage anzuzeigen, wendest du dich bitte an deinen Comarch-Partner, um weitere Unterstützung zu erhalten.

Weitere Informationen erhältst du hier.

Einleitung

Trusted Shops ist ein Gütezeichen mit Käuferschutz für Online-Shops. Um mit der Integration in den Comarch Webshop zu beginnen, musst du sich zunächst bei Trusted Shops registrieren. Nach Abschluss des Registrierungsprozesses und Erhalt des Zertifikats erhältst dessen Identifikation, die benötigt wird, um es mit deinem Webshop zu verbinden.

Eingabe einer Trusted Shops ID

Um ein Trusted Shops ID einzugeben, gehe zu Einstellungen ➞ Webshop-Einstellungen ➞ Trusted Shops. Dann gebe deineID ein und klicke auf die Schaltfläche ANSCHLIESSEN. Dann folge bitte den Anweisungen unten für die richtige Vorlage.

Trusted Shops Logo im Webshop

Konfigurationsparameter

Agat

Etappe I - Haupt-Skript

Schritt 1. Im Admin-Panel gehe zu Webshop-Layout ➞ Einstellungen ➞ Mehr ➞ Erweiterte Einstellungen bearbeiten ➞ Mehr ➞ HTML bearbeiten Schritt 2. Klicke dann auf die Datei _layout.html und finde eine Phrase </head> Schritt 3. Füge über dem gefundenen Feld das folgende Skript ein, in dem der Wert XXXXXXXXXXXXX durch eine Trusted Shops-ID ersetzt werden soll:

Etappe II - Eingabe des zusätzlichen Skripts in der Vorlage

 

Opal und Bernstein

Etappe I - Haupt-Skript

Schritt 1. Im Admin-Panel gehe zu Webshop-Layout ➞ Einstellungen ➞ Mehr ➞ Erweiterte Einstellungen bearbeiten ➞ Mehr ➞ HTML bearbeiten Schritt 2. Klicke dann auf die Datei _layout.html und finde eine Phrase </head> Schritt 3. Füge über dem gefundenen Feld das folgende Skript ein, in dem der Wert XXXXXXXXXXXXX durch eine Trusted Shops-ID ersetzt werden soll:

Etappe II - Eingabe des zusätzlichen Skripts in der Vorlage

Schritt 2. Dann speichern und veröffentliche die Vorlage (Speichern und  Veröffentlichen).

Tipp

Die Anweisung über das Hinzufügen des Trusted Shops Logo in der Topas und One Page Shop-Vorlage befindet sich im Artikel Trusted Shops.

Platzierung von iLeasing- und iRaty-Knöpfen auf Produktdetails

In diesem Artikel erfährst du, wie du einfach iLeasing- und iRaty-Buttons zu Produktdetails im Webshop hinzufügen kannst.

Tipp

Dieses Handbuch gilt für unveränderte Standardvorlagen in Version 2019.3 oder höher.

Tipp

In den Beispielen wird die Grafik 09.png verwendet. Wenn du eine andere bevorzugst, reicht es aus, die Zahl 9 in den folgenden Beispielen durch eine Zahl aus dem Bereich 1-8 zu ersetzen. Im Ratenzahlungspartnerpanel (hier kannst du dich anmelden), Im Abschnitt „Integrationen“ kann man alle Optionen sehen und diejenige auswählen, die am besten zu dir passt.

1. Agat

In der Datei partials/product/product-popup.html suchsy du nach einem Satz Pro_addToCart. Dies ist die Bezeichnung für die Schaltfläche „In den Einkaufswagen“ im Agat-Design. Die Zeile darunter ist die Schließung der Schaltfläche, d.h. (/span). Füge ein Code-Snippet mit Schaltflächen unter diesem Verschluss ein (die erste Schaltfläche ist iRaty, die zweite ist iLeasing): Light- oder Standard-Webshop:

{% if customer.Authenticated and customer.Company -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign totalPrice = _pd.Price | Times: tempVat -%} {% assign subtotalPrice = _pd.Price -%} {% else -%} {% assign totalPrice = _pd.Price -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign subtotalPrice = _pd.Price | DividedBy: tempVat -%} {% endif -%}

Tipp

Ersetze XXXX durch deine Partner-ID.

Tipp

Der Code enthält beide Schaltflächen (iLeasing und iRaty). Wenn du nur einen davon benötigst, kopiere nur den Teil, der du interessierst. Vergesse nicht die Bedingung am Anfang des Codes.

2. Bernstein oder Opal

In der Datei productdetails.html suchst du nach einem Satz Com_AskForPrice. Dies ist die Beschriftung für den Preisanfrage-Button. Die folgende Zeile ist der Abschluss der Schaltfläche: (/div). Füge ein Code-Snippet mit Schaltflächen unter diesem Verschluss ein (die erste Schaltfläche ist iRaty, die zweite ist iLeasing): Light- oder Standard-Webshop:

{% if customer.Authenticated and customer.Company -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign totalPrice = _pd.Price | Times: tempVat -%} {% assign subtotalPrice = _pd.Price -%} {% else -%} {% assign totalPrice = _pd.Price -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign subtotalPrice = _pd.Price | DividedBy: tempVat -%} {% endif -%}

Tipp

Ersetze XXXX durch Ihre Partner-ID.

Tipp

Der Code enthält beide Schaltflächen (iLeasing und iRaty). Wenn du nur einen davon benötigst, kopiere nur den Teil, der du interessierst. Vergesse nicht die Bedingung am Anfang des Codes.

3. Topaz

Tipp

Um zu überprüfen, welche Version des Erscheinungsbildes des Artikels mit den Details der Waren du hast, gehe zum Verzeichnis der Elemente und dann zum Produkt. Der Name der Datei im Katalog entspricht der Version. Bitte befolge je nach Version die nachstehenden Anweisungen.

product-details-1-Version

In der Datei elements/product/product-details-1.html suchst du nach einem Satz {% include 'partials/common/after-adding-to-cart-popup.html’ %}. Füge ein Code-Snippet mit Schaltflächen unter diesem Verschluss ein (die erste Schaltfläche ist iRaty, die zweite ist iLeasing):

{% if customer.Authenticated and customer.Company -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign totalPrice = _pd.Price | Times: tempVat -%} {% assign subtotalPrice = _pd.Price -%} {% else -%} {% assign totalPrice = _pd.Price -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign subtotalPrice = _pd.Price | DividedBy: tempVat -%} {% endif -%}

Tipp

Ersetze XXXX durch Ihre Partner-ID.

Tipp

Der Code enthält beide Schaltflächen (iLeasing und iRaty). Wenn du nur einen davon benötigst, kopiere nur den Teil, der du interessierst. Vergesse nicht die Bedingung am Anfang des Codes.

product-details-2-Version

In der Datei elements/product/product-details-2.html suchst du nach einem Satz {% include 'partials/common/after-adding-to-cart-popup.html’ %}. Füge ein Code-Snippet mit Schaltflächen unter diesem Verschluss ein (die erste Schaltfläche ist iRaty, die zweite ist iLeasing): Light- oder Standard-Webshop:

{% if customer.Authenticated and customer.Company -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign totalPrice = _pd.Price | Times: tempVat -%} {% assign subtotalPrice = _pd.Price -%} {% else -%} {% assign totalPrice = _pd.Price -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign subtotalPrice = _pd.Price | DividedBy: tempVat -%} {% endif -%}

Tipp

Ersetze XXXX durch Ihre Partner-ID.

Tipp

Der Code enthält beide Schaltflächen (iLeasing und iRaty). Wenn du nur einen davon benötigst, kopiere nur den Teil, der du interessierst. Vergesse nicht die Bedingung am Anfang des Codes.

Einleitung

Comarch Webshop ist dank einer einfachen Konfiguration, die das Hinzufügen des Tracking Skripts im Admin-Panel beinhaltet, mit Google Analytics 4 integriert. Dank der im Webshop implementierten Layer-Daten und der in den kostenlosen Comarch-Vorlagen standardmäßig unterstützten Skripte erhältst du Zugang zu vielen Google Analytics-Funktionen, wie z. B. der grundlegenden Verfolgung deines Webshop-Verkehrs und der Verfolgung von E-Commerce-Transaktionen. In dieser Anleitung wird beschrieben, wie du das neue Google Analytics 4 direkt im Comarch Webshop konfigurieren kannst.

1.Konfiguration von Google Analytics 4 im Admin-Panel

Schritt 1. Im Admin-Panel des Comarch Webshops gehst du unter Einstellungen ➞  Webshop Einstellungen ➞ Allgemein ➞ Verfolgung des Datenverkehrs und wählst dann Kontokonfiguration Google Analytics 4. Schritt 2. Jetzt aktivierst du die Funktion Google Analytics 4, indem du auf die Schaltfläche Ein klickst. Füge die Google-Tag-ID (Format:G-XXXXXXXXXX) und den Konfigurationscode von Google Analytics 4 (Skripts) ein.

Tipp

Wo du das Konfigurations-Tag von Google findest, kannst du hier nachlesen.

Schritt 3. Speichere die Änderungen. Fertig! Dein Webshop wurde bereits mit deinem Google Analytics 4-Konto verknüpft.

Tipp

Die zweite (erweiterte) Methode, um deinen Webshop mit Google Analytics 4 zu verbinden, besteht darin, ein Google Tag Manager-Konto zu konfigurieren und darin die entsprechenden Tags zu verwenden. Kontaktiere deine Marketing-Agentur und wähle den für dich besten Weg zur Integration von Google Analytics 4.

2.Ereignisse zur Verfolgung der E-Commerce-Transaktionen

Wir haben die wichtigsten Ereignisse zur Verfolgung von E-Commerce-Transaktionen in Google Analytics 4 in Übereinstimmung mit den Richtlinien bedient:

Tipp

Um alle Ereignisse korrekt zu verwalten, musst du die aktuelle Version der Vorlage haben. Mehr Informationen erhältst du im Artikel: Wie kann ich eine Vorlage auf die neuste Version aktualisieren?

Nützliche Links

Einleitung

Trusted Shops ist ein Gütesiegel mit Käuferschutz für Onlineshops. Bei der Zertifizierung wird der Shop einem Audit unterzogen, das über 70 Kriterien abdeckt und sowohl die Anforderungen des Verbraucherschutzes als auch nationales und europäisches Recht berücksichtigt. Das Trusted Shops Gütesiegel bietet zuverlässigen Käuferschutz, damit du sicher bestellen und bezahlen kannst. Bei Nichtlieferung oder Rücksendung der Artikel ist der Nutzer vor Geldverlust geschützt – unabhängig von der Zahlungsart.

Tipp

Für Besitzer des Comarch Webshops haben wir zusammen mit Trusted Shops ein spezielles Angebot vorbereitet. Weitere Informationen dazu findest du auf der Seite Benefits-Paket.

Integration des Trusted Shops mit Comarch Webshop

Der Comarch Webshop ermöglicht die Integration mit dem Trusted Shops Zertifizierungssystem. Nach Registrierung bei Trusted Shops und erfolgreich bestandenem Audit erhält der Webshop ein Zertifikat mit Kennung. Der Beitritt zu Trusted Shops ist über das Admin-Panel im Tab Einstellungen ➞ Webshop Einstellungen ➞ Trusted Shops möglich. Gib die erhaltene ID in das Feld Trusted Shops ID an und bestätige die Aktion mit der Schaltfläche ANSCHLIESSEN.

Tipp

Das Trusted Shops Zertifikat wird an Online-Shops innerhalb von ein Einsatzland. Wenn dualso planst, auf anderen europäischen Märkten zu verkaufen, musst du ein weiteres Zertifikat erwerben. 

Käuferschutz im Classic-Modell

Der Trusted Shops Käuferschutz besteht darin, dass Kunden eine Geld-zurück-Garantie für den Fall der Nichtlieferung oder der Nichtrückerstattung nach Rücktritt vom Vertrag erhalten. Im Comarch Webshop wurde der Trusted Shops Käuferschutz im Classic-Modell bedient. Das Classic-Modell bietet dem Kunden die Möglichkeit, eine Bestellung bis zu einem Betrag von 2 500 EUR kostenlos zu sichern. Die obige Option wird direkt nach der Bestellung im Shop angeboten. Um den Käuferschutz im Webshop zu aktivieren, musst du das Trusted Shops Logo mit dem Trustbadge-Element auf der Bestellseite hinzufügen.

Wie füge ich des Trusted Shops Logo im Admin-panel hinzu?

Topas-Vorlage

Wenn du ein Topaz-Voflage in deinem Webshop verwendest, kannst du ein Trusted Shops Widget hinzufügen, das in deinem Webshop angezeigt wird. Das Logo wird auf der Startseite, der Artikelliste, den Artikeldetails und im Warenkorb deines Webshops sichtbar sein, wenn du die Vorlage-Einstellungen konfigurieren. Gehe in das Admin-Panel zu Webshop Layout ➞ Einstellungen ➞ Vorlageneinstellungen ➞ Additional und fülle die erforderlichen Angaben im Bereich „Show logo Trusted Shops“ aus:

One Page Shop-Vorlage

Wenn du das One Page Shop-Vorlage verwendest, hast du die Möglichkeit, ein Trusted Shops Widget hinzuzufügen, indem du die Webshop-Einstellungen konfigurieren. Das Logo kann auf der Startseite, der Artikelliste, den Artikeldetails und im Warenkorb deines Webshops sichtbar sein. Gehe in das Admin-Panel zu Webshop Layout ➞ Einstellungen ➞ Vorlageneinstellungen ➞ Additional und fülle die erforderlichen Angaben im Bereich „Show logo Trusted Shops“ aus: Alle Änderungen sollen gespeichert und veröffentlicht werden.

Tipp

Die Anweisung über das Hinzufügen des Trusted Shops Logo in der Opal, Achat, Bernstein-Vorlage befindet sich im Artikel Trusted Shops - Wie fügt man dem Shop ein Logo hinzu? 

Lese auch über Trusted Shops auf trustedshops.eu

Umgang mit Archivwaren

In diesem Artikel erfährst du, wie du mit einem archivierten Element auf der Seite „Elementdetails“ deiner Vorlage umgehst.

Agat

In der Datei product-page.html suchst du nach einem Wort button-container. Es ist die Containerklasse, die die wichtigsten Daten zur Ware enthält. Füge den folgenden Code unter diesem Container ein: {% if product.Archival -%} {% endif -%} In derselben Datei bleiben (product-page.html) suchst du nach einem Wort config.Reviews.Enabled. Dies ist Teil der Bedingung für das Hinzufügen von Produktbewertungen. Ändere es so, dass es so aussieht: {% if product.Archival -%} {% if config.Reviews.Enabled == true and productD.Archival == false -%} {% endif -%} In der Datei partials/product/product-popup.html suchst du nach einem Wort usr.Authenticated. Es wird zwei Instanzen dieses Ausdrucks in dieser Datei geben. Es ist Teil der Bedingung in beiden. Ändere in beiden Fällen diese Bedingungen so, dass sie wie folgt aussehen: {% if usr.Authenticated and product.Archival == false -%} In derselben Datei (partials/product/product-popup.html) suchst du nach einem Wort add-to-cart-popup. Dies ist die Containerklasse, die geändert werden muss, damit sie so aussieht: Weiter in derselben Datei (partials/product/product-popup.html) suchst du nach einem Wort AddToCartForm. Es ist die ID des Formulars, das für das Hinzufügen der Waren zum Warenkorb verantwortlich ist. Öffne die Zeile über der Bedingung: {% if product.Archival == false -%} Es wird für den Rest des Codes in dieser Datei verwendet. Am Ende findest du einen Klassencontainer ask-for-price-popup. Schließe unter diesem Container die zuvor geöffnete Bedingung, indem du darunter eine Zeile hinzufügst {% endif -%}. Am Ende der Datei scss/main2.scss diesen Code einfügen: .archival{ padding-bottom: 20px; } .archival-info{ background: $pageNameColor; color: $primaryColor; padding: 20px; margin-bottom: 20px; text-transform: uppercase; @media only screen and (min-width: 481px) { box-shadow: 2px 2px 1px 0 $bgColorFont; } }

Tipp

Denke daran, dass die scss-Dateien minimiert werden müssen. Informationen zum Kompilieren und Minimieren von scss-Dateien findest du im Artikel über Kompilierung und Minimierung von Dateien .

Bernstein

Suche in der Datei productdetails.html nach dem Wort itemprop="offers". Es ist eines der Attribute des Containers, an dessen Anfang du den folgenden Code einfügen musst: {% if _pd.Archival -%} {% endif %} In derselben Datei (productdetails.html) suchst du nach einem Wort usr.Authenticated. Dieser Ausdruck wird in dieser Datei zweimal vorkommen. Es ist Teil der Bedingung in beiden. Ändere in beiden Fällen diese Bedingungen so, dass sie wie folgt aussehen: {% if usr.Authenticated and _pd.Archival == false -%} Weiter in derselben Datei (productdetails.html) suchst du nach einem Wort class="availability". Füge die Zeile über dem Element mit dieser Klasse hinzu {% if _pd.Archival == false %}. Dies wird der Beginn einer Bedingung sein, die etwas tiefer abgeschlossen werden muss. Um diesen Ort zu finden, suche nach dem Ausdruck {% if customer.HidePrices %}. Dies ist die Voraussetzung für die Fertigstellung dieses neuen von uns, das wir gerade hinzugefügt haben. Füge dazu die obige Zeile hinzu {% endif %}. Ein weiterer Satz in dieser Datei (productdetails.html), musst du nach einem Wort add-to-cart suchen. Dies ist die Klasse der Schaltfläche zum Hinzufügen eines Artikels zum Warenkorb. Es wird zwei Präsentationen geben. Uns interessiert nur die erste, die sich auf ein bestimmtes Produkt bezieht. Die zweite Instanz ist für Baugruppen und befindet sich in einem Zustand {% if set.Price <> null %}. Das interessiert uns nicht, also seien wir die Ersten. Füge die Zeile oben hinzu {% if _pd.Archival == false %}. Unter dieser Schaltfläche befinden sich zwei weitere Schaltflächen (Verfügbarkeitsmeldungen und Preisabfrage). Unter letzterem sollte die Bedingung geschlossen werden, indem eine Zeile darunter hinzugefügt wird {% endif %}. Bei diesen Schaltflächen sehen wir das nav-Element mit der Klasse options. Füge die Zeile oben ein {% if _pd.Archival == false %}, und füge direkt nach dem Ende dieses Elements die Zeile unten ein {% endif %}. Die letzte Bedingung in dieser Datei (productdetails.html),die man ändern muss, kann mna finden, indem man nach dem Ausdruck productuserreviews.TotalItems sucht. Man muss es so ersetzen, dass es so aussieht: {% unless productuserreviews.TotalItems == 0 and _pd.Archival %} Datei productdetails/opinions-partial.html sollte wie folgt geändert werden: {% if productuserreviews.TotalItems == 0 %} {% if _pd.Archival == false -%} . . . {% endif -%} {% else %} {% for o in productuserreviews.Reviews %} . . . {% endfor %} {% if _pd.Archival == false -%} {{ translations.Com_AddFeedback }} {% endif -%} {% endif%} Füge am Ende der Datei scss/main2.scss ein: .archival-product-info{ padding: 15px 20px; border-radius: 5px 0 0 5px; box-shadow: rgba(0,0,0,.2) -2px 2px 10px; background: #F5F5F5; position: relative; right: -20px; left: -20px; width: calc(100% + 40px); margin: 10px 0 30px; font-style: italic; }

Tipp

Denke daran, dass die scss-Dateien minimiert werden müssen. Informationen zum Kompilieren und Minimieren von scss-Dateien findest du im Artikel über Kompilierung und Minimierung von Dateien.

Opal

In der Datei productdetails.html suchst du nach einem Wort details-section. Dies ist die Klasse des Containers, über der man die Zeile über einem solchen Code einfügen muss: {% if _pd.Archival -%} {% endif %} Suche dann nach dem Wort usr.Authenticated. Es wird zwei Instanzen dieses Ausdrucks in dieser Datei geben. Es ist Teil der Bedingung in beiden. Ändern in beiden Fällen diese Bedingungen so, dass sie wie folgt aussehen: {% if usr.Authenticated and _pd.Archival == false -%} Ein anderer Satz ist class="stock". Dies ist die Klasse des Artikels, der mit der Bedingung "bekleidet" werden soll {% if _pd.Archival == false %}. Dies ist der Beginn einer Bedingung, die die Zeile unter dem Element beenden muss, indem sie es hinzufügt {% endif %}. Suche nun nach dem Begriff class="attributes". Füge die Zeile über dem Element mit dieser Klasse hinzu {% if _pd.Archival == false %}. Dies wird der Beginn einer Bedingung sein, die etwas tiefer abgeschlossen werden muss. Um diesen Ort zu finden, suche nach dem Ausdruck {% if customer.HidePrices %}. Dies ist die Voraussetzung für die Fertigstellung dieses neuen von uns, das wir gerade hinzugefügt haben. Füge dazu die obige Zeile hinzu. {% endif %}. Der nächste Satz ist add-to-cart.Dies ist die Klasse der Schaltfläche zum Hinzufügen eines Artikels zum Warenkorb. Es wird zwei Präsentationen geben. Uns interessiert nur die erste, die sich auf ein bestimmtes Produkt bezieht. Die zweite Instanz ist für Baugruppen und befindet sich in einem Zustand {% if set.Price <> null %}. Das interessiert uns nicht, also seien wir die Ersten. Füge die Zeile oben hinzu {% if _pd.Archival == false %}. Unter dieser Schaltfläche befinden sich zwei weitere Schaltflächen (Verfügbarkeitsmeldungen und Preisabfrage). Unter letzterem sollte die Bedingung geschlossen werden, indem eine Zeile darunter hinzugefügt wird {% endif %}. Bei diesen Schaltflächen sehen wir das nav-Element mit der Klasse options. Füge das Lineal oben ein {% if _pd.Archival == false %}, und direkt nach dem Ende dieses Elements füge unten eine Zeile hinzu {% endif %}. Füge am Ende der Datei scss/main2.scss ein:  .archival-product-info{ background: #f7f7f7; color: $placeholderColorFont; padding: 20px; margin-top: 20px; text-align: center; }

Tipp

Denke daran, dass die scss-Dateien minimiert werden müssen. Informationen zum Kompilieren und Minimieren von scss-Dateien findest du im Artikel über Kompilierung und Minimierung von Dateien.

Unterstützung für die automatische Vervollständigung im Vorlagenfinder

In diesem Artikel erfährst du, wie du die autocomplete-Funktion in deine Vorlage implementierst. Diese Funktion zeigt dem Kunden eine Liste von Produkten, die am besten zu dem von ihm in die Suchmaschine eingegebenen Ausdruck passen.

 Agat

In der Datei partials/common/header.html suchst du nach einem Satz id="search-form". Ändere das Element, zu dem diese ID gehört, so, dass es so aussieht: <form method="post" id="search-form" class="autocomplete-form" autocomplete="off">

In der Datei js/init.js suchst du nach einem Satz events:. Füge den obigen Code ein: autocomplete: function(e){ Am Ende der Datei, direkt unter diesem Code: $('body').on('blur', 'input', function () { application.uiCheckLabels(); }); Füge diesen Code ein: $('body').on('input', '#header-section #search-form.autocomplete-form [name="search"]', function (e) { if(timeOutAutocomplete!=null){ clearTimeout(timeOutAutocomplete); timeOutAutocomplete=null; } timeOutAutocomplete = setTimeout(function(){ self.autocomplete(e); }, 300); }); //variable to clearTimeout in autocomplete function var timeOutAutocomplete = null; $('body').on('blur', '#header-section #search-form.autocomplete-form [name="search"]', function () { setTimeout(function () { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); }, 200); }); Am Ende der Datei scss/main2.scss fügst du den Code ein: .autocomplete{ position: absolute; z-index: 101; width: 100%; @media only screen and (max-width: 1024px) { width: calc(100% - 240px); } @media only screen and (max-width: 768px) { width: calc(100% - 20px); } box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2); .product{ display: block; padding: 10px; background: $bgColor; border: 1px solid $primaryColor; border-bottom: none; font-size: 16px; color: $bgDarkerColorFont; &:last-child{ border-bottom: 1px solid $primaryColor; } > div{ display: inline-block; vertical-align: top; margin-right: 10px; &:last-child{ margin-right: 0; } } .img{ width: 50px; height: 50px; position: relative; } img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .names{ width: calc(100% - 50px - 10px); } .name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .price{ margin-top: 5px; font-size: 12px; color: $primaryColor; opacity: 0.63; } } }

Tipp

Beachte, dass die Dateienscss und js sollte minimiert werden. So kompiliere und minimiere Dateien scss und js erfährst du aus dem Artikel über Kompilierung und Minimierung von Dateien.

Bernstein

In der Datei page/header.html suchst du nach einem Satz SearchForm. Ändere das Element, zu dem diese ID gehört, so, dass es so aussieht: <form method="post" class="search autocomplete-form" autocomplete="off" id="SearchForm" action="{{ page.Url }}{{ page.QueryString | H}}" >

Am Ende der Datei js/init2.js fügst du diesen Code ein: Am Ende der Datei scss/main2.scss fügst du diesen Code ein: .autocomplete{ position: absolute; top: 43px; left: 0; z-index: 101; width: 100%; box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2); .product{ display: block; padding: 10px; background: $bgColor; border: 1px solid $primaryColor; border-bottom: none; font-size: 14px; color: $secondaryColorFont; transition: all ease 300ms; &:last-child{ border-bottom: 1px solid $primaryColor; } > div{ display: inline-block; vertical-align: top; margin-right: 10px; &:last-child{ margin-right: 0; } } .img{ width: 50px; height: 50px; position: relative; } img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .names{ width: calc(100% - 50px - 10px); } .name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .price{ margin-top: 5px; font-size: 12px; color: $primaryColor; opacity: 0.63; transition: all ease 300ms; } &:hover{ background: $primaryColor; color: $primaryColorFont; .price{ color: $primaryColorFont; opacity: 1; } } } }

Tipp

Denke daran, dass scss- und js-Dateien minimiert werden müssen. So kompiliere und minimiere Dateien scss und js erfährst du aus dem Artikel über Kompilierung und Minimierung von Dateien.

Opal

In der Datei page/header.html suchst du nach einem Satz SearchForm. Ändere das Element, zu dem diese ID gehört, so, dass es so aussieht: <form method="post" class="search autocomplete-form" autocomplete="off" id="SearchForm" action="{{ page.Url }}{{ page.QueryString | H}}" >

Am Ende der Datei js/init2.js diesen Code einfügen: Am Ende der Datei scss/main2.scss fügst du diesen Code ein: .autocomplete{ position: absolute; left: calc(50% - 20px); transform: translateX(-50%); z-index: 1000; box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2); .product{ display: block; padding: 10px; background: $bgColor; border: 1px solid $primaryColor; border-bottom: none; font-size: 16px; color: $secondaryColorFont; transition: all 300ms ease; &:last-child{ border-bottom: 1px solid $primaryColor; } > div{ display: inline-block; vertical-align: top; margin-right: 10px; &:last-child{ width: 100px; margin-right: 0; text-align: right; } } .img{ width: 50px; height: 50px; position: relative; } img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .names{ width: calc(100% - 50px - 100px - 20px); } .name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .code{ font-size: 12px; opacity: 0.63; } &:hover{ background: $primaryColor; color: $primaryColorFont; } } }

Tipp

Beachte, dass die Dateien scss und js sollte minimiert werden. So kompiliere und minimiere  Dateienscss und js erfährst du aus dem Artikel über Kompilierung und Minimierung von Dateien.

In diesem Artikel erfährst du, wie du die Schriftart in einer Vorlage einfach ändern kannst.

Auswahl der Schriftart

Tipp

Achte bei der Auswahl einer Schriftart darauf, dass sie unter der Apache-2.0-Lizenz steht.

Wähle hier die Schriftart aus, die dir am besten gefällt. Klicke dann auf die Kachel, die dieser Schriftart entspricht. Für die Zwecke dieses Artikels wählen wir die Schriftart Roboto. Wähle dann die Stile aus, die du interessierst. Sobald du mindestens einen Stil ausgewählt hast, erscheint auf der rechten Seite ein Codeabschnitt, den du in einen Abschnitt der Vorlage kopieren musst. In unserem Fall wird dies sein:

link rel="preconnect" href="https://fonts.googleapis.com"> link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900 &display=swap" rel="stylesheet">

Darunter befindet sich eine Zeile, die du an jeder Stelle einfügen musst, an der es eine Notation mit einer anderen Schriftart gibt. In unserem Fall wird dies sein:

font-family: 'Roboto', sans-serif;

Tipp

Denke daran, dass die Dateien minifiziert werden müssen. Wie du die Dateien kompilieren und minifizieren kannst, erfährst du in dem Artikel über das Kompilieren und Minifizieren von Dateien.

Cross-Selling-Unterstützung nach Auftragserteilung

In diesem Artikel erfahst du, wie du Ihre Vorlage änderst, um den Cross-Selling-Bereich anzuzeigen, nachdem du deine Bestellung aufgegeben hast.

Tipp

Für diesen Artikel müss Man Änderungen an den Dateien vornehmen js und scss. Von dieses Artikels  lernst du, wie du sie kompilierst und minimierst.

Topaz

Gehe im Administrationspanel auf die Registerkarte Übersetzungen (Webshop Layout -> Einstellungen -> Übersetzungen) und füge dort die Phrase CrossSellingInfo - Andere haben auch gekauft hinzu. Gehe dann zur Registerkarte Objekte (Webshop Layout -> Einstellungen -> -> Threepoint oben rechts -> Erweiterte Einstellungen bearbeiten -> Objekte) und füge dort ein neues Objekt des Typs News and Promotions mit dem Namen Cross-Selling hinzu. Sobald es hinzugefügt wurde, gehe in die Einstellungen und wähle den Typ Cross-Selling. Bleibe dann in diesen Einstellungen, gehe auf die Registerkarte Seiten und aktiviere dort das Kontrollkästchen Bestellen. Speichere das Ganze, indem du auf die Diskette in der oberen rechten Ecke klickst. Suche in der Datei partials/product-item.html die Phrase config.Products.ShowCode und lösche dann die Bedingung (mit ihrem Inhalt), zu der diese Phrase gehört. Suche anschließend in der Datei staticElements/cart/cart.html nach dem Ausdruck cart-step-five. Ersetze den Container mit dieser Klasse (mitsamt seinem Inhalt) durch den folgenden Code: