OpenCart – товары сеткой или списком по умолчанию
Расположение товаров в магазине может быть разным: либо в виде списка
либо в виде сетки
И настраивая магазин на OpenCart мы чаще всего можем видеть, что товары в категориях расположены списком. Кому-то нравится такой стиль отображения товара, но другие предпочитают более компактный вид – сетку. И при этом хочется, чтобы сетка была не только тогда, когда покупатель сам переключит вид со списка на сетку, но чтобы сетка была указана как вид отображения товара по умолчанию. Как же этого добиться? В админке эта возможность не предусмотрена поэтому необходимо внести небольшие изменения в код файла, отвечающего за вывод товара.
Итак, открываем файл catalog/view/theme/имя темы/template/product/category.tpl и ищем следующие строки (в версиях 1.5.1.3 – 1.5.3.х, в дефолтной теме, нужный код находится в районе 194-196 строк, или еще проще – в конце файла):
|
1 2 3 4 5 |
if (view) { display(view); } else { display('list'); } |
Меняем в нем list на grid и в итоге получаем
|
1 2 3 4 5 |
if (view) { display(view); } else { display('grid'); } |
Не забываем о том, что не почистив кеш, не увидим изменений, так что идем в настройки браузера, чистим кеш, перезагружаем страницу и наблюдаем изменения – товар расположен в магазине сеткой.
Соответственно, если в шаблоне по умолчанию стоит вид сеткой, а необходимо его изменить на список, то меняем grid на list и получим желаемый результат.
Спасибо за полезную информацию!
Была рада помочь!
После изменения дизайна блока товаров в категории (catalog/view/theme/default/template/product/category.tpl) при выборе отображения списком либо строками при включении строк вновь возвращается старый вид дизайна. При обновлении страницы стиль становится новым. Я так подозреваю, там где-то надо оформление продублировать, но никак не могу найти где именно…
Разобрался сам. Список товаров в категории после смены вида(список/сетка) выводится в том же файле, вот после этого кода
<!–
function display(view) {
if (view == 'list') {……….
Вот только для чего тогда нужен файл
catalog/view/theme/default/template/product/special.tpl ?
special.tpl отвечает за вывод страницы “Акции”.
Спасибо, уже нашел)
Вот теперь незадача одна: изменил вид шаблона в сетке, добавил вывод $product[“reward”] (баллы за покупку) и $product[“sku”] (код товара). Но при смене вида у всех товаров выводится один и тот же SKU и одинаковое кол-во баллов. Не сталкивались с подобным?
Честно говоря, о таком слышу впервые… Может, допустили какую-то ошибку в коде вывода баллов и артикула?
Там смена вида выводится скриптом, в нем использую те же переменные, что и в списке вывода выше
html += ‘ ‘;
при этом в списке, когда только загружается страница, без смена вида, все отображается ок.
скрипт прилепить не выходит, потому залил целиком category.tpl на файлообменник… yadi.sk/d/RTUDdtcL3LKjM
Может глянете, как время будет? С движком только начинаю осваиваться, но вот тут застрял…
Сергей, к сожалению, моих знаний не хватает, чтобы разбираться со скриптом, да и прежде в нем не было и надобности разбираться – всегда все срабатывало без вмешательства в его код.
А каким образом Вы вывели артикул и баллы в category.php? Сайт, у Вас на локалхосте?
вывел через переменные, предварительно прописанные в контроллере
да, на локалке пока
решил проблему: избавился от скрипта, реализую вывод смены вида в css, без этой ерундовины
Главное, чтобы все работало!)
классный сайт, кстати https://bibletoys.com.ua ;)
Согласна))
не работает … точнее, забивается в куки и как бы работает … а если с др компа открыть сайт, то снова не работает… тут, наверно, еще в др файле править надо… но в каком???
Куки должны срабатывать только в том случае, если на компьютере сайт уже открывали. То есть, если на другом компе сайт еще не был просмотрен, то должно работать все корректно.
За отображение товара списком или сеткой отвечает именно category.tpl.
Спасибо, искал именно эту фичу))))
Рада, что смогла помочь))
Здравствуйте! Спасибо, получилось поменять вид расположения на сетку, но фото товаров стали *налезать* друг на друга. В чем может быть дело?
А если поставить сетку по умолчанию и убрать потом выбор между сеткой и списком, всё будет работать корректно?
Да, будет все отлично работать. Уже не на одном сайте пришлось убирать выбор отображения товара, ни разу проблем из-за этого не появлялось.
Да, будет все отлично работать. Уже не на одном сайте пришлось убирать выбор отображения товара, ни разу проблем из-за этого не было.
Не работает ((((
А как сделать и иконку списка/сетки и текст? У меня код
$(‘.display’).html(‘ ‘);
А как сделать чтобы товары отображались только сеткой и слова список вообще не было?
Устанавливаете по умолчанию отображение товаров сеткой (как описано в статье). Открываете файл catalog\view\theme\default\template\product\category.tpl и в стандартном шаблоне находите 44 строку, которая начинается как div class=”display” и комментируете ее – больше в категориях не будет отображаться выбор расположения товара.
У меня проблема – если нажать в меню на Клубные платья – https://www.peachshop.com.ua то один раз выскакивает сеткой, а второй раз – списком. Как оставить вид ТОЛЬКО сетки?
Буду благодарна за помощь!!!
Добрый день!
Помогите со след. проблемой. Необходимо выводить списком только 1 категории, а все остальные – сеткой. Как это реализовать?
Артем, не могу дать Вам ответ на этот вопрос.
Большое спасибо за информацию. Все сделал как написано и с первого раза получилось.
Благодарю за отзыв.
А где подправить чтобы изменить вид в виде прайса
Здравствуйте. Подскажите как сделать чтобы в сетке отображалось описание? Спасибо
Откройте stylesheet.css, найдите .product-grid .description и удалите display: none;
Добрый вечер, Юлия, подскажите пожалуйста, может не совсем по теме…
Как-то можно сделать возможным “выбор кол-ва” в общем списке/сетке товаров??? т.е. без входа в карточку товара (там это есть)…
Здравствуйте, Jul!
Большое Вам спасибо! У Вас очень полезный блог!
Я сделала сайт совсем недавно и сейчас настраиваю, в том числе и по Вашим инструкциям.
Может, Вы знаете, как решить такую задачу.
В админке в разделе Система/настройки/общие прописано название магазина с нормальными кавычками (“).
(а именно – “Шторка-Скатерка” Интернет-магазин домашнего текстиля). Оно же отображается в самом низу страниц сайта.
Но почему-то когда клиенту на его e-mail приходит письмо с подтверждением заказа, то в графе “от кого” выходит название магазина не с кавычками, а с таким обозначением – " (до и после закавыченных слов).
Как-то можно это изменить и сделать нормальные кавычки?
Заранее большое спасибо!
Как сделать для версии 1.5.6 Спасибо . На форумах решение для старых версий , подскажите.
function display(view) {
if (view == ‘list’) {
$(‘.product-grid’).attr(‘class’, ‘product-list’);
$(‘.products-block .product-block’).each(function(index, element) {
$(element).parent().addClass(“col-fullwidth”);
});
$(‘.display’).html(‘‘);
$.totalStorage(‘display’, ‘list’);
} else {
$(‘.product-list’).attr(‘class’, ‘product-grid’);
$(‘.products-block .product-block’).each(function(index, element) {
$(element).parent().removeClass(“col-fullwidth”);
});
$(‘.display’).html(‘‘);
$.totalStorage(‘display’, ‘grid’);
}
}
view = $.totalStorage(‘display’);
if (view) {
display(view);
} else {
display(”);
}
Для 1.5.6 и выше решение все тоже – в конце файла category.tpl меняйте list на grid. В Вашем случае измените
if (view) {
display(view);
} else {
display(»);
}
на
if (view) {
display(view);
} else {
display(‘grid’);
}
Попробовал , но теперь вылазит описание вместе с названием и получается много текста . Оставил измененным чтоб увидели что я имею в виду. И вообще Спасибо за подсказки :****
Краткое описание выводится благодаря переменной description, прописывание grid никак не могло повлиять на вывод описания товара в категории.
Если описание Вам не нужно, то можете его либо закомментировать в самом category.tpl, либо в stylesheet.css, строка 1560, добавить
display: none; Потому что в Вашем шаблоне, в выводе сеткой описанию как раз прописан display: none;, а вот в выводе списком описание не скрыто.