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

[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%;

Вот!

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

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