Navigationsleiste-Einstellungen in der Saphir-Vorlage

In diesem Artikel erfährst du, wie du die Navigationsleiste in deiner Vorlage einstellst. Diese Änderungen ermöglichen es unter anderem, eine Schaltfläche zum Importieren des Warenkorbs und zum Herunterladen einer Beispiel-CSV-Datei hinzuzufügen.

Tipp
In diesem Artikel musst du Änderungen an den Dateien js und css vornehmen. Hier erfährst du, wie du sie minimierst.
Tipp
Die Aufzeichnung ordnername/dateiname.erweiterung bedeutet, dass du die Datei im Ordner finden kannst, dessen Name vor dem Schrägstrich angegeben ist. Zum Beispiel: order/thx.html bezeichnet die Datei thx.html im Ordner order.

Der erste Schritt besteht darin, den Inhalt der Datei common/navigation-bars/main-navigation-bar-partial.html zu ersetzen. Aufgrund der umfangreichen Änderungen kann keine genaue Liste der Änderungen gegeben werden, daher stellen wir den gesamten Code zur Verfügung, den du anstelle des aktuellen Codes einfügen musst:

{% if config.DefinedPages.WithdrawalRight.Id != page.PageId and config.DefinedPages.Payment.Id != page.PageId and config.DefinedPages.Shipping.Id != page.PageId and config.DefinedPages.Complaints.Id != page.PageId and config.DefinedPages.Loyalty.Id != page.PageId and config.DefinedPages.Registration.Id != page.PageId and config.DefinedPages.Login.Id != page.PageId and config.DefinedPages.Terms.Id != page.PageId and config.DefinedPages.Contact.Id != page.PageId and config.DefinedPages.Privacy.Id != page.PageId and config.DefinedPages.Blog.Id != page.PageId and config.DefinedPages.BlogDetails.Id != page.PageId and config.DefinedPages.PasswordReminder.Id != page.PageId and config.DefinedPages.CustomerProfile.Id != page.PageId and config.DefinedPages.About.Id != page.PageId and config.DefinedPages.SocialMedia.Id != page.PageId -%}

{% assign togglingClass = ” -%}

{% if page.PageId == config.DefinedPages.ProductDetails.Id -%}
{% assign togglingClass = ‘toggle-categories-lq’ -%}
{% endif -%}

<nav class=”header-categories-ui main-navigation-bar-ui”>
<ul class=”manufacturer-container-ui”>
<li class=”{% if config.DefinedPages.ProductList.Id == page.PageId or config.DefinedPages.Home.Id == page.PageId or config.DefinedPages.Manufacturers.Id == page.PageId -%} categories-opened-ui {% endif -%} {% if config.DefinedPages.AdvancedSearch.Id == page.PageId -%} login-back-ui {% endif -%} categories-option-ui categories-option-lq” >
<a class=”categories-label-ui category-links-ui categories-link-lq {{togglingClass}}” aria-label=”categories-label” href=”{{ config.DefinedPages.ProductList.Url }}” title=”{{ translations.Contact }}”>
<i class=”va-mid-ui header-categories-icon-ui ti-menu”></i>
<span class=”va-mid-ui line-height-1-ui”>{{translations.Categories}}</span>
</a>
</li>
<li class=”main-navigation-bar-links-ui”>
<ul>
{% assign manufacturersSize = manufacturer-brand.Manufacturers | Size -%}
{% if usr.Authenticated == true -%}
{% if settings.discountsPresentationInCustomerProfileInPromotionsTab == ‘yes’ and settings.promotions -%}
<li class=”no-on-mobile-ui” style=”order: {{settings.promotionsNo}};”>
<a href=”{{settings.promotionsLink}}”>
{% if settings.promotionsIcon != ” -%}
<i class=”va-mid-ui {{settings.promotionsIcon}} header-manufacturers-icon-ui header-categories-icon-ui”></i>
{% endif -%}
<span class=”va-mid-ui line-height-1-ui documents-ui”>
{% if settings.promotionsTranslation != ” -%}
{{ translations[settings.promotionsTranslation] }}
{% else -%}
{{ settings.promotionsLabel }}
{% endif -%}
</span>
</a>
</li>
{% endif -%}
{% if settings.documents -%}
<li class=”no-on-mobile-ui” style=”order: {{settings.documentsNo}};”>
<a href=”{{settings.documentsLink}}”>
{% if settings.documentsIcon != ” -%}
<i class=”va-mid-ui {{settings.documentsIcon}} header-manufacturers-icon-ui header-categories-icon-ui”></i>
{% endif -%}
<span class=”va-mid-ui line-height-1-ui documents-ui”>
{% if settings.documentsTranslation != ” -%}
{{ translations[settings.documentsTranslation] }}
{% else -%}
{{ settings.documentsLabel }}
{% endif -%}
</span>
</a>
</li>
{% endif -%}
{% assign manufacturers = settings.authenticatedManufacturers -%}
{% assign manufacturersNo = settings.authenticatedManufacturersNo -%}
{% assign manufacturersIcon = settings.authenticatedManufacturersIcon -%}
{% assign manufacturersLabel = settings.authenticatedManufacturersLabel -%}
{% assign manufacturersTranslation = settings.authenticatedManufacturersTranslation -%}
{% assign manufacturersLink = settings.authenticatedManufacturersLink -%}
{% assign searchAdvanced = settings.authenticatedSearchAdvanced -%}
{% assign searchAdvancedNo = settings.authenticatedSearchAdvancedNo -%}
{% assign searchAdvancedIcon = settings.authenticatedSearchAdvancedIcon -%}
{% assign searchAdvancedLabel = settings.authenticatedSearchAdvancedLabel -%}
{% assign searchAdvancedTranslation = settings.authenticatedSearchAdvancedTranslation -%}
{% assign searchAdvancedLink = settings.authenticatedSearchAdvancedLink -%}
{% assign cartImport = settings.authenticatedCartImport -%}
{% assign cartImportNo = settings.authenticatedCartImportNo -%}
{% assign cartImportIcon = settings.authenticatedCartImportIcon -%}
{% assign cartImportLabel = settings.authenticatedCartImportLabel -%}
{% assign cartImportTranslation = settings.authenticatedCartImportTranslation -%}
{% assign cartImportLink = settings.authenticatedCartImportLink -%}
{% assign downloadCSV = settings.authenticatedDownloadCSV -%}
{% assign downloadCSVNo = settings.authenticatedDownloadCSVNo -%}
{% assign downloadCSVIcon = settings.authenticatedDownloadCSVIcon -%}
{% assign downloadCSVLabel = settings.authenticatedDownloadCSVLabel -%}
{% assign downloadCSVTranslation = settings.authenticatedDownloadCSVTranslation -%}
{% assign downloadCSVLink = settings.authenticatedDownloadCSVLink -%}
{% assign customerLinks = settings.authenticatedCustomerLinks -%}
{% else -%}
{% assign manufacturers = settings.notAuthenticatedManufacturers -%}
{% assign manufacturersNo = settings.notAuthenticatedManufacturersNo -%}
{% assign manufacturersIcon = settings.notAuthenticatedManufacturersIcon -%}
{% assign manufacturersLabel = settings.notAuthenticatedManufacturersLabel -%}
{% assign manufacturersTranslation = settings.notAuthenticatedManufacturersTranslation -%}
{% assign manufacturersLink = settings.notAuthenticatedManufacturersLink -%}
{% assign searchAdvanced = settings.notAuthenticatedSearchAdvanced -%}
{% assign searchAdvancedNo = settings.notAuthenticatedSearchAdvancedNo -%}
{% assign searchAdvancedIcon = settings.notAuthenticatedSearchAdvancedIcon -%}
{% assign searchAdvancedLabel = settings.notAuthenticatedSearchAdvancedLabel -%}
{% assign searchAdvancedTranslation = settings.notAuthenticatedSearchAdvancedTranslation -%}
{% assign searchAdvancedLink = settings.notAuthenticatedSearchAdvancedLink -%}
{% assign cartImport = settings.notAuthenticatedCartImport -%}
{% assign cartImportNo = settings.notAuthenticatedCartImportNo -%}
{% assign cartImportIcon = settings.notAuthenticatedCartImportIcon -%}
{% assign cartImportLabel = settings.notAuthenticatedCartImportLabel -%}
{% assign cartImportTranslation = settings.notAuthenticatedCartImportTranslation -%}
{% assign downloadCSV = settings.notAuthenticatedDownloadCSV -%}
{% assign downloadCSVNo = settings.notAuthenticatedDownloadCSVNo -%}
{% assign downloadCSVIcon = settings.notAuthenticatedDownloadCSVIcon -%}
{% assign downloadCSVLabel = settings.notAuthenticatedDownloadCSVLabel -%}
{% assign downloadCSVTranslation = settings.notAuthenticatedDownloadCSVTranslation -%}
{% assign customerLinks = settings.notAuthenticatedCustomerLinks -%}
{% endif -%}
{% assign manufacturersSize = manufacturer-brand.Manufacturers | Size -%}
{% if manufacturers and manufacturersSize > 0 -%}
<li class=”{% if page.PageId == config.DefinedPages.Manufacturers.Id -%} active-bar-ui {% else -%} no-on-mobile-ui {% endif -%}” style=”order: {{manufacturersNo}};”>
{% if page.PageId == config.DefinedPages.Manufacturers.Id -%}
<span class=”block-ui page-label-ui”>
{% else -%}
<a href=”{{manufacturersLink}}”>
{% endif -%}
{% if manufacturersIcon != ” -%}
<i class=”va-mid-ui {{manufacturersIcon}} header-manufacturers-icon-ui”></i>
{% endif -%}
<span class=”va-mid-ui line-height-1-ui”>
{% if manufacturersTranslation != ” -%}
{{ translations[manufacturersTranslation] }}
{% else -%}
{{ manufacturersLabel }}
{% endif -%}
</span>
{% if page.PageId != 20 -%}
</a>
{% else -%}
</span>
{% endif -%}
</li>
{% endif -%}
{% if searchAdvanced -%}
<li class=”{% if config.DefinedPages.AdvancedSearch.Id == page.PageId -%} active-bar-ui {% else -%} no-on-mobile-ui {% endif -%}” style=”order: {{searchAdvancedNo}};”>
{% if config.DefinedPages.AdvancedSearch.Id == page.PageId -%}
<span class=”block-ui page-label-ui”>
{% else -%}
<a href=”{{searchAdvancedLink}}”>
{% endif -%}
{% if searchAdvancedIcon != ” -%}
<i class=”va-mid-ui {{searchAdvancedIcon}} header-manufacturers-icon-ui”></i>
{% endif -%}
<span class=”va-mid-ui line-height-1-ui”>
{% if searchAdvancedTranslation != ” -%}
{{ translations[searchAdvancedTranslation] }}
{% else -%}
{{ searchAdvancedLabel }}
{% endif -%}
</span>
{% if config.DefinedPages.AdvancedSearch.Id != page.PageId -%}
</a>
{% else -%}
</span>
{% endif -%}
</li>
{% endif -%}
{% if cartImport -%}
<li class=”no-on-mobile-ui” style=”order: {{cartImportNo}};”>
<label for=”file” class=”import-cart-lq import-cart-ui block-ui page-label-ui”>
{% if cartImportIcon != ” -%}
<i class=”{{cartImportIcon}} header-manufacturers-icon-ui”></i>
{% endif -%}
{% if cartImportTranslation != ” -%}
{{ translations[cartImportTranslation] }}
{% else -%}
{{ cartImportLabel }}
{% endif -%}
</label>
<input class=”import-cart-input-lq” id=”file” type=”file” name=”file” accept=”.csv” {% if settings.afterAddingToCart == 1 -%} data-redirect-url=”{{ page.BaseHref }}{{ config.DefinedPages.Order.Url }}” {% endif -%} />
{% if settings.afterAddingToCart == 3 -%}
<div class=”message-popup-background-ui after-importing-cart-popup-lq container-to-hide-lq hide-container-lq hidden-lq”>
{% include ‘product/after-adding-to-cart.html’ -%}
</div>
{% endif -%}
<div class=”importing-cart-succeed-lq message-popup-background-ui hidden-lq hide-lq container-to-hide-lq” data-url=”{{ page.BaseHref }}{{ config.DefinedPages.Order.Url }}”>
<div class=”message-popup-ui box-ui after-adding-to-cart-popup-ui after-importing-popup-container-lq”>
<div class=”box-ui product-added-to-cart-ui”>
<i class=”va-mid-ui ti-check”></i>
<span class=”va-mid-ui line-height-1-ui”>
{% if customer.Cart.EditedOrderId -%}
{{ translations.AddedToOrder }}
{% else -%}
{{ translations.AddedToCart }}
{% endif -%}
</span>
</div>
</div>
</div>
<div class=”during-ajax-modal-lq during-ajax-modal-ui hidden-lq”>
<div class=”loader-ui big-ui”></div>
</div>
</li>
{% endif -%}
{% if downloadCSV -%}
<li class=”no-on-mobile-ui” style=”order: {{downloadCSVNo}};”>
<a href=”usr/cart_importcsv_file.csv”>
{% if downloadCSVIcon != ” -%}
<i class=”{{downloadCSVIcon}} header-manufacturers-icon-ui”></i>
{% endif -%}
{% if downloadCSVTranslation != ” -%}
{{ translations[downloadCSVTranslation] }}
{% else -%}
{{ downloadCSVLabel }}
{% endif -%}
</a>
</li>
{% endif -%}
{% for customerLink in customerLinks -%}
{% if customerLink.available -%}
<li class=”no-on-mobile-ui” style=”order: {{customerLink.no}};”>
<a href=”{{customerLink.link}}”>
{% if customerLink.icon != ” -%}
<i class=”{{customerLink.icon}} header-manufacturers-icon-ui”></i>
{% endif -%}
{% if customerLink.translation != ” -%}
{{ translations[customerLink.translation] }}
{% else -%}
{{ customerLink.label }}
{% endif -%}
</a>
</li>
{% endif -%}
{% endfor -%}
</ul>
</li>
</ul>
</nav>
{% endif -%}

Anschließend fügen wir die Einstellungen in die Vorlage ein.
Dazu musst du das Suchwerkzeug in der Datei _settings.liquid verwenden und das erste Vorkommen des Ausdrucks {% else %} suchen. Danach fügst du den folgenden Code eine Zeile darüber ein:

{% assign general = “Ogólne” -%}
{% assign navigationBarSettings = “Ustawienia paska nawigacji na stronie głównej” -%}
{% assign notAuthenticatedInfo = “Lista elementów zawartych w pasku nawigacji dla klientów niezalogowanych” -%}
{% assign authenticatedInfo = “Lista elementów zawartych w pasku nawigacji dla klientów zalogowanych” -%}
{% assign available = “Dostępne” -%}
{% assign number = “Lp” -%}
{% assign icon = “Ikona” -%}
{% assign polishLabel = “Etykieta PL” -%}
{% assign translationId = “Id tłumaczenia” -%}
{% assign linkAction = “link/akcja” -%}
{% assign cartImport = “Import koszyka” -%}
{% assign cartImportInfo = “Opcja importu koszyka z pliku CSV” -%}
{% assign downloadCSV = “Pobierz przykładowy plik CSV” -%}
{% assign downloadCSVInfo = “Przykładowy plik CSV do importu koszyka” -%}
{% assign searchAdvanced = “Wyszukiwarka zaawansowana” -%}
{% assign promotions = “Promocje” -%}
{% assign documents = “Dokumenty” -%}
{% assign addLink = “Dodaj link” -%}
{% assign delete = “Usuń” -%}

In derselben Datei suchen wir das erste Vorkommen des Ausdrucks {% endcase %} und fügen den folgenden Code eine Zeile darüber ein:

{% assign general = “General” -%}
{% assign navigationBarSettings = “Homepage navigation bar settings” -%}
{% assign notAuthenticatedInfo = “List of elements in navigation bar for not authenticated customers” -%}
{% assign authenticatedInfo = “List of elements in navigation bar for authenticated customers” -%}
{% assign available = “Available” -%}
{% assign number = “No” -%}
{% assign icon = “Icon” -%}
{% assign polishLabel = “Label PL” -%}
{% assign translationId = “Translation Id” -%}
{% assign linkAction = “link/action” -%}
{% assign cartImport = “Cart import” -%}
{% assign cartImportInfo = “Cart import option from CSV file” -%}
{% assign downloadCSV = “Download sample CSV file” -%}
{% assign downloadCSVInfo = “Sample CSV file for cart import” -%}
{% assign searchAdvanced = “Search advanced” -%}
{% assign promotions = “Promotions” -%}
{% assign documents = “Documents” -%}
{% assign addLink = “Add link” -%}
{% assign delete = “Delete” -%}

Der nächste Schritt besteht darin, nach dem Ausdruck <script> zu suchen und den folgenden Code direkt darüber einzufügen:

<div id=”tab1Content”>
<fieldset>
<legend>{{notAuthenticatedInfo}}</legend>
<div>
<div class=”row”>
<div class=”cell available”>{{available}}</div>
<div class=”cell no”>{{number}}</div>
<div class=”cell”>{{icon}}</div>
<div class=”cell”>{{polishLabel}}</div>
<div class=”cell”>{{translationId}}</div>
<div class=”cell”>{{linkAction}}</div>
<div class=”cell delete”>{{delete}}</div>
</div>
<div class=”row”>
<div class=”cell available”><input type=”checkbox” name=”notAuthenticatedCartImport” {% if settings.notAuthenticatedCartImport -%} checked {% endif -%} /></div>
<div class=”cell no”><input type=”number” name=”notAuthenticatedCartImportNo” value=”{{ settings.notAuthenticatedCartImportNo }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedCartImportIcon” value=”{{ settings.notAuthenticatedCartImportIcon }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedCartImportLabel” value=”{{ settings.notAuthenticatedCartImportLabel }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedCartImportTranslation” value=”{{ settings.notAuthenticatedCartImportTranslation }}” /></div>
<div class=”cell”>{{cartImportInfo}}</div>
<div class=”cell delete”></div>
</div>
<div class=”row”>
<div class=”cell available”><input type=”checkbox” name=”notAuthenticatedDownloadCSV” {% if settings.notAuthenticatedDownloadCSV -%} checked {% endif -%} /></div>
<div class=”cell no”><input type=”number” name=”notAuthenticatedDownloadCSVNo” value=”{{ settings.notAuthenticatedDownloadCSVNo }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedDownloadCSVIcon” value=”{{ settings.notAuthenticatedDownloadCSVIcon }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedDownloadCSVLabel” value=”{{ settings.notAuthenticatedDownloadCSVLabel }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedDownloadCSVTranslation” value=”{{ settings.notAuthenticatedDownloadCSVTranslation }}” /></div>
<div class=”cell”>{{downloadCSVInfo}}</div>
<div class=”cell delete”></div>
</div>
<div class=”row”>
<div class=”cell available”><input type=”checkbox” name=”notAuthenticatedSearchAdvanced” {% if settings.notAuthenticatedSearchAdvanced -%} checked {% endif -%} /></div>
<div class=”cell no”><input type=”number” name=”notAuthenticatedSearchAdvancedNo” value=”{{ settings.notAuthenticatedSearchAdvancedNo }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedSearchAdvancedIcon” value=”{{ settings.notAuthenticatedSearchAdvancedIcon }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedSearchAdvancedLabel” value=”{{ settings.notAuthenticatedSearchAdvancedLabel }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedSearchAdvancedTranslation” value=”{{ settings.notAuthenticatedSearchAdvancedTranslation }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedSearchAdvancedLink” value=”{{ settings.notAuthenticatedSearchAdvancedLink }}” /></div>
<div class=”cell delete”></div>
</div>
{% for customerLink in settings.notAuthenticatedCustomerLinks -%}
<div class=”row notAuthenticatedCustomerLink” data-index=”{{forloop.index0}}”>
<div class=”cell available”><input type=”checkbox” name=”notAuthenticatedCustomerLink{{forloop.index0}}” {% if customerLink.available -%} checked {% endif -%} /></div>
<div class=”cell no”><input type=”number” name=”notAuthenticatedCustomerLinkNo{{forloop.index0}}” value=”{{ customerLink.no }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedCustomerLinkIcon{{forloop.index0}}” value=”{{ customerLink.icon }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedCustomerLinkLabel{{forloop.index0}}” value=”{{ customerLink.label }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedCustomerLinkTranslation{{forloop.index0}}” value=”{{ customerLink.translation }}” /></div>
<div class=”cell”><input type=”text” name=”notAuthenticatedCustomerLinkLink{{forloop.index0}}” value=”{{ customerLink.link }}” /></div>
<div class=”cell delete”><div class=”fa fa-trash”></div></div>
</div>
{% endfor -%}
</div>
<button class=”add-link”>{{addLink}}</button>
<input name=”customer-links” type=”hidden” value=”{{settings.notAuthenticatedCustomerLinks | Size }}” />
</fieldset>
<fieldset>
<legend>{{authenticatedInfo}}</legend>
<div>
<div class=”row”>
<div class=”cell available”>{{available}}</div>
<div class=”cell no”>{{number}}</div>
<div class=”cell”>{{icon}}</div>
<div class=”cell”>{{polishLabel}}</div>
<div class=”cell”>{{translationId}}</div>
<div class=”cell”>{{linkAction}}</div>
<div class=”cell delete”>{{delete}}</div>
</div>
<div class=”row”>
<div class=”cell available”><input type=”checkbox” name=”authenticatedCartImport” {% if settings.authenticatedCartImport -%} checked {% endif -%} /></div>
<div class=”cell no”><input type=”number” name=”authenticatedCartImportNo” value=”{{ settings.authenticatedCartImportNo }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedCartImportIcon” value=”{{ settings.authenticatedCartImportIcon }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedCartImportLabel” value=”{{ settings.authenticatedCartImportLabel }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedCartImportTranslation” value=”{{ settings.authenticatedCartImportTranslation }}” /></div>
<div class=”cell”>{{cartImportInfo}}</div>
<div class=”cell delete”></div>
</div>
<div class=”row”>
<div class=”cell available”><input type=”checkbox” name=”authenticatedDownloadCSV” {% if settings.authenticatedDownloadCSV -%} checked {% endif -%} /></div>
<div class=”cell no”><input type=”number” name=”authenticatedDownloadCSVNo” value=”{{ settings.authenticatedDownloadCSVNo }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedDownloadCSVIcon” value=”{{ settings.authenticatedDownloadCSVIcon }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedDownloadCSVLabel” value=”{{ settings.authenticatedDownloadCSVLabel }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedDownloadCSVTranslation” value=”{{ settings.authenticatedDownloadCSVTranslation }}” /></div>
<div class=”cell”>{{downloadCSVInfo}}</div>
<div class=”cell delete”></div>
</div>
<div class=”row”>
<div class=”cell available”><input type=”checkbox” name=”promotions” {% if settings.promotions -%} checked {% endif -%} /></div>
<div class=”cell no”><input type=”number” name=”promotionsNo” value=”{{ settings.promotionsNo }}” /></div>
<div class=”cell”><input type=”text” name=”promotionsIcon” value=”{{ settings.promotionsIcon }}” /></div>
<div class=”cell”><input type=”text” name=”promotionsLabel” value=”{{ settings.promotionsLabel }}” /></div>
<div class=”cell”><input type=”text” name=”promotionsTranslation” value=”{{ settings.promotionsTranslation }}” /></div>
<div class=”cell”><input type=”text” name=”promotionsLink” value=”{{ settings.promotionsLink }}” /></div>
<div class=”cell delete”></div>
</div>
<div class=”row”>
<div class=”cell available”><input type=”checkbox” name=”documents” {% if settings.documents -%} checked {% endif -%} /></div>
<div class=”cell no”><input type=”number” name=”documentsNo” value=”{{ settings.documentsNo }}” /></div>
<div class=”cell”><input type=”text” name=”documentsIcon” value=”{{ settings.documentsIcon }}” /></div>
<div class=”cell”><input type=”text” name=”documentsLabel” value=”{{ settings.documentsLabel }}” /></div>
<div class=”cell”><input type=”text” name=”documentsTranslation” value=”{{ settings.documentsTranslation }}” /></div>
<div class=”cell”><input type=”text” name=”documentsLink” value=”{{ settings.documentsLink }}” /></div>
<div class=”cell delete”></div>
</div>
<div class=”row”>
<div class=”cell available”><input type=”checkbox” name=”authenticatedSearchAdvanced” {% if settings.authenticatedSearchAdvanced -%} checked {% endif -%} /></div>
<div class=”cell no”><input type=”number” name=”authenticatedSearchAdvancedNo” value=”{{ settings.authenticatedSearchAdvancedNo }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedSearchAdvancedIcon” value=”{{ settings.authenticatedSearchAdvancedIcon }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedSearchAdvancedLabel” value=”{{ settings.authenticatedSearchAdvancedLabel }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedSearchAdvancedTranslation” value=”{{ settings.authenticatedSearchAdvancedTranslation }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedSearchAdvancedLink” value=”{{ settings.authenticatedSearchAdvancedLink }}” /></div>
<div class=”cell delete”></div>
</div>
{% for customerLink in settings.authenticatedCustomerLinks -%}
<div class=”row authenticatedCustomerLink” data-index=”{{forloop.index0}}”>
<div class=”cell available”><input type=”checkbox” name=”authenticatedCustomerLink{{forloop.index0}}” {% if customerLink.available -%} checked {% endif -%} /></div>
<div class=”cell no”><input type=”number” name=”authenticatedCustomerLinkNo{{forloop.index0}}” value=”{{ customerLink.no }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedCustomerLinkIcon{{forloop.index0}}” value=”{{ customerLink.icon }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedCustomerLinkLabel{{forloop.index0}}” value=”{{ customerLink.label }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedCustomerLinkTranslation{{forloop.index0}}” value=”{{ customerLink.translation }}” /></div>
<div class=”cell”><input type=”text” name=”authenticatedCustomerLinkLink{{forloop.index0}}” value=”{{ customerLink.link }}” /></div>
<div class=”cell delete”><div class=”fa fa-trash”></div></div>
</div>
{% endfor -%}
</div>
<button class=”add-link authenticated”>{{addLink}}</button>
<input name=”customer-links” type=”hidden” value=”{{settings.authenticatedCustomerLinks | Size }}” />
</fieldset>
</div>
</div>

Nachdem du die oben genannten Anweisungen ausgeführt hast, musst du nach dem Ausdruck </style> suchen und den folgenden Code direkt darüber einfügen:

#lg-settings-content #tab1Content fieldset {
width: calc(100% – 50px);
}
#lg-settings-content .row {
border-bottom: 1px solid #ddd;
}
#lg-settings-content .row:first-child {
border-top: 1px solid #ddd;
border-bottom: 2px solid #ddd;
font-weight: 700;
}
#lg-settings-content .row::after {
display: block;
clear: both;
content: ”;
}
#lg-settings-content .cell {
border-left: 1px solid #ddd;
display: inline-block;
vertical-align: middle;
width: calc((100% – 308px)/4);
min-height: 20px;
padding: 10px;
float: left;
}
#lg-settings-content .cell:last-child {
border-right: 1px solid #ddd;
}
#lg-settings-content .cell input {
width: 100%;
height: 20px;
}
#lg-settings-content .cell.available {
width: 70px;
}
#lg-settings-content .cell.available input {
display: block;
margin: 0;
cursor: pointer;
}
#lg-settings-content .cell.no {
width: 50px;
}
#lg-settings-content .cell.no input {
width: 40px;
height: 14px;
}
#lg-settings-content .cell.delete {
width: 40px;
text-align: center;
}
#lg-settings-content .cell.delete .fa {
cursor: pointer;
}
#lg-settings-content .yellow-box {
padding: 20px;
border: 1px solid #fec42f;
font-size: 14px;
font-weight: 400 !important;
position: relative;
}
#lg-settings-content .yellow-box:after {
content: ”;
width: 30px;
height: 30px;
position: absolute;
top: 10px;
right: 15px;
background: url(../../Content/Images/all/important.png) no-repeat;
}

Die letzte Änderung in der Datei wird das Hinzufügen des Codes direkt über dem gefundenen Ausdruck sein:
</script>:

$(‘#lg-settings-content’).on(‘click’, ‘.fa-trash’, function(e){
$(e.currentTarget).parents(‘.row’).remove();
});function addCustomerLinksArr(name, o){
var customerLinks = [];
$(‘#lg-settings-content .’+name).each(function(i,el) {
var index = $(this).data(‘index’);
var available = $(this).find(‘[name=’+name+index+’]’).prop(‘checked’);
var no = $(this).find(‘[name=’+name+’No’+index+’]’).val();
var icon = $(this).find(‘[name=’+name+’Icon’+index+’]’).val();
var label = $(this).find(‘[name=’+name+’Label’+index+’]’).val();
var translation = $(this).find(‘[name=’+name+’Translation’+index+’]’).val();
var link = $(this).find(‘[name=’+name+’Link’+index+’]’).val();
if(no &amp;&amp; (label || translation) &amp;&amp; link){
var obj = {available: available, no: no, icon: icon, label: label, translation: translation, link: link};
customerLinks.push(obj);
}
});
if(customerLinks.length &gt; 0){
o[name+’s’] = customerLinks;
}
}function __SaveLiquidSettings(){
var o = {};
$(‘#lg-settings-content input[name]’).each(function(i,el) {
if($(el).attr(‘type’) == ‘radio’ || $(el).attr(‘type’) == ‘checkbox’) {
if($(el).is(‘:checked’)) {
o[el.name] = el.value;
}
} else {
o[el.name] = el.value;
}
});
addCustomerLinksArr(‘authenticatedCustomerLink’, o);
addCustomerLinksArr(‘notAuthenticatedCustomerLink’, o);
return o;
}

Nun gehst du zur Datei scss/desktop2.scss und fügst am Ende den folgenden Code ein:

.main-navigation-bar-ui{
background: $bgColor;
.manufacturer-container-ui{
border-top: none;
border-bottom: none;
li{
margin-right: -1px;
border-bottom: 1px solid $lightBorderColor;
}
.categories-opened-ui{
vertical-align: bottom;
float: none;
display: inline-block;
margin-right: -5px;
border-top: 1px solid $lightBorderColor;
margin-bottom: 0px;
height: 68px;
}
.main-navigation-bar-links-ui{
width: calc(100% – 320px);
vertical-align: bottom;
background: $menuBackgroundColor;
float: none;
display: inline-block;
border-left: 1px solid $lightBorderColor;
border-top: 1px solid $lightBorderColor;
border-bottom: none;
border-right: none;
ul{
display: flex;
flex-wrap: wrap;
}
}
}
}

Gehe jetzt zum Admin-Panel. Wähle Webshop Layout ➞  Einstellungen und gehe zur Registerkarte Übersetzungen. Nachdem du auf die Schaltfläche Hinzufügen geklickt hast, gib die Übersetzungs-ID sowie den Text ein, der im Webshop angezeigt werden soll. Die Änderungen müssen mit der Schaltfläche Hinzufügen bestätigt werden.

  • ID: ShowProducts — Text: Produkte anzeigen
  • ID: ShowMore — Text: Mehr anzeigen

Der letzte Schritt ist das Hinzufügen eines neuen Elements zur Navigation. Gehe dazu zur Registerkarte Home page und dann zu den Einstellungen der Navigationsleiste auf der Startseite, wo du die Felder nach deinen Wünschen ausfüllst.

  • Etikett DE – der Name des Etiketts (zum Beispiel: ti-import)
  • Übersetzungs-ID – der Name, der auf dem Element angezeigt wird
  • Link/Aktion – der Link zur Seite

Czy ten artykuł był pomocny?

Wyślij opnie