Opencart — Поле Количества Товара В Карточке Товара — Добавляем Плюс И Минус

Тема в разделе "Модули и дополнения", создана пользователем admin, 17 июн 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.328
    Симпатии:
    77.309
    Репутация:
    170
    Давайте же попробуем придать полю «Количество» немного иной вид и функционал и в магазине на OpenCart — добавим ему кнопки «плюс и минус». По умолчанию, данное поле — простой input, в который вводим количество с помощью клавиатуры, нет ни стрелочек, ни плюсов с минусами, ни выпадающего списка с вариантами количества. В общем, простое поле для ручного ввода количества.

    quantity-default.jpg



    Для работы нам потребуются следующие файлы шаблона:

    catalog/view/theme/имя-шаблона/template/common/header.tpl

    catalog/view/theme/имя-шаблона/template/product/product.tpl

    catalog/view/theme/имя-шаблона/stylesheet/stylesheet.css


    1. Открываем файл catalog/view/theme/имя-шаблона/template/product/product.tpl и находим строки с выводом поля для ввода кол-ва, добавления в закладки и сравнения, с кодом кнопки «Купить»:

    Код:
    <div><?phpecho$text_qty;?>
    <input type="text"name="quantity"size="2"value="<?phpecho$minimum;?>"/>
    <input type="hidden"name="product_id"size="2"value="<?phpecho$product_id;?>"/>
    &nbsp;
    <input type="button"value="<?phpecho$button_cart;?>"id="button-cart"class="button"/>
    <span>&nbsp;&nbsp;<?phpecho$text_or;?>&nbsp;&nbsp;</span>
    <span class="links"><aonclick="addToWishList('<?phpecho$product_id;?>');"><?phpecho$button_wishlist;?></a><br/>
    <aonclick="addToCompare('<?phpecho$product_id;?>');"><?phpecho$button_compare;?></a></span>
    </div>
    и меняем его на

    Код:
    <div><?php//echo $text_qty; ?>
    <div class="my_quantity">
    <span class="my_minus">-</span>
    <input type="text"name="quantity"class="quant"value="1"size="5"/>
    <span class="my_plus">+</span>
    </div>
    <input type="hidden"name="product_id"size="2"value="<?phpecho$product_id;?>"/>
    &nbsp;
    <input type="button"value="<?phpecho$button_cart;?>"id="button-cart"class="button"/>
    <span>&nbsp;&nbsp;<?phpecho$text_or;?>&nbsp;&nbsp;</span>
    <span class="links"><aonclick="addToWishList('<?phpecho$product_id;?>');"><?phpecho$button_wishlist;?></a><br/>
    <aonclick="addToCompare('<?phpecho$product_id;?>');"><?phpecho$button_compare;?></a></span>
    </div>

    Привожу весь код целиком для удобства правки, в действительности же, меняется всего одна строка

    Код:
    <input type="text"name="quantity"size="2"value="<?phpecho$minimum;?>"/>
    на

    Код:
    <div class="my_quantity">
    <span class="my_minus">-</span>
    <input type="text"name="quantity"class="quant"value="1"size="5"/>
    <span class="my_plus">+</span>
    </div>
    Так что, если найти весь приведенный код не удается (например, используете сторонний шаблон), то ищите искомую строку.

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

    2. Открываем файл catalog/view/theme/имя-шаблона/template/common/header.tpl и подключаем скрипт для работы добавленных кнопок «+ и -«, перед закрывающим тегом </head>:

    Код:
    <script type="text/javascript">
    $(document).ready(function(){
    $('.my_minus').click(function(){
    var$input=$(this).parent().find('.quant');
    varcount=parseInt($input.val())-1;
    count=count<1?1:count;
    $input.val(count);
    $input.change();
    returnfalse;
    });
    $('.my_plus').click(function(){
    var$input=$(this).parent().find('.quant');
    $input.val(parseInt($input.val())+1);
    $input.change();
    returnfalse;
    });
    });
    </script>
    При этом не забудьте сменить классы в скрипте (.quant, .my_minus, .my_plus), если вы изменили их на свои в product.tpl. Если первый код размещали без изменений, то и в скрипте ничего менять не надо.

    3. Открываем файл со стилями — catalog/view/theme/имя-шаблона/stylesheet/stylesheet.css и добавляем нашему инпуту нужные стили. В используемом мною шаблоне я задала следующие стили:

    Код:
    .my_quantity {
    margin:020px00!important;*/
    -moz-border-radius:3px!important;
    -webkit-border-radius:3px!important;
    border-radius:3px!important;
    width:100px!important;
    float:left;
    border:1pxsolid#E0E0E0!important;
    padding:2px02px7px;
    }
    .quant {
    background:none!important;
    border:0pxsolid#E0E0E0!important;
    border-left:mediumnone;
    border-right:mediumnone;
    display:inline;
    height:15px;
    line-height:21px;
    margin:0;
    padding:05px;
    text-align:center;
    vertical-align:middle;
    width:42px;
    }
    .my_minus {
    padding:0px7px1px8px;
    }
    .my_plus {
    padding:0px6px1px6px;
    }
    .my_minus, .my_plus {
    position:relative;
    display:inline;
    height:21px;
    width:21px;
    line-height:18px;
    margin:0;
    vertical-align:middle;
    border:none;
    box-shadow:none;
    font-weight:normal;
    cursor:pointer;
    -webkit-border-radius:11px!important;
    -moz-border-radius:11px!important;
    -ms-border-radius:11px!important;
    -o-border-radius:11px!important;
    border-radius:11px!important;
    background:#388BBE;
    color:#fff!important;
    }
    В последнем блоке добавленных стилей (.my_minus, .my_plus) Вы можете изменить цвет кнопок, высоту поля, закругленность углов.

    В итоге, в магазине заказчика на WordPress, поле количества приобрело нужный вид

    quantity-wordpress-woocommerce.jpg



    На OpenCart (все действия производила на версии 1.5.6.4, но версия не столь важна, важен сам принцип) получилась следующая картина

    quantity-opencart-new.jpg



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