Jump to content
113212

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

Recommended Posts

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

Снимок.JPG

Edited by 113212

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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">

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

Share this post


Link to post
Share on other sites
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">

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

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

Share this post


Link to post
Share on other sites
14 часов назад, krluch сказал:

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

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

Share this post


Link to post
Share on other sites
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">

Edited by 113212

Share this post


Link to post
Share on other sites
13 минут назад, 113212 сказал:

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

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

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

Share this post


Link to post
Share on other sites
4 часа назад, 113212 сказал:

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

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

Share this post


Link to post
Share on other sites
10 часов назад, Blast сказал:

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

да обновлял

Share this post


Link to post
Share on other sites
7 часов назад, krluch сказал:

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

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

Share this post


Link to post
Share on other sites
8 часов назад, 113212 сказал:

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites
2 часа назад, Blast сказал:

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

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

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

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

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

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

 

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

Share this post


Link to post
Share on other sites
1 час назад, 113212 сказал:

 

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

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

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

Share this post


Link to post
Share on other sites
11 минут назад, Blast сказал:

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
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;
	}	
}

 

Share this post


Link to post
Share on other sites
В 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;
	}	
}

 

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

Share this post


Link to post
Share on other sites
В 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 ???

Share this post


Link to post
Share on other sites
22 часа назад, marmariska сказал:

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

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

catalog/view/javascript/common.js

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.