Grid или list view для разных категорий

qub · 4 травня 2017

Opencart 2.1.0.2

Доброе время суток господа.

Подскажите пожалуйста как реализовать чтобы в одной категории был grid по умолчанию, а в другой list.

Может ли кто нибудь нагородить простой js типо:

$document ready

Если page url=xxx,yyy,zzz

то click list view by default

Else

grid view

Заранее спасибо!

qub · 6 травня 2017

Неужели ни у кого не возникало такой необходимости?

Отправлено с моего Redmi Note 2 через Tapatalk

fanatic · 6 травня 2017

в контроллере header.php перед

return $this->load->view('common/header', $data);

добавляем

                $parts = explode('_', (string) $this->request->get['path']);
                $category_id = (int) array_pop($parts);
                  if ($category_id == 57) {
                $data['script_local'] = "<script>localStorage.setItem('display', 'list');</script>";
                } else {
                    $data['script_local'] = "<script>localStorage.setItem('display', 'grid');</script>";
                }

заменить 57 - на нужную категорию

шаблон header.tpl перед

<script src="catalog/view/javascript/common.js" type="text/javascript"></script>

вставляем

<?php if(isset($script_local)) {echo $script_local;}?>

Змінено 6 травня 2017 користувачем fanatic

qub · 6 травня 2017

Спасибо! Но есть вопрос:
Тут изменение идёт через куки и при первой загрузке страницы куки переписываются в нужной категории, но тип отображения остаётся старым. После обновления страницы уже из новых кукисов меняется тип отображения.
Я решение ещё не успел протестировать вживую, просто пытался понять логику.

К слову я думал о чём то более простом типо js скрипта который виртуально кликает grid or list в зависимости от урла.

Прошу прощения, что не протестировал пишу тут возможно глупости.

Спасибо за ответ!

Отправлено с моего Redmi Note 2 через Tapatalk

jaffagold · 7 травня 2017

посмотрите код установки разметки в common.js

Grid View, List View и чуть ниже по коду localStorage. Вот именно там идет проверка содержимого localStorage

И это значение меняется заранее.

Остается открытым вопрос, как его вернуть в предыдущее состояние при переходе на стандартную страницу каталога.

rb2 · 7 травня 2017

Яваскриптом можно анализировать класс тега "body":

<body class="common-home">
  ...
<body class="product-category-25_32">
...
  и так далее

fanatic · 7 травня 2017

12 часов назад, qub сказал:

Тут изменение идёт через куки

нет. через localStorage

5 часов назад, jaffagold сказал:

Остается открытым вопрос, как его вернуть в предыдущее состояние при переходе на стандартную страницу каталога.

в if добавляем нужное значение в хранилище, в else очищаем. и при заходе в другую категорию будет функционал по умолчанию

jaffagold · 7 травня 2017

А если из category.php (там ведь определяется штатно category_id) по условию совпадения ID категории передавать служебную переменную непосредственно в category.tpl? Там проверять ее значение и там исполнять скрипт (имитировать нажатие на кнопку)?

Сработает?

Тогда не затрагивается LocalStorage.

Змінено 7 травня 2017 користувачем jaffagold

qub · 7 травня 2017

А если из category.php (там ведь определяется штатно category_id) по условию совпадения ID категории передавать служебную переменную непосредственно в category.tpl? Там проверять ее значение и там исполнять скрипт (имитировать нажатие на кнопку)?
Сработает?
Тогда не затрагивается LocalStorage.

Я вот о таком коде и мечтал. Мне кажется, что это было бы самое близкое к центру проблемы решение.

fanatic · 7 травня 2017

1 час назад, jaffagold сказал:

(имитировать нажатие на кнопку)?

1 час назад, jaffagold сказал:

Тогда не затрагивается LocalStorage.

затрагивается


	// Product List
	$('#list-view').click(function() {
		$('#content .product-grid > .clearfix').remove();

		$('#content .row > .product-grid').attr('class', 'product-layout product-list col-xs-12');
		$('#grid-view').removeClass('active');
		$('#list-view').addClass('active');

		localStorage.setItem('display', 'list');
	});

	// Product Grid
	$('#grid-view').click(function() {
		// What a shame bootstrap does not take into account dynamically loaded columns
		var cols = $('#column-right, #column-left').length;

		if (cols == 2) {
			$('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
		} else if (cols == 1) {
			$('#content .product-list').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
		} else {
			$('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
		}

		$('#list-view').removeClass('active');
		$('#grid-view').addClass('active');

		localStorage.setItem('display', 'grid');
	});

qub · 7 травня 2017

То есть localStorage это именно та переменная которая не просто строит куки но и меняет в реалтайме макет? И если на странице изменить её то макет сразу изменится?

Или всё таки add и remove class это основные двигатели смены макета отображения?

Я вижу код примерно так:

Categiries.tpl:

If categiry id=15,16,17{

Remove.class=grid;

Add.class=list;

Button.active=list;

Localstorage=list;}

Else{

Remove.class=list;

Add.class=grid;

Button.active=grid;

Localstorage=grid};

К слову localstorage можно вообще не трогать, пускай будет дефольным для движка. Есть смысл именно в нужных категориях вызывать add и remove class.

С другой стороны как будет работать pagination без locastorage - загадка

jaffagold · 7 травня 2017

Там ведь помимо класса Grid/List и active есть еще классы разметки Bootstrap. И все это уже написано.

Вот только что вам выложили листинг куска стандартного common.js,который отвечает за переключение разметок и работу с locaStorage...

Там и клики, и смена класса active, и запись в localStorage выбора посетителя.

Не мудрите.. Весь код вам уже дали. Он должен работать. Осталось только проверить.

fanatic · 7 травня 2017

49 минут назад, qub сказал:

То есть localStorage это именно та переменная которая не просто строит куки но и меняет в реалтайме макет?

да не строит она куки. это локальное хранилище. в него записывается значение как выводить товары 'display' = 'list' или 'display' = 'grid'

1 час назад, qub сказал:

И если на странице изменить её то макет сразу изменится?

нет

проверка хранилища происходит один раз, при загрузке страницы. в зависимости от значения в хранилище, происходит программное нажатие кнопки, и срабатывает уже скрипт(выше в моем сообщении), меняющий разметку

fanatic · 7 травня 2017

16 минут назад, jaffagold сказал:

Там и клики, и смена класса active, и запись в localStorage выбора посетителя.

вот именно, нафига что-то изобретать когда уже все есть, нужно только изменять значения display в хранилище, остальное сделают существующие скрипты.

qub · 8 травня 2017

В 06.05.2017 в 20:13, fanatic сказал:

в контроллере header.php перед

добавляем

заменить 57 - на нужную категорию

шаблон header.tpl перед

вставляем

Внёс все изменения! Работает в категориях отменно. Правда на других страницах кроме станиц категорий создаёт ошибку:

Notice: Undefined index: path in /var/www/u0135691/public_html/system/storage/modification/catalog/controller/common/header.php on line 416

Я так понимаю что он на других страницах не может получить корректный categoty.path отсюда и ошибка.

А как можно внедрить if на проверку что это категория а не другая страница?

СПАСИБО!

qub · 8 травня 2017

Разобрался на примере соседнего кода в контроллере!

Конечный код:

// grid or list view 
if (isset($this->request->get['path'])){
    $parts = explode('_', (string) $this->request->get['path']);
    $category_id = (int) array_pop($parts);
    if ($category_id == 18 or $category_id == 17) {
        $data['script_local'] = "<script>localStorage.setItem('display', 'grid');</script>";
    } else {
        $data['script_local'] = "<script>localStorage.setItem('display', 'list');</script>";
    }
}
// end if of view

Спасибо!

qub · 8 травня 2017

Скажите пожалуйста а есть ли возможность там же обращаться с переменным

"сортировка" и "количество товаров на странице" через localstorage?

fanatic · 8 травня 2017

1 час назад, qub сказал:

через localstorage?

нет, сортировка и количество реализованы по другому.

fanatic · 8 травня 2017

при выборе, идет переход по ссылки с определенными параметрами ?sort=p.price&order=ASC&limit=25

Змінено 8 травня 2017 користувачем fanatic

sergei12345 · 29 вересня 2021

как это для опенкарта 3 можно применить? (поменять сортировку по умолчанию)

Вхід

Grid или list view для разных категорий

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information