Close

Using Nop Ajax Cart plugin on custom button

vishalb
5 years ago
#15059 Quote
Avatar
  • 3
Hi,
Wish to add a new custom button on simple/grouped product template that should work like 'Add to Cart' button. Current 'Add to Cart' button opens small Ajax Cart window with new product added to it. However, I cannot get this Ajax Cart feature to work on new button.
I have added below html just below Add to Cart code in template file(\Presentation\Nop.Web\Themes\Native\Views\Product\ProductTemplate.Simple.cshtml):
<input type="button" id="add-to-cart-button-custom" class="button-1 add-to-cart-button" value="Add Custom Product To Cart" onclick="AjaxCart.addproducttocart_details('/addproducttocart/details/11193/1', '#product-details-form');; return false;" />

Can someone please help?
SDobrev
5 years ago
#15060 Quote
Avatar
  • Moderator
  • 283
Hi,

The input should have data-productid attribute.
Best Regards,
Stoyan Dobrev
Nop-Templates.com
vishalb
5 years ago
#15061 Quote
Avatar
  • 3
Well, What I have put is a very simple example of button. After making this work, I intend to use this with a dropdown of various products. So, that user can select a product from dropdown and click on this button to add selected product to cart. Please help on how to achieve this. (I have a specific requirement to show few products in dropdown.)
vishalb
5 years ago
#15062 Quote
Avatar
  • 3
To add to earlier reply, I intend to use javascript/jquery to replace the productId in url of AjaxCart.addproducttocart_details() call, based on user's selection of dropdown item. Hence, I cannot add data-productid attribute in the button element.
SDobrev
5 years ago
#15063 Quote
Avatar
  • Moderator
  • 283
Hi,

The Ajax Cart is replacing the Add to Cart buttons. There is a selector in the administration and a few required things like the product id.

Unfortunately, we can't tell you how to implement your custom logic. Try to beautify the Ajax Cart .js and you will find how we get the buttons from the DOM.
Best Regards,
Stoyan Dobrev
Nop-Templates.com