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

9 ответов

• популярные
• новые

• 1

  Павел Гордовой Партнер-эксперт Партнер-разработчик 17 сентября 2015 10:09 #

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

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

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

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

  ответить
  • +1

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

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

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

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

    ответить
    • +1

      Павел Гордовой Партнер-эксперт Партнер-разработчик 17 сентября 2015 10:20 #

      та я б скинул, но с телефона сейчас. Буду за пк только в воскресенье.

      Думаю вам быстрее подскажут

      ответить
    • +1

      Павел Гордовой Партнер-эксперт Партнер-разработчик 17 сентября 2015 10:26 #

      ковыряйтесь в файле cart.js

      Там все с помощью js делается.

      Хотите научиться - ковыряйтесь. Чем меньше Вам информации дадут - тем больше вынесите пользы из этого примера.

      Направление - что гуглить я дал :)

      ответить
      • +1

        Leva 17 сентября 2015 10:28 #

        вот что либо заверстать в css я без проблем, а с программированием у меня лучше запоминается в виде примеров я тогда понимаю как это в целом работает

        ответить
        • +1

          Николай Иванов Партнер-эксперт Партнер-разработчик 18 сентября 2015 00:20 #

          Вам же ответили, что примеры есть в дефолтной теме, в файле cart.js. Там есть необходимый набор js-функций и ajax-вызовов для работы динамических фич корзины. Достаточно простой и наглядный код, ничего сложного.

          ответить
• 1

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

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

  ответить
  • +1

    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 19 сентября 2015 00:58 #

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

    ответить
• 1

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

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

  и не стилезуете. И в разных браузерах он по-разному выглядит (правда, везде страшненько, но по-разному). Зато дёшево и сердито.

  ответить
• 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

    Евгений 28 января 2017 18:00 #

    Leva, привет, другого решения не нашел?

    ответить
    • +1

      Павел Гордовой Партнер-эксперт Партнер-разработчик 28 января 2017 18:03 #

      Решение очень простое: добавить элементы html, добавить JS
      Если не знакомы с этим - лучше заплатите пару копеек специалисту - он за 5мин сделает

      ответить
      • +1

        Евгений 28 января 2017 21:48 #

        Готов заплатить, можно к Вам обратиться?

        ответить
        • +1

          Павел Гордовой Партнер-эксперт Партнер-разработчик 28 января 2017 23:08 #

          обращайтесь

          pavel@gordovoy.net

          ответить
  • +1

    larotz 16 ноября 2017 03:57 #

    нормас, лучше пустоты)

    ответить
• 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 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

    anastasiamatveeva 14 января 2018 16:57 #

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

    ответить