Dodanie kilku opcji wielkości menu kategorii
W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać w nim kilka opcji wielkości menu kategorii. W pliku common/categories-navigation/sliding-navigation-partial.html na samym początku zastąp linijkę: poniższym kodem: Teraz w pliku scss/components/_categories-navigation.scss odnajdź klasę category-content-ui i zawartość jej styli podmień poniższym kodem: Następnie w pliku __settings.liquid do tłumaczeń polskich dodaj: Teraz w tym samym pliku (__settings.liquid) w części w której są elementy fieldset dodaj analogicznie poniższy kod: W Panelu Administracyjnym w zakładce Wygląd sklepu -> Ustawienia -> Ustawienia szablonu pojawi się nowa sekcja z 3 opcjami wielkości menu do wyboru. Po każdej zmianie w ustawieniach należy zapisać zmiany ikonką dyskietki znajdującą się w prawym górnym rogu.
Szafir
.category-content-ui {
position: relative;
width: 100%;
transition: height $animations-time;
background-color: $bgColor;
&.big-ui{
.has-nodes-lq a, .prev-level-label-ui, .deeper-level-ui .prev-level-ui{
width: calc(100% - 60px);
}
.category-label-ui{
font-size: 16px;
padding-left: 20px;
}
.category-arrow:not(.prev-level-ui), .prev-level-ui i{
width: 60px;
}
.category-label-ui, .category-arrow{
min-height: 55px;
}
}
&.medium-ui{
.has-nodes-lq a, .prev-level-label-ui, .deeper-level-ui .prev-level-ui{
width: calc(100% - 47px);
}
.category-label-ui{
font-size: 14px;
padding-left: 15px;
}
.category-arrow:not(.prev-level-ui), .prev-level-ui i{
width: 47px;
}
.category-label-ui, .category-arrow{
min-height: 44px;
}
}
&.small-ui{
.has-nodes-lq a, .prev-level-label-ui, .deeper-level-ui .prev-level-ui{
width: calc(100% - 34px);
}
.category-label-ui{
font-size: 12px;
padding-left: 10px;
}
.category-arrow:not(.prev-level-ui), .prev-level-ui i{
width: 34px;
}
.category-label-ui, .category-arrow{
min-height: 34px;
}
}
}
{% assign categoryMenu = "Menu kategorii" -%}
{% assign categoryMenuInfo = "Wielkość linków kategorii" -%}
{% assign big = "Duże" -%}
{% assign medium = "Średnie" -%}
{% assign small = "Małe" -%}