Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

[РЕШЕНО] Вывод товара списком по умолчанию в opencart 2


Recommended Posts

Как сделать вывод товара в режиме "список" по умолчанию? В гугле только решения для версий ниже 2-ой, которые не подходят
На скрине режим списка

post-695505-0-48784800-1433177639_thumb.png

Змінено користувачем afagorn
Надіслати
Поділитися на інших сайтах


В 2.0 меняется вид в файле /catalog/view/javascript/common.js

95 строка

95-ая строка указывает на комментарий. Подскажите где именно надо что-то поменять. Я пытался в некоторых местах поменять grid на list, но это не дало результатов

Привожу кусок кода, который относится, судя по комментариям, к режимам вывода товара

 

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

		$('#content .product-layout').attr('class', 'product-layout product-list col-xs-12');

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

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

		// What a shame bootstrap does not take into account dynamically loaded columns
		cols = $('#column-right, #column-left').length;

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

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

	if (localStorage.getItem('display') == 'list') {
		$('#list-view').trigger('click');
	} else {
		$('#grid-view').trigger('click');
	}
Надіслати
Поділитися на інших сайтах


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

заменить на 

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

и кеш почистить в браузере, либо открыть в режиме инкогнито и протестировать

либо crtl + f5 обновить страницу

Змінено користувачем onec1ick
Надіслати
Поділитися на інших сайтах


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

заменить на 

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

и кеш почистить в браузере, либо открыть в режиме инкогнито и протестировать

либо crtl + f5 обновить страницу

Все сделал как написано, помогло наполовину. При первом открытии сайта в режиме инкогнито товар отображается сеткой, а при следующих обновлениях страницы показывается в режиме список. Как это исправить?

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


Проблема решилась таким образом: я поменял местами вывод режимов, то есть теперь сетка - это список, а список - сетка. Остается только поменять картинки в кнопках изменения режима вывода товара
Измененный код в common.js, который меняет местами режимы
 

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

		$('#content .product-layout').attr('class', 'product-layout product-list col-xs-12');

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

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

		// What a shame bootstrap does not take into account dynamically loaded columns
		cols = $('#column-right, #column-left').length;

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

		 localStorage.setItem('display', 'grid');
	});
Надіслати
Поділитися на інших сайтах


В моем решении есть ошибка. Режим будет меняться на другой при простом обновлении страницы. Вот кусок кода с правильным изменением

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

		$('#content .product-layout').attr('class', 'product-layout product-list col-xs-12');

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

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

		// What a shame bootstrap does not take into account dynamically loaded columns
		cols = $('#column-right, #column-left').length;

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

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

	if (localStorage.getItem('display') == 'list') {
		$('#list-view').trigger('click');
	} else {
		$('#grid-view').trigger('click');
	}
Змінено користувачем afagorn
Надіслати
Поділитися на інших сайтах


  • 6 months later...

Ну ребят, ну вы вообще даете)) Код перед глазами у вас, читайте, там же все понятно. После комментария // Product List идет скрипт функции, которая обрабатывает событие - клик по объекту с id="list-view" . После комментария // Product Grid идет скрипт функции, которая обрабатывает событие - клик по объекту с id="grid-view". Обе функции в конце выполняют команды - в куках браузера сохранить своё значение в переменной display Вот этот код: localStorage.setItem('display', 'list'); и localStorage.setItem('display', 'grid'); соответственно. А после этих двух функций идет скрипт проверки: 

  1. if (localStorage.getItem('display') == 'list') {
  2. $('#list-view').trigger('click');
  3. } else {
  4. $('#grid-view').trigger('click');
  5. }

 Перевожу - если в куках браузера в переменной display находится значение равное list  , то выполнить функцию обработки клика по объекту с id="list-view", во всех остальных случаях, выполнить функцию обработки клика по объекту с id="grid-view" Изначально кукисы в браузере отсутствуют, соответственно переменной display нет, это и есть все остальные случаи. Вам всего лишь нужно было поменять код 

  1. if (localStorage.getItem('display') == 'list') {
  2. $('#list-view').trigger('click');
  3. } else {
  4. $('#grid-view').trigger('click');
  5. }

на

  1. if (localStorage.getItem('display') == 'grid') {
  2. $('#grid-view').trigger('click');
  3. } else {
  4. $('#list-view').trigger('click');
  5. }
  • +1 3
Надіслати
Поділитися на інших сайтах


  • 2 months later...

opencart 2.1.0.2  -  ни один способ не помог. Что только ни делал, но либо только список и невозможно переключить на сетку, либо все равно сетка по умолчанию. Куки естественно чистил.

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


Решение для версии 2.1.0.2. Подсказали на другом форуме.

Все тот же файл common.js

Начало решение tweenfaster

 

меняем код

    if (localStorage.getItem('display') == 'list') {
    $('#list-view').trigger('click');
    } else {
    $('#grid-view').trigger('click');
    }

на этот

    if (localStorage.getItem('display') == 'grid') {
    $('#grid-view').trigger('click');
    } else {
    $('#list-view').trigger('click');
    }

далее вот как раз то, чего не хватает для 2.1.0.2, чуть ниже ищем:

var productSet =  $('#content .product-layout:not(.product-list), #content .product-layout:not(.product-grid)');

меняем на:

var productSet =  $('#content .product-layout:not(.product-list,.product-grid)');

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

Змінено користувачем rider76
  • +1 1
Надіслати
Поділитися на інших сайтах


  • 2 weeks later...

Решение для версии 2.1.0.2. Подсказали на другом форуме.

Все тот же файл common.js

Начало решение tweenfaster

 

меняем код

    if (localStorage.getItem('display') == 'list') {
    $('#list-view').trigger('click');
    } else {
    $('#grid-view').trigger('click');
    }

на этот

    if (localStorage.getItem('display') == 'grid') {
    $('#grid-view').trigger('click');
    } else {
    $('#list-view').trigger('click');
    }

далее вот как раз то, чего не хватает для 2.1.0.2, чуть ниже ищем:

var productSet =  $('#content .product-layout:not(.product-list), #content .product-layout:not(.product-grid)');

меняем на:

var productSet =  $('#content .product-layout:not(.product-list,.product-grid)');

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

Последних строк которые вы написали нет в опенкарте 2 и в оксторе в common.js

  • +1 2
Надіслати
Поділитися на інших сайтах


Последних строк которые вы написали нет в опенкарте 2 и в оксторе в common.js

в опенкарт 2.0 возможно нету, но есть в 2.1.0.2. До версии 2.1 я предполагаю достаточно решения в начале темы. Для 2.1.0.2 было недостаточно.

  • +1 1
Надіслати
Поділитися на інших сайтах


  • 6 months later...
  • 4 months later...
В 10.10.2016 в 23:56, termotorg сказал:

Подскажите как сделать по умолчанию списком в последней версии окстор? Предыдущий пост не подходит, последних двух строк нет.

Поддерживаю! Нужен вывод списком, есть ли решение? 

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


Ребята, последний пост как раз проходит прекрасно и строки те, которых нет, не нужны совсем.

Только надо куки сайта удалить ( надо объяснять как?), потому что у вас там уже содержится в LocalStorage информация, что надо выводить сеткой.

У вас в этом коде идет проверка содержимого этого самого localStorage.

И если там уже записано grid, то и выводится по записанному (grid)

А если там пусто, то проверка идет по ветви условия else и устанавливает значение list

Змінено користувачем jaffagold
Надіслати
Поділитися на інших сайтах


  • 2 months later...

Здравствуйте, перепробовал всё ничего не помогло. Помогите пожалуйста. Нужно что бы стандартно 3-й вид был прайс. Вот код: 

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

		//$('#content .product-layout').attr('class', 'product-layout product-list col-xs-12');
		$('#content .product-grid, #content .product-price').attr('class', 'product-layout product-list col-xs-12');
		$('#content .product-list .cart > a').attr('data-toggle', 'none');
		$('#content .product-list .cart > a').attr('title', '');
		
		var w_list_img = $('.product-list .product-thumb .image img').outerWidth();
		$('.product-list .product-thumb .description').css('min-height', w_list_img-93);
		
		localStorage.setItem('display', 'list');
		$(this).addClass('active');
		$('#grid-view, #price-view').removeClass('active');
	});

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

		if (cols == 2) {
			$('#content .product-list, #content .product-price').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, #content .product-price').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
		} else {
			$('#content .product-list, #content .product-price').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
		}

		localStorage.setItem('display', 'grid');
		$(this).addClass('active');
		$('#list-view, #price-view').removeClass('active');
	});

	$('#price-view').click(function() {
		$('#content .product-grid > .clearfix').remove();
		$('#content .product-list, #content .product-grid').attr('class', 'product-layout product-price col-xs-12');
		$('#content .product-view .cart > a').attr('data-toggle', 'none');
		$('#content .product-view .cart > a').attr('title', '');

		localStorage.setItem('display', 'price');
		$(this).addClass('active');
		$('#list-view, #grid-view').removeClass('active');
	});
	
	if (localStorage.getItem('display') == 'list') {
		$('#list-view').trigger('click');
	} else if (localStorage.getItem('display') == 'price') {
		$('#price-view').trigger('click');
	} else {
		$('#grid-view').trigger('click');
	}

 

 

Змінено користувачем Zapazuhu
Надіслати
Поділитися на інших сайтах


Вот смотрите на код

if (localStorage.getItem('display') == 'list') {
		$('#list-view').trigger('click');
	} else if (localStorage.getItem('display') == 'price') {
		$('#price-view').trigger('click');
	} else {
		$('#grid-view').trigger('click');
	}

Если у пользователя в браузере сохранено значение List, То отобразить списком

Если значение price- отобразить прайсом

Если ни то и не другое,( то есть не был пользователь на сайте еще или там записано Grid) , то отобразить сеткой.

Еще подсказки нужны?

 

Змінено користувачем jaffagold
Надіслати
Поділитися на інших сайтах


jaffagold, в том и дело я настраиваю, а получается следующее. Заходишь он выдаёт прайс и тут же перекидывает автоматом на сетку и чистил кеш толку 0 почему-то не помогает. Список и сетка сохраняют своё значение после обновы страницы(если не редактировать код) а ставишь прайс сразу скидывает на сетку после обновы. После изменения кода обновишь он выдаёт прайс и через долю сек скидывает на сетку ппц запарился уже не пойму в чём дело, если порезать код(чтобы только всё в прайсе) также перекидывает сразу на сетку ну и переключиться уже нельзя. Шаб не стандартный поэтому я другой файл редактирую, реакция есть значит именно он за это отвечает. Может где-то скрипт ещё в шабе стоит на эти действия... порыскал ничего нету

Змінено користувачем oOSozdatel
Надіслати
Поділитися на інших сайтах


  • 1 month later...

Долго бился над проблемой почему же не работает. Решение - common.js может быть несколько, если тема не дефолт. Вот редактируя второй файл всё и получилось.

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


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

Ви повинні бути користувачем, щоб залишити коментар

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

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

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

    • Ні користувачів, які переглядиють цю сторінку

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.