Strona producentów w szablonie Szafir

W tym artykule dowiesz się jak dodać stronę producentów w swoim szablonie.

Wskazówka

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

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

Nową stronę dodamy w panelu administracyjnym w obszarze Wygląd sklepu/ Strony. W sekcji Użytkownika skorzystaj z przycisku Dodaj. Wypełnij pola z nazwą, linkiem i tytułem strony i zatwierdź przyciskiem Dodaj.

dodawanie nowej strony

Nowa strona zostaje dodana jako nieaktywna. W celu jej aktywowania wystarczy kliknąć na jej kafelek i zmienić przełącznik opcji Aktywna na TAK.

Teraz zajmiemy się dodaniem pliku strony.

Przejdź do obszaru Wygląd sklepu/ Ustawienia, następnie użyj przycisku Więcej i wybierz Edytuj ustawienia zaawansowane. Przejdź na zakładkę Strony. Dla nowo dodanej strony w kolumnie Plik należy wpisać nazwę pliku który będziemy tworzyć z końcówką html, przykładowo: manufacturers.html.

Wprowadzone zmiany zachowaj za pomocą przycisku Zapisz.

Następnie proszę dodać tłumaczenia. W sekcji Wygląd sklepu/ Ustawienia/ 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

W głównym folderze szablonu Szafir stwórz plik o nazwie manufacturers.html. Do pliku wklej następujący kod:


{% extends '_layout.html' %}
{% block pageContent -%}
{% assign manufacturers = manufacturer-brand.Manufacturers -%}
{% assign manufacturersSize = manufacturers | Size -%}
<section class="product-presentation-ui container-ui manufacturers-container-ui">
	<div class="manufacturers-breadcrumbs-ui">
	    {% include 'common/breadcrumbs.html' -%}
	</div>

    <div class="manufacturers-ui manufacturers-lq">
        {% for manufacturer in manufacturers  -%}
            <div  class="manufacturer-ui manufacturer-lq {% if forloop.index > 12 -%} hidden-lq {% endif -%}">
                {% if manufacturer.ImageId != 0 -%}
                    {{ manufacturer | Img:'large' }}
                {% endif -%}
                <h2>{{ manufacturer.Name }}</h2>
                <a href="{{ manufacturer.Url }}" name="{{ manufacturer.Name }}" title="{{ manufacturer.Name }}">
                    {{ translations.ShowProducts }} <i class="ti-arrow-right"></i>
                </a>
            </div>
        {% endfor -%}
    </div>
    {% if manufacturersSize > 12 -%}
        <button class="show-more-manufacturers-ui show-more-manufacturers-lq">{{ translations.ShowMore }}</button>
    {% endif -%}
</section>
{% endblock -%}

{% extends '_layout.html' %}

{% block pageContent -%}

{% assign manufacturers = manufacturer-brand.Manufacturers -%}

{% assign manufacturersSize = manufacturers | Size -%}

{% include 'common/breadcrumbs.html' -%}

</div>

{% for manufacturer in manufacturers -%}

<div class="manufacturer-ui manufacturer-lq {% if forloop.index > 12 -%} hidden-lq {% endif -%}">

{% if manufacturer.ImageId != 0 -%}

{% endif -%}

<h2>{{ manufacturer.Name }}</h2>

{{ translations.ShowProducts }} <i class="ti-arrow-right"></i>

</a>

</div>

{% endfor -%}

</div>

{% if manufacturersSize > 12 -%}

<button class="show-more-manufacturers-ui show-more-manufacturers-lq">{{ translations.ShowMore }}</button>

{% endif -%}

</section>

{% endblock -%}

Na końcu pliku scss/globals/_globals2.scss wklej taki kod:


.manufacturers-container-ui{
text-align: center;
.manufacturers-breadcrumbs-ui{
text-align: left;
}
.manufacturers-ui{
text-align: left;
}
.manufacturer-ui{
width: calc(25% - 64px);
margin-right: 60px;
margin-bottom: 60px;
display: inline-block;
i{
margin-left: 5px;
}
}
.show-more-manufacturers-ui{
margin: 40px auto;
width: 300px;
}
}

.manufacturers-container-ui{

text-align: center;

.manufacturers-breadcrumbs-ui{

text-align: left;

}

.manufacturers-ui{

text-align: left;

}

.manufacturer-ui{

width: calc(25% - 64px);

margin-right: 60px;

margin-bottom: 60px;

display: inline-block;

margin-left: 5px;

}

.show-more-manufacturers-ui{

margin: 40px auto;

width: 300px;

}

A na końcu pliku (przed ostatnią klamrą) scss/globals/_globals-m.scss wklej taki kod:


.manufacturers-container-ui{
  .manufacturer-ui{
    width: calc(50% - 43px);
    margin: 40px 20px;
  }
  .show-more-manufacturers-ui{
    display: none;
  }
}

.manufacturers-container-ui{

.manufacturer-ui{

width: calc(50% - 43px);

margin: 40px 20px;

}

.show-more-manufacturers-ui{

display: none;

}

Następnie przechodzimy do pliku js/init-ui2.js, a na jego końcu doklejamy następujący kod:


function showMoreManufacturers(e) {
  $('.manufacturer-lq.hidden-lq').each(function(index){
    if(index < 12){
      $(this).removeClass('hidden-lq');
      app.loadImages();
    }
  });
  if($('.manufacturer-lq.hidden-lq').length == 0){
    $(e.currentTarget).addClass('hidden-lq');
    }
  };

  $('body').on('click', '.show-more-manufacturers-lq', function (e) {
    showMoreManufacturers(e);
  });

  if($(window).width() <= 1279 && $('.manufacturer-lq.hidden-lq').length > 0) {
    $('.manufacturer-lq.hidden-lq').removeClass('hidden-lq');
}

function showMoreManufacturers(e) {

$('.manufacturer-lq.hidden-lq').each(function(index){

if(index < 12){

$(this).removeClass('hidden-lq');

app.loadImages();

}

});

if($('.manufacturer-lq.hidden-lq').length == 0){

$(e.currentTarget).addClass('hidden-lq');

}

};

$('body').on('click', '.show-more-manufacturers-lq', function (e) {

showMoreManufacturers(e);

});

if($(window).width() <= 1279 && $('.manufacturer-lq.hidden-lq').length > 0) {

$('.manufacturer-lq.hidden-lq').removeClass('hidden-lq');

}

Strona producentów w szablonie Szafir

Strona producentów w szablonie Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt