- + в корзине или как сделать пересчет товара

Можете ссылки не кидать перелопатил все что мог найти, решения нет за исключением ответа купи дизайн авто и там есть такая штука.

Подскажите как вот такую штуку сделать в корзине перед заказом.


Думаю многие сидящие здесь скажут СПАСИБО!

9 ответов

  • 3
    Leva 21 сентября 2015 04:33 #

    как то так получилось

    <input type="number" min="1" name="quantity[{$item.id}]" value="{$item.quantity}" class="qty{if !empty($item.error)} error{/if}" id="pyat">
    
    
    И что бы постоянно отображались стрелки стиль css
    
    #pyat::-webkit-inner-spin-button { 
      opacity: 1;
    }

    в мозиле вообще чмошненько выглядит

  • 1

    не за Компом, поэтому не дам кусок кода, но скажу куда копать:

    Для начала сделать изменение кол-ва в инпуте, по клику на +-

    Потом вызвать input.change() чтобы запустить пересчёт

    Сработает, если вы там не сильно классы меняли. Если при ручном изменении кол-ва в поле пересчёт работает - знч все гуд.

    • +1
      Leva Leva 17 сентября 2015 10:17 #

      Да уже искал как сделать кол-ва в инпуте, на сторонних сайтах куча коду но ничего не заработало, там и аякс и тд

      Я "школьник" в программировании все делаю методом тыка, вот сейчас себе сайт делаю.

      Если можно код скиньте пожалуйста что бы наглядно было видно.

  • 1
    Роман 18 сентября 2015 02:34 #

    Тот вариант которые есть в теме жутко тормозной, сделал через type="number", там же задал ограничение на ввод не более того что есть на складе, очень шикарно вышло.

    • +1
      mrAs mrAs 19 сентября 2015 00:57 #

      Отлично, вы могли бы поделиться куском кода?

      • +2
        Роман Роман 19 сентября 2015 02:53 #
        <input type="number" name="quantity[{$item.id}]" value="{$item.quantity}" class="qty{if !empty($item.error)} error{/if}" min="1" max="{$item.product.count}">
  • 1
    Leva 18 сентября 2015 09:45 #

    в принципе type="number" нормально работает, но стилизовать что то не могу его никак

    • +1
      mrAs mrAs 19 сентября 2015 00:58 #

      Отлично, вы могли бы поделиться куском кода?

  • 1
    Leva 18 сентября 2015 10:28 #

    Я так понимаю что красиво только посредством js надо делать, не могу найти хорошее решение

    и не стилезуете. И в разных браузерах он по-разному выглядит (правда, везде страшненько, но по-разному). Зато дёшево и сердито.
  • 1
    Leva 29 сентября 2015 08:52 #

    так красивого решения и не нашел, может кто подскажет все таки???

  • 1
    Leva 30 сентября 2015 03:53 #

    Знатоки своего дела! помогите немножко во благо народа :)

    Вот с мобильной версии я взял - + кнопки

    в cart.html


        <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 item-remove" style="display: none;">
                            <a class="general-button gray-button delete" href="javascript:void(0);" title="[`Remove from cart`]">
                                [`Delete`]
                            </a>
                        </div>
                  

    в 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);
    

    вот получились такие кнопочки (криво правда но это стилями потом выровняю)

    http://joxi.ru/p277GRoFB4Jn27

    подскажите как завести эти - + кнопки? где что надо добавить???

    • +1
      Leva Leva 30 сентября 2015 06:00 #

      еще нашел кусок кода в product.js


              // Click on "+" button
              this.form.find(".quantity-wrapper .increase-volume").on("click", function() {
                  self.changeVolume("positive");
                  return false;
              });
      
              // Click on "-" button
              this.form.find(".quantity-wrapper .decrease-volume").on("click", function() {
                  self.changeVolume("negative");
                  return false;
              });
      
              // Change volume field
              this.form.find("#product-quantity-field").on("change", function() {
                  var new_volume = parseFloat( $(this).val() );
                  // AntiWord at Field
                  if (new_volume) {
                      $(this).val(new_volume);
                      self.changeVolume(new_volume);
                  } else {
                      $(this).val( self.volume );
                  }
                  return false;
              });
          }
      
          // Change Volume
          Product.prototype.changeVolume = function( type ) {
              var $volume_input = $("#product-quantity-field"),
                  current_val = parseInt( $volume_input.val() ),
                  input_max_data = parseInt($volume_input.data("max-quantity")),
                  max_val = ( isNaN(input_max_data) || input_max_data === 0 ) ? Infinity : input_max_data,
                  new_val;
      
              // If click "+" button
              if (type === "positive") {
                  if (this.volume < max_val) {
                      new_val = this.volume + 1;
                  }
      
                  // If click "-" button
              } else if (type === "negative") {
                  if (this.volume > 1) {
                      new_val = this.volume - 1;
                  }
      
                  // If manual input at field
              } else if ( type > 0 && type !== this.volume ) {
                  if (current_val <= 0) {
                      if ( this.volume > 1 ) {
                          new_val = 1;
                      }
      
                  } else if (current_val > max_val) {
                      if ( this.volume != max_val ) {
                          new_val = max_val;
                      }
      
                  } else {
                      new_val = current_val;
                  }
              }
      
              // Set product data
              if (new_val) {
                  this.volume = new_val;
      
                  // Set new value
                  $volume_input.val(new_val);
      
                  // Update Price
                  this.updatePrice();
              }
          };

      но так и не заработало ничего (((

  • 1
    Zhmih Партнер-эксперт 21 февраля 2017 22:09 #

    $('.qty .minus').live('click',function () {



    var pid = parseInt($('#qcnt').val());

    var newpid = pid - 1;

    if(newpid <= 1){var newpid = 1;}


    $('#qcnt').val(newpid);


    });

    $('.qty .plus').live('click',function () {

    var pid = parseInt($(this).parents().find('.pid').val());

    var pid = parseInt($('#qcnt').val());

    var newpid = pid + 1;

    $('#qcnt').val(newpid);

    });

  • 1
    larotz 16 ноября 2017 04:05 #

    Спасибо автору, за вектор направления, в общем усовершенствовал решение)


    <input type="number" min="1" name="quantity" value="1" class="qty{if !empty($item.error)} error{/if}" id="pyat">


    это мы вставляем в product.cart.html между <!-- price --> и <div class="add2cart">

    далее в default.css закидываем стиль

    <span class="pln">#pyat::-webkit-inner-spin-button { 
      opacity: 1;
    </span>

    }

    в результате - всё работает шикарно)

    • +1
      albishka albishka 14 января 2018 16:57 #

      а подскажите пожалуйста в какую часть кода стиль нужно поместить? Спасибо.

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

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