Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


 Share

Recommended Posts

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

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

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

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

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

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

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

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

Link to comment
Share on other sites


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

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

 

22 minutes ago, A132 said:

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

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

 

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites


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

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

 

 

 

Link to comment
Share on other sites


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

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

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

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

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

Edited by A132
  • +1 1
Link to comment
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

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.