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.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować
Uwaga
Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order
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 -%}
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 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 && (label || translation) && link){
var obj = {available: available, no: no, icon: icon, label: label, translation: translation, link: link};
customerLinks.push(obj);
}
});
if(customerLinks.length > 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;
}
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/ Ustawieniai 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