Dodanie obsługi filtrów na stronie głównej

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać w nim obsługę filtrów na stronie głównej.

Poniższy przykład jest jednym z wielu możliwych scenariuszy, Należy modyfikować kod we we własnym zakresie i dostosować go do własnych potrzeb.

Uwaga

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

Przykład modyfikacji szablonu Szafir

Wskazówka

Instrukcja dotyczy modyfikacji szablonu Szafir. W przypadku innych szablonów Comarch lub innego własnego, modyfikowanego – nie należy tej instrukcji traktować w stosunku 1:1, a jedynie jako źródło analogicznego postępowania.

Krok 1. W panelu administracyjnym e-Sklepu przejdź do sekcji Wygląd sklepu/Ustawienia/(prawy górny róg) Edytuj ustawienia zaawansowane/(prawy górny róg) Edytuj HTML.

Krok 2. Przejdź do pliku home.html i na samym początku zastąp linijkę:

poniższym kodem:

{% assign categories = homepage-filters.Content | Split: '||||||’ -%} {% assign categoryIndex = 0 -%}

{% for category in categories -%} {% assign categoryIndex = categoryIndex | Plus:1 -%} {% assign categoryArr = category | Split: '|||||’ -%} {% assign categoryInfoArr = categoryArr[0] | Split: '|’ -%} {% assign categoryLabel = categoryInfoArr[0] -%}

{% endfor -%}

{% assign categoryIndex = 0 -%} {% for category in categories -%} {% assign categoryIndex = categoryIndex | Plus:1 -%} {% assign categoryArr = category | Split: '|||||’ -%} {% assign categoryInfoArr = categoryArr[0] | Split: '|’ -%} {% assign categoryId = categoryInfoArr[1] -%}

{% assign filters = categoryArr[1] | Split: '||||’ -%} {% for filter in filters -%} {% assign filterArr = filter | Split: '|||’ -%} {% assign filterInfoArr = filterArr[0] | Split: '|’ -%} {% assign filterLabel = filterInfoArr[0] -%} {% assign filterName = filterInfoArr[1] | StripNewlines -%}

{% endfor -%}

Krok 3. Z listy dostępnych plików przejdź do folderu js, a następnie w dowolnym pliku JS (np. js/init.js) dodaj kod:


function toggleHomepageFilter(e) {
    var index = $(e.currentTarget).data('index');
    $('.filter-bar-lq').removeClass('active-filter-bar-lq');
    $(e.currentTarget).addClass('active-filter-bar-lq');
    $('.homepage-filters-container-lq').addClass('hidden-lq');
    $('.homepage-filters-container-lq[data-index='+index+']').removeClass('hidden-lq');
};

$('body').on('click', '.filter-bar-lq:not(.active-filter-bar-lq)', function (e) {
    toggleHomepageFilter(e);
});

function getHomepageFilterValues(e) {
    var currentFilter = $(e.currentTarget);
    var currentFilterName = currentFilter.attr('name');
    var filtersContainer = $(e.currentTarget).parents('.homepage-filters-container-lq');
    var id = filtersContainer.find('.post-homepage-filters-lq').data('id');
    var data = [];
    var selects = filtersContainer.find('select');
    selects.each(function () {
        if($(this).val() != '' && $(this).attr('name') != currentFilterName){
            var name = $(this).attr('name');
            var val = $(this).val();
            data.push({name: name, value: val});
        }
    });
    data.push({name: "__action", value: 'Get/SearchFilters'});
    var param = $.param(data, true);
    $.get(',2,' + id, param, function (result) {
        $.get(result.action.Redirect302, {__collection: 'products.FilteringOptions.Filters'}, function (res) {
            var filtersSortingOrder = $('.homepage-lq').data('filters-sorting-order').split('|');
            var notSortedFilters = res.collection;
            var sortedFilters = [];
            for(var i=0; i<notSortedFilters.length; i++){
                sortedFilters.push({Field: notSortedFilters[i].Field, Values: []});
                for(var j=0; j<filtersSortingOrder.length; j++){
                    var sortingFilterName = filtersSortingOrder[j].trim();
                    for(var k=0; k<notSortedFilters[i].Values.length; k++){
                        if(sortingFilterName == notSortedFilters[i].Values[k].Text){
                            sortedFilters[i].Values.push(notSortedFilters[i].Values[k]);
                        }
                    }
                }
            }
            for(var i=0; i<sortedFilters.length; i++){
                if(sortedFilters[i].Field == currentFilterName){
                    var values = sortedFilters[i].Values;
                    var selectedOptionValue = currentFilter.val();
                    currentFilter.find('option:not([value=""])').remove();
                    for(var j=0; j<values.length; j++){ if(values[j].Count > 0){
                    var option = ''+values[j].Text+'';
                            currentFilter.append(option);
                        }
                    }
                    var newOptions = currentFilter.find('option');
                    newOptions.each(function(){
                        if($(this).val() == selectedOptionValue){
                            $(this).prop('selected', true);
                        }
                    })
                }
            }
        });
    });
};

$('body').on('mouseenter', '.get-homepage-filter-values-lq', function (e) {
    getHomepageFilterValues(e);
});

function postHomepageFilters(e) {
    var id = $(e.currentTarget).data('id');
    var data = [];
    var selects = $(e.currentTarget).parents('.homepage-filters-container-lq').find('select');
    selects.each(function () {
        if($(this).val() != ''){
            var name = $(this).attr('name');
            var val = $(this).val();
            data.push({name: name, value: val});
        }
    });
    data.push({name: "__action", value: 'Get/SearchFilters'});
    var param = $.param(data, true);
    $.get(',2,' + id, param, function (result) {
        app.replace(result.action.Redirect302);
    });
};

$('body').on('click', '.post-homepage-filters-lq', function (e) {
    postHomepageFilters(e);
});

function toggleHomepageFilter(e) {

var index = $(e.currentTarget).data('index');

$('.filter-bar-lq').removeClass('active-filter-bar-lq');

$(e.currentTarget).addClass('active-filter-bar-lq');

$('.homepage-filters-container-lq').addClass('hidden-lq');

$('.homepage-filters-container-lq[data-index='+index+']').removeClass('hidden-lq');

};

$('body').on('click', '.filter-bar-lq:not(.active-filter-bar-lq)', function (e) {

toggleHomepageFilter(e);

});

function getHomepageFilterValues(e) {

var currentFilter = $(e.currentTarget);

var currentFilterName = currentFilter.attr('name');

var filtersContainer = $(e.currentTarget).parents('.homepage-filters-container-lq');

var id = filtersContainer.find('.post-homepage-filters-lq').data('id');

var data = [];

var selects = filtersContainer.find('select');

selects.each(function () {

if($(this).val() != '' && $(this).attr('name') != currentFilterName){

var name = $(this).attr('name');

var val = $(this).val();

data.push({name: name, value: val});

}

});

data.push({name: "__action", value: 'Get/SearchFilters'});

var param = $.param(data, true);

$.get(',2,' + id, param, function (result) {

$.get(result.action.Redirect302, {__collection: 'products.FilteringOptions.Filters'}, function (res) {

var filtersSortingOrder = $('.homepage-lq').data('filters-sorting-order').split('|');

var notSortedFilters = res.collection;

var sortedFilters = [];

for(var i=0; i<notSortedFilters.length; i++){

sortedFilters.push({Field: notSortedFilters[i].Field, Values: []});

for(var j=0; j<filtersSortingOrder.length; j++){

var sortingFilterName = filtersSortingOrder[j].trim();

for(var k=0; k<notSortedFilters[i].Values.length; k++){

if(sortingFilterName == notSortedFilters[i].Values[k].Text){

sortedFilters[i].Values.push(notSortedFilters[i].Values[k]);

}

for(var i=0; i<sortedFilters.length; i++){

if(sortedFilters[i].Field == currentFilterName){

var values = sortedFilters[i].Values;

var selectedOptionValue = currentFilter.val();

currentFilter.find('option:not([value=""])').remove();

for(var j=0; j<values.length; j++){ if(values[j].Count > 0){

var option = ''+values[j].Text+'';

currentFilter.append(option);

}

var newOptions = currentFilter.find('option');

newOptions.each(function(){

if($(this).val() == selectedOptionValue){

$(this).prop('selected', true);

}

})

}

});

};

$('body').on('mouseenter', '.get-homepage-filter-values-lq', function (e) {

getHomepageFilterValues(e);

});

function postHomepageFilters(e) {

var id = $(e.currentTarget).data('id');

var data = [];

var selects = $(e.currentTarget).parents('.homepage-filters-container-lq').find('select');

selects.each(function () {

if($(this).val() != ''){

var name = $(this).attr('name');

var val = $(this).val();

data.push({name: name, value: val});

}

});

data.push({name: "__action", value: 'Get/SearchFilters'});

var param = $.param(data, true);

$.get(',2,' + id, param, function (result) {

app.replace(result.action.Redirect302);

});

};

$('body').on('click', '.post-homepage-filters-lq', function (e) {

postHomepageFilters(e);

});

Krok 4. Przejdź do folderu scss, a następnie do podfolderu globals, gdzie w pliku _globals-m.scss dodaj kod:


.filter-bars-container-ui{
	display: flex;
}

.filter-bar-ui {
	width: 50%;
	border: none;
	text-align: center;
	padding: 10px;
	border-bottom: 1px solid $lightBorderColor;
	background: $menuBackgroundColor;
	display: flex;
	align-items: center;
	justify-content: center;
}

.active-filter-bar-lq, .filter-bar-ui:hover {
	background: $breadcrumbsAndSomeLists;
	border-bottom: 1px solid $breadcrumbsAndSomeLists;
	color: #fff;
}

.filter-bars-container-ui{

display: flex;

}

.filter-bar-ui {

width: 50%;

border: none;

text-align: center;

padding: 10px;

border-bottom: 1px solid $lightBorderColor;

background: $menuBackgroundColor;

display: flex;

align-items: center;

justify-content: center;

}

.active-filter-bar-lq, .filter-bar-ui:hover {

background: $breadcrumbsAndSomeLists;

border-bottom: 1px solid $breadcrumbsAndSomeLists;

color: #fff;

}

Krok 5. Będąc w fodlerze scss, przejdź do podfolderu partials, następnie dodaj poniższy kod w pliku _home.scss:


.homepage-filters-container-ui{
  position: absolute;
  top: -2px;
  left: 0;
  z-index: 11;
  width: 100%;
  padding: 20px 0 5px;
  background: rgba(#5B6569, 0.5);
  border-top: 2px solid $breadcrumbsAndSomeLists;
  text-align: center;
}

.homepage-filters-ui{
  text-align: center;
}

.homepage-filter-ui{
  width: 28%;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 20px;
  button{
    width: 100%;
    height: 66px;
    margin-right: -15px;
  }
  label:not(.checkbox-ui):not(.radio-ui){
    color: #fff;
    margin-left: 6px;
  }
}

@media only screen and (max-width: 1279px) {
  .homepage-filters-container-ui{
    position: static;
    width: 100%;
    background: $breadcrumbsAndSomeLists;
    padding: 5px 0;
    a{
      display: block;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
  }
  .homepage-filters-ui{
    text-align: left;
  }
  .homepage-filter-ui{
    width: calc(50% - 12px);
    display: inline-block;
    float: none;
    margin-bottom: 0;
    &:nth-child(1), &:nth-child(6){
      width: 100%;
      padding: 0 20px;
    }
    button {
      height: 56px;
      margin-top: 20px;
    }
    label:not(.checkbox-ui):not(.radio-ui){
      margin-left: 0;
    }
  }
}

.homepage-filters-container-ui{

position: absolute;

top: -2px;

left: 0;

z-index: 11;

width: 100%;

padding: 20px 0 5px;

background: rgba(#5B6569, 0.5);

border-top: 2px solid $breadcrumbsAndSomeLists;

text-align: center;

}

.homepage-filters-ui{

text-align: center;

}

.homepage-filter-ui{

width: 28%;

display: inline-block;

padding-left: 20px;

margin-bottom: 20px;

button{

width: 100%;

height: 66px;

margin-right: -15px;

}

label:not(.checkbox-ui):not(.radio-ui){

color: #fff;

margin-left: 6px;

}

@media only screen and (max-width: 1279px) {

.homepage-filters-container-ui{

position: static;

width: 100%;

background: $breadcrumbsAndSomeLists;

padding: 5px 0;

display: block;

color: #fff;

padding: 20px;

text-align: center;

}

.homepage-filters-ui{

text-align: left;

}

.homepage-filter-ui{

width: calc(50% - 12px);

display: inline-block;

float: none;

margin-bottom: 0;

&:nth-child(1), &:nth-child(6){

width: 100%;

padding: 0 20px;

}

button {

height: 56px;

margin-top: 20px;

}

label:not(.checkbox-ui):not(.radio-ui){

margin-left: 0;

}

Uwaga

Pamiętaj, aby odpowiednio skompilować oraz zminifikować modyfikowane pliki. Więcej na ten temat przeczytasz tutaj.

Wskazówka

Pamiętaj także, aby wszelkie zmiany zapisać, a następnie opublikować.

Panel Administracyjny

Krok 1. W Panelu Administracyjnym przejdź do zakładki Wygląd sklepu/Ustawienia/(prawy górny róg) Edytuj ustawienia zaawansowane/Zakładka Obiekty.

Krok 2. Dodaj nowy obiekt klikając przycisk Dodaj. Wybierz typ Tekst i nazwij go homepage-filters. Gdy się pojawi na liście obiektów kliknij na niego, aby edytować jego ustawienia.

Krok 3. W polu treść sprecyzuj, jakiej kategorii towarów ma dotyczyć filtrowanie (możesz utworzyć kilka osobnych zakładek), oraz jakich atrybutów filtrujących będzie można użyć.

Poniżej przykładowa treść:


Nazwa Kategorii1|ID kategorii1
|||||
Nazwa Filtra1|FILTR1
||||
Nazwa Filtra2|FILTR2
||||
Nazwa Filtra3|FILTR3
||||
Nazwa Filtra4|FILTR4
||||
Nazwa Filtra5|FILTR5
||||||
Nazwa Kategorii2|ID kategorii2
|||||
Nazwa Filtra6|FILTR6
||||
Nazwa Filtra7|FILTR7
||||
Nazwa Filtra8|FILTR8
||||
Nazwa Filtra9|FILTR9

Nazwa Kategorii1|ID kategorii1

|||||

Nazwa Filtra1|FILTR1

||||

Nazwa Filtra2|FILTR2

||||

Nazwa Filtra3|FILTR3

||||

Nazwa Filtra4|FILTR4

||||

Nazwa Filtra5|FILTR5

||||||

Nazwa Kategorii2|ID kategorii2

|||||

Nazwa Filtra6|FILTR6

||||

Nazwa Filtra7|FILTR7

||||

Nazwa Filtra8|FILTR8

||||

Nazwa Filtra9|FILTR9

Wskazówka

Nazwa Kategorii1,2,3,… – Nazwa Kategorii w e-Sklepie, na podstawie której zostanie utworzony filtr na stronie głównej.
ID Kategorii1,2,3,… – jest to ID wybranej kategorii w e-Sklepie, na podstawie której zostanie utworzony filtr.
Nazwa Filtra1,2,3,… – w tym miejscu podaj nazwę filtra, jaki chcesz aby został wyświetlony na stronie głównej.
FILTR1,2,3,… – wartość Field w obiekcie, w którym znajdują się filtry dla danej kategorii.

Wskazówka

Zwróć uwagę na ilość „|” belek między nazwami kategorii oraz filtrami. Jest ona istotna, aby prawidłowo utworzyć filtry.

Krok 4. Udostępnij obiekt na stronie głównej w szablonie. Gdy utworzysz treść dla obiektu przejdź do zakładki Strony i zaznacz parametr Strona główna.

Krok 5. Do listy obiektów (Wygląd sklepu/Ustawienia/(prawy górny róg)Edytuj ustawienia zaawansowane/Zakładka Obiekty) dodaj nowy obiekt o typie tekst oraz nazwie filters-sorting-order.

Krok 6. Podobnie jak w kroku 3 uzupełnij treść dla nowo dodanego obiektu. W treści należy wprowadzić wszystkie wartości, dla każdego filtra, którego chcemy wyświetlać Klientom w e-Sklepie. Kolejność, w jakiej wprowadzisz wartości będzie taka sama na stronie głównej e-Sklepu.

Poniżej przykładowa treść:


Wartość 1|
Wartość 2|
Wartość 3|

Wartość 1|

Wartość 2|

Wartość 3|

Wskazówka

Ostatnia wartość powinna również zawierać belkę „|”.

Krok 7. Udostępnij obiekt na stronie głównej w szablonie. Gdy utworzysz treść dla obiektu przejdź do zakładki Strony i zaznacz parametr Strona główna (patrz pkt. 4).

Wskazówka

Pamiętaj, aby wszelkie zmiany zapisać, a następnie opublikować.

Dodanie obsługi filtrów na stronie głównej