X-Cart forums

[Soptareanu @Alex]

Hello, i do some changes in my view-cart layout in order to looks like in capture. For that i replace quantity_box.twig with my new implementation.
This is my own quantity_box.twig file

{##
 # Main element (input)
 #
 # @ListChild (list="product.quantity-box", weight="20")
 #}
 
<div class="fdmteam_quantity">	
	<input type="hidden" class="{{ this.getClass() }}" id="{{ this.getBoxId() }}" value="{{ this.getBoxValue() }}" name="{{ this.getBoxName() }}" >
	<span class="fdmteam_quantity_value" id="count-{{ this.getBoxId() }}">			
		{{ this.getBoxValue() }}	
	</span>
	<span class="fdmteam_quantity_label">
		{{ t(this.getBoxTitle()) }}
	</span>
</div>

<div class="fdmteam_quantity_plus"  id="plus-{{  this.getBoxId() }}"></div>
<div class="fdmteam_quantity_minus" id="minus-{{ this.getBoxId() }}"></div>

<script>

document.body.addEventListener('click', function(event){
	var _target_p = "plus-{{ this.getBoxId() }}" ;
	var _target_m = "minus-{{ this.getBoxId() }}" ;
	var _input    = "{{ this.getBoxId() }}";
	var _span     = "count-{{ this.getBoxId() }}";
	if(event.target.id == _target_p){
		var i = parseInt(document.getElementById(_input).value) ;
		i++;
		document.getElementById(_span).innerHTML = i;
		document.getElementById(_input).value	 = i;
		// do update cart !!
	}else if(event.target.id == _target_m){
		var i = parseInt(document.getElementById(_input).value) ;
		i--;
		if(!i){
			return false;
		}else{
			document.getElementById(_span).innerHTML = i;
			document.getElementById(_input).value	 = i;
			// do update cart !!
		}
	}
});

</script>

The question is how to put updateCart trigger in order to work properly as default implementation. I want to update quantity of item when i press + - button.

[tony_sologubov]

Hi @Alex,

To achieve that try to submit the quantity form using JQuery, once you hit +/- button. X-Cart should catch this form submit and do that via AJAX, so you should get desired result.

If it does not work, try to add 'watcher' CSS class to your +/- buttons and remove form submit via JQuery.

Please, keep me posted about results.

Tony

[Soptareanu @Alex]

Originally Posted by tony_sologubov

Hi @Alex,

To achieve that try to submit the quantity form using JQuery, once you hit +/- button. X-Cart should catch this form submit and do that via AJAX, so you should get desired result.

If it does not work, try to add 'watcher' CSS class to your +/- buttons and remove form submit via JQuery.

Please, keep me posted about results.

Tony

I put "watcher" css class on +/- buttons such as

<div class="watcher fdmteam_quantity_plus"  id="plus-{{  this.getBoxId() }}"></div>

but still doesn't works.

[Soptareanu @Alex]

Originally Posted by tony_sologubov

Hi @Alex,

To achieve that try to submit the quantity form using JQuery, once you hit +/- button. X-Cart should catch this form submit and do that via AJAX, so you should get desired result.

If it does not work, try to add 'watcher' CSS class to your +/- buttons and remove form submit via JQuery.

Please, keep me posted about results.

Tony

I put this function jQuery('.update-quantity').submit(); and it works. But i have problem in quick view page if a product has variants because the script is executed for each element and this cause a problem with my increment value (i).

[tony_sologubov]

Hi @Alex,

Thanks for reaching out.

Could you please explain the problem in more detail?

If we talk about quick view product page, I would assume that clicking +/- would just change value in quantity box and would not call jQuery('.update-quantity').submit(); function.

The same happens when you change quantity manually there.

Tony

Originally Posted by Soptareanu @Alex

I put this function jQuery('.update-quantity').submit(); and it works. But i have problem in quick view page if a product has variants because the script is executed for each element and this cause a problem with my increment value (i).

[Soptareanu @Alex]

Originally Posted by tony_sologubov

Hi @Alex,

Thanks for reaching out.

Could you please explain the problem in more detail?

If we talk about quick view product page, I would assume that clicking +/- would just change value in quantity box and would not call jQuery('.update-quantity').submit(); function.

The same happens when you change quantity manually there.

Tony

I'm not using the implementation from controller.js . I just put my custom .js directly in my quntity_box.twig. But that .js code affect the quick view page. If I click to change product attribute in quick view then my custom js. is executed more time, and the value of element increment with more than one unit.

[Soptareanu @Alex]

Originally Posted by Soptareanu @Alex

I'm not using the implementation from controller.js . I just put my custom .js directly in my quntity_box.twig. But that .js code affect the quick view page. If I click to change product attribute in quick view then my custom js. is executed more time, and the value of element increment with more than one unit.

If you can see in the capture, the value of the element become 5 instead of 2.