Кол-во товаров в корзине Есть решение

Доброго времени! Использую шаблон default 3.0. Столкнулся с необходимостью сделать в корзине кнопки "+" и "-" которые прибавляют и убавляют количество товара в корзине, но вот что то не соображу пока каким это образом можно сделать...может есть готовые решения что бы не изобретать велосипед? Кто нибудь делал подобное подскажите пожалуйста, спасибо заранее!

3 ответа

  • 2
    Кирилл Ганцев 19 марта 2016 12:58 # Решение

    Сам спросил - сам ответил! вдруг кому пригодится! Это "самопальный" вариант, и возможно есть проще и лучше, но мне некогда было разбираться поэтому я установил тему mobile и повыдергивал из нее некотоыре куски кода. Показываю что именно! Идем в Cart.html ищем cart item и вставляем это!

      <!-- cart item -->
                    <div class="row cart-product-item" data-id="{$item.id}">                  
                        <div class="col w1 item-thumb"><a href="{$wa->shop->productUrl($item.product)}" title="{$item.product.name|escape}">{$wa->shop->productImgHtml($item.product, '96x96', ['default' => "`$wa_theme_url`img/dummy48.png"])}</a> </div>
                        <div class="col w9 item-name">
                            <a href="{$wa->shop->productUrl($item.product)}" class="bold">{$item.product.name|escape}</a>
                            {if $item.sku_name && $item.sku_name != $item.product.name}{$item.sku_name|escape}{/if}
                        </div>
                       
                        
                          <div class="volume-buttons">
                            <a class="general-button gray-button minus-link decrease-volume" href="javascript:void(0);">−</a>
                        </div>
                        <div class="col item-qty">
                            <input type="text" name="quantity[{$item.id}]" value="{$item.quantity}" class="qty{if !empty($item.error)} error{/if}">
                        </div>
                        <div class="volume-buttons">
                            <a class="general-button gray-button plus-link increase-volume" href="javascript:void(0);">+</a>
                        </div>
                        
                        <div class="col w1 item-remove"><a class="delete" href="#" title="[`Remove from cart`]"><i class="icon16 remove"></i></a></div>                        
                        <div class="col w3 align-center item-total nowrap">{shop_currency_html($item.full_price, true)}</div>
    
                        {if !empty($item.services)}
                        <!-- services -->


    далее идем в cart.js и в самое начало (перед вашим кодом) вставляем этот код:


    // Click on "+","-" good volume buttons
    ( function($) {
    
        var bindEvents = function() {
            $(document).on("click", ".increase-volume", function() {
                var $product = $(this).closest(".cart-product-item");
    
                changeVolume("positive",$product);
                return false;
            });
    
            $(document).on("click", ".decrease-volume", function() {
                var $product = $(this).closest(".cart-product-item");
    
                changeVolume("negative",$product);
                return false;
            });
        };
    
        var changeVolume = function(type, $product) {
            var $volumeInput = $product.find(".item-qty input.qty"),
                current_val = parseInt($volumeInput.val()),
                is_disabled = ($volumeInput.attr("disabled") === "disabled"),
                disable_time = 800,
                new_val;
    
            if (type === "positive") {
                new_val = current_val + 1;
            } else if (type === "negative") {
                new_val = current_val - 1;
            }
    
            // Set new value
            if (!is_disabled) {
    
                if ( new_val > 0 ) {
                    $volumeInput.attr("disabled","disabled");
    
                    $volumeInput.val(new_val);
    
                    // Recalculate Price
                    $volumeInput.change();
    
                    setTimeout( function() {
                        $volumeInput.attr("disabled", false)
                    }, disable_time);
    
                // If volume is zero => remove item from basket
                } else {
                    deleteItemFromBasket( $product );
                }
            }
        };
    
        var deleteItemFromBasket = function( $product ) {
            $product.find("a.delete").click();
        };
    
        $(document).ready( function() {
            bindEvents();
        });
    
    })(jQuery);
    

    ну и в default.css вставляем этот код:


    /* BUTTONS STYLES */
    .general-button,
    button,
    input[type="text"],
    input[type="password"],
    input[type="button"],
    input[type="submit"],
    textarea {
      display: inline-block;
      vertical-align: top;
      margin: 0;
      padding: 0.5em 1em;
       
      box-sizing: border-box;
      border: 1px solid #ccc;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      font: normal 1em/1.5em "Helvetica Neue", "Roboto Condensed", "Roboto", Arial, sans-serif;
      text-decoration: none;
      color: #121212;
    }
    .general-button.wa-error,
    button.wa-error,
    input[type="text"].wa-error,
    input[type="password"].wa-error,
    input[type="button"].wa-error,
    input[type="submit"].wa-error,
    textarea.wa-error,
    .general-button.error,
    button.error,
    input[type="text"].error,
    input[type="password"].error,
    input[type="button"].error,
    input[type="submit"].error,
    textarea.error {
      border-color: #c03;
    }
    .errormsg {
      color: #c03;
    }
    .general-button,
    button,
    input[type="button"],
    input[type="submit"] {
      white-space: nowrap;
      text-align: center;
      border: 1px solid rgba(0,0,0,0.3);
      border-top-color: rgba(0,0,0,0.2);
      -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
      box-shadow: 0 1px 1px rgba(0,0,0,0.1);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      text-shadow: 0 1px 0px rgba(255,255,255,0.5);
      background: #fcd630;
      background: #fcd630 -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
      background: #fcd630 -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.5)), color-stop(100%, rgba(255,255,255,0)));
      background: #fcd630 -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
      background: #fcd630 -o-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
      background: #fcd630 -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
      background: #fcd630 linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    }
    .general-button.gray,
    button.gray,
    input[type="button"].gray,
    input[type="submit"].gray,
    .general-button.gray-button,
    button.gray-button,
    input[type="button"].gray-button,
    input[type="submit"].gray-button {
      background: #eee linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    }
    /* END BUTTONS STYLES */
    
    .volume-buttons{
        display:inline-block;
    }
    
  • 1
    RiA 24 марта 2016 06:20 #

    Не подскажите как поправить что бы - и + был вокруг "контейнера" с количеством?

    • +3
      Кирилл Ганцев Кирилл Ганцев 27 марта 2016 20:27 #

      Только увидел ваше сообщение, я решил этот вопрос у себя тем, что в cart.html поместил блок с "контейнером" в блок с кнопкой "+" Вроде работает без нареканий )) вот код

        <div class="volume-buttons">
                              <a class="general-button gray-button minus-link decrease-volume" href="javascript:void(0);">−</a>
                          </div>
                          
                          <div class="volume-buttons">
                              <a class="general-button gray-button plus-link increase-volume" href="javascript:void(0);">+</a>
                              <div class="col item-qty">
                              <input type="text" name="quantity[{$item.id}]" value="{$item.quantity}" class="qty{if !empty($item.error)} error{/if}">
                          </div>
                          </div>
      • +1
        RiA RiA 28 марта 2016 02:56 #

        Спасибо за ответ, я так понял что вы код который был изначально прописан:

        <div class="volume-buttons">
        <a class="general-button gray-button minus-link decrease-volume" href="javascript:void(0);"></a>
        </div>
        <div class="col item-qty">
        <input type="text" name="quantity[{$item.id}]" value="{$item.quantity}" class="qty{if !empty($item.error)} error{/if}">
        </div>
        <div class="volume-buttons">
        <a class="general-button gray-button plus-link increase-volume" href="javascript:void(0);">+</a>
        </div>

        Заменили на:

        <div class="volume-buttons">
        <a class="general-button gray-button minus-link decrease-volume" href="javascript:void(0);"></a>
        </div>

        <div class="volume-buttons">
        <a class="general-button gray-button plus-link increase-volume" href="javascript:void(0);">+</a>
        <div class="col item-qty">
        <input type="text" name="quantity[{$item.id}]" value="{$item.quantity}" class="qty{if !empty($item.error)} error{/if}">
        </div>
        </div>


  • 1
    Надежда 13 июня 2018 14:52 #

    кнопки не работают, вероятно что то не так со вставкой в cart.js - вставляю как написано в самое начало

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите