I just started with couch shop - which is amazing - and got stuck on implementing a modal to edit product options.

Website Link--->[url]new.kenballoons.co.ke/Products.php[/url]

When you click on the first products cart icon, the modal information is Ok. However, the rest of the product's modal show the first product's information. Any help on how to solve this will be appreciated.

[KK]

That doesn't seem to be an issue with the Cart module.
Rather, it is an issue with the Bootstrap code you are using to tie up the 'modal' boxes with the cart buttons.

From what I could see, the code for the button is as follows where data-target="#pmodal" attaches the button to the modal dialog box -

<div style="cursor: pointer;text-align:center;width:30%;margin:0; padding:15px 5px;" class="col-md-3" data-toggle="modal" data-target="#pmodal"><span class="glyphicon glyphicon-shopping-cart"></span></div>

Code for the modal dialog box being -

<div class="modal fade" id="pmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Problem is that you have three products on the page and each of the three have their respective dialog boxes with the same ID 'pmodal'.

I think you can see why only the first dialog box gets invoked every time.

Hope it helps.

Thank you KK for the prompt feedback. That does seem to be the problem for sure. I was able to go around it by setting the id to <cms:show k_page_name/>?

How do i avoid redirection to cart page though ?

[KK]

How do i avoid redirection to cart page though ?

To put the problem in perspective for others who might chance upon this thread -
You are showing a single product detail in a modal popup. Hitting the "Add to cart" button adds the item to the cart and then redirects the visitor to the cart page (which is Couch's default behavior).

cart.jpg (94.77 KiB) Viewed 2562 times

One way to handle your use-case would be to make the "Add to cart" button redirect back to the same page we are on (products.php). This would be akin to a refresh. The popup will close but the visitor will remain on the same page.

To do this, add the 'redirect' parameter to the <cms:pp_product_form> tag you are using to show the item e.g. as follows -

Code: Select all

<cms:pp_product_form  redirect="<cms:link 'product.php' />" >

The second way of adding item would be to submit the form generated by <cms:pp_product_form> through AJAX.
Hook on to the button click and submit the form through JQuery. Couch will sense that AJAX is being used and so wil not do any redirection. The control will get back to your JS submission handler and you can take over from there.

Hope it helps.

This helped. thanks
I however redirected to the same folder-----> <cms:pp_product_form redirect="<cms:show k_folder_link />" >