Seite „Hersteller“ in der Saphir-Vorlage
In diesem Artikel erfährst du, wie du eine Herstellerseite in deine Vorlage einfügen kannst.
Neue Seite kannst du im Admin-Panel im Bereich Webshop Layout ➞ Seiten hinzufügen. Klicke die Schaltfläche Hinzufügen und fülle die Felder mit dem Namen, Link und Titel der Seite aus. Am Ende bestätige die Änderungen mit der Schaltfläche Hinzufügen.
Die neue Seite wird als inaktiv hinzugefügt. Um sie zu aktivieren, klickst du einfach auf ihre Kachel und änderst du den Schalter der Option Aktiv auf JA.
Wie kannst du eine Datei zu einer Seite hinzufügen?
Gehe zum Bereich Webshop Layout ➞ Einstellungen, klicke auf die Schaltfläche Mehr und wähle Erweiterte Einstellungen bearbeiten. Jetzt musst du auf die Registerkarte Seiten klicken. Gib für die neu hinzugefügte Seite in der Spalte Datei den Namen der zu erstellenden Datei mit einem html-Suffix ein, z. B.: hersteller.html.
Speichere die Änderungen, die du mit der Schaltfläche Speichern vorgenommen hast.
Als nächstens fügst du die Übersetzungen hinzu. Im Bereich Webshop Layout ➞ Einstellungen ➞ Übersetzungen nach einem Klick auf die Schaltfläche Hinzufügen gibst du die Id-Übersetzung und den Text, der im Webshop angezeigt werden soll. Bestätige die Änderungen mit der Schaltfläche HINZUFÜGEN.
- Id: ShowProducts — Text: Artikel anzeigen
- Id: ShowMore — Text: Mehr anzeigen
Erstelle im Hauptordner der Saphir-Vorlage eine Datei namens manufacturers.html. Füge den folgenden Code in diese Datei ein:
|
{% extends ‘_layout.html’ %}
{% block pageContent -%}
{% assign manufacturers = manufacturer-brand.Manufacturers -%}
{% assign manufacturersSize = manufacturers | Size -%}
<section class=”product-presentation-ui container-ui manufacturers-container-ui”>
<div class=”manufacturers-breadcrumbs-ui”>
{% include ‘common/breadcrumbs.html’ -%}
</div>
<div class=”manufacturers-ui manufacturers-lq”>
{% for manufacturer in manufacturers -%}
<div class=”manufacturer-ui manufacturer-lq {% if forloop.index > 12 -%} hidden-lq {% endif -%}”>
{% if manufacturer.ImageId != 0 -%}
{{ manufacturer | Img:’large’ }}
{% endif -%}
<h2>{{ manufacturer.Name }}</h2>
<a href=”{{ manufacturer.Url }}” name=”{{ manufacturer.Name }}” title=”{{ manufacturer.Name }}”>
{{ translations.ShowProducts }} <i class=”ti-arrow-right”></i>
</a>
</div>
{% endfor -%}
</div>
{% if manufacturersSize > 12 -%}
<button class=”show-more-manufacturers-ui show-more-manufacturers-lq”>{{ translations.ShowMore }}</button>
{% endif -%}
</section>
{% endblock -%}
|
Am Ende der Datei scss/globals/_globals2.scss füge diesen Code ein:
| .manufacturers-container-ui{ text-align: center; .manufacturers-breadcrumbs-ui{ text-align: left; } .manufacturers-ui{ text-align: left; } .manufacturer-ui{ width: calc(25% – 64px); margin-right: 60px; margin-bottom: 60px; display: inline-block; i{ margin-left: 5px; } } .show-more-manufacturers-ui{ margin: 40px auto; width: 300px; } } |
Am Ende der Datei (vor der letzten Klammer) scss/globals/_globals-m.scss füge den folgenden Code ein:
| .manufacturers-container-ui{ .manufacturer-ui{ width: calc(50% – 43px); margin: 40px 20px; } .show-more-manufacturers-ui{ display: none; } } |
Gehe dann zur Datei js/init-ui2.js und füge den folgenden Code am Ende der Datei ein:
| function showMoreManufacturers(e) { $(‘.manufacturer-lq.hidden-lq’).each(function(index){ if(index < 12){ $(this).removeClass(‘hidden-lq’); app.loadImages(); } }); if($(‘.manufacturer-lq.hidden-lq’).length == 0){ $(e.currentTarget).addClass(‘hidden-lq’); } };$(‘body’).on(‘click’, ‘.show-more-manufacturers-lq’, function (e) { showMoreManufacturers(e); }); if($(window).width() <= 1279 && $(‘.manufacturer-lq.hidden-lq’).length > 0) { |