I would need some help with AJAXifying the CouchCart, but using Magnific Popup modal, not the Bootstrap one used in tutorial.

If someone has already did that(maybe with some other modal plugin), or if @cheesypoof is willing to lend a hand, after all, he provided the code for it in the tutorial , it would be great.


My JS skills are not that good, being primarily a designer. I am able to call the cart-modal.php with AJAX call, but that is as far as I can go. I played with the code, and I understand it to some extent, but I can't make it work.

Here is the part to call the cart-modal-php

Code: Select all

   $('.simple-ajax-popup').magnificPopup({
         items:{
            type: 'ajax',
            src: 'cart-modal.php'
         }
            
            }); 

And here is the way for opening and closing it programatically:

Code: Select all

$.magnificPopup.close();
$.magnificPopup.open(); 

[cheesypoof]

1. Change your cart-modal.php checkout button to:

Code: Select all

<a class="button checkout-button" href="<cms:pp_checkout_link />">Checkout</a>

2. Change your cart-modal.php continue shopping button to:

Code: Select all

<button class="button continue-button" type="button">Continue Shopping</button>

3. On any page that you wish to show the popup, include the following at the end of the body, before any scripts:

Code: Select all

<div class="mfp-hide" id="cart-popup">
    <div class="transparent" id="cart-popup-body"></div>
    <img alt="Loading..." class="ajax-loader" height="32" src="<cms:show k_site_link/>images/ajax-loader.gif" width="32"/>
</div>

4. Add the following styles to one of your CSS files:

Code: Select all

/* Cart Popup */
#cart-popup{position:relative;max-width:800px;padding:28px;margin:0 auto;background-color:#fff;}
#cart-popup>.mfp-close{top:6px;right:6px;width:19px;height:20px;line-height:20px;padding-right:0;opacity:1;text-align:center;font-size:20px;font-weight:bold;color:#ccc;-moz-transition:color .15s linear;-webkit-transition:color .15s linear;transition:color .15s linear;}
#cart-popup>.mfp-close:hover,
#cart-popup>.mfp-close:focus{color:#888;}
#cart-popup-body{opacity:1;-moz-transition:opacity .2s ease;-webkit-transition:opacity .2s ease;transition:opacity .2s ease;}
#cart-popup-body>.info{margin:0;}
#cart-popup-body.transparent{opacity:0;}
.ajax-loader{display:none;position:absolute;top:50%;left:50%;margin:-16px 0 0 -16px;}
.transparent+.ajax-loader{display:block;}

/* Simple fade transition for Magnific Popup */
.mfp-fade.mfp-bg,
.mfp-fade.mfp-wrap .mfp-content{opacity:0;
    -moz-transition:opacity .2s ease-out;
    -webkit-transition:opacity .2s ease-out;
    transition:opacity .2s ease-out;}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{opacity:1;}
.mfp-fade.mfp-bg.mfp-ready{opacity:.5;}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content,
.mfp-fade.mfp-bg.mfp-removing{opacity:0;}

5. Replace cart-modal.js with the following attachment.

cart-modal.zip

(1.21 KiB) Downloaded 688 times

6. Let me know if this worked

Thanks @cheesypoof !!! Works like a charm. I couldn't get it to work with the stylesheet you provided, the cart modal was always present with the loading gif.

Then I saw that your stylesheet doesn't have the styles to initially hide the modal:

Code: Select all

.mfp-hide {
  display: none !important; }

But that didn't help, it only hid the modal, but it wouldn't initialize at all.
Then I added the whole magnific popup styles on top of your stylesheet, and it works perfect now.

[cheesypoof]

The styles I posted earlier should supplement the default magnific popup file. I'm glad you got it working @madebym.

@cheesypoof I think I am in need for a little of your JS wizardry

This could also be helpful to others who are using CouchCart, I would even add this part to the docs(couch cart tutorial) or make it sticky

Ok, here goes. As we all know, a lot of the today's websites are using some sort of off-canvas panels, navigations, etc.

In the Couch Cart tutorial, a modal window is used when adding items to the cart. Let's pretend that there is no modal window.
Our cart is off-canvas panel(besides separate cart.php page), or just a simple line of text that tells the cart summary, e.g. total items and price.

I would like to have the following functionality, user adds a product, and the product info is updated without refreshing the page(AJAX).

What modifications are needed to the js file you provided earlier for AJAXifying the magnific popup ?

I believe that having this setup, offers more versatillity than modal window. One could update the off-canvas panel, a sticky header/footer, just have a minimal line that says the price and number of items, etc.
The important thing is to process eveyrthing without the page refreshing.

[cheesypoof]

I'm not sure if you noticed, but on the simple cart demo we already do something like this. Look at the top right and you should see "0 item(s) - $0.00". Add a product to your cart and then close the modal. That text should now be changed to reflect the updated cart.

I think that part of a solution to your request is having a Couch template that outputs all of the cart data in JSON format. You could then implement just about anything conceivable with JS based on this information. I'll look at creating such a template as it would be generic enough for all AJAX cart solutions.

[cheesypoof]

See viewtopic.php?f=8&t=8602.