Настройка отображения опций под фото товара в мобильной версии

[yegorulya]

Здравствуйте!
Есть вопрос.

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

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

Вы не подскажете, каким образом можно сделать в мобильной версии отображение как с ноутбука?
Чтобы сразу рядом с фото "выбрать размер" и "купить" было, а уже потом внизу описание товара?
Скрины прилагаю. Первое фото - вид с ноутбука, следующие два - с мобильного, сначала в мобильной версии видим фото, нужно хорошо пролистать вниз, и только потом увидим опцию выбора размера и кнопку "купить"

 

[Dimasscus]

16 минут назад, yegorulya сказал:

Здравствуйте!
Есть вопрос.

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

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

Вы не подскажете, каким образом можно сделать в мобильной версии отображение как с ноутбука?
Чтобы сразу рядом с фото "выбрать размер" и "купить" было, а уже потом внизу описание товара?
Скрины прилагаю. Первое фото - вид с ноутбука, следующие два - с мобильного, сначала в мобильной версии видим фото, нужно хорошо пролистать вниз, и только потом увидим опцию выбора размера и кнопку "купить"

 

Переверстать для мобайла

[yegorulya]

а нет вариантов в stysheet что-то прописать?

какой-то вариант попроще?

[Tom]

Стилями весьма проблематично, это проще сделать на js.

Некое условие на проверку ширины экрана, плюс функция .insertAfter

Ну например так:

В файле catalog/view/theme/default/template/product/product.twig

найти

{{ footer }}

и перед этим добавить

        <script type="text/javascript"><!--
           if ($(window).width() < 761) {
            $(function (){ 
               $('#product').insertAfter('.thumbnails');
            });
          }
        //--></script> 

сохранить и обновить все кэши.

[yegorulya]

Попробую, спасибо большое!

[yegorulya]

извините, раньше не получалось написать.
Все сработало. Круто! спасибо большое!!!
Возник другой вопрос теперь.

 

Я установила модуль ранее, который показывает итоговую цену для каждой опции размера, для удобства клиента (Модуль с ценой называется autocalc_price_option_oc3_v4.1.8.ocmod.zip)
Раньше вывод цены был рядом с опциями с размерами внизу под описанием товара, а сейчас после установки кода, опции с размерами поднялись вверх, а вывод цены так внизу и остался.
Скрин во вложении.
Как можно поднять вывод цены также наверх, чтобы было рядом с размерами?

 

[Tom]

Так например
 

<script type="text/javascript"><!--
     if ($(window).width() < 761) {
         $(function (){ 
           $('#product-product .col-sm-4').insertAfter('.thumbnails');
        });
    }
//--></script> 

 

[Fopres]

В 31.01.2022 в 06:37, Tom сказал:

Стилями весьма проблематично, это проще сделать на js.

Согласен  самый оптимальный вариант на js

[yegorulya]

<script type="text/javascript"><!--
     if ($(window).width() < 761) {
         $(function (){ 
           $('#product-product .col-sm-4').insertAfter('.thumbnails');
        });
    }
//--></script> 

 

это мне надо вставить вместо первой записи?

или в дополнение?

[Tom]

Вместо.

[yegorulya]

ну что сказать?! - СУПЕР!

Все сработало! очень вам благодарна!!!!!!!!!
Круто! Вы мастер своего дела!

 

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

Не знаете как это исправить?

фото во вложении.

[Tom]

Вот сюда в самый конец 

catalog/view/theme/default/stylesheet/stylesheet.css

Добавьте так например :
 

@media (max-width: 768px) {
    .swiper-viewport .swiper-button-next {
        right: 40px !Important;
    }
}

Единственное, что бы увидеть изменения нужно сбросить кэш браузера.

[yegorulya]

не сработало, кеш обновила, в админке тоже: на панели состояния и в модификаторах, также кеш браузера.
Может быть проблема в чем-то другом?

[Tom]

Я ничего не писал о кэше модификаторов и чего либо в админке.

Речь шла о кэше браузера.

попробуйте открыть свой магазин на телефоне в режиме Инкогнито.

[yegorulya]

проверила инкогнито, также..

скрин во вложении

[Tom]

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

у меня съехали "Кавычки" - то есть стрелочки с баннера вниз на меню

Это ваш вопрос.

На вашем скрине , те самые кавычки на месте , после предложенных правок...

Так о чём вы хотели спросить?

 

Понял теперь. Речь о том, что стрелки съехали не вправо , а вниз, со слайдшоу на модуль Стена категорий.

 Откройте файл catalog/view/javascript/jquery/swiper/css/opencart.css

и в самый конец добавьте
 

@media (max-width: 768px) {
.swiper-pager {
	width: 100%;
	position: absolute;
	top: 6% !Important;
	line-height: 45px;
 }
}

 

[yegorulya]

да, сработало!!!!!!!!!!!!класс!

только стрелки сейчас не аккуратно по центру, а съехавшие вправо - выходит стрелка справа за баннер. и очень большого размера они стали.

Не знаете как выровнять их, чтобы слева и справа был одинаковый отступ? и поменьше их сделать размером.

[Tom]

Только что, yegorulya сказал:

не аккуратно по центру

Это то что я писал ранее

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

 

@media (max-width: 768px) {
    .swiper-viewport .swiper-button-next {
        right: 40px !Important;
    }
}

 

 

[yegorulya]

теперь в мобильной версии все ок - по центру, а на ноутбуке почему-то нет, кеш обновляла, скрин во вложении

Для стационарных мониторов, надо как-то по-другому прописать?

 

[Tom]

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

Для стационарных мониторов, надо как-то по-другому прописать?

надо уже браться за изучение хотя бы основ HTML и CSS.

catalog/view/javascript/jquery/swiper/css/opencart.css

в самом начале найти

.swiper-pager {
    width: 100%;
    position: absolute;
    top: 50%;
    line-height: 45px;
}

и заменить на 

 

.swiper-pager {
    width: 100%;
    position: absolute;
    top: 25%;
    line-height: 45px;
}

То есть 50% в данном случае много.

[yegorulya]

благодаря вам сама кое в чем разобралась сама)
смогла сместить эти стрелки по центру по этому пути catalog/view/javascript/jquery/swiper/css/opencart.css и  выставила  width: 97%;

Вот!

Так что ваше внимание очень мне помогло!

Я Вам очень-очень благодарна!