Perch Shop - Add to Cart Issue

  • Hello there,


    I am trying to add items to a cart without leaving a list view of products and submitting a page redirect on the form action, does anyone know if this is possible or what I may need to do to get this to work properly? My add to cart form looks like this:


    Code
    1. <perch:form id="add_to_cart" app="perch_shop" action="#add_to_cart">
    2.     <perch:input id="product" type="hidden" value="<perch:shop id="productID" env-autofill="false" />" />
    3.     <perch:input id="qty" class="quantity" value="1" type="number" min="1" />
    4.     <perch:input class="add-to-cart" type="submit" value="Add to cart" />
    5. </perch:form>


    Since the action is going to an anchor on the same page, the form works if I add one product, but if I click on a separate item and add that to the cart on the same page, it only increments the original item quantity in the cart, not a new item.


    Here is the relevant page: http://staging.europeanfoodstore.ca/products


    If I change the action to action="/cart" it works as intended, but I am assuming I need the submit event to reload the page or something similar. Can anyone shed some light on what might be needed for this to work? My intention is to show a modal on submission, but not leave the page.


    Thank you in advance,

  • Hello Hussein,


    The action for the product detail is going to /cart as is used on the examples. We figured the user is only really going to be looking at one product in detail at a time and redirecting to the cart doesn't seem as big an inconvenience at that point. With the list view the user may want to just grab a number of items without being transported to the cart page and having to come back and reset filters. I hope that makes sense!

  • This makes sense. However, I'm not sure I understand what you need help with. Could you clarify?


    If I change the action to action="/cart" it works as intended, but I am assuming I need the submit event to reload the page or something similar. Can anyone shed some light on what might be needed for this to work? My intention is to show a modal on submission, but not leave the page.


    Are you looking for a way to submit the add to cart for with Javascript?

  • Sorry for being obtuse! I'll try and clarify a bit more.


    When the value for the action is set to target an anchor (ie, action="#anchor") on the same page (no page reload) and not load a separate page, and I try to add a couple items to my cart, it will only add multiples of the first item I selected.


    For example, I try to add 3 gooseberry jams, then 2 mustards, and 1 pickled onion, and when I go to my cart, I just have 6 gooseberry jams.


    Do I need to reload the page with this action each time I add an item for it to increment the cart properly? Is there a simple solution for what I am trying to achieve?


    Thanks for sticking with me on this! I am probably just ignorant to what takes place in the form submission.

  • When the value for the action is set to target an anchor (ie, action="#anchor") on the same page (no page reload) and not load a separate page,

    A form submission will reload the page even if an anchor is used as the value for the action attribute. It may not be clear if you're testing a fast/cached page, but you can confirm this by opening the browser dev tools and going to the network tab and then submitting the form.


    If you don't want a page reload, you need to submit the form and update the cart count with Javascript.