Ustawienia paska nawigacji w szablonie Szafir

Ustawienia paska nawigacji w szablonie Szafir

W tym artykule dowiesz się jak ustawić pasek nawigacji w swoim szablonie. Zmiany te pozwolą na dodanie m.in. przycisku importu koszyka i przycisku do pobrania przykładowego pliku CSV.

Pierwszym krokiem będzie zamiana treści w pliku common/navigation-bars/main-navigation-bar-partial.html. Ze względu na znaczną rozbudowę nie można wskazać konkretnych zmian, zatem udostępniamy cały kod, którym należy zastąpić kod obecny:
{% 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 -%}

<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 -%}

Następnie dodamy ustawienia do szablonu. W tym celu należy użyć narzędzia wyszukiwania w pliku _settings.liquid i wyszukać pierwsze wystąpienie frazy {% else %}, a następnie wkleić następujący kod linijkę wyżej:
{% 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ń" -%}
W tym sam pliku szukamy pierwszego wystąpienia frazy {% endcase %} i wklejamy następujący kod linijkę wyżej:
{% 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" -%}


Kolejnym krokiem jest wyszukanie frazy <script> oraz wklejenie bezpośrednio nad nią następującego kodu:

<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>


Po wykonaniu powyższych instrukcji należy wyszukać frazy </style> i wkleić następujący kod bezpośrednio nad wyszukaną linijką:

#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;
}
Ostatnią zmianą w pliku będzie dodanie kodu bezpośrednio nad wyszukaną frazą }
</script>:
$('#lg-settings-content').on('click', '.fa-trash', function(e){
$(e.currentTarget).parents('.row').remove();
});

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;
}
Następnie przechodzimy do pliku scss/desktop2.scss i na jego końcu wklejamy kod:
.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;
}
}
}
}
Teraz przejdź do Panelu Administratora. Wybierz Wygląd Sklepu/ Ustawienia i przejdź w zakładkę Tłumaczenia. Po kliknięciu w przycisk Dodaj należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał w e-Sklepie. Zmiany należy zatwierdzić przyciskiem Dodaj.

• Id: ShowProducts — Tekst: Pokaż produkty
• Id: ShowMore — Tekst: Pokaż więcej

Ostatnim krokiem jest dodanie nowego elementu do nawigacji. W tym celu przejdź w zakładkę Szablon, a następnie Ustawienia paska nawigacji na stronie głównej, gdzie należy uzupełnić pola według własnych upodobań.

• Etykieta PL – nazwa etykiety (na przykład: ti-import)
• Id tłumaczenia – nazwa jaka będzie widoczna na elemencie
• Link/Akcja – link do strony