Jump to content
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

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


Recommended Posts

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

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

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

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

 

Link to comment
Share on other sites


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

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

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

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

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

 

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

Link to comment
Share on other sites


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

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

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

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

найти

{{ footer }}

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

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

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

  • +1 1
Link to comment
Share on other sites

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

 

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

 

Link to comment
Share on other sites


Да например
 

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

 

  • +1 2
Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites


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

 

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

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

Link to comment
Share on other sites


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

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

 

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

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

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

Link to comment
Share on other sites


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

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

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

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

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites

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;
 }
}

 

Link to comment
Share on other sites

да, срилиило!!!!!!!!!!!!класс!

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

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

Link to comment
Share on other sites


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

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

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

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

 

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

 

 

Link to comment
Share on other sites

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

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

 

Link to comment
Share on other sites


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% в данном случае много.

Link to comment
Share on other sites

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

Вот!

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

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

Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

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.