W niniejszym artykule dowiesz się, w jaki sposób zmodyfikować pliki swojego szablonu tak, by obsługiwał on nowy nagłówek zawierajacy wielopoziomowe pionowe menu.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.
*treść*
UWAGA! Niektóre z instrukcji różnią się w zależności od obecnie posiadanego nagłówka (wariant 1 lub wariant 2), jednak wklejany kod w obu przypadkach będzie identyczny. Uważnie czytaj, czy dana instrukcja odnosi się do obecnie posiadanego przez Ciebie nagłówka!
Dla uproszczenia, nowy wariant nagłówka będzie w niniejszym artykule nazywany „trzecim wariantem nagłówka”.
1. Plik HTML
Zaczynamy od usunięcia kodu HTML z obecnym nagłówkiem. W tym celu otwórz katalog elements/header i usuń plik o nazwie header-1.html (jeśli posiadasz drugi wariant nagłówka, plik nazywa się header-2.html). W tym samym katalogu utwórz nowy plik o nazwie header-3.html i wklej do niego następujący kod:
{% assign categories = page.GroupNodes %}
{% assign lngCount = config.Languages | Size -%}
{% assign currentLang = config.Languages[page.LanguageId] -%}
{% assign header3 = true -%}
{% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: ”, logoAlt}}
{% if customer.Authenticated == true -%} {% endif -%}
{{ translations.Crt_YourCart }} {{customer.Cart.Value | ToPrice}} {{customer.Currency}}
{{translations.Com_Categories}}
{% assign j = 0 -%} {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% assign j = j | Plus: 1 -%} {% if categoriesSize > 0 -%}
{% endif -%} {% endfor -%}
{{translations.Hea_Pages}}
{% if config.Shop.Contact.PhoneNo != ” -%}
{% endif -%} {% if config.Shop.Contact.Email != ” -%}
{% endif -%}
{{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}
{% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}’ -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%}
{% endif -%} {% endif -%} {% endfor -%}
2. Pliki CSS
Następnie trzeba podmienić kod w plikach css.
NAGŁÓWEK 1: Najpierw otwórz plik css/layout0.css, wyszukaj w nim blok kodu, który zaczyna się od „.headerSection{color:{{settings.headerFontColor}};” a kończy na „.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}”. Ten blok kodu należy skasować i w jego miejsce wkleić poniższy:
NAGŁÓWEK 2: Najpierw otwórz plik css/layout0.css, wyszukaj w nim blok kodu, który zaczyna się od „.headerBackground{width:100%;background-color:{{settings.headerBgColor}};” a kończy na „.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}”. Ten blok kodu należy skasować i w jego miejsce wkleić poniższy:
.headerBg{background-color:{{settings.headerBgColor}};width:100%}.headerSection__background{height:100px;position:absolute;top:0;background-color:{{settings.headerBgColor}}}.headerSticky{position:sticky;top:0;width:100%;margin:0 auto;background-color:{{settings.headerBgColor}};z-index:100}.header__page-padding{width:94vw}.wideLogo{margin-left:38% !important}.wideLogoLogin{margin-left:38% !important}.headerSection{user-select:none;color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;max-width:1400px;margin:0 auto;padding:0;height:70px;box-sizing:border-box;position:relative;z-index:13}.headerSection__row{display:block;width:100%;max-width:1400px;margin:0 auto;height:100px;padding:10px 0 29px;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative}.headerSection__logo{height:36px;width:auto;text-align:left;z-index:1;display:inline-flex;max-width:100px;float:left;margin-top:20px;align-items:center;justify-content:center}.headerSection__logo img,.headerSection__logo svg{max-height:36px;width:auto;max-width:100px}.headerSection__searchForm{background-color:{{settings.headerBgColor}};width:30%;padding:20px 5px 12px;margin:0 40px 0 42%;overflow:hidden;display:inline-block;text-align:left;border-bottom:1px solid {{settings.secondaryFontColor}};position:relative}.headerSection__searchForm input{width:90%;color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}}}.headerSection__searchForm input:focus{color:{{settings.headerFontColor}}}.headerSection__searchForm__btn{width:20px;height:20px;position:absolute;right:8px;top:25px;background-color:{{settings.headerBgColor}};border:none;outline:none}.headerSection__searchForm__btn svg{width:20px;height:20px;position:absolute;fill:{{settings.secondaryFontColor}};top:0;left:0;outline:none}.headerSection__searchForm__btn svg:hover{cursor:pointer;fill:{{settings.linkFontColor}}}.headerSection__icons{width:auto;background-color:{{settings.headerBgColor}};padding:20px 0 5px;margin:0 0 5px auto;overflow:hidden;display:inline-block;position:absolute;right:0;text-align:right}.headerSection__icons__icon{margin:0 10px;position:relative}.headerSection__icons__icon svg{fill:{{settings.secondaryFontColor}};width:25px;height:25px;outline:none}.headerSection__icons__icon svg:hover{cursor:pointer;transition:200ms;fill:{{settings.linkFontColor}}}.headerSection__icons__icon .itemsCounter{border-radius:50%;width:15px;height:15px;text-align:center;font-size:9px;position:absolute;z-index:2;bottom:0;right:0;background-color:{{settings.linkFontColor}};color:#ffffff}.headerSection__icons .cartInfo{margin-left:10px;display:inline-block;font-size:12px;text-align:right}.headerSection__icons .cartInfo__info{color:{{settings.secondaryFontColor}};display:block}.headerSection__icons .cartInfo__value{color:{{settings.linkFontColor}};display:block;font-weight:600}.headerSection__secondRow{display:flex;justify-content:space-between;flex-direction:row}.headerSection__pages{color:{{settings.headerFontColor}};display:inline-flex;text-transform:uppercase;width:50%}.headerSection__pages__categories{flex:20%;text-align:left;margin-top:1px}.headerSection__pages__categories .showCategories:hover{cursor:pointer}.headerSection__pages__categories .showCategories svg{fill:{{settings.linkFontColor}};transform:rotate(90deg);position:relative;top:3px}.headerSection__pages__categories .categoryMenu{display:block;background-color:{{settings.headerBgColor}};position:absolute;top:60px;width:21.5%;left:-20px;max-height:543px;overflow-y:auto}.headerSection__pages__categories .categoryMenu__categories ul{list-style-type:none;padding-left:20px;margin-block-start:0}.headerSection__pages__categories .categoryMenu__categories ul .compactList{padding-top:5px !important;padding-bottom:5px !important}.headerSection__pages__categories .categoryMenu__categories ul li{padding-bottom:15px;padding-top:15px;display:block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category{text-align:left;font-size:15px;color:{{settings.secondaryFontColor}};position:relative;text-transform:none;display:block}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category:first-letter{text-transform:capitalize !important}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category:hover{color:{{settings.linkFontColor}}}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category div{display:block;max-width:80%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category svg{width:20px;height:20px;fill:{{settings.linkFontColor}};padding-right:20px;position:absolute;right:0px;top:2px}.headerSection__pages__categories .categoryMenu__categories ul .last{border:none !important}.headerSection__pages__categories .categoryMenu__allCategories{text-transform:none;width:70%;background-color:{{settings.headerBgColor}};display:flex;left:20%;top:60px;position:absolute;top:60px;padding:35px 25px 25px;justify-content:flex-start;flex-wrap:wrap;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer{display:block;flex:0 1 25%}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .undercategory{font-weight:600;font-size:14px;display:block;text-align:left;padding:20px 0 10px;color:{{settings.headerFontColor}}}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .undercategory:first-letter{text-transform:capitalize !important}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .underundercategory{font-size:12px;padding:10px 0;color:{{settings.secondaryFontColor}};text-align:left;display:block;padding:5px 0}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .underundercategory:first-letter{text-transform:capitalize !important}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .underundercategory:hover{color:{{settings.linkFontColor}}}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton{flex:100%;display:block;font-size:14px;padding:30px 0 10px;text-align:center;color:{{settings.linkFontColor}}}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton:hover{cursor:pointer}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton .text{position:relative}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton .text svg{fill:{{settings.linkFontColor}};position:absolute;top:-1px;padding-left:5px}.headerSection__pages__other{flex:20%;text-align:right}.headerSection__pages__other span:hover,.headerSection__pages__other a:hover{cursor:pointer;color:{{settings.linkFontColor}}}.headerSection__pages__other svg{fill:{{settings.linkFontColor}};transform:rotate(90deg);position:relative;top:3px}.headerSection__pages__other .otherPages{display:none;text-transform:none;width:auto;background-color:{{settings.headerBgColor}};left:20%;position:absolute;top:60px;padding:10px 35px;justify-content:flex-start;flex-wrap:wrap;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection__pages__other .otherPages ul{padding:0}.headerSection__pages__other .otherPages ul li{font-size:14px;color:{{settings.secondaryFontColor}};text-align:left;list-style-type:none;padding:10px}.headerSection__pages__other .otherPages ul li:hover{color:{{settings.linkFontColor}};cursor:pointer}.headerSection__contact{display:inline-flex;width:30%;justify-content:flex-end}.headerSection__contact__details{margin-left:20px;cursor:pointer}.headerSection__contact__details svg{fill:{{settings.linkFontColor}};width:13px;height:13px}.headerSection__contact__details .rotateSvg{transform:rotate(100deg)}.headerSection__contact__details .contactDetails{color:{{settings.secondaryFontColor}};font-size:12px;margin-left:5px}.headerSection__contact__details .languages{text-transform:uppercase}.headerSection__contact .languageAndCurrencyChange{display:none}.headerSection__contact .languageAndCurrencyChange .languageAndCurrencyChangeMenu{display:flex;position:absolute;box-sizing:border-box;width:225px;background-color:#FFFFFF;border-radius:5px;top:35px;right:-2px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase;z-index:2;padding:10px 0}.headerSection__contact .languageAndCurrencyChange .menu{width:50%}.headerSection__contact .languageAndCurrencyChange .menu .title{color:{{settings.secondaryFontColor}};font-weight:500;font-size:12px;display:inline-block;width:100%;margin:10px 0 5px;opacity:.5;text-align:center}.headerSection__contact .languageAndCurrencyChange .menu .lang,.headerSection__contact .languageAndCurrencyChange .menu .currency{text-align:left;padding-bottom:5px;font-size:14px}.headerSection__contact .languageAndCurrencyChange .menu .lang label,.headerSection__contact .languageAndCurrencyChange .menu .currency label{color:{{settings.secondaryFontColor}}}.headerSection__contact .languageAndCurrencyChange .menu .lang{padding-left:30px}.headerSection__contact .languageAndCurrencyChange .menu .currency{padding-left:20px}.headerSection .openCloseCategoryMenu:hover{cursor:pointer;color:{{settings.linkFontColor}}}@media screen and (max-width: 1600px){.headerSection{padding-left:3%;padding-right:3%}.categoryMenu{max-height:505px !important}}.frozenHeaderCategories{position:absolute;display:inline-block;top:35px;margin-left:40px;text-transform:uppercase}.frozenHeaderCategories .categoriesButton{color:{{settings.headerFontColor}}}.frozenHeaderCategories .categoryMenu{top:100px !important;left:5.5% !important;position:fixed !important}.frozenHeaderCategories .categoryMenu__allCategories{position:fixed;top:100px !important;left:26% !important;width:64% !important}.menuBanner{margin:0 auto;background-color:#f2f2f2;height:auto}.menuBanner__list{width:100%;height:100%}.menuBanner__wrapper{width:100%;display:flex;justify-content:center;padding:0;margin:0;box-sizing:border-box;position:relative}.menuBanner a{position:absolute;bottom:8%;left:10%;text-decoration:none;width:230px;box-sizing:border-box;padding:16px}.menuBanner figure{margin:0}.menuBanner__image img{box-sizing:border-box;padding:0;margin:0;object-fit:cover;min-height:170px;max-width:100%;width:100%;object-position:50% 50%}.menuBanner__image img[src="css/img/alo.gif"]{width:100% !important;height:100% !important}.menuBanner__image_placeholder img{object-fit:contain;background-color:#f2f2f2;max-height:680px}.menuBanner__info{position:absolute;left:10%;bottom:33%;width:80%}.menuBanner__title{margin:0;padding:0;font-weight:300;color:{{settings.bannerFontColor}};display:block;font-size:48px}.menuBanner__title.menuBanner__title__small{line-height:1.5;font-size:14px;margin-top:10px}.menuBanner__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0}.menuBanner__size{position:absolute;font-size:30px;color:#808080;text-align:center;top:50%;left:50%;transform:translate(-50%, -50%);margin:0}.menuBanner .slick-track{height:100%}.menuBanner .slick-arrow{background-color:{{settings.sliderBgColor}};padding:20px}.menuBanner .slick-arrow:hover{background-color:{{settings.sliderHoverBgColor}}}.menuBanner .slick-arrow:before{color:white;position:absolute;right:0;left:10px;top:47%;transform:translateY(-50%);font-size:20px}@media only screen and (max-width: 599px){.menuBanner .slick-arrow:before{font-size:15px}}.menuBanner .slick-prev,.menuBanner .slick-next{font-size:0;line-height:0;position:absolute;top:51%;display:block;width:30px;height:155px;padding:0;-webkit-transform:translate(0, -50%);-ms-transform:translate(0, -50%);transform:translate(0, -50%);cursor:pointer;border:none;outline:none;background-color:{{settings.sliderBgColor}};opacity:.6;z-index:8}.menuBanner .slick-prev :hover,.menuBanner .slick-next :hover{background-color:{{settings.sliderHoverBgColor}}}.menuBanner .slick-list{padding:0 !important;height:100%}.menuBanner .slick-prev:hover,.menuBanner .slick-next:hover{outline:none}.menuBanner .slick-prev.slick-disabled:before,.menuBanner .slick-next.slick-disabled:before,.menuBanner .slick-prev.slick-disabled,.menuBanner .slick-next.slick-disabled{outline:none;display:none}.menuBanner .slick-prev:before,.menuBanner .slick-next:before{color:{{settings.sliderArrowColor}};fill:{{settings.sliderArrowColor}};opacity:.8}.menuBanner .slick-prev{left:0;border-radius:0 25px 25px 0}.menuBanner [dir='rtl'] .slick-prev{right:0;left:auto}.menuBanner .slick-next{right:0;border-radius:25px 0 0 25px}.menuBanner .slick-arrow.slick-next:before{left:3px}.menuBanner [dir='rtl'] .slick-next:before,.menuBanner .slick-prev:before{border:solid {{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.menuBanner .slick-next:before,.menuBanner [dir='rtl'] .slick-prev:before{border:solid {{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.menuBanner .slick-prev:before,.menuBanner .slick-next:before{width:4px;height:4px;content:" "}.menuBanner [dir='rtl'] .slick-next{right:auto;left:0}.menuBanner [dir='rtl'] .slick-next:before,.menuBanner .slick-prev:before,.menuBanner .slick-next:before,.menuBanner [dir='rtl'] .slick-prev:before{width:10px;height:10px}.menuBanner .slick-arrow:hover:before{border-color:{{settings.sliderHoverArrowColor}}}@media screen and (max-width: 480px){.menuBanner .menuBanner__info{bottom:55%}.menuBanner .menuBanner__title{font-size:20px}}.headerSection__bannerBg{width:100%;height:fit-content;background-color:{{settings.headerBgColor}} !important;margin-top:0 !important}.headerSection__banner{display:block;width:100%;margin:0 auto;height:fit-content;max-width:1400px;margin:0 auto;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative;background-color:{{settings.headerBgColor}}}.headerSection__banner .menuBanner{background-color:{{settings.headerBgColor}} !important}.headerSection__banner .menuBanner__wrapper{height:fit-content;width:79.9% !important;float:right;margin-left:auto;margin-right:0}.headerSection__banner .menuBanner__wrapper .imageLink{left:inherit;bottom:inherit;width:inherit;box-sizing:inherit;padding:inherit;display:contents;position:relative}.headerSection__banner .menuBanner__image_placeholder img{max-height:534px !important}@media screen and (max-width: 1600px){.headerSection__banner{padding-left:3%;padding-right:3%}.header__page-padding{padding-left:3%;padding-right:3%}}.searchForm__loader-js{top:25px !important}.searchForm__searchAutocomplete{background-color:{{settings.headerBgColor}};display:block;margin:0 auto;padding:20px 0;top:30px;position:relative;box-sizing:border-box}.searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;margin:0 auto;max-width:436px;width:100%;border-bottom:1px solid #f2f2f2;padding:15px 0;font-size:12px}.searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.configMessages__header{min-height:67px !important}.message-popup-background{margin-top:0 !important}
NAGŁÓWEK 1: W tym samym katalogu otwieramy plik layout-m0.css. Wyszukujemy w nim blok kodu zaczynający się od „@media only screen and (max-width: 767px){.headerSection{height:60px}.headerSection .headerSection__mainMenu__closeBtn{display:block}”. Usuwamy go, i w jego miejsce wklejamy poniższy:
NAGŁÓWEK 2: W tym samym katalogu otwieramy plik layout-m0.css. Wyszukujemy w nim blok kodu zaczynający się od „@media only screen and (max-width: 768px){.headerSection{height:60px}.headerSection .header__icon”. Usuwamy go, i w jego miejsce wklejamy poniższy:
@media screen and (max-width: 768px){.headerSection{height:100px}.headerSection__logo{margin-top:0 !important}.headerSticky{position:inherit !important;width:100%;z-index:10;height:75px}.headerSticky .header__page-padding{padding-left:3%;padding-right:3%}.headerThirdType{display:none}.hideOnMobile{display:none}.headerSection__secondRow{display:none}.headerSection__icons{display:none}.opensearchMenu{display:block;position:absolute;right:15px;top:20px}.wideLogo{margin-left:0 !important}.searchFormMobileContainer{display:none;width:calc(100vw - 40px);height:100vh;background-color:{{settings.primaryPageBgColor}};z-index:100;position:fixed;padding:40px 20px;top:0;left:0;margin:0 !important}.searchFormMobileContainer svg{fill:{{settings.linkFontColor}};position:absolute}.searchFormMobileContainer .headerSection__searchForm__phrase{background-color:{{settings.headerBgColor}};width:100%;padding-bottom:10px;margin:50px auto 0;overflow:hidden;display:inline-block;text-align:left;border-bottom:1px solid {{settings.secondaryFontColor}};position:relative}.searchFormMobileContainer .headerSection__searchForm__btn{position:absolute;top:90px;right:25px}.mobileCategories{display:none;text-transform:uppercase;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:{{settings.headerBgColor}};z-index:10;font-size:14px}.mobileCategories .rotate{transform:rotate(-90deg) !important}.mobileCategories__menu{padding:20px;color:{{settings.secondaryFontColor}}}.mobileCategories__menu ul{padding:0}.mobileCategories__menu .closeCategoryMenu{fill:{{settings.linkFontColor}};cursor:pointer}.mobileCategories__menu .categoryMobile{width:100%;display:block;position:relative}.mobileCategories__menu .categoryMobile .category .langAndCurrencyIcon{fill:{{settings.linkFontColor}};width:14px;height:14px;display:inline-block;position:inherit;margin-right:10px}.mobileCategories__menu .categoryMobile .category .categoryTitle{width:100%;display:block;padding:10px 0;border-bottom:2px solid {{settings.borderColor}}}.mobileCategories__menu .categoryMobile .category svg{position:absolute;top:13px;right:10px;transform:rotate(90deg);fill:{{settings.linkFontColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile{display:none}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile{display:block;position:relative}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .undercategoryMobile{display:block;padding:10px 0;border-bottom:2px solid {{settings.borderColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .underunderCategoryContainerMobile{display:none}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .underundercategoryMobile{display:block;padding:10px 0;border-bottom:2px solid {{settings.borderColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .underundercategoryMobile svg{position:absolute;top:13px;right:10px;transform:rotate(90deg);fill:{{settings.linkFontColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange{position:relative}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange svg{display:none}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .languageAndCurrencyChangeMenu{display:flex;box-sizing:border-box;width:60%;text-transform:uppercase;padding:10px 0;margin:0 auto}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu{width:50%}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .title{color:{{settings.secondaryFontColor}};font-weight:500;font-size:12px;display:inline-block;width:100%;margin:10px 0 5px;opacity:.5;text-align:left;padding-left:20px}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .lang,.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .currency{text-align:left;padding-bottom:5px;font-size:14px}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .lang label,.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .currency label{color:{{settings.secondaryFontColor}}}.mobileCategories__menu .categoryMobile .category>div,.mobileCategories__menu .categoryMobile .category svg{display:inline}.mobileCategories__menu ul li{list-style-type:none}.searchForm__searchAutocomplete{box-shadow:none;z-index:101}.searchForm__searchAutocomplete .searchAutocomplete__product{max-width:none;width:100%}.searchForm__loader-js{top:70px !important;right:0 !important;left:0 !important;margin:0 auto !important;transform:none !important}}.menuBanner__title{font-size:28px}.menuBanner__title.menuBanner__title__small{font-size:13px}.menuBanner__info{bottom:unset;top:80px}@media screen and (max-width: 480px){.menuBanner__image{width:100%;height:300px;object-fit:cover;object-position:center}}@media screen and (max-width: 1390px){.headerSection__banner .menuBanner__wrapper{width:100% !important}}@media screen and (max-width: 768px){.mobileCategories{overflow-y:scroll}.mobileCategories .mobileCategories__menu ul{padding-bottom:80px}}
NAGŁÓWEK 1:Dalej, w tym samym katalogu otwieramy plik layout-d0.css. Wyszukujemy w nim linię zaczynającą się od „@media screen and (min-width: 769px){.headerSection .headerSection__navigation{top:32px;left:-5px}”. Usuwamy całą linię a w jej miejsce wklejamy poniższy kod:
NAGŁÓWEK 2:Dalej, w tym samym katalogu otwieramy plik layout-d0.css. Wyszukujemy w nim linię zaczynającą się od „@media screen and (min-width: 790px){.headerSection .mainNavigation__links”. Usuwamy całą linię a w jej miejsce wklejamy poniższy kod:
@media screen and (min-width: 769px){.searchFormMobileContainer{display:none}.mobileCategories{display:none}.opensearchMenu{display:none}}@media screen and (max-width: 1280px){.headerSection__icons{width:auto !important}.categoryMenu__allCategories{left:auto !important;right:0;width:75% !important}.categoryMenu__allCategories .undercategoryContainer{flex:0 1 33% !important}}@media screen and (min-width: 769px) and (max-width: 1070px){.categoryMenu{width:40% !important}.hideOnMobile{display:none}}@media screen and (min-width: 769px) and (max-width: 1350px){.headerSection__contact{width:50%;margin-left:10px}}@media screen and (min-width: 769px) and (max-width: 1280px){.headerSection__searchForm{margin-left:20%;width:35%}.wideLogo{margin-left:18% !important}.wideLogoLogin{margin-left:12% !important}}@media screen and (max-width: 950px){.headerSection__pages__categories{flex:26% !important}}@media screen and (max-width: 850px){.headerSection__contact__details{margin-left:10px}}@media screen and (max-width: 1390px){.categoryMenu{left:0 !important}}@media screen and (min-width: 768px) and (max-width: 1000px){.frozenHeaderCategories{margin-left:20px !important}}@media screen and (max-width: 1390px){.headerSection__banner .menuBanner__wrapper{width:100% !important}}
3. Podpięcie pliku z nowym nagłówkiem
Kolejnym krokiem jest umożliwienie wyświetlania naszego nowego nagłówka. W tym celu, w głównym katalogu otwieramy plik _layout.html. Linię o treści „{% include 'elements/header/header-1.html’ -%}” podmieniamy na „{% include 'elements/header/header-3.html’ -%}„.
NAGŁÓWEK 2: W przypadku drugiego nagłówka, linia ta brzmi: „{% include 'elements/header/header-2.html’ -%}”.
4. Zmiany w plikach JS
Następnie musimy podmienić kod w plikach js. W tym celu otwieramy plik js/layout0.js a w nim wyszukujemy linię „var headerFunctions = {„. Musimy usunąć cały blok kodu. Ostatnią linią w tym bloku jest „};”. Żeby łatwiej było zlokalizować cały kod do usunięcia, następna linia po ostatniej skasowanej powinna wyglądać tak: „ui.showFooterSection = function() {„. W miejsce usuniętego bloku kodu, wklejamy poniższy:
"
var headerFunctions = {
init: function () {
headerFunctions.events();
headerFunctions.setBreadcrumbsMargin();
headerFunctions.frozenHeaderCategories();
},
// Function that sets the menu position according to the width of the logo
setMenuPosition: function() {
var logo = $('img[src="logo.png"]');
var logoWidth = logo.width();
if(logoWidth > 120) {
logo.parent().addClass('longLogo');
$('.headerSection__mainMenu__navLinks').addClass('longLogo');
$('.headerSection__iconsMenu').addClass('longLogo');
}
},
events: function () {
var pageHeaderTop = $('.headerSticky');
var pageHeader = $('.headerSection');
var mobileCategories = $('.mobileCategories');
var pageId = $('body').find('input[name="pageId"]').attr('value');
let mobileLang = false;
pageHeader.on('click', '.openLanguageAndCurencyMenu-js', function(e) {
$('.languageAndCurrencyChange').toggle(200);
$(this).toggleClass('activeButton-js');
});
pageHeader.on('change', '.customerLanguageChange-js', function(e) {
if($(this).is(':checked')) {app.customerLanguageChange(e)}
});
pageHeader.on('change', '.customerCurrencyChange-js', function(e) {
if($(this).is(':checked')) {app.customerCurrencyChange(e)}
});
pageHeader.on('click', '.openCloseCategoryMenu .categoriesButton', function(e) {
if(pageId != 1 && pageId != 22) {
$('.categoryMenu-js').toggleClass('hidden');
if($('.categoryMenu-js').hasClass('hidden')) {
$('.categoryMenu__allCategories').css('display', 'flex');
$('.categoryMenu__allCategories').addClass('hidden');
}
} else {
if($(window).width() < 1391) { if($('.categoryMenu-js').hasClass('hidden')) { $('.categoryMenu-js').removeClass('hidden'); } else { $('.categoryMenu__allCategories').css('display', 'flex'); $('.categoryMenu__allCategories').addClass('hidden'); $('.categoryMenu-js').addClass('hidden'); } } } }); pageHeader.on('click', '.categoriesButton', function(e) { if (($(window).width() > 1390) && (!($('.categoryMenu__categories').hasClass('hidden')))){
$('.categoryMenu__allCategories').css('display', 'flex');
$('.categoryMenu__allCategories').addClass('hidden');
}
});
pageHeader.on('mouseover', '.categoryMenu__categories ul li', function(e) {
var categoryId = $(this).find('input[name="categoryId"]').attr('value');
var undercategory = $('input[name="undercategoryId"]');
undercategory.each(function() {
if($(this).attr('value') == categoryId) {
$(this).next().removeClass('hidden');
} else {
$(this).next().addClass('hidden');
}
})
});
pageHeader.on('click', '.otherPages-js', function(e) {
$('.otherPages').toggle(200);
});
pageHeaderTop.on('click', '.opensearchMenu-js', function(e) {
$('.headerSection__searchForm').addClass('searchFormMobileContainer');
$('.closesearchMenu-js').removeClass('hidden');
$('.searchFormMobileContainer').toggle(200);
if($(window).width() <= 768) {
preventScrolling();
$('.go-to-top__btn-js').addClass('hidden');
}
});
pageHeaderTop.on('click', '.closesearchMenu-js', function(e) {
$.when($('.searchFormMobileContainer').toggle(200)).done(function() {
$('.headerSection__searchForm').removeClass('searchFormMobileContainer');
$('.closesearchMenu-js').addClass('hidden');
});
if($(window).width() <= 768) { $('body').toggleClass('noscroll'); $('.go-to-top__btn-js').removeClass('hidden'); } }); mobileCategories.on('click', '.closeCategoryMenu-js', function(e) { $.when($('.mobileCategories').toggle(200)).done(function() { $('.mobileCategories').toggleClass('hidden'); }); $('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons'); $('.menuButton').toggleClass('menuActive'); if($('.headerSection').css('z-index') == 0) { $('.headerSection').css('z-index', 13); } else { $('.headerSection').css('z-index', 0); } }); mobileCategories.on('click', '.openUnderCategory-js', function(e) { var submenu = $(this).parent().find($('.undercategoryContainerMobile')); if($(this).hasClass('mobileLang') && mobileLang == false) { mobileLang = true; $('.languageAndCurrencyChange').clone().appendTo('.mobileLangContainer'); } $(this).toggleClass('rotate'); submenu.toggle(200); }); mobileCategories.on('click', '.openUnderUnderCategory-js', function(e) { var subsubmenu = $(this).parent().find($('.underundercategoryContainerMobile')); $(this).toggleClass('rotate'); subsubmenu.toggle(200); }); mobileCategories.scroll(function() { if($(this).length) { if(!($(this).hasClass('hidden'))) { if ($(this).scrollTop() > 10) {
$('.go-to-top__btn-js').fadeIn();
} else {
$('.go-to-top__btn-js').fadeOut();
}
}
}
});
$(window).ready(function(e) {
$('html, body').animate({scrollTop : 0},10);
});
$(window).on('scroll', function(e) {
if($(this).scrollTop() > 0 ) {
$('.headerSticky').css('box-shadow', '2px 1px 4px 0 #b0b0b0');
} else {
$('.headerSticky').css('box-shadow', 'none');
}
});
$(window).on('load', function(e) {
var logoWidth = parseInt($('.headerSection__logo img').css('width'));
var isCustomerLogged = $('body').find('input[name="isAuthenticatedCustomer"]').attr('value');
if(logoWidth > 36) {
if(isCustomerLogged == 1) {
$('.headerSection__searchForm').addClass('wideLogoLogin');
} else {
$('.headerSection__searchForm').addClass('wideLogo');
}
}
if($(window).width() <= 768) { $('.headerSection__searchForm').addClass('searchFormMobileContainer'); $('.closesearchMenu-js').removeClass('hidden'); } else { $('.headerSection__searchForm').removeClass('searchFormMobileContainer'); $('.closesearchMenu-js').addClass('hidden'); if($(window).width() > 768 && $(window).width() <= 1390) {
$('.categoryMenu-js').addClass('hidden');
$('.headerSection__pages__categories').addClass('openCloseCategoryMenu');
} else {
if(pageId == 1 || pageId == 22) {
$('.categoryMenu-js').removeClass('hidden');
} else {
$('.categoryMenu-js').addClass('hidden');
$('.headerSection__pages__categories').addClass('openCloseCategoryMenu');
}
}
}
});
$(window).on('resize', function(e) {
if($(window).width() <= 768) { $('.headerSection__searchForm').addClass('searchFormMobileContainer'); $('.closesearchMenu-js').removeClass('hidden'); $('.headerSection__searchForm').css('display', 'none'); $('body').removeClass('noscroll'); } else { $('.headerSection__searchForm').removeClass('searchFormMobileContainer'); $('.closesearchMenu-js').addClass('hidden'); $('.headerSection__searchForm').css('display', 'inline-block'); $('.categoryMenu__allCategories').addClass('hidden'); if($(window).width() > 768 && $(window).width() <= 1390) { if(!($('.mobileCategories').hasClass('hidden'))) { $('.mobileCategories').toggle(200); $('.mobileCategories').addClass('hidden'); $('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons'); $('.menuButton').toggleClass('menuActive'); if($('.headerSection').css('z-index') == 0) { $('.headerSection').css('z-index', 13); } else { $('.headerSection').css('z-index', 0); } } $('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); $('.categoryMenu-js').addClass('hidden'); $('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); } else { if(pageId == 1 || pageId == 22) { $('.categoryMenu-js').removeClass('hidden'); } else { $('.categoryMenu-js').addClass('hidden'); $('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); } } } }); $('.menuBanner').slick({ lazyLoad: 'progressive', infinite: true, slidesToShow: 1, slidesToScroll: 1, draggable: false, autoplay: true, autoplaySpeed: 8000 }); var isCategoriesClonned = false; $(window).on('scroll', function(e) { if ($(window).scrollTop() > 70 && isCategoriesClonned == false){
isCategoriesClonned = true;
$('.headerSection__pages__categories').clone().appendTo('.frozenHeaderCategories');
$('.frozenHeaderCategories').find('.headerSection__pages__categories').addClass('openCloseCategoryMenu');
$('.frozenHeaderCategories').find('.categoryMenu__allCategories').addClass('hidden');
$('.frozenHeaderCategories').find('.categoryMenu-js').addClass('hidden');
} else if ($(window).scrollTop() <= 70 && isCategoriesClonned == true) { isCategoriesClonned = false; $('.frozenHeaderCategories .headerSection__pages__categories').remove(); if(pageId != 1 && pageId != 22) { $('.categoryMenu__allCategories').addClass('hidden'); $('.categoryMenu-js').addClass('hidden'); } } }); }, setBreadcrumbsMargin: function() { $('.breadcrumbs-wrapper').css('margin-top', '0', '!important'); }, frozenHeaderCategories: function() { var pageHeaderTop = $('.headerSticky'); pageHeaderTop.on('click', '.frozenHeaderCategories .openCloseCategoryMenu .categoriesButton', function(e) { $('.frozenHeaderCategories .categoryMenu-js').toggleClass('hidden'); if($('.frozenHeaderCategories .categoryMenu-js').hasClass('hidden')) { $('.frozenHeaderCategories .categoryMenu__allCategories').css('display', 'flex'); $('.frozenHeaderCategories .categoryMenu__allCategories').addClass('hidden'); } }) pageHeaderTop.on('mouseover', '.categoryMenu__categories ul li', function(e) { var categoryId = $(this).find(' input[name="categoryId"]').attr('value'); var undercategory = $('input[name="undercategoryId"]'); undercategory.each(function() { if($(this).attr('value') == categoryId) { $(this).next().removeClass('hidden'); } else { $(this).next().addClass('hidden'); } }) }); $(document).on('click', function (e) { var pageId = $('body').find('input[name="pageId"]').attr('value'); if($(e.target).closest('.otherPages-js').length === 0 && $(e.target).closest('.otherPages').length === 0 && $(e.target).closest('.showCategories').length === 0 && $(e.target).closest($('.otherPages-js').children()).length === 0 && $(e.target).closest($('.otherPages').children()).length === 0) { if($('.otherPages').css('display') != 'none') { $('.otherPages').toggle(200); } } if($(e.target).closest('.categoryMenu__allCategories').length === 0 && $(e.target).closest($('.categoryMenu__allCategories').children()).length === 0) { $('.categoryMenu__allCategories').each(function(e) { if($(this).css('display') != 'none') { $(this).addClass('hidden'); } }); if($(e.target).closest('.categoryMenu-js').length === 0 && $(e.target).closest('.categoryMenu__categories').length === 0 && $(e.target).closest('.showCategories').length === 0 && $(e.target).closest('.categoryMenu-js > ul').length === 0
&& $(e.target).closest($('.categoryMenu-js > ul').children()).length === 0) {
if($('.categoryMenu-js').css('display') != 'none' && pageId != 1 && pageId != 22) {
$('.categoryMenu-js').addClass('hidden');
}
if($('.categoryMenu-js').css('display') != 'none' && (pageId == 1 || pageId == 22) && $(window).scrollTop() > 70) {
$('.frozenHeaderCategories .categoryMenu-js').addClass('hidden');
}
}
}
});
}
};
"
UWAGA! W powyższym kodzie do wklejenia, usuń znaki „ na początku i końcu bloku kodu!
5. Dodanie nowego bannera
Kolejną kwestią jest utworzenie nowego bannera, który bedzie wyświetlany obok listy kategorii. W tym celu otwieramy Panel Administracyjny, zakładki Wygląd sklepu -> Ustawienia, wybieramy właściwy szablon i przechodzimy do zakładki Bannery.
Sprawdzamy, czy mamy banner o nazwie menuBanner. Jeśli tak, to otwieramy go. Jeśli nie, klikamy na dużą ikonkę z plusem, w celu utworzenia nowego bannera. Musimy nadać mu nazwę menuBanner.
W bannerze do nowego wariantu nagłówka, zalecany rozmiar obrazka wynosi 1118×534. W innym przypadku, obrazek może miec problemy ze skalowaniem.
Możemy również uzupełnić pozostałe pola bannera, takie jak m.in. nagłówek, tekst, czy link. Są one obsługiwane w nowym nagłówku.
6. Dodatkowe zmiany w plikach JS
Pozostaje dodać małe zmiany w plikach js. Otwórz plik js/layout0.js.
1. Wyszukaj linię „$(’.headerSearchForm-js’).parent().append(autocompleteList);”. Skasuj ją i podmień na następujący kod:
if($('.headerThirdType'.length)) {
$('.headerSearchForm-js').append(autocompleteList);
} else {
$('.headerSearchForm-js').parent().append(autocompleteList);
}
2. Wyszukaj linię „productWishListAdd: function (e) {„. Funkcja ta kończy się linią „},”. Tuż przed końcem funkcji (przed linią },) wklej poniższy kod:
if($('.headerThirdType')) {
var items = parseInt( $('.favCounter').text()) +1;
$('.favCounter').text(items);
if(parseInt($('.favCounter').text()) > 0) {
$('.favCounter').removeClass('hidden');
} else {
$('.favCoutner').addClass('hidden');
}
}
3. Funkcja przed tą, przed chwilą edytowaną, nazywa się productWishListRemove. W niej podobnie jak poprzednio odszukaj jej koniec (linia „},”) i tuż przed końcem dodaj kod:
if($('.headerThirdType')) {
var items = parseInt( $('.favCounter').text()) +1;
$('.favCounter').text(items);
if(parseInt($('.favCounter').text()) > 0) {
$('.favCounter').removeClass('hidden');
} else {
$('.favCoutner').addClass('hidden');
}
}
4. Wyszukaj linię „$(’.showBottomMenuSection-js’).on(’click’, function(e) {„. Jest to funkcja, która kończy się linią „});”. Usuń ją i wklej następujący kod w jej miejsce:
$('.showBottomMenuSection-js').on('click', function(e) {
if($('.headerThirdType').length) {
$('.go-to-top__btn-js').fadeOut();
$('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons');
$('.menuButton').toggleClass('menuActive');
if($('.mobileCategories').hasClass('hidden')) {
$('.mobileCategories').toggleClass('hidden');
$('.mobileCategories').toggle(200);
$('body').css('overflow', 'unset');
$('body').css('overflow-y', 'hidden');
} else {
$.when($('.mobileCategories').toggle(200)).done(function() {
$('.mobileCategories').toggleClass('hidden');
$('body').css('overflow-y', 'visible');
$('body').css('overflow', 'visible');
});
}
if($('.headerSection').css('z-index') == 13) {
$('.headerSection').css('z-index', 0);
} else {
$('.headerSection').css('z-index', 13);
}
} else {
$('.pageHeader-js .headerMainMenu-js').toggle(200);
$('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons');
$('.menuButton').toggleClass('menuActive');
if($('.headerSection').css('z-index') == 13) {
$('.headerSection').css('z-index', 20);
} else {
$('.headerSection').css('z-index', 13);
}
}
});
5. Wyszukaj linię „updateProductsInCart: function () {„. Funkcja ta kończy się linią „},”. Usuń linię powyżej („});”) i wklej poniższy kod:
if($('.headerThirdType')) {
$('.cartCounter').text(newValue);
if(parseInt($('.cartCounter').text()) > 0) {
$('.cartCounter').removeClass('hidden');
} else {
$('.cartCounter').addClass('hidden');
}
ui.changeCartValueInHeader();
}
});
stockLevelValue -= addedItems;
$('#stockLevelValueInput').val(stockLevelValue);
6. Poniżej znajduje się funkcja, która rozpoczyna się od „incrementProductsInCart: function () {„. Podobnie jak poprzednio, ale bez usuwania niczego, przed jej ostatnią linijką („},”) wklej ten kod:
if($('.headerThirdType')) {
$('.cartCounter').text(newValue);
if(parseInt($('.cartCounter').text()) > 0) {
$('.cartCounter').removeClass('hidden');
} else {
$('.cartCounter').addClass('hidden');
}
}
7. Poniżej znajduje się funkcja, która rozpoczyna się od „decrementProductsInCart: function () {” i po raz kolejny, analogicznie, przed ostatnią linijką, wklej ten kod:
if($('.headerThirdType')) {
$('.cartCounter').text(newValue);
if(parseInt($('.cartCounter').text()) > 0) {
$('.cartCounter').removeClass('hidden');
} else {
$('.cartCounter').addClass('hidden');
}
}
8. Wyszukaj linię „$(’.go-to-top__btn-js’).click(function(){„. Funkcja ta kończy się linią „});”. Skasuj całą funkcję a w jej miejsce wklej poniższy kod:
$('.go-to-top__btn-js').click(function(){
if($('.mobileCategories').length) {
if(!($('.mobileCategories').hasClass('hidden'))) {
$('.mobileCategories').animate({scrollTop : 0},800);
} else {
$('html, body').animate({scrollTop : 0},800);
$('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 800);
}
} else {
$('html, body').animate({scrollTop : 0},800);
$('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 800);
}
return false;
});
9. Pod dodaną w jednym z poprzednich punktu linią „$(’#stockLevelValueInput’).val(stockLevelValue);” znajduje się linia „},”. Pod nią wklej poniższy kod:
changeCartValueInHeader: function() {
var requestCartValue = $.ajax({
url: window.location.href,
method: "GET",
data: { __collection: 'customer.Cart.Value' }
});
var requestCustomerCurrency = $.ajax({
url: window.location.href,
method: "GET",
data: { __collection: 'customer.Currency' }
});
var newCartValue;
var customerCurrency;
requestCustomerCurrency.done(function(res) {
customerCurrency = res.collection;
requestCartValue.done(function(res2) {
newCartValue = +res2.collection;
if($('.cartInfo__value').length) {
var newCartValueString = newCartValue.toString();
var isDecimalSeparator = false;
var beforeDot;
var afterDot;
for(let i=0;i<newCartValueString.length;i++) {
if(newCartValueString[i] == '.') {
isDecimalSeparator = true;
beforeDot = newCartValueString.slice(0,i);
afterDot = newCartValueString.slice(i+1, newCartValueString.length);
}
}
if(isDecimalSeparator == true) {
beforeDot = beforeDot.replace(/(?!^)(?=(?:\d{3})+(?:\.|$))/gm, ' ');
if(afterDot.length == 1) {
afterDot = afterDot.concat('0');
}
} else {
beforeDot = newCartValueString.replace(/(?!^)(?=(?:\d{3})+(?:\.|$))/gm, ' ');
afterDot = '00';
}
$('.cartInfo__value').text(beforeDot + ',' + afterDot + ' ' + customerCurrency);
}
});
});
},
10. W pliku js/layout1.js wyszukaj funkcję, zaczynającą się od „productWishListDelete: function (e) {„. Funkcja kończy się linią „},”. Przed jej końcem wklej poniższy kod:
if($('.headerThirdType')) {
var items = parseInt( $('.favCounter').text()) -1;
$('.favCounter').text(items);
if(parseInt($('.favCounter').text()) > 0) {
$('.favCounter').removeClass('hidden');
} else {
$('.favCounter').addClass('hidden');
}
}
11. W pliku js/layout1.js wyszukaj linię „function addToCart(e) {„. Tuż nad nią dodaj następujące linijki:
var stockLevelValue; var addedItems;
12. Kilka linijek wyżej znajduje się linia „$(’.attributes-select:not(:last-child)’).after(’
’);”. Pod nią wklej następujący kod:
body.on('click', '.stayOnPage-js', function(e) {
if(stockLevelValue <= 0) {
location.reload();
}
});
13. Wróćmy do funkcji addToCart (punkt 10). Jedna z początkowych linii tej funkcji brzmi „value.value = (value.value).replace(’.’,’,’)”. Tuż pod nią wklej poniższe linie kodu:
stockLevelValue = parseInt($('#stockLevelValueInput').attr('value'));
addedItems = value.value;
a w wyszukanej przed chwilą linii, na jej końcu dodaj średnik (jeśli go nie ma).
14. Wyszukaj linię „if ($(’input[name=”basic-unit-ratio”]’).index() >= 0) {„. Tuż nad nią wklej:
$('#stockLevelValueInput').val(value);
15. W pliku js/layout1.js Wyszukaj linię „recalculate: function (itemNr, itemQty) {„. Tuż nad nią znajduje się linia „},”. Tuż nad nią wklej:
ui.changeCartValueInHeader();
16. Wyszukaj linię „$(’body’).on(’click’, ’.js-change-value’, function (e) {„. Pod nią znajduje się linia „cartFunctions.orderChangeValue(e);”. Tuż pod nią wklej tę samą linię co w punkcie poprzednim.
17. Wyszukaj linię „$(’body’).on(’change’, ’.js-value’, function (e) {„. Pod nią znajduje się linia „cartFunctions.orderChangeValue(e);”. Tuż pod nią wklej tę samą linię co w punkcie poprzednim.
7. Dodanie tłumaczeń
Nowy nagłówek wymaga zmiany w tłumaczeniach. Otwieramy Panel Administracyjny -> Wygląd sklepu -> Ustawienia. Wybieramy własciwy szablon i klikamy zakładkę „Tłumaczenia”. Dodajemy nowe tłumaczenie:
Id: SeeAllCategories
Tekst: Zobacz wszystkie kategorie
8. Dodanie opcji zmiany stylu kategorii (kompaktowy lub wygodny)
Domyślnym sposobem prezentacji kategorii w nowym nagłówku jest wygodny. Pokazuje on mniej kategorii bez przewijania, ale za to odstępny między nimi są większe. Istnieje także opcja trybu kompaktowego. Możemy w prosty sposób dodać opcję przełączania między trybami w Panelu Administracyjnym. Aby to zrobić, otwórz plik __settings.liquid. Pod jedną z pierwszych linii kodu („{% when '1′ %}”) wklej poniższe linie kodu:
{% assign HeaderThirdType = "Widok pierwszego poziomu menu głównego (dla trzeciego typu nagłówka)" -%}
{% assign HeaderThirdTypeComfortable = "Wygodny (do 10 kategorii w pierwszym poziomie)" -%}
{% assign HeaderThirdTypeCompact = "Kompaktowy (do 16 kategorii w pierwszym poziomie)" -%}
Powyżej dodane zostały tłumaczenia polskie wyboru opcji. Teraz należy dodać angielskie. W tym celu wyszukaj linię „{% else %}” i poniższe linie wklej tuż pod wyszukaną przed chwilą:
{% assign HeaderThirdType = "View of the first level of the main menu (for the third type of header)" -%}
{% assign HeaderThirdTypeComfortable = "Comfortable (up to 10 categories in the first level)" -%}
{% assign HeaderThirdTypeCompact = "Compact (up to 16 categories in the first level)" -%}
W tym samym pliku poniżej znajduje się cały ciąg pól oznaczonych jako:
Łatwo je rozpoznać, ponieważ ich struktura jest niemal podobna, różnią się tylko poszczególnymi opcjami i tłumaczeniami. Pomiędzy sekcjami, w dowolnym miejscu (ale nie w środku innej sekcji!) wklej ten kod:
{{HeaderThirdType}}
Teraz otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia, wybierz odpowiedni szablon i zjedź nieco niżej. Znajdziesz tam dodaną przed chwilą opcję wyboru. Wybierz opcję, która Ci odpowiada i zapisz. Gdy zechcesz zmienić ustawienia po czasie, nie będzie z tym żadnego problemu.
To już wszystkie zmiany, jakie należy wprowadzić, aby korzystać z nowej wersji nagłówka.
Aby Twoje zmiany stały się widoczne, otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia. Wybierz odpowiedni szablon. Naciśnij ikonkę „Więcej” (trzy kropki w prawym górnym rogu ekranu) i wybierz opcję Publikuj. W ciągu kilku minut wprowadzone zmiany będą widoczne dla Klientów Twojego sklepu.