Dynamically showing items in cart
Suppose you want to add a Cart item to your navigation that shows the number of items in the cart and links to your view cart page. All you have to do is add a CSS class to any item on your site. Here's how it works.
There are a couple "magic" CSS classes that make this happen. Once CSS class will automatically update the item to show the current number of items in the cart. The other CSS class adds some lovely styling to the item.
cc-cart-count
Add this class to any item on your page, and the contents of that item will get automatically updated (via AJAX) with the number of items in the cart.
cc-cart-link-light and cc-cart-link-dark
These two CSS classes style a link with the Cart66 shopping cart icon. This sets your view cart link apart from the other links in your navigation. If you want your link to have a light background, as shown on the Galileo website , then use the cc-cart-link-light css class. If you'd rather have a dark background, like in the Fit Band website , then use the cc-cart-link-dark css class.
Example Link
Here's the code we're using in the Galileo website to show the cart link in the header.
<a href="/view-cart/" class="cc-cart-link-light cc-cart-count">Cart: loading</a>
Everything to the right of the colon (:) gets replaced with the cart count - the number of items in the shopping cart. This allows you to provide a label prefix. If you just want the number and nothing else you can omit the colon and ALL of the text in the anchor link will be replaced with the cart count.
Menu Item
This technique also works with navigation menu items.
This is an example of a Custom Links item in the menu.
- Add a custom link using the "magic" URL /view-cart/ This will link to your secure hosted cart page.
- Make sure you have CSS Classes checked in your Screen Options so you can add the Cart66 CSS classes to the menu item
- Add cc-cart-link-dark and cc-cart-count
Save your changes, then take a look at your website navigation. You will see the nice, dynamic cart link.
