Add 'plus' 'minus' in place of 'add to cart' in opencart

Question

I want to replace add to cart with 2 buttons that are plus and minus in OpenCart 2.0.1.1, Now i am unable to code for minus button properly. I have added plus and mius butto

Answer 1

The problem here is with standard opencart since 2.0 that post fields with an index longer than 64 characters are ignored (on some systems, at least for my customer).

So if you have a product without options than the field quantity[index] is received by a post request because the index is lesser than 64 characters.But if the product have an option, than the index is greater than 64 characters and the field is not received in a post request (via ajax or not).

The provider from my customer don't want to change this on a shared server, my solution is look how it works in an older version of opencart (I think it is only used in the program /system/library/cart.php) and take it over in 2.0 and your problem have solved .. the index is shorter in older versions .. because not all fields have used for base64_encode ..

Look in the html code of your shopping cart and find the field quantity[..] and count the characters of your index .. for me when longer than 64 characters (e.g. product option used) the field is not received anymore in a post request (via ajax or not) ..

Maybe when you have an own server, you don't have this problem ..

Answer 2

In order to decrement your product quantity you need product_id and its quantity. To decrement we need to check whether qty is greater than 1 or not if it is then we can decrement else we need to remove entire product if qty is only 1.

Things you need to change is your view page add plus , minus icons there, then controller then library then send ajax result back. I will try to make this as easier as possible.

Lets start with view page in my case it is products.tpl the code i writteb to get plus minus buttons is

  <table class="table scroll">
 <tbody>
   <?php foreach ($products as $product) { ?>
  <tr >
     <td >
       <input type="text" style="width: 20px; height: 20px;font-weight:700 " disabled="true" value="<?php echo $product['quantity']; ?>" class="text-center">
       </td>

       <td  class="text-left">
        <a href="<?php echo $product['href']; ?>">
          <b><?php echo $product['name']; ?></b>
        </a>
      </td>

      <td  style=" text-align:right">
        <i class="fa fa-minus-circle fa-2x" style="cursor: pointer;color:red;"  onclick="cart.remove('<?php echo $product['key']; ?>');"></i>
      </td>
    </tr>

    <tr>
      <td colspan="2" style="border:0 none;">
        <div class="btn-group form-inline" role="group">
            <button type="button" style="height:25px;width:25px" class="btn btn-default btn-xs " onclick="cart.decrement('<?php echo $product['product_id']; ?>');">
            <i  class="fa fa-minus"></i>
            </button>

            <button  type="button"  style="height:25px;width:25px" class="btn btn-default btn-xs" onclick="cart.add('<?php echo $product['product_id']; ?>');">
            <i class="fa fa-plus"></i>
            </button>
        </div>
      </td>
      <td  style="border:0 none;" class="text-right" >
        <b><?php echo $product['total']; ?></b>
      </td>
    </tr>

   <?php } ?>

Here I have made javascript ajax call onclick. So lets see what that call does. I have written in same page you can write in any .js file if you wish. script.js

'decrement': function(key) {
$.ajax({
url: 'index.php?route=checkout/cart/decrement',
type: 'post',
data: 'key=' + key,
dataType: 'json',
beforeSend: function() {
$('#cart > button').button('loading');
},
complete: function() {
$('#cart > button').button('reset');
},
success: function(json) {
// Need to set timeout otherwise it wont update the total
setTimeout(function () {
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
}, 100);

if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
location = 'index.php?route=checkout/cart';
} else {
$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
}
});
}

Now the url we calling from above ajax call is the path for our controller checkout and function decrement. Here is that

controller.php

    public function decrement() {
    $this->load->language('checkout/cart');

    $json = array();

    // Remove
    if (isset($this->request->post['key'])) {
    $this->cart->decrement_product_quantity($this->request->post['key'],1);

    unset($this->session->data['vouchers'][$this->request->post['key']]);

    $this->session->data['success'] = $this->language->get('text_remove');
  // rest of the code keep same}

Now did you noticed we are calling library function decrement_product_quantity by passing qty and 1. Here key is nothing but ajax parameter which is product_id.

Now final function in library

public function  decrement_product_quantity($product_id, $qty = 1){
$this->data = array();
$product['product_id'] = (int)$product_id;
$key = base64_encode(serialize($product));

if ((int)$qty && ((int)$qty > 0)) {
if ($this->session->data['cart'][$key]>1) {
$this->session->data['cart'][$key] -= (int)$qty;
} else {
$this->remove($key);
}
}
}

This one checks cart if qty is greater than 1 it will decrement else remove the entire product. Hope you understood please let me know if any queries you have. Also hope you can do for increment too. good luck