Beispielmodifikationen

Ein paar Worte zum Thema

Das Ändern der Vorlage und des Inhalts einer E-Mail ist eines der Dinge, die uns von der Konkurrenz abheben können. Eine Mail, die Aufmerksamkeit auf sich zieht, kann den Kunden in Zukunft schneller mit unserem Unternehmen verbinden. Darüber hinaus kann das Ändern der Farbe der Wörter in einer E-Mail dem Empfänger helfen, auf wichtige Informationen aufmerksam zu machen - darüber in einem anderen Artikel über die zusätzlichen Möglichkeiten der Verwaltung der E-Mail-Vorlage. In diesem Artikel erfährst du, wie du E-Mail-Benachrichtigungen im Comarch Webshop verwaltest und wie du die Standardvorlage verwaltest.

Inhalt von E-Mail-Benachrichtigungen im Comarch Webshop

Der Zugang zu den Inhalten, die sich auf die Kommunikation zwischen dem Vertragspartner und Comarch Webshop beziehen, befindet sich im Administrationspanel Einstellungen ➞ Inhalte: Dieser Bereich umfasst die folgenden Inhalte: Wir können alle Inhalte einer Nachricht bearbeiten, indem wir ihre Details eingeben. Darin können wir ihre Sichtbarkeit bestimmen und Daten ändern oder modifizieren, wie z.B.:

E-Mails für Bestellungen

Wir haben eine Reihe von Möglichkeiten, den Inhalt der E-Mail zu ändern, z.B. für die Bestellung, die Bestätigung einer Bestellung, die Stornierung einer Bestellung und so weiter. Wir können dies im Administrationspanel ändern, indem wir auf Einstellungen ➞ Inhalte gehen und dann auf E-Mail und SMS klicken. Wähle dann den Inhalt aus, den du ändern möchtest (in diesem Beispiel die Änderung des Inhalts der E-Mail zur Aufgabe der Bestellung). Wenn du auf das gelb umrandete Kästchen klickst, ändert sich die Ansicht, und erst jetzt können wir die Daten ändern: Sobald die Änderungen abgeschlossen sind, klicke auf die Schaltfläche Speichern. Es empfiehlt sich, eine Testnachricht zu senden, um die Richtigkeit des Inhalts zu überprüfen. Die Option ist in den Details jeder Benachrichtigung verfügbar - in der oberen rechten Ecke, unter den drei Punkten. Für alle Inhalte, die probeweise aus dem Bereich Einstellungen ➞ Inhalte ➞ E-Mail und SMS versendet werden, ist eine Validierung der eingegebenen Daten vorgesehen.

Bearbeitung der E-Mail-Vorlage

Im Administrationspanel kannst du die E-Mail-Vorlage bearbeiten. Einstellungen ➞ Inhalte ➞ E-Mail und SMS und wähle in der Liste der verfügbaren Inhalte das Kachel Vorlage aus und gehe zu den Details. Jede Codezeile, die mit einem Kommentar versehen ist, ist für das Aussehen unserer E-Mail verantwortlich.

Tipp

Unterstützende Kommentare sind in brauner Farbe hervorgehoben und befinden sich in /**/-Kästen. Lösche sie nicht, da sie nur zur Beschreibung von Codezeilen dienen und für spätere Änderungen nützlich sein können.

Ändere nur die Stellen, die in der Anleitung beschrieben sind. Das Löschen auch nur eines Symbols kann die gesamte Vorlage verzerren. Wenn du jedoch zu viele Elemente entfernt hast, kannst du die Standard-Inhalt wiederherstellen - diese Option befindet sich in der oberen rechten Ecke unter den drei Punkten. Wenn du mehr über die Verwaltung deiner E-Mail-Vorlage erfahren möchtest, wie z. B. die Änderung der Farbe, der Schaltflächenform und mehr, dann klicke hier.

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.

Automatische Einstellung der Templatesprache basierend auf der Browsersprache

In diesem Artikel erfährst du, wie du eine beliebige Vorlage ändern kannst, damit nach dem Aufrufen des Webshops die im Webbrowser ausgewählte Sprache verwendet wird. Diese Funktion funktioniert nur für mehrsprachige Webshops.

Tipp

Ein mehrsprachiger Webshop ist ein Webshop, bei dem neben der Standardsprache mindestens eine weitere Sprache hinzugefügt wurde.

Die Wiederherstellung der Sprache aus der letzten Sitzung hat Vorrang vor den Standardeinstellungen des Browsers. Das bedeutet, dass die beim letzten Besuch des Benutzers ausgewählte Sprache beim nächsten Besuch beibehalten wird, unabhängig von den Standard-Spracheinstellungen des Browsers. Diese Funktion ist für die neueste Version der Vorlagen aus dem Erscheinungsbild-Assistenten verfügbar. Um diese Funktion zu nutzen, gehe in das Admin-Panel zu Webshop Layout ➞ Einstellungen ➞ Allgemein

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.

1. Einleitung

Aufgrund der Änderungen im Comarch Webshop ab Version 2018.6, die den Umfang der Integration mit Google Tag Manager erweitern, werden die Templates in der älteren Version Änderungen erfordern, die die volle Nutzung der im Artikel beschriebenen Funktionalitäten ermöglichen Integration mit Google Tag Manager.

Tipp

Die folgende Konfiguration ist für Benutzer gedacht, die die Webshop-Version 2018.6 oder höher haben, aber mit Vorlagen in einer älteren Version. Vorlagendateien, Fragmente ihres Codes und Modifikationen, die im Handbuch vorgestellt werden, beziehen sich auf kostenlose Comarch-Vorlagen. Bei individuellen Vorlagen sollte der Ersteller der Vorlage angeben, an welcher Stelle die zum Anpassen der Vorlage erforderlichen Skripte eingefügt werden müssen.

2. Implementierung von Skripten

Wenn du die Integration bereits vor Version 2018.6 konfiguriert hast, musst du das alte Skript, das der letzten Bestellseite hinzugefügt wurde, entfernen. Gehe dazu im Administrationsbereich des Webshops in den Bereich Webshop Layout ➞ Einstellungen ➞ Erweiterte Einstellungen bearbeiten ➞ HTML bearbeiten und entferne das folgende Skript aus der Datei lastpagescripts.html: <script> dataLayer.push({{ page.GTMDataLayer }}); dataLayer.push({event:'UaTrack',VirtualPath:null}); </script> Je nach Vorlage befindet sich die Datei lastpagescripts.html an einer anderen Stelle in der Dateistruktur:

• Bernstein, Opal Vorlage - order ➞ lastpagescripts.html
• Achat Vorlage - partials ➞ cart ➞ lastpagescripts.html

Der nächste Schritt besteht darin, zwei neue Skripte zu implementieren. In der Datei _layout.html, die sich direkt im Bereich HTML bearbeiten befindet, ersetze das bestehende Skript am Anfang des Abschnitts <body>. <script>var dataLayer=[{{ page.GTMDataLayer }}];</script> das neue Skript: <script>var dataLayer={{ page.GtmDL }};</script> Ein weiteres Skript sollte in die für den Warenkorb zuständige Datei eingefügt werden <script> (function(){ var i,dl={{ page.GtmDL }}; for(i in dl) dataLayer.push(dl[i]); })(); </script> Je nach Vorlage handelt es sich um eine andere Datei - Dateiname und Speicherort sowie die Stelle, an der das oben genannte Skript einzufügen ist, sind unten angegeben:

• Bernstein, Opal Vorlage - order-cart-container.html

• Achat Vorlage- partials ➞ cart ➞ cart-template.html

und in der Datei order ➞ thx.html

Tipp

Denke daran, alle an der Vorlage vorgenommenen Änderungen zu speichern und zu veröffentlichen. Sobald du die Vorlage gemäß den obigen Anweisungen vorbereitet hast, kannst du mit der Konfiguration der Integration deines Webshops mit Google Tag Manager fortfahren, die im Artikel Integration mit Google Tag Manager beschrieben wird. 

3. Nützliche Links

Google Tag Manager: Hilfe Website Dokumentation zur Programmierung Google Analytics: Website Dokumentation zur Programmierung

Zustimmungen zu Online-Zahlungen in Vorlagen hinzufügen

In diesem Artikel erfährst du, wie du deine Online-Zahlungen eine Zustimmung hinzufügen kannst.

1. Bernstein oder Opal

In der Datei order/thank-you.html suchst du nach einem Wort Fields. Es wird Teil einer Schleife wie dieser sein: {% for f in cart.PlacedOrder.ExternalPayment.Fields -%} {% endfor -%} Füge den folgenden Code darunter ein:

Achat

In der Datei partials/cart/summary.html suchst du nach einem Wort online-payment-step. Dies ist eine Artikelklasse form, dem das Attribut hinzugefügt werden soll data-tos-invalid="{{translations.TosRequired}}" so dass es letztendlich wie der folgende Code aussieht:

Während du immer noch in derselben Datei bleibst (partials/cart/summary.html) suchst du nach einem Wort Fields. Es wird Teil einer Schleife wie dieser sein: {% for f in cart.PlacedOrder.ExternalPayment.Fields -%} {% endfor -%} Füge den folgenden Code darunter ein:

• • • {% for consent in cart.PlacedOrder.ExternalPayment.Consents -%}
      • {% if consent.Statement %}

        {{ consent.Text }}

        {% else %} {{translations.MainConsentWarning}} {% if consent.Required -%}* {% endif -%}{{ consent.Text }} {% endif -%}

{% endfor %}   Am Ende der Datei js/order.js fügst du diesen Code ein: $('body').on('click', '.external-payment-lq', function (e) { e.preventDefault(); var validate = application.uiValidateForm($('.online-payment-step')); if (validate) { $('.online-payment-step').submit(); } }); In der Datei  js/init.js suchst du nach der Funktion uiSetSwitchNameWidthInNewsletter und fügst am ihren Ende den folgenden Code hinzu: $('#main-section').find('.online-payment-step .switch-name').each(function () { var width = $('.online-payment-info').width(); $('.online-payment-consents').css('width', width); $(this).css('width', width - 65); }); Am Ende der Datei scss/main2.scss fügst du diesen Code ein: .online-payment-consents{ display: inline-block; list-style-type: none; padding: 0; text-align: left; .switches:after{ content: ''; display: block; clear: both; } }

Tipp

Denke daran, dass Dateien js i scss sollte minimiert werden. Informationen zum Kompilieren und Minimieren von Dateien js i scss erfährst du aus dem Artikel über Kompilierung und Minimierung von Dateien.

Handhabung von Bestelldetails für einen nicht eingeloggten Kunden

In diesem Artikel erfährst du, wie du die Vorlage so änderst, dass Kunden, die nicht angemeldet sind, die Details der Bestellung sehen können, zu der sie einen Link im Kundenprofil haben.

Bernstein oder Opal

Ersetze in der Datei customerprofile.html die Bedingung so, dass sie folgendermaßen aussieht: {% if customer.Authenticated and page.PageId == config.DefinedPages.CustomerProfile.Id %} {% elseif customer.Authenticated == false and page.PageId == config.DefinedPages.CustomerProfile.Id and customerprofile.Order != null %} {% else %} {% endif %} Suche in der Datei customer/profile-orders.html nach Order/RestorePayment. Dies ist der Name einer der Aktionen, an denen wir interessiert sind. Etwas weiter entfernt befinden sich die anderen beiden (Order/Cancel und Order/Accept). Füge unter jedem von ihnen ein: <input name="hash" type="hidden" value="{{ order.Hash }}" /> Suche in derselben Datei (customer/profile-orders.html) nach copy-to-cart. Dies ist die Klasse der Schaltfläche, die für das Kopieren der Bestellung in den Warenkorb verantwortlich ist. Man muss es so ändern, dass es so aussieht: Dann in der Datei js/profile.js Funktion finden copyToCart und ändere seinen Anfang so, dass er so aussieht: var id = $(e.currentTarget).data('id'); var hash = $(e.currentTarget).data('hash'); var newLocation = $(e.currentTarget).data('url'); var added = $(e.currentTarget).data('added'); var copy = $(e.currentTarget).data('copy'); var notCopied = $(e.currentTarget).data('not-copied'); var data = [ { name: '__action', value: 'Order/Copy' }, { name: 'orderId', value: id }, { name: 'hash', value: hash }, { name: '__csrf', value: __CSRF } ];

Tipp

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

Achat

Ersetze in der Datei customer-profile.html die Bedingung so, dass sie folgendermaßen aussieht: {% if page.PageId == config.DefinedPages.CustomerProfile.Id and customer-profile.Order != null %} {% include 'partials/customer/order-details.html' -%} {% elseif customer.Authenticated and page.PageId == config.DefinedPages.CustomerProfile.Id %} Suche in partials/customer /order-details.html nach Order/Accept. Dies ist der Name einer der Aktionen, an denen wir interessiert sind. Etwas weiter entfernt befinden sich die anderen beiden (Order/RestorePayment und Order/Cancel). Füge unter jedem von ihnen ein: <input name="hash" type="hidden" value="{{ order.Hash }}" /> Füge bei der Aktion Order/Cancel der Eingabe eine Bedingung mit einer Vorlage hinzu, sodass sie so aussieht: {% if customer.Authenticated == false and page.PageId == config.DefinedPages.CustomerProfile.Id and customer-profile.Order != null -%} {% else -%} {% endif -%} Ändere während dieser Aktion (Order/Cancel) die Schaltfläche, die für die Stornierung der Bestellung verantwortlich ist, so, dass sie wie folgt aussieht: <span class="cancel-order-button {% if customer.Authenticated == false and page.PageId == config.DefinedPages.CustomerProfile.Id and customer-profile.Order != null -%} not-authenticated {% endif -%}" data-info="{{ translations.Prf_OrderCanceled }}"> Suche in derselben Datei (partials/customer/order-details.html) nach copy-to-cart. Dies ist die Klasse der Schaltfläche, die für das Kopieren der Bestellung in den Warenkorb verantwortlich ist. Du musst das Attribut data-hash = "{{order.Hash}}" hinzufügen, damit die endgültige Schaltfläche so aussieht: <span class="copy-to-cart" data-id="{{customer-profile.Order.Id}}" data-hash="{{customer-profile.Order.Hash}}"> Suche dann in der Datei js/init2.js die Funktion copyToCart und ändere ihren Anfang so, dass er folgendermaßen aussieht: var copyButton = $(e.currentTarget); var copySection = copyButton.parents('.copy-section'); var id = copyButton.data('id'); var hash = copyButton.data('hash'); var data = [ { name: '__action', value: 'Order/Copy' }, { name: 'orderId', value: id }, { name: 'hash', value: hash }, { name: '__csrf', value: __CSRF } ]; Suche in js/init.js die Funktion cancelOrder und ersetze post darin, sodass er so aussieht: $.post(url, data, function (result) { if (result.action.Result) { if($(e.currentTarget).hasClass('not-authenticated')){ application.createMessage(message); $('#main-section').html(result.template); application.loadImages(); } else { window.templateChanged['under-execution'] = true; application.createMessage(message); if (parent.index() != -1) { $('.under-execution').eq(1).replaceWith(result.template); } application.uiPreventScrolling(); } } else if (result.action.Code != 100) { application.createMessage(result.action); } }); Füge in partials/customer/order-details-products.html dem Container mit der Klasse cart-items eine Bedingung hinzu, sodass der endgültige Container so aussieht: Füge am Ende der Datei scss/main2.scss den folgenden Code hinzu: @media only screen and (min-width: 481px) { .cart-items.not-authenticated .cart-item { width: calc(50% - 40px); display: inline-block; } } @media only screen and (min-width: 769px) { .cart-items.not-authenticated .cart-item { width: calc(50% - 25px); } } @media only screen and (min-width: 1025px) { .cart-items.not-authenticated { width: 66%; } } Füge am Ende der Datei scss/mobile2.scss den folgenden Code hinzu: .cart-items.not-authenticated{ text-align: center; margin: 20px auto; }

Tipp

Denke daran, dass die js- und scss-Dateien minimiert werden müssen. Wie du js- und scss-Dateien kompilierst und minimierst, erfährst du im Artikel über Kompilierung und Minimierung von Dateien.

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.

Einleitung

In der Webshop-Version mit Nummer 2019.5 im Admin-Panel wurde die Erinnerungsfunktion hinzugefügt, um eine Meinung zum gekauften Artikel abzugeben. Diese Funktion sendet eine E-Mail mit dieser Erinnerung. Diese E-Mail enthält auch einen Link zu den Artikeldetails. In diesem Artikel erfährst du, wie du deine Vorlage so änderst, dass nach dem Klicken auf diesen Link eine Seite mit Details zu einem bestimmten Artikel geöffnet wird und bereits ein offenes Feedback-Formular zum Ausfüllen bereitsteht.

Achat

In der Datei js/init.js findest du die Funktion addReview und darin direkt unter der Variablen validate fügst du diesen Code hinzu:

if(window.location.hash.includes('#rate')){ var hash = window.location.hash.split('&')[1].split('=')[1]; data.push({ name: 'orderHash', value: hash }); }

Und dann in der Datei js/init2.js füge diesen Code am Ende hinzu:

function autoOpenReviewsForm(){     $('.new-review-label').trigger('click');     $('html, body').animate({         scrollTop: $('.new-review-label').offset().top - 81     }, 500); } $(document).ready(function () {     if(window.location.hash.includes('#rate')){         autoOpenReviewsForm();     } });

Bernstein

Suche in der Datei js/init.js nach einem Satz #opinion-form .primary-action. Dies ist der Auslöser für die Feedback-Funktion. In dieser Funktion unter der Variable. data fügst du diesen Code hinzu:

if(window.location.hash.includes('#rate')){ var hash = window.location.hash.split('&')[1].split('=')[1]; data.push({ name: 'orderHash', value: hash }); }

Und dann in der Datei js/details.js fügst du diesen Code am Ende hinzu:

$(document).ready(function () { if(window.location.hash.includes('#rate')){ $('#add-first-review').trigger('click'); } });

Opal

Suche in der Datei js/init.js nach einem Satz #opinion-form .primary-action. Das wird sein trigger Feedback-Funktionen. In dieser Funktion unter der Variable data fügst du diesen Code hinzu:

if(window.location.hash.includes('#rate')){ var hash = window.location.hash.split('&')[1].split('=')[1]; data.push({ name: 'orderHash', value: hash }); }

Und dann in der Datei js/details.js fügst du diesen Code am Ende hinzu:

$(document).ready(function () { if(window.location.hash.includes('#rate')){ $('#main-rating > .glyphicon').trigger('click'); } });

 

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.

Diese Anleitung ist für Standard-Comarch-Vorlagen vor der Version 2019.6. Wenn du im Webshop mehrere Kontaktadressen hast, kannst du deinen Kunden die Auswahl über das Kontaktformular ermöglichen. Befolg dazu die folgenden Anweisungen. Einzelne Dateien, die geändert werden müssen, findest du im Administrationsbereich im Abschnitt: Webshop Layouts ➞ Einstellungen ➞ Mehr ➞ Erweiterte Einstellungen bearbeiten dann Mehr ➞ Bearbeiten HTML.

Tipp

Denke daran, Änderungen an der Vorlage vorzunehmen Spiechern und Veröffentlichen.

1. Bernstein i Opal

1.1. Suche in der Datei contact.html das Element mit der ID "ContactSendForm" und füge über dem E-Mail-Feld den folgenden Code hinzu: {% if config.Contact.Contacts[0] -%} <select name="contactId" class="department" required> {% for contact in config.Contact.Contacts -%} <option value="{{ contact.Id }}">{{ contact.Name }}</option> {% endfor -%} </select> {% endif -%} 1.2. Um das Webshop Layout des neuen Felds mit dem Rest des Formulars in Einklang zu bringen, finde im scss/contact.scss Selektor ".contact-info .contact-form input, .contact-info .contact-form textarea" und ersetze es durch: .contact-info .contact-form input, .contact-info .contact-form textarea, .contact-info .contact-form select 1.3. Kompiliere und minimiere scss-Dateien.

Tipp

Um zu erfahren, wie du scss-Dateien kompilierst und minimierst, lese es in dem Artikel über Dateikompilierung und -minifizierung .

1.4. Damit die Validierung ordnungsgemäß funktioniert, js/init.js, finde Funktion resetForm(form) und ersetze es durch function resetForm(form) { var inputs = form.find('input:not([disabled]):not([type=hidden]), select:not([disabled]):not(".department"), textarea:not([disabled])'); inputs.each(function () { $(this).val(''); }); $('.loader-icon').remove(); $('.send-contact-form').removeClass('posting'); } 1.5. Minimiere js-Dateien.

Tipp

Informationen zum Minimieren von Dateien js, lese es in dem Artikel über Dateikompilierung und -minifizierung .

2. Achat

2.1. Suche in der Datei contact.html das Element mit der ID "contact-form" und füge über dem E-Mail-Feld den folgenden Code hinzu: {% if config.Contact.Contacts[0] -%} <div class="input-group"> <span class="required-fields-info">{{ translations.Department }} *</span> <select name="contactId" required> {% for contact in config.Contact.Contacts -%} <option value="{{ contact.Id }}">{{ contact.Name }}</option> {% endfor -%} </select> </div> {% endif -%} 2.2. Um das Webshop Layout des neuen Felds mit dem Rest des Formulars in Einklang zu bringen, finde im scss/mobile1.scss Selektor "input, textarea" und ersetze es durch: input, textarea, .contact-form-popup select 2.3. Kompiliere und minimiere scss-Dateien.

Tipp

Um zu erfahren, wie du scss-Dateien kompilierst und minimierst, lese es in dem Artikel über Dateikompilierung und -minifizierung .

2.4. Füge eine Übersetzung für den Satz [Department] hinzu Die Übersetzung sollte im Administrationsbereich hinzugefügt werden: Webshop Layout ➞ Einstellungen im Reiter Übersetzungen.  

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:

Auf der Hauptseite des Webshops werden Artikel angezeigt, die als Werbeaktionen in deinem Geschäft präsentiert werden. In diesem Bereich angezeigte Artikel sind auf den Artikelkarten im ERP-System mit einem entsprechenden Parameter gekennzeichnet. Weitere Informationen zum Hinzufügen von Zeitattributen zu Artikeln erhältst du in den folgenden Artikeln: Die Art der angezeigten Artikel kann jedoch nach deinen Wünschen geändert werden. Dadurch kannst du auf der Startseite nicht nur Aktionen präsentieren, sondern z.B. Neuigkeiten, Verkäuferempfehlungen, ein Artikel aus einem Newsletter oder Sale. Die Art der angezeigten Artikel kann im Administrationsbereich geändert werden. Bearbeite dazu das Objekt, das standardmäßig im ERP-System definierte Nachrichten anzeigt. Melde sich im Administrationsbereich an und gehe zum Bereich Webshop Layout ➞ Einstellungen. Verwende dann die Schaltfläche Mehr und bearbeite die erweiterten Einstellungen. Gehe auf die Registerkarte Objekte und bearbeite das Objekt new-products. In der Objektedition new-products kannst du die Art der angezeigten Artikel ändern, indem du sie aus der Dropdown-Liste auswählst. Speichere nach der Änderung deine Auswahl und veröffentliche die Vorlage, damit neue Artikel auf der Seite erscheinen.

Einleitung

Comarch Webshop bietet jetzt die Möglichkeit, Anhänge zu Bestellungen von Kunden hinzuzufügen. Die Funktion wird von den Vorlagen Saphir und Topaz unterstützt. Die Aktivierung dieser Funktion ermöglicht es, Anhänge zu einer Bestellung hinzuzufügen, die einen bestimmten Typ haben und später für den Verkäufer sowie für die Webshop-Verwaltung sichtbar sind.

Anwendung

Je nach den Besonderheiten deines Unternehmens kann das Hinzufügen eines Anhangs zur Webshop-Bestellung ein Schlüsselelement sein. Wenn du beispielsweise ein Unternehmen führst und modifizierte Artikel verkaufst (z.B. Tassen mit deinem eigenen Bild), ist es erforderlich, dass der Kunde ein Foto hochlädt. Mit der neuen Funktion können sie ein solches Foto direkt an die Bestellung anhängen. Die auf diese Weise angehängte Datei steht den Mitarbeitern des Webshops zur Verfügung.

Wer kann diese Option nutzen?

Um diese Funktion nutzen zu können, benötigst du:

Konfiguration

Um die Funktion zu aktivieren, klicke im Admin-Panel unter Einstellungen ➞ Webshop Einstellungen ➞ Bestellungen auf den Reiter Anhänge zur Bestellung. Stelle sicher, dass du über eine aktuelle Saphir-Vorlage verfügst. Nachdem du die Option aktiviert hast, erscheint während der Bestellung eine zusätzliche Option: Anlagen müssen bestimmte Anforderungen erfüllen, um der Bestellung beigefügt zu werden:

Tipp

Nach der Bestellung ist eine Bearbeitung der angehängten Dateien nicht möglich.

Auf diese Weise angehängte Dateien werden an das ERP-System gesendet und angezeigt:

• Bestelldetails im Admin-Panel
• Kundenprofil
• E-Mail Aufgabe der Bestellung

Damit die Anhänge in E-Mails angezeigt werden, fügst du im Inhalt der Vorlage Aufgabe der Bestellung am Ende der E-Mail vor dem Abschnitt Danke, bitte kommen Sie zurück ein Codefragment ein.

<h3>Anhänge des Kunden, die der Bestellung hinzugefügt wurden</h3> <p> {% for a in order.Attachments %} {{forloop.index}}. <a href="{{ config.Url }}{{ a.Url }}">{{ a.Name }}</a> <br/> {% endfor%} </p>

Tipp

Der Comarch Webshop-Service sollte beim Herunterladen von Dateien, die er von Kunden erhalten hat, die Dateien vor dem Öffnen des Inhalts zwingend mit einem Antivirenprogramm scannen.

Im Comarch Webshop gibt es auch die Möglichkeit, Anhänge im Kontaktformular hinzuzufügen. Weitere Informationen zu dieser Funktion erhältst du im Artikel Wie kann ich Kunden die Möglichkeit geben, dem Kontaktformular Anhänge hinzuzufügen?