Style The Add to cart button on PLP page based n the item is in the cart or not

We have to give unique style to the “Add to cart” button if the item is belonging to the cart, if it is not in cart we have to show different styles. The code is added below:

To change the cart icon on the button based on the status of the item whether it in the cart or not

var plp = container.getComponent('PLP');	
				if (plp) {
					_.extend(FacetsBrowseView.prototype, {
						getContext: _.wrap(FacetsBrowseView.prototype.getContext, function (fn) {
							try {
								var original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
								var cartDetails = this.cart.get('lines').models;
								_.extend(CartAddToCartButtonView.prototype, {
									template: jj_cartupdate_cartupdate_tpl,
									getContext: _.wrap(CartAddToCartButtonView.prototype.getContext, function (fn) {
										try {
											var original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
											var itemId = this.model.get('item').get('itemid');
											var flag = false;
											for (var i = 0; i < cartDetails.length; i++) {
												var cartItemId = cartDetails[i].attributes.item.attributes.itemid;
												if (itemId === cartItemId) {
													flag = true;
													break;
												}
											}
											if (flag === false) {
												original_Ret.isInsideCart = false;
											}
											else {
												original_Ret.isInsideCart = true;
											}
										}
										catch (e) {
											console.log("err@CartAddToCartButtonView", e);
										}
										return original_Ret;
									})
								});
							}
							catch (e) {
								console.log("err@FacetsBrowseView", e);
							}
							return original_Ret;
						})
					});
				}
			}
{{#if isCurrentItemPurchasable}}
	<div class="cart-add-to-cart-button-container">
		<div class="cart-add-to-cart-button">
			<button type="submit" data-type="add-to-cart" data-action="sticky" class="cart-add-to-cart-button-button">
				{{#if isInsideCart}}
				<img src="/site/img/trolley.svg " alt="cart-icon">
				{{else}}
				<img src="/site/img/outlinetrolley.svg " alt="cart-icon">
				{{/if}}
				 
				{{#if isUpdate}}{{translate 'Update'}}{{else}}{{translate 'Add To Cart'}}{{/if}}
			</button/>
		</div>
	</div>
{{/if}}



{{!----
Use the following context variables when customizing this template: 
	
	isCurrentItemPurchasable (Boolean)
	isUpdate (Boolean)

----}}

Leave a comment

Your email address will not be published. Required fields are marked *