Hi, want to share today a piece of JS code.

About the issue:
Once cache is enabled globally on a website with a cart, product pages become cached and therefore cart information is not updated.

We know about the <cms:no_cache /> tag, which is normally placed in cart template( cart.php ) and can disable caching. But we want the cache on product pages, so can't use it here.

As previously discussed in Twitter addon topic viewtopic.php?f=8&t=7730&hilit=couch+cart+cache&start=10#p24103 a JS solution is a good way to solve it.

--
So, a JS solution comes here.

Let's say, a product page has 2 html elements, where we want to display total price of cart and total quantity of all products in it.
CouchCart Sample http://www.couchcms.com/demo/simple/ provides such a place here
Code: Select all
<li class="nav-button">
   <a href="<cms:pp_cart_link />" class="nav cart"><span class="quantity"><cms:pp_count_items /></span> item(s) - $<strong class="price"><cms:number_format "<cms:pp_total />" /></strong></a>
</li>

I'll use this as a sample too. Basically I need to replace cached text inside these 2 elements:
Code: Select all
<span class="quantity" >here goes quantity</span> and <strong class="price">here goes total price</strong>

To do so, I will request in background our never-cached-cart-template cart.php( which has the <cms:no_cache /> tag ).
Once I get the html response from the requested cart.php, I will find required values in it and update text in our 2 elements on a product page.

Do we have required information on cart.php template? I must have it there in some html element in order to successfully complete the task. CouchCart has this line in cart.php, which displays total amount to the buyer:
Code: Select all
<td class="col-total">$<cms:number_format "<cms:pp_total />" /></td>

It means that I can use this for my task. But quantity is not displayed in CouchCart sample, so we need to add it also. I will put a hidden input with a value, so it doesn't change how the page looks. So, I decided to place such hidden input somewhere before the <cms:pp_cart_form>, right before we check the presence of items in cart. This way quantity info will be always available( '0' if cart is empty ). And it looks like this in cart.php:
Code: Select all
<input type='hidden' id="cart-total-quantity" value="<cms:pp_count_items />" />      
<cms:if "<cms:pp_count_items />" >

Now cart.php can provide all requested info. Let's get it into the jQuery script in product page:
Code: Select all

    <script type="text/javascript">

          //request full page from cart template - it is never cached
          $.get( "cart.php", function( data ) {

                // do stuff after successful load
           
                // Get total value of cart: $25 and then strip '$' to get only number
                // Take it from element( td with class="col-total" )
            var total = $( data ).find('.col-total').text().replace('$','');
                // Get total quantity of all products in cart from hidden input with id 'total-quantity'
            var quantity = $( data ).find('#total-quantity').val();
               
                // Set total to element on product page with class 'price', if received quantity is not empty
                if( total ){ $('.price').html( total ); } else{ $('.price').html( '0.00' ); }

                // Set quantity on product page to element with class 'quantity', if received quantity is not empty
                if( quantity ) $('.quantity').html( quantity);               
             
          });

    </script>
   

This would do it. :)
Caveats:

Don't forget to place script after a call to jquery library.

If you use elements with classes 'quantity' and 'price' in header in all pages( including the cart ), then it is wise to make sure they are really unique. Maybe add a new class 'cart-price-total' to td element in cart and change id of hidden input in cart to 'cart-total-quantity'. So in header classes can be 'total-price' and 'total-quantity'. Similar changes go to script.

If cache on the website was ever enabled, then after all the editing work, remove all files in directory on server /couch/cache to make sure everything is updated correctly. Visiting as super-admin doesn't reset cache, so make sure it is properly taken care of.