Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

отображение товара в каталоге, мобильная версия (по 2шт) и пк (по 3 шт)


113212
 Поделиться

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

Подскажите, пожалуйста.
Как сделать, чтобы на пк в категория отображалось 3 товара, а в мобильной версии по 2.
Сейчас стоит 3, и в мобильной версии показывает по 3 товара. с разрывами. есть на фото

Снимок.JPG

Изменено пользователем 113212
Ссылка на комментарий
Поделиться на других сайтах


Та тут работы на часа 4 и достаточно трудоемко. Лучше обратитесь к специалистам, а то наломаете дров... https://opencartforum.com/forum/18-настройка-и-мелкая-работа-по-уже-существующему-сайту/

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

17 минут назад, 113212 сказал:

Подскажите, пожалуйста.
Как сделать, чтобы на пк в категория отображалось 3 товара, а в мобильной версии по 2.
Сейчас стоит 3, и в мобильной версии показывает по 3 товара. с разрывами. есть на фото

 

<div class="product-layout product-grid col-md-4 col-xs-6">

или

<div class="product-layout product-grid col-sm-4 col-xs-6">

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

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

13 часов назад, Blast сказал:

<div class="product-layout product-grid col-md-4 col-xs-6">

или

<div class="product-layout product-grid col-sm-4 col-xs-6">

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

а где это искать?
и что дальше с этим сделать?

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


14 часов назад, krluch сказал:

Та тут работы на часа 4 и достаточно трудоемко. Лучше обратитесь к специалистам, а то наломаете дров... https://opencartforum.com/forum/18-настройка-и-мелкая-работа-по-уже-существующему-сайту/

Самому интересно)

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


15 часов назад, Blast сказал:

<div class="product-layout product-grid col-md-4 col-xs-6">

или

<div class="product-layout product-grid col-sm-4 col-xs-6">

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

Прописал в categorу.tpl, ничего не поменялось
 

<div class="product-layout product-grid col-sm-4 col-xs-6">

Изменено пользователем 113212
Ссылка на комментарий
Поделиться на других сайтах


13 минут назад, 113212 сказал:

Прописал в categorу.tpl, ничего не поменялось
 

<div class="product-layout product-grid col-sm-4 col-xs-6">

модификаторы и кэш шаблона обновили?

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

4 часа назад, 113212 сказал:

Самому интересно)

Открываете гугль и гуглите "css это" И "адаптивная верстка bootstrap". Если не разберетесь - надо 100% искать специалиста, но если разберетесь - запомните этот способ на все случаи жизни и используйте во всех ситуациях (запросы можно менять), чтобы не отвлекать бесплатно по детским вопросам очень занятых специалистов :ph34r:

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

7 часов назад, krluch сказал:

Открываете гугль и гуглите "css это" И "адаптивная верстка bootstrap". Если не разберетесь - надо 100% искать специалиста, но если разберетесь - запомните этот способ на все случаи жизни и используйте во всех ситуациях (запросы можно менять), чтобы не отвлекать бесплатно по детским вопросам очень занятых специалистов :ph34r:

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

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


8 часов назад, 113212 сказал:

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

решение я вам написал верное. Если не сработало, то тут несколько вариантов:

1. Прописали не в том файле. Например, блок Рекомендуемых товаров использует свой шаблон, а не category.twig

2. Прописали не тому html-элементу

3. Не обновили модификаторы

4. Не обновили кэш шаблона

5. Есть какие-то перекрывающие стили вашего шаблона

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

2 часа назад, Blast сказал:

решение я вам написал верное. Если не сработало, то тут несколько вариантов:

1. Прописали не в том файле. Например, блок Рекомендуемых товаров использует свой шаблон, а не category.twig

2. Прописали не тому html-элементу

3. Не обновили модификаторы

4. Не обновили кэш шаблона

5. Есть какие-то перекрывающие стили вашего шаблона

 

Безымянный.png

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


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

 

Безымянный.png

попробуйте clear: both; заменить на clear:left;

ну или дайте хотя бы ссылку на сайт. А то это больше похоже на гадание

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

11 минут назад, Blast сказал:

попробуйте clear: both; заменить на clear:left;

ну или дайте хотя бы ссылку на сайт. А то это больше похоже на гадание

попробовал поменять, ничего не произошло
horis.by

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


У Вас и не получиться это сделать, так как у Вас по 3 товара в ряд http://prntscr.com/pa854v

Как минимум нужно от .row избавляться 

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

14 минут назад, 113212 сказал:

попробовал поменять, ничего не произошло
horis.by 

у вас всегда в <div class="row"> закидывается по 3 товара. Поэтому так и получается

удалить row из шаблона,  в css заменить

.responsive .product-grid .row > div.col-xs-6:nth-child(odd) {
	clear: both;
}

на

.responsive .product-grid > div.col-xs-6:nth-child(odd) {
	clear: left;
}

 

и дописать

@media (min-width: 768px) {
	.responsive .product-grid > div.col-sm-4:nth-child(3n+1) {
		clear: left;
	}	
}

 

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

В 24.09.2019 в 13:13, Blast сказал:

у вас всегда в <div class="row"> закидывается по 3 товара. Поэтому так и получается

удалить row из шаблона,  в css заменить


.responsive .product-grid .row > div.col-xs-6:nth-child(odd) {
	clear: both;
}

на


.responsive .product-grid > div.col-xs-6:nth-child(odd) {
	clear: left;
}

 

и дописать


@media (min-width: 768px) {
	.responsive .product-grid > div.col-sm-4:nth-child(3n+1) {
		clear: left;
	}	
}

 

Спасибо, помогло, работает.

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


  • 2 недели спустя...
В 22.09.2019 в 22:56, Blast сказал:

<div class="product-layout product-grid col-md-4 col-xs-6">

В каком файле это находится? В category вместо этого стоит <div class="product-layout product-list col-xs-12">, изменение xs-12 на xs-6 результата не дает. 

Вообще странно, потому что при просмотре кода на сайте он полностью указан как у вас тут написано, а в файле категорий вот в такой версии. Где же искать product-grid ???

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


22 часа назад, marmariska сказал:

В каком файле это находится? В category вместо этого стоит <div class="product-layout product-list col-xs-12">, изменение xs-12 на xs-6 результата не дает. 

Вообще странно, потому что при просмотре кода на сайте он полностью указан как у вас тут написано, а в файле категорий вот в такой версии. Где же искать product-grid ???

catalog/view/javascript/common.js

там по слову grid найдете

и не забудьте обновить кэш модификаторов

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

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

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

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