Вибачте цей текст доступний тільки в “RU”.

Техническое задание.

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

Старый дизайн

Новый дизайн

Изменение количества товара в корзине.

 

 

Необходимо было добавить слева и справа от количества товара добавить кнопки “+” и “-“.
При добавлении обычных символов “+” и “-” возникла проблема…
Размер знака “-“, по горизонтали, совсем не вписывался в дизайн. Решил сделать эти знаки “+” и “-” средствами CSS.

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

<pre><code>
<style>
.number-plus {width:20px; line-height: 0.5; display: inline-block;}
.number-plus::before {content: "";width: 1px; display: block;
  position: absolute; transform: rotate(-90deg); background: #777;
  height: 14px; top: -2px; left: 8px;}
.number-plus::after {content: ""; width: 1px; display: block;
  position: absolute; transform: rotate(0deg); background: #999;
  height: 14px; top: -2px; left: 8px;}
.number-minus {width:20px; line-height: 0.5; display: inline-block;}
.number-minus::before {content: ""; width: 1px; display: block;
  position: absolute; transform: rotate(-90deg); background: #777;
  height: 14px; top: -2px; left: 10px;}
</style>

<span class="number-minus">&nbsp;</span>
<input class="input-type2  cart-site-amount" type="number" name="amount"... " min="1" max="99" ... />
<span class="number-plus">&nbsp;</span>

<script>
    $('.number-plus').on('click', function(){
        var $input = $(this).parent().find('input');
        $input.val(parseInt($input.val()) + 1);
        $input.change();
        return false;
    })
    $('.number-minus').on('click', function(){
        var $input = $(this).parent().find('input');
        var count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        $input.val(count);
        $input.change();
        return false;
    })
</script>

</code></pre>

Затем, в процессе работы заказчик пожелал еще доработать функционал:

• Делаем в корзине доп поле;
• Анимация как в окне входа;
• При вводе артикула и нажатия кнопки «Добавить», введенный артикул добавляется в корзину с кол-вом 1;
• Если такого артикула нет, вывести надпись красным «Артикул не найден»;
• при введение артикула в поле, нужно привязать enter как кнопку добавить. Тоесть ввел артикул, нажал ентер и позиция добавилась.

Добавить поле для поиска товара по артикулу, кнопку.
По нажатию на кнопку делаем ajax-запрос в бек-энд и получаем необходимый product_id.
Затем вызываем функцию add_to_cart(product_id), текст ее приводить не буду…
Если нужного артикула не найдено – на 3 секунды выводится соответствующее сообщение.

<pre><code>
<!-- Поле ввода артикула -->
  <input class="input-type4" id="cart-product-search" type="text" name="cart-search-text" autocomplete="off">
<!-- Кнопка добавить: -->
  <div class="btn_black_new cart-search-text-add">Добавить</div>
</code></pre>

<script>
    $('.cart-search-text-add').on('click', function(){search_for_add_cart($(this)) });
    $('#cart-product-search').keydown(function(e) {
        search_text = $('#cart-product-search').val();
        if(e.keyCode === 13 && search_text.length > 0) {   // по нажатию на Enter
            search_for_add_cart($('.cart-search-text-add'));
        }
    });

    function search_for_add_cart(btn_s){

        s_artikul = $('#cart-product-search').val();
        var button = btn_s;   // $(this);
        $.ajax({
            url: 'index.php?route=checkout/cart/search_for_add',
            type: 'post',
            data: {artikul:s_artikul},
            dataType: 'json',
            ..........
            success: function(json) {
                if (json['success']) {
                    product_id = json['product_id'];
                    $('#popup-cart').modal('hide');        
                    add_to_cart(product_id);
                }else{
                    $('#cart-product-search').val('Не найдено!!!');
                    setTimeout(function() {
                        $('#cart-product-search').val(''); //очищаем поле
                        $('#cart-product-search').blur(); //снимаем фокус с поля
                    }, 3000);
                }
            }
        })
</script>
</code></pre>