Jump to content

Recommended Posts

Opencart 3.0.3.3, default theme

 

Привет всем.

Стояла задача сделать простой магазин. Но какой магазин без ajax подгрузки товаров в аля 2К20, а?

Сам я не то чтобы был полный ноль в js, нет, что-то в целом понимаю. Однако, сначала я искал готовые бесплатные плагины, но на мою версию опенкарт в общей сумме плагинов как кот наплакал, а для ajax подгрузки товаров их вообще 2, и то, один из них триальной версии на 3 дня потом плати монету. Пытался установить от shopunity ajax free filter, но мне не зашел, хотя бы на том, что там уродский вывод пунктов фильтров если выбираешь выводить как select. Ну и в целом плагин имеет много моментов, мне непонравившихся. Мне всё  это не подходило и я решил сделать сам.

Конечно, я хотел сделать это быстрее, поэтому искав в интете все по запросу ajax фильтрация товаров OpenCart 3, я может что-то и находил полезное, но этого было недостаточно. Однако одну функцию я все таки спер оттуда, так как свою писать было лень, да и зачем второй велосипед нужен?! Чтобы никто не писал потом что "эту функцию ты стырил оттуда-то".

 

Скрипт на jquery, если кто-то может переписать на ванила js, будет хорошо, Ну или если кто-то сможет заменить .load на $.ajax было бы удобней, но да ладно, перейдем к сути. Строго не судите, я не гуру jq, если есть что подправить, напишите это в комментах без грязи. Делюсь своим способом ajax фильтрации товаров opencart3 и ajax сортировка

 

 

<!--ajax фильтрация ++-->

0. Сначала я бы предложил для фильтров поставить плагин fixfilter opecart3x чтобы изменить логику фильтрации or/and. (Но не обязательно)

1. в category.twig (catalog/view/theme/default/template/product/category.twig) делаем обертку для вывода товаров
<div id="pp" class="products_products">...тут уже цикл с выводом товаров..</div> //обернули

2. Тут же в селекте #input-sort убрать метод "onchange location = this", он нам уже не нужен

3. в category.php (catalog/controller/product/category.php) найти способы сортировки, например сортировка по умолчанию

$data['sorts'][] = array(
'text'  => $this->language->get('text_default'),
'value' => 'p.sort_order-ASC',
//'href'  => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '&sort=p.sort_order&order=ASC' . $url) //копируем строку и комментируем ее на всякий случай
'href'  => '&sort=p.sort_order&order=ASC',// вставляем ее ниже и изменяем на такой вид
);

Тоже самое проделать со всеми другими способами сортировки, которые нужны. Мне нужны были только по цене вверх, вниз и по умолчанию; и то "по умолчанию" всегда переименовываю в "рекомендуем".

4. Идем в filter.twig (catalog/view/theme/default/template/extension/module/filter.twig)
Тут уже кому как надо, а у меня стояла задача сделать вместо чекбоксов select. Собственно я изменил вывод фильтра на:

<div class="the_filters df aj">
{% for filter_group in filter_groups %}
<div id="filter-group{{ filter_group.filter_group_id }}" class="filtr_group">
<select name="filter[]" id="filters{{filter_group.filter_group_id}}" class="ajax_select">
<option value="{{ filter_group.name }}" disabled selected>{{ filter_group.name }}</option>
{% for filter in filter_group.filter %}
{% if filter.filter_id in filter_category %}
<option value="{{ filter.filter_id }}" selected>{{ filter.name }}</option>
{% else %}
<option value="{{ filter.filter_id }}">{{ filter.name }}</option>
{% endif %}
{% endfor %}
</select>
</div>
{% endfor %}
<div class="part filtr_group"><button type="button" id="reset_filter">Сбросить</button></div></div>

 
Тут должно быть все понятно, тупо из чекбокс переделал в селект, который потом подхватывает плагин select2. Кстати, рекомендую его для кастомизации селектов.
Это все что будет в этом файле из разметки.
Ниже будут скрипты:

<script type="text/javascript">
$(document).on('change', '.filtr_group .ajax_select',function(){//обновление без кнопки "применить", если успели заметить что в разметке кнокпку убрал
filter = []; //создаем резервуар для фильтров
$('.filtr_group .ajax_select').each(function(element) { // каждый выбранный фильтр
filter.push($(this).val()); //записываем в резервуар
});
$('#pp').css('opacity', '0.3'); // самый простой способ дать уровень прозрачности блоку с товарами
$('#pp').prepend('<div class="loading"><?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background-image: none; display: block; shape-rendering: auto; background-position: initial initial; background-repeat: initial initial;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="0" fill="none" stroke="#3e6d8d" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.5s"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.5s"></animate></circle><circle cx="50" cy="50" r="0" fill="none" stroke="#4b9bbe" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline"></animate></circle></svg></div>'); // для интуитивности делаем прелоудер
href = '{{action}}&filter='+filter.join(','); //тут мы берем текущую ссыль, которая конфигурируется в category.php и добавляем к ней фильтры с разделением
div = $(document).find('#pp'); //куда будем загружать новые товары
$(div).load(href+'#pp .product-layout', {limit: 16}, //загружаем методом jq load с лимитом 16, у кого отличается в админке кол-во вывода товаров на фронте, то изменить здесь
function (responseText, textStatus, xhr) {
if (textStatus == "error") { //если ошибка, то выводим текст ошибки, но я немного сделал по-своему
var cn = $('header nav li a.current_page').text(); //находим название категории (но по факту текст в теге <a></a> с классом current_page)
var cn_href = $('header nav li a.current_page').attr('href'); //далее берем у нее ссыль
$.jGrowl('Упс, что-то пошло не так, пробуем вернуть Вас в главную категорию ' + '"'+cn+'"'); // ну и выводим соответственно текст ошибки и
setTimeout(function(){window.location.replace(cn_href);}, 5000); //возвращаем покупателя главную той категории, в которой он был, но можно только вывести текст ошибки, тут уже кому как
}
if($('#pp .product-layout').length <= 0) { // если нет товаров по выбранной нами фильтрации, то
$('#pp').text('Нет товаров, которые соответствуют критериям поиска'); //вывести этот текст
}
if (textStatus == "success") { // ну а если ответ успешный, то
$('#pp').css('opacity', '1'); // убираем непрозрачность у блока с товарами
$(document).find('.loading').remove(); //убираем прелоудер
}
});
setLocation(href); // адресную строку меняем в соответствие с выбранными фильтрами (функция будем ниже)
return false;
});
//ajax сортировка
$(document).on('change', '#product_category #input-sort', function(){ //при изменении селекта сортировки + я изменил id #product-category на #product_category, а то через тире выделять неудобно
filter = []; // создали резервуар фильтров
$('.filtr_group .ajax_select').each(function(element) {
filter.push($(this).val()); // в резервуар записали фильтры
});
$('#pp').css('opacity', '0.3'); // непрозрачность установили
$('#pp').prepend('<div class="loading"><?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background-image: none; display: block; shape-rendering: auto; background-position: initial initial; background-repeat: initial initial;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="0" fill="none" stroke="#3e6d8d" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.5s"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.5s"></animate></circle><circle cx="50" cy="50" r="0" fill="none" stroke="#4b9bbe" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline"></animate></circle></svg></div>'); //прелоудер показали
var sortBy = $(this).val(); // находим значение выбранного option в сортировке, то чей вывод мы изменяли в (контроллере) category.php
var action = $('header nav li a.current_page').attr('href'); // берем адрес главной категории, в который находимся, так как {{action}} тут работать уже не так будет как надо// ну или найти адрес другим методом js/jq
var url = action+sortBy+'&filter='+filter.join(','); // собираем в переменную куски - адрес главной категории + значение выбранной сортировки + фильтры, если есть
//alert(url); // на момент тестов отслеживал какой адрес в итоге получается
$(document).find('#pp').load(url+'#pp .product-layout', {limit: 16}, // опять загружаем с лимитом 16
function (responseText, textStatus, xhr) {//если ошибка, отдаем текст
if (textStatus == "error") {
$.jGrowl('Произошла ошибка');
}
if($('#pp .product-layout').length <= 0) { // если нечего загружать, сообщаем
$('#pp').text('Нет товаров, которые соответствуют критериям поиска');
}
if (textStatus == "success") { // если все у всех ок, то
$('#pp').css('opacity', '1'); // снимаеи непрозрачность
$(document).find('.loading').remove(); // убираем прелоудер
$.jGrowl('Успешная сортировка');//отдаем сообщение, тоже на момент тестов
}
});
setLocation(url); // записываем в адрес строку получившийся адрес
return false;
});
//ajax адрес в адресную строку
function setLocation(curLoc){
try {
history.pushState(null, null, curLoc);
return;
} catch(e) {}
location.hash = '#' + curLoc;
}
/// тут тоже должно быть все ясно как ясный день
</script> 

 

Дальше хочу сделать ajax пагинацию и написать скрипт сброса фильтров, наверное позже дополню в тему

 

 

Share this post


Link to post
Share on other sites

Заметил, что если при загрузке страницы ничего не трогать и попытаться изменить сортировку, то получишь ошибку, поэтому:

 

 ajax сортировка найти строку

var url = action+sortBy+'&filter='+filter.join(',');

//и заменить ее на это:

if(!!filter){
var url = action+sortBy;
}
else{
var url = action+sortBy+'&filter='+filter.join(',');
}

 

Share this post


Link to post
Share on other sites

Обновленный скрипт:

исправлены баги + ajax пагинация

 

Спойлер
<script type="text/javascript"><!--
//ajax фильтрация
var loader = '<div class="loading"><?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background-image: none; display: block; shape-rendering: auto; background-position: initial initial; background-repeat: initial initial;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="0" fill="none" stroke="#3e6d8d" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.5s"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.5s"></animate></circle><circle cx="50" cy="50" r="0" fill="none" stroke="#4b9bbe" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline"></animate></circle></svg></div>';
$(document).on('change', '.filtr_group .ajax_select',function(){
var filter = [];
var isSort = [];
$('.filtr_group .ajax_select').each(function(element) {
var val = $(this).val();
if (val) {
filter.push(val);
}
});
if ($('#input-sort').val().length > 0){
var val2 = $('#input-sort').val();
}
if (val2){
isSort.push(val2);
}
$('#pp').css('opacity', '0.3');
$('#pp').prepend(loader);
if(isSort.length < 0){
href = '{{action}}&filter='+filter.join(',');
}
else{
href = '{{action}}?'+isSort+'&filter='+filter.join(',');
}
div = $(document).find('#pp');
$(div).load(href+'#pp .product-layout', {limit: 16},
function (responseText, textStatus, xhr) {
if (textStatus == "error") {
var cn = $('header nav li a.current_page').text();
var cn_href = $('header nav li a.current_page').attr('href');
$.jGrowl('Упс, что-то пошло не так, пробуем вернуть Вас в главную категорию ' + '"'+cn+'"');
setTimeout(function(){window.location.replace(cn_href);}, 5000);
}
if($('#pp .product-layout').length <= 0) {
$('#pp').text('Нет товаров, которые соответствуют критериям поиска');
}
if (textStatus == "success") {
$('#pp').css('opacity', '1');
$(document).find('.loading').remove();
}
});
setLocation(href);
setTimeout(function(){
$('.products_pag').load(document.URL + ' .products_pag');}, 100);
return false;
});
//ajax сортировка
$(document).on('change', '#product_category #input-sort', function(){
var filter = [];
$('.filtr_group .ajax_select').each(function(element) {
var val = $(this).val();
if (val) {
filter.push(val);
}
});
$('#pp').css('opacity', '0.3');
$('#pp').prepend(loader);
var action = $('header nav li a.current_page').attr('href');
var sortBy = $(this).val();
if(filter.length <= 0){
var url = action+sortBy;
}
else{
var url = action+sortBy+'&filter='+filter.join(',');
}
$(document).find('#pp').load(url+'#pp .product-layout', {limit: 16},
function (responseText, textStatus, xhr) {
if (textStatus == "error") {
var cn = $('header nav li a.current_page').text();
var cn_href = $('header nav li a.current_page').attr('href');
$.jGrowl('Упс, что-то пошло не так, пробуем вернуть Вас в главную категорию ' + '"'+cn+'"');
setTimeout(function(){window.location.replace(cn_href);}, 5000);
}
if($('#pp .product-layout').length <= 0) {
$('#pp').text('Нет товаров, которые соответствуют критериям поиска');
}
if (textStatus == "success") {
$('#pp').css('opacity', '1');
$(document).find('.loading').remove();
}
});
setLocation(url);
setTimeout(function(){
$('.products_pag').load(document.URL + ' .products_pag');}, 100);
return false;
});
//ajax пагинация
$(document).on('click', '#product_category .pagination li a', function(){
$('.pagination li').removeClass('active');
$(this).closest('li').addClass('active');
var link = $(this).attr('href');
$(document).find('#pp').load(link+'#pp .product-layout', {limit: 16},
function (responseText, textStatus, xhr) {
if (textStatus == "error") {
var cn = $('header nav li a.current_page').text();
var cn_href = $('header nav li a.current_page').attr('href');
$.jGrowl('Упс, что-то пошло не так, пробуем вернуть Вас в главную категорию ' + '"'+cn+'"');
setTimeout(function(){window.location.replace(cn_href);}, 5000);
}
if($('#pp .product-layout').length <= 0) {
$('#pp').text('Нет товаров, которые соответствуют критериям поиска');
}
if (textStatus == "success") {
$('#pp').css('opacity', '1');
$(document).find('.loading').remove();
}
});
setLocation(link);
setTimeout(function(){
$('.products_pag').load(document.URL + ' .products_pag');}, 100);
return false;
});
//ajax адрес в адресную строку
function setLocation(curLoc){
try {
history.pushState(null, null, curLoc);
return;
} catch(e) {}
location.hash = '#' + curLoc;
}
//--></script>

 

 

 

 

Сброс фильтров на ajax делать не стал, сделал тупо так

 

<form action="{{action}}"><button type="submit">Сбросить</button></form> (то есть вернулись на главную страницу категории, в которой находимся)

 

Share this post


Link to post
Share on other sites

Напишу здесь ключевое слово для поисковиков

Ajax фильтрация + сортировка + пагинация товаров Opencart 3x бесплатно делюсь опытом

Share this post


Link to post
Share on other sites

Еще один апдейт - на скорую руку делал и забыл поставил пробел между переменными ссылки и искомого #div

Собственно:

Спойлер
<script type="text/javascript"><!--
//ajax фильтрация
var loader = '<div class="loading"><?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background-image: none; display: block; shape-rendering: auto; background-position: initial initial; background-repeat: initial initial;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="0" fill="none" stroke="#3e6d8d" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.5s"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.5s"></animate></circle><circle cx="50" cy="50" r="0" fill="none" stroke="#4b9bbe" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;29" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline"></animate><animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline"></animate></circle></svg></div>';
$(document).on('change', '.filtr_group .ajax_select',function(){
var filter = [];
var isSort = [];
$('.filtr_group .ajax_select').each(function(element) {
var val = $(this).val();
if (val) {
filter.push(val);
}
});
if ($('#input-sort').val().length > 0){
var val2 = $('#input-sort').val();
}
if (val2){
isSort.push(val2);
}
$('#pp').css('opacity', '0.3');
$('#pp').prepend(loader);
if(isSort.length < 0){
href = '{{action}}&filter='+filter.join(',');
}
else{
href = '{{action}}?'+isSort+'&filter='+filter.join(',');
}
div = $(document).find('#pp');
$(div).load(href+' #pp .product-layout', {limit: 16},
function (responseText, textStatus, xhr) {
if (textStatus == "error") {
var cn = $('header nav li a.current_page').text();
var cn_href = $('header nav li a.current_page').attr('href');
$.jGrowl('Упс, что-то пошло не так, пробуем вернуть Вас в главную категорию ' + '"'+cn+'"');
setTimeout(function(){window.location.replace(cn_href);}, 5000);
}
if($('#pp .product-layout').length <= 0) {
$('#pp').text('Нет товаров, которые соответствуют критериям поиска');
}
if (textStatus == "success") {
$('#pp').css('opacity', '1');
$(document).find('.loading').remove();
}
});
setLocation(href);
setTimeout(function(){
$('.products_pag').load(document.URL + ' .products_pag');}, 100);
return false;
});
//ajax сортировка
$(document).on('change', '#product_category #input-sort', function(){
var filter = [];
$('.filtr_group .ajax_select').each(function(element) {
var val = $(this).val();
if (val) {
filter.push(val);
}
});
$('#pp').css('opacity', '0.3');
$('#pp').prepend(loader);
var action = $('header nav li a.current_page').attr('href');
var sortBy = $(this).val();
if(filter.length <= 0){
var url = action+sortBy;
}
else{
var url = action+sortBy+'&filter='+filter.join(',');
}
$(document).find('#pp').load(url+' #pp .product-layout', {limit: 16},
function (responseText, textStatus, xhr) {
if (textStatus == "error") {
var cn = $('header nav li a.current_page').text();
var cn_href = $('header nav li a.current_page').attr('href');
$.jGrowl('Упс, что-то пошло не так, пробуем вернуть Вас в главную категорию ' + '"'+cn+'"');
setTimeout(function(){window.location.replace(cn_href);}, 5000);
}
if($('#pp .product-layout').length <= 0) {
$('#pp').text('Нет товаров, которые соответствуют критериям поиска');
}
if (textStatus == "success") {
$('#pp').css('opacity', '1');
$(document).find('.loading').remove();
}
});
setLocation(url);
setTimeout(function(){
$('.products_pag').load(document.URL + ' .products_pag');}, 100);
return false;
});
//ajax пагинация
$(document).on('click', '#product_category .pagination li a', function(){
$('.pagination li').removeClass('active');
$(this).closest('li').addClass('active');
var link = $(this).attr('href');
$(document).find('#pp').load(link+'#pp .product-layout', {limit: 16},
function (responseText, textStatus, xhr) {
if (textStatus == "error") {
var cn = $('header nav li a.current_page').text();
var cn_href = $('header nav li a.current_page').attr('href');
$.jGrowl('Упс, что-то пошло не так, пробуем вернуть Вас в главную категорию ' + '"'+cn+'"');
setTimeout(function(){window.location.replace(cn_href);}, 5000);
}
if($('#pp .product-layout').length <= 0) {
$('#pp').text('Нет товаров, которые соответствуют критериям поиска');
}
if (textStatus == "success") {
$('#pp').css('opacity', '1');
$(document).find('.loading').remove();
}
});
setLocation(link);
setTimeout(function(){
$('.products_pag').load(document.URL + ' .products_pag');}, 100);
return false;
});
//ajax адрес в адресную строку
function setLocation(curLoc){
try {
history.pushState(null, null, curLoc);
return;
} catch(e) {}
location.hash = '#' + curLoc;
}
//--></script>

 

 

И да, в category.twig необходимо найти пагинацию и к ее родителю добавить класс

.products_pag

ну или в скрипте изменить всё на свои классы

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By reDream
      1 500.00 руб
      Скачать/Купить дополнение


      Фильтр товаров Dream Filter
      Фильтр товаров для OpenCart, о котором вы мечтали.
      Для любого интернет магазина одним из самых необходимых модулей является фильтр товаров. Фильтр позволяет покупателям не заблудиться среди множества товаров и выбрать нужную вещь по всем необходимым параметрам. Для владельцев магазинов это хороший шанс увеличить продажи - покупателю станет проще определиться с выбором и совершить покупку.
      Dream Filter уже готов к использованию в вашем магазине. Мы проделали большую работу для того, чтоб удовлетворить потребности большинства владельцев интернет-магазинов и автоматизировать всю рутину настройки - в конфигурации фильтра осталось только всё самое необходимое и понятное. Интерфейс максимально прост и понятен на интуитивном уровне, а многие параметры содержат вспомогательные изображения для полного понимания вносимых изменений.
      Работает на всех версиях OpenCart и OcStore начиная с 1.5, с любым шаблоном.
      Фильтрация доступна на страницах категорий, производителей, поиска и товаров со скидками
      23 метода фильтрации - По цене, бренду, наличию на складе, атрибутам, опциям, весу и др. 8 типов фильтров - слайдеры, чекбоксы и тд 9 скинов 9 цветовых схем и 29 лоадеров на любой вкус 2 шаблона - вертикальный и горизонтальный 2 метода фильтрации - с перезагрузкой страницы и без Демо: oc.redream.ru По всем вопросам: Логин/Пароль: demo/demo [email protected] Видео обзор:
       
       
      Основные преимущества фильтра:
      Максимально удобная и понятная панель управления. Все существующие опции, атрибуты, фильтры, категории и производители подтягиваются автоматически, настройка производится в пару кликов Высочайшая скорость работы. Все методы и запросы оптимизированы для максимально быстрой работы. В магазине с более чем 10000 товаров фильтрация занимает в среднем 0.4 секунды. Пример - dreamfilter.ru Удобная мобильная версия в 2-х вариантах Удобный фильтр "слайдером" как по числовым значениям, так и по текстовым. Например "XS - S - M - L - XL - XXL" Совместимость со всеми шаблонами. Адаптация необходима только в редких случаях Возможность создать разные конфигурации фильтра для разных страниц Работа с мультиязычными и мультивалютными сайтами Работа с мультимагазинами. ВНИМАНИЕ! лицензия приобретается на один домен и его поддомены. Для дополнительных доменов в мультимагазине необходимо приобретать дополнительные лицензии Фильтр единственным правильным образом учитывает скидки и налоги. Если у товара есть скидка или налог - фильтр учтет это автоматически 2 метода загрузки результатов - с перезагрузкой страницы и "в реальном времени", через ajax Встроенный дополнительный функционал в виде постраничной навигации, сортировки результатов и изменения кол-ва товаров на странице без перезагрузки 8 видов фильтров: Поле ввода одиночный выбор флажок радиокнопка список изображение изображение(множественный выбор, аналог чекбоксов с изображениями) слайдер Полная кастомизация отображения: Вертикальный или горизонтальный шаблон 9 различных скинов на любой вкус 9 тщательно выверенных ярких цветовых схем 29 крутых лоадеров Ограничение высоты списка как по высоте, так и по кол-ву элементов Блок с выбранными параметрами Отображение количества товаров у каждого параметра Многое другое Бесплатная консультация и техподдержка от разработчика Методы фильтрации:
      По цене По производителям По названию По модели По наличию По атрибутам По опциям По встроенным фильтрам OpenCart По категориям По рейтингу По новинкам (+ возможность задать, какое кол-во дней товар будет считаться новым) По акциям (как по наличию скидки на товар, так и по размеру скидки) По тегам (как с полем ввода, так и выбором существующих тегов) По SKU, UPC, EAN, JAN, ISBN и MPN По длине По ширине По высоте По весу Системные требования:
      Для OpenCart 1.5.x:
      Php не ниже 5.6 ionCube Loader не ниже 10 Vqmod Для OpenCart 2.x и 3.x:
      Php не ниже 5.6 ionCube Loader не ниже 10 Процедура установки:
      Загрузить все файлы из папки "upload" в корневую папку сайта Обновить кэш модификаторов в менеджере дополнений (в vqmod обновляется автоматически) Зайти в настройки фильтра и запросить лицензию. Если при покупке вы правильно указали домен, ключ будет выдан автоматически Настроить фильтр Добавить фильтр в схему (Дизайн > Схемы или Дизайн > Макеты) Добавил reDream Добавлено 18.04.2017 Категория Фильтры Системные требования php не ниже 5.6, ionCube Loader не ниже 10 Метод активации Автоматическая активация Ioncube Loader Требуется OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.5.1
      1.5.5
      1.5.4.1 ocStore 3.0
      2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х
      OcShop 1.5.6.4.х Обращение к серверу разработчика Нет
      Да Старая цена 1500  
    • By reDream
      Фильтр товаров для OpenCart, о котором вы мечтали.
      Для любого интернет магазина одним из самых необходимых модулей является фильтр товаров. Фильтр позволяет покупателям не заблудиться среди множества товаров и выбрать нужную вещь по всем необходимым параметрам. Для владельцев магазинов это хороший шанс увеличить продажи - покупателю станет проще определиться с выбором и совершить покупку.
      Dream Filter уже готов к использованию в вашем магазине. Мы проделали большую работу для того, чтоб удовлетворить потребности большинства владельцев интернет-магазинов и автоматизировать всю рутину настройки - в конфигурации фильтра осталось только всё самое необходимое и понятное. Интерфейс максимально прост и понятен на интуитивном уровне, а многие параметры содержат вспомогательные изображения для полного понимания вносимых изменений.
      Работает на всех версиях OpenCart и OcStore начиная с 1.5, с любым шаблоном.
      Фильтрация доступна на страницах категорий, производителей, поиска и товаров со скидками
      23 метода фильтрации - По цене, бренду, наличию на складе, атрибутам, опциям, весу и др. 8 типов фильтров - слайдеры, чекбоксы и тд 9 скинов 9 цветовых схем и 29 лоадеров на любой вкус 2 шаблона - вертикальный и горизонтальный 2 метода фильтрации - с перезагрузкой страницы и без Демо: oc.redream.ru По всем вопросам: Логин/Пароль: demo/demo [email protected] Видео обзор:
       
       
      Основные преимущества фильтра:
      Максимально удобная и понятная панель управления. Все существующие опции, атрибуты, фильтры, категории и производители подтягиваются автоматически, настройка производится в пару кликов Высочайшая скорость работы. Все методы и запросы оптимизированы для максимально быстрой работы. В магазине с более чем 10000 товаров фильтрация занимает в среднем 0.4 секунды. Пример - dreamfilter.ru Удобная мобильная версия в 2-х вариантах Удобный фильтр "слайдером" как по числовым значениям, так и по текстовым. Например "XS - S - M - L - XL - XXL" Совместимость со всеми шаблонами. Адаптация необходима только в редких случаях Возможность создать разные конфигурации фильтра для разных страниц Работа с мультиязычными и мультивалютными сайтами Работа с мультимагазинами. ВНИМАНИЕ! лицензия приобретается на один домен и его поддомены. Для дополнительных доменов в мультимагазине необходимо приобретать дополнительные лицензии Фильтр единственным правильным образом учитывает скидки и налоги. Если у товара есть скидка или налог - фильтр учтет это автоматически 2 метода загрузки результатов - с перезагрузкой страницы и "в реальном времени", через ajax Встроенный дополнительный функционал в виде постраничной навигации, сортировки результатов и изменения кол-ва товаров на странице без перезагрузки 8 видов фильтров: Поле ввода одиночный выбор флажок радиокнопка список изображение изображение(множественный выбор, аналог чекбоксов с изображениями) слайдер Полная кастомизация отображения: Вертикальный или горизонтальный шаблон 9 различных скинов на любой вкус 9 тщательно выверенных ярких цветовых схем 29 крутых лоадеров Ограничение высоты списка как по высоте, так и по кол-ву элементов Блок с выбранными параметрами Отображение количества товаров у каждого параметра Многое другое Бесплатная консультация и техподдержка от разработчика Методы фильтрации:
      По цене По производителям По названию По модели По наличию По атрибутам По опциям По встроенным фильтрам OpenCart По категориям По рейтингу По новинкам (+ возможность задать, какое кол-во дней товар будет считаться новым) По акциям (как по наличию скидки на товар, так и по размеру скидки) По тегам (как с полем ввода, так и выбором существующих тегов) По SKU, UPC, EAN, JAN, ISBN и MPN По длине По ширине По высоте По весу Системные требования:
      Для OpenCart 1.5.x:
      Php не ниже 5.6 ionCube Loader не ниже 10 Vqmod Для OpenCart 2.x и 3.x:
      Php не ниже 5.6 ionCube Loader не ниже 10 Процедура установки:
      Загрузить все файлы из папки "upload" в корневую папку сайта Обновить кэш модификаторов в менеджере дополнений (в vqmod обновляется автоматически) Зайти в настройки фильтра и запросить лицензию. Если при покупке вы правильно указали домен, ключ будет выдан автоматически Настроить фильтр Добавить фильтр в схему (Дизайн > Схемы или Дизайн > Макеты)
    • By legioner26
      777.00 руб
      Скачать/Купить дополнение


      Модификатор автозаполнения картинок категорий
      Разработан модификатор автозаполнения картинок категорий из первой найденной картинки товара категории, а так же проставляются картинки для главных категорий и под категорий
      версии OpenCart 2.0, 2.1, 2.2, 2.3, 3.x  
      Просто заливаете товары с картинками, а картинки на категории проставятся сами.
      Устанавливаете модификатор как указано на картинке, чистим в модификациях кеш и обновляем. 
       
      Иногда бывает когда некорректно удалены картинки, и они сохранены в базе Для этого надо зайти через phpmyadmin и удалить из полей картинки из таблица oc_category
      UPDATE `oc_category` SET image=''
      http://prntscr.com/rkmuy3
      Введете этот запрос для очистки всех изображений категорий в случае проблем.
       
      РЕКОМЕНДУЕМЫЕ МОДУЛИ
       
      Смс авторизация и регистрация 
      Генератор АКЦИЙ Special PRO
      Конструктор форм обратной связи
      Модуль Зумма
      Модуль подарков
      СЕО генератор мета тегов
       
      Добавил legioner26 Добавлено 31.08.2017 Категория Модули Системные требования Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 3.0
      2.3
      2.2
      2.1 OpenCart.Pro, ocShop Обращение к серверу разработчика Нет Старая цена 1200  
    • By legioner26
      Разработан модификатор автозаполнения картинок категорий из первой найденной картинки товара категории, а так же проставляются картинки для главных категорий и под категорий
      версии OpenCart 2.0, 2.1, 2.2, 2.3, 3.x  
      Просто заливаете товары с картинками, а картинки на категории проставятся сами.
      Устанавливаете модификатор как указано на картинке, чистим в модификациях кеш и обновляем. 
       
      Иногда бывает когда некорректно удалены картинки, и они сохранены в базе Для этого надо зайти через phpmyadmin и удалить из полей картинки из таблица oc_category
      UPDATE `oc_category` SET image=''
      http://prntscr.com/rkmuy3
      Введете этот запрос для очистки всех изображений категорий в случае проблем.
       
      РЕКОМЕНДУЕМЫЕ МОДУЛИ
       
      Смс авторизация и регистрация 
      Генератор АКЦИЙ Special PRO
      Конструктор форм обратной связи
      Модуль Зумма
      Модуль подарков
      СЕО генератор мета тегов
       
    • By fuzewtf
      Здравствуйте форумчане, подскажите, не могу найти. Как отключить в оформлении заказа Шаг Платежная информация или Адрес доставки по сути они идентичны и заполнение двух влияет на конверсию.
       
      P.S. 
      Модуль Simple помогает, но при его установки перестает работать рассчет доставки
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.