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


<div class="category-content-ui" data-start-id="{{groupId}}" data-lang="{{page.LanguageId}}" data-start-url="{{url}}" data-animation-time="550" data-start-has-children="{{page.CurrentSiteNode.HasChildren}}">

poniższym kodem:


<div class="category-content-ui {% if settings.categoryMenuLinks == 'big' -%} big-ui {% elseif settings.categoryMenuLinks == 'medium' -%} medium-ui {% else -%} small-ui {% endif -%}" data-start-id="{{groupId}}" data-lang="{{page.LanguageId}}" data-start-url="{{url}}" data-animation-time="550" data-start-has-children="{{page.CurrentSiteNode.HasChildren}}">

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

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

{% 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:


<fieldset>
	<legend>{{categoryMenu}}</legend>

	<h3 class="section-title">{{categoryMenuInfo}}</h3>

	<div class="table">
		<div class="trow">
			<div class="tcell">
				<input type="radio" name="categoryMenuLinks" value="big" id="big" {% if settings.categoryMenuLinks == "big" -%} checked {% endif %}/>
				<label class="label" for="big">{{big}}</label>
			</div>
			
			<div class="tcell">
				<input type="radio" name="categoryMenuLinks" value="medium" id="medium" {% if settings.categoryMenuLinks == "medium" -%} checked {% endif %}/>
				<label class="label" for="medium">{{medium}}</label>
			</div>

			<div class="tcell">
				<input type="radio" name="categoryMenuLinks" value="small" id="small" {% if settings.categoryMenuLinks == "small" -%} checked {% endif %}/>
				<label class="label" for="small">{{small}}</label>
			</div>
		</div>
	</div>
</fieldset>

<legend>{{categoryMenu}}</legend>

<h3 class="section-title">{{categoryMenuInfo}}</h3>

</div>

<label class="label" for="medium">{{medium}}</label>

</div>

<label class="label" for="small">{{small}}</label>

</div>

</fieldset>

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.

Dodanie kilku opcji wielkości menu kategorii

Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt