Dodanie kilku opcji wielkości menu kategorii

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.

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.

Szafir

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:

.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;
      }
    }
  }

Następnie w pliku __settings.liquid do tłumaczeń polskich dodaj:

{% assign categoryMenu = "Menu kategorii" -%}
{% assign categoryMenuInfo = "Wielkość linków kategorii" -%}
{% assign big = "Duże" -%}
{% assign medium = "Średnie" -%}
{% assign small = "Małe" -%}

Teraz w tym samym pliku (__settings.liquid) w części w której są elementy fieldset dodaj analogicznie poniższy kod:

{{categoryMenu}}

{{categoryMenuInfo}}

{{big}}

{{medium}}

{{small}}

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.

Czy ten artykuł był pomocny?

Wyślij opinie

Inne w kategorii

• Wyszukiwarka zaawansowana w szablonie Topaz

• -1

• 2099

• Ustawienia paska nawigacji w szablonie Szafir

• 1

• 2273

• Aktualizacja filtrów i wyszukiwarki w szablonach

• -1

• 2669

• Dodanie nowego widoku filtrów

• -26

• 1636

• Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz

• 0

• 2880

• Szablon i treści wiadomości e-mail

• 0

• 3135