Перейти к содержанию
afagorn

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

Рекомендуемые сообщения

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

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

Изменено пользователем afagorn

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

95 строка

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну ребят, ну вы вообще даете)) Код перед глазами у вас, читайте, там же все понятно. После комментария // 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Стоит ocstore 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.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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 10.10.2016 в 23:56, termotorg сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

Изменено пользователем jaffagold

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Здравствуйте, перепробовал всё ничего не помогло. Помогите пожалуйста. Нужно что бы стандартно 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вы меняли второй и третий блок местами?

price-view устанавливался по умолчанию

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

jaffagold, Менял он начинает показывать прайс и через долю сек перекидывает обратно

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

в моём случае я это сразу понял и нашёл правильный поэтому вопрос так и не решился((

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.