Положение блока покупки в карточке

[A132]

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

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

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

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

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

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

[LiLu]

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

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

 

22 minutes ago, A132 said:

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

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

 

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

[A132]

51 минуту назад, LiLu сказал:

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

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

[HyperLabTeam]

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

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

 

 

 

[A132]

2 часа назад, AWARO сказал:

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

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

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

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

Змінено 25 червня 2020 користувачем A132

[A132]

В общем, благодаря подсказкам товарища 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. Если разберусь - допишу.

 

product (10).tpl

[A132]

.

Змінено 27 червня 2020 користувачем A132