Jump to content

Recommended Posts

Приветствую Вас, знатоки!

Вопрос двойной по положению блока покупки в карточке товара:

1) Можно ли как-то при прокрутке описания зафиксировать на экране этот блок с названием, ценой и кнопкой "В корзину"? Типа как это реализовано на авито (например https://www.avito.ru/sankt-peterburg_pushkin/audio_i_video/novye_besprovodnye_naushniki_bluedio_faith_2_1405483160)

2) Как сделать, чтобы в мобильной версии этот блок шёл первым, т.е. перед блоком с картинками и описанием с характеристиками и отзывами (уже, соответственно без фиксации)?

Ну и конечно, это должно работать параллельно.

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

мобильный вид.png

модуль покупки.png

Share this post


Link to post
Share on other sites

1. можно. можно 1в1 как на авито даже

2. подверстать + понадобится немного js

 

22 minutes ago, A132 said:

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

гуглите html, css, bootstrap, jquery

 

или вам готовый код дать?

Share this post


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

или вам готовый код дать?

Ну было бы отлично =) но, на сколько я понял, вопрос не решится советом типа "здесь допишите fixed, а здесь поменяйте div'ы местами"...

Share this post


Link to post
Share on other sites

вот держи вот это.
помоему я там правил эти блоки

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

 

 

 

Share this post


Link to post
Share on other sites
Posted (edited)
2 часа назад, AWARO сказал:

вот держи вот это.
помоему я там правил эти блоки

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

Всё, я сообразил как я на модуль про кнопку вышел: я искал как решить этот вопрос из темы, нашёл пост, где человек (ты) этот вопрос решил кому-то в личке, и хотел тебе написать. Зашёл в профиль, увидел там кучу модов и отвлёкся на них. А на след.день уже забыл, как на них вышел и всё никак не мог найти вкладку с тем форумом и его автором 😅 А теперь вон оно как всё вывернулось.

Спасибо! Попробую.

Edited by A132
  • +1 1

Share this post


Link to post
Share on other sites

В общем, благодаря подсказкам товарища AWARO, а также умной статье https://itchief.ru/bootstrap/grid-elements со 2ой частью вопроса я справился. Может это и костыли, но у меня работает. Так что, если кто захочет - сделать надо следующее:

 

Правим файл /catalog/view/theme/default/template/product/product.tpl

1) Перемещаем в карточке товара название из блока покупки наверх, для этого находим кусок кода

 

<div class="row"><?php echo $column_left; ?>

    <?php if ($column_left && $column_right) { ?>

    <?php $class = 'col-sm-6'; ?>

    <?php } elseif ($column_left || $column_right) { ?>

    <?php $class = 'col-sm-9'; ?>

    <?php } else { ?>

    <?php $class = 'col-sm-12'; ?>

    <?php } ?>

    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>

            <div class="col-sm-12 text-left"><h1 style="margin-bottom:20px;"><?php echo $heading_title; ?></h1></div> - добавляем

            <div class="row">

<div class="<?php echo $class; ?>">

          <h1><?php echo $heading_title; ?></h1> - удаляем

          <ul class="list-unstyled">

 

2) Разделяем блок «Картинки + описание» на 2 раздельных блока:

 

  <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>

      <div class="col-sm-12 text-left"><h1 style="margin-bottom:20px;"><?php echo $heading_title; ?></h1></div>

       <div class="row">

        <?php if ($column_left || $column_right) { ?>

        <?php $class = 'col-sm-6'; ?>

        <?php } else { ?>

        <?php $class = 'col-sm-8'; ?>

        <?php } ?>

                <!-- Блок картинок и описания -->

       <div class="<?php echo $class; ?>">

          <?php if ($thumb || $images) { ?>

                 <!-- Картинки -->

          <ul class="thumbnails">

            <?php if ($thumb) { ?>

            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

            <?php } ?>

            <?php if ($images) { ?>

            <?php foreach ($images as $image) { ?>

            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

            <?php } ?>

            <?php } ?>

          </ul>

          <?php } ?>

        </div> - добавляем (заканчивает блок)

 

         

                    <!--Блок Описания -->

 

 <div class="clearfix"></div>   - добавляем, чтобы блок «Описания» в полной версии переезжал в первый столбец под блок «Картинок», а не застревал во втором столбце под блоком «Покупок», т.к. покупки короче картинок

 

        <div class="<?php echo $class; ?>"> добавляем (начинаем блок)

         

          <ul class="nav nav-tabs" style="display:none;">

            <li class="active"><a href="#tab-description" data-toggle="tab"><?php echo $tab_description; ?></a></li>

            <?php if ($attribute_groups) { ?>

            <li><a href="#tab-specification" data-toggle="tab"><?php echo $tab_attribute; ?></a></li>

            <?php } ?>

            <?php if ($review_status) { ?>

            <li><a href="#tab-review" data-toggle="tab"><?php echo $tab_review; ?></a></li>

            <?php } ?>

            </form>

            </div>

            <?php } ?>

          </div>

        </div>

        <?php if ($column_left || $column_right) { ?>

        <?php $class = 'col-sm-6'; ?>

        <?php } else { ?>

        <?php $class = 'col-sm-4'; ?>

        <?php } ?>

<!-- Конец блока описания -->

 

3) Меняем блоки "Описания" и "Покупок" местами.

<!-- Блок покупки -->

       <div class="<?php echo $class; ?>">

          <ul class="list-unstyled">

            <!-- <?php if ($manufacturer) { ?>

            <li><?php echo $text_manufacturer; ?> <a href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a></li>

            <?php } ?> -->

            <li><?php echo $text_model; ?> <?php echo $model; ?></li>

            <!-- <?php if ($reward) { ?>

            <li><?php echo $text_reward; ?> <?php echo $reward; ?></li>

            <?php } ?> -->

            <li><?php echo $text_stock; ?> <?php echo $stock; ?></li>

          </ul>

          <?php if ($price) { ?>

          <ul class="list-unstyled">

<hr>

            <!-- AddThis Button BEGIN -->

            <div class="addthis_toolbox addthis_default_style" data-url="<?php echo $share; ?>"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_pinterest_pinit"></a> <a class="addthis_counter addthis_pill_style"></a></div>

            <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-515eeaf54693130e"></script>

            <!-- AddThis Button END -->

          </div>

          <?php } ?>

        </div>

        <!-- Конец блока покупки -->

 

Во вложении лежит мой файл, там уже много что направлено, но суть понять можно - пользуйтесь на здоровье =)

 

П.Ы. С первой частью вопроса с залипанием пока не разобрался. Свойство "position: sticky" там почему-то не работает и нужно писать JS. Если разберусь - допишу.

 

мобвид.png

product (10).tpl

Share this post


Link to post
Share on other sites
Posted (edited)

.

Edited by A132

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.


  • Similar Content

    • By A132
      Приветствую, господа!
      А делал ли кто-нибудь такую вещь:
      Когда на странице категории выводятся краткие карточки товара, то чтобы перейти на страницу самого товара, нужно кликнуть либо по его фото, либо по наименованию, а все остальные места (в т.ч. и текст с описанием) внутри карточки некликабельны, .
      Так вот - есть ли вариант сделать переход на страницу товара при щелчке в любом месте этой краткой карточки? Фото для наглядности в приложении 

    • By colaweb
      Используйте момент чтобы обойти конкурентов.
       
      ПРЕИМУЩЕСТВА
       
      При помощи данного модуля создается полностью рабочее приложение для сайта или магазина как будто вы его загрузили из Google Play или Microsoft Store.
      Это приложение может работать без подключения к интернету.

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

      По заявлению Google, перед специалистами Lancôme стояла задача создать быстро загружаемый, мощный мобильный инструмент, который можно будет быстро найти и просто использовать. В результате в 2016 году у компании появилось веб-приложение.
      И что же в итоге? Результаты говорят сами за себя: на 84% снизилось время загрузки, на 17% увеличилась конверсия, на 53% увеличилось количество мобильных сеансов на iOS,18% push-уведомлений открываются пользователями, 8% потребителей, которые открыли push-уведомление, совершали покупку.
      Пример компании Lancôme стал показательным для всех, кто сомневался.

      Второй плюс — это то что при обновлении приложения созданного при помощи модуля, не требуется повторная установка. То есть у пользователей вашего сайта будут всегда актуальные данные.

      Третий плюс, страницы вашего сайта в интернете будут загружаться очень быстро. Что в свою очередь положительно повлияет на выдаче Google и Яндекс.
       
      Четвертый плюс. По данным Leanplum, мобильные уведомления побуждают в 9,6 раз больше пользователей совершать покупки в приложениях. К тому же клиенты, которые получают пуши, проводят внутри приложения  на 16% больше времени, чем те, которые не получают никаких оповещений на свой телефон. Догадались о чем пойдет дальше речь? О важности мобильных пушей для вашего мобильного приложения и бизнеса.
      Push уведомления настраиваются с помощью бесплатного тарифа на сервисе push.gravitec.net/push в стоимость модуля не входит.
       
      ВИДЕО
       
      Совместим со всеми версиями OpenCart и ocStore.
       
      ДЕМО
       
      ЛИЦЕНЗИЯ

      Лицензия дает право на установку модуля на один тестовый домен и на один рабочий домен.
      При покупке модуля обязательно указывайте тестовый и рабочий домен.

      ОБЯЗАТЕЛЬНЫЕ ТРЕБОВАНИЯ ДЛЯ РАБОТЫ МОДУЛЯ

      1. Подключение по https
      2. Ваш сайт должен быть адаптирован для показа на смартфонах и планшетах
      Работает в браузере Chrome на платформе Android для смартфонов. Для десктопов на платформе Windows 10 также в браузере Chrome.
      Другие браузеры включая Apple планируют включить полную поддержку данной технологии в ближайшее время.
       
      В настройках модуля можно изменить:
      Настройка времени, через которое посетителю сайта показывается баннер с предложением установить приложение.
      Настройка внешнего вида баннера.
      Настройка текста и значка на баннере.
      Настройка "Моментальных страниц"

      ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ
       
      Установка модуля на хостинг
      Установка приглашения "установить приложение вашего магазина" в мобильное меню или другое место вашего сайта
      Настройка push уведомлений на сервисе push.gravitec.net/push
      Настройка кэширование данных магазина
       
      ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ
       
      О технологии PWA можно почитать здесь https://ru.wikipedia.org/wiki/Прогрессивное_веб-приложение
    • By colaweb
      12 999.00 руб
      Скачать/Купить дополнение


      Мобильное приложение из сайта или магазина
      Используйте момент чтобы обойти конкурентов.
       
      ПРЕИМУЩЕСТВА
       
      При помощи данного модуля создается полностью рабочее приложение для сайта или магазина как будто вы его загрузили из Google Play или Microsoft Store.
      Это приложение может работать без подключения к интернету.

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

      По заявлению Google, перед специалистами Lancôme стояла задача создать быстро загружаемый, мощный мобильный инструмент, который можно будет быстро найти и просто использовать. В результате в 2016 году у компании появилось веб-приложение.
      И что же в итоге? Результаты говорят сами за себя: на 84% снизилось время загрузки, на 17% увеличилась конверсия, на 53% увеличилось количество мобильных сеансов на iOS,18% push-уведомлений открываются пользователями, 8% потребителей, которые открыли push-уведомление, совершали покупку.
      Пример компании Lancôme стал показательным для всех, кто сомневался.

      Второй плюс — это то что при обновлении приложения созданного при помощи модуля, не требуется повторная установка. То есть у пользователей вашего сайта будут всегда актуальные данные.

      Третий плюс, страницы вашего сайта в интернете будут загружаться очень быстро. Что в свою очередь положительно повлияет на выдаче Google и Яндекс.
       
      Четвертый плюс. По данным Leanplum, мобильные уведомления побуждают в 9,6 раз больше пользователей совершать покупки в приложениях. К тому же клиенты, которые получают пуши, проводят внутри приложения  на 16% больше времени, чем те, которые не получают никаких оповещений на свой телефон. Догадались о чем пойдет дальше речь? О важности мобильных пушей для вашего мобильного приложения и бизнеса.
      Push уведомления настраиваются с помощью бесплатного тарифа на сервисе push.gravitec.net/push в стоимость модуля не входит.
       
      ВИДЕО
       
      Совместим со всеми версиями OpenCart и ocStore.
       
      ДЕМО
       
      ЛИЦЕНЗИЯ

      Лицензия дает право на установку модуля на один тестовый домен и на один рабочий домен.
      При покупке модуля обязательно указывайте тестовый и рабочий домен.

      ОБЯЗАТЕЛЬНЫЕ ТРЕБОВАНИЯ ДЛЯ РАБОТЫ МОДУЛЯ

      1. Подключение по https
      2. Ваш сайт должен быть адаптирован для показа на смартфонах и планшетах
      Работает в браузере Chrome на платформе Android для смартфонов. Для десктопов на платформе Windows 10 также в браузере Chrome.
      Другие браузеры включая Apple планируют включить полную поддержку данной технологии в ближайшее время.
       
      В настройках модуля можно изменить:
      Настройка времени, через которое посетителю сайта показывается баннер с предложением установить приложение.
      Настройка внешнего вида баннера.
      Настройка текста и значка на баннере.
      Настройка "Моментальных страниц"

      ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ
       
      Установка модуля на хостинг
      Установка приглашения "установить приложение вашего магазина" в мобильное меню или другое место вашего сайта
      Настройка push уведомлений на сервисе push.gravitec.net/push
      Настройка кэширование данных магазина
       
      ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ
       
      О технологии PWA можно почитать здесь https://ru.wikipedia.org/wiki/Прогрессивное_веб-приложение
      Добавил colaweb Добавлено 03.05.2019 Категория Платные шаблоны Системные требования https Метод активации По запросу на почту Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.5.1
      1.5.5
      1.5.4.1
      1.5.3.1 ocStore 3.0
      2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика Нет Старая цена 0  
    • By chick
      Скачать/Купить дополнение


      Модификатор перемещения товаров во вкладки (табы)
      Описание
      В карточке товара модификатор перемещает товары из схемы "Products" и Положения "Content Bottom" во вкладки (табы) "Описание, Характеристики, Отзывы..."
      Может использоваться как дополнение к модулю Похожие товары

      Установка
      Требуется vqmod
      В opencart 2.x (addmoduletotab.ocmod.xml) устанавливается через установку модификаторов. Выбираем этот файл и готово.
      В opencart 1.5.x (addmoduletotab.xml) нужно, чтобы был установлен vqmod, а сам файл положить в папку vqmod/xml
       
      По умолчанию вкладки появляются вначале списка вкладок.
      Если Вы хотите выводить вкладки в конце:
      Найдите 76-77 строки в файле:
      <search><![CDATA[#tab-description]]></search> <add position="before"><![CDATA[ И приведите их к следующему виду:
      <search><![CDATA[#tab-review]]></search> <add position="after"><![CDATA[ Добавил chick Добавлено 12.02.2016 Категория Прочее Системные требования Метод активации Без активации Ioncube Loader Нет OpenCart ocStore OpenCart.Pro, ocShop Обращение к серверу разработчика Старая цена  
  • 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.