Smilehouse Workspace HOWTO Articles

Howto change shopping cart color when product is added into it

It is sometimes necessary to show to a visitor of the web shop that an item has been added to shopping cart by creating some kind of a special effect, e.g. changing the background color of the small shopping cart to yellow.

This is handy especially if your web shop is built so that the user does not go to a shopping cart page automatically after clicking "Add to cart" button. If the cart changes color, the user the user knows the button did something and the item is in the cart and the user can continue shopping on the same product list page.

Changing the appearance of an empty cart

Go to Visual -> WWW-outlook -> Notifications -> "Shopping cart is empty"

On this page you will see the notification that is shown when the cart is empty.

Replace the text with a HTML-code e.g. like this:

<b>Shopping Cart</b>
<div style="padding: 8px;border: 1px solid black;">
Your cart is empty

This creates a nice box with a title Shopping Cart and inside it says that the cart is empty.

Changing the appearance of a cart with items

We should use the HTML-code from an empty cart as a basis for our cart with items.
We can for example change the background color to yellow and add some variables and links.

Open the page where you have put your small shopping cart, for example
Visual -> WWW-outlook -> Page construction -> Top

Click on the Shopping Cart WAE on the left.

Put this code in the Start HTML -field:

<b>Shopping Cart</b>
<div style="background-color: yellow;padding: 8px;border: 1px solid black;">

As you can see from the code, we changed the background color to yellow.
You could also make some other adjustments here, such as make the background to fade etc.

Put this code in the Cart HTML -field:

$item_quantity$ x $item_name$<br>

This makes a list of items and quatities visible in the cart.

Put this code in the End HTML -field:

Total: <b>$cart_items_cost$</b>
<a href="?file=&pageID=4"><b>Modify</b></a> |
<a href="?file=&pageID=5"><b>Checkout</b></a>

This shows the total sum of items in the cart and generates links to shopping cart page and to checkout.

Testing the cart

The cart without and with products should look something like this.

In the first box you see the empty cart and after an item is added to cart it changes the background color to yellow and tells the contents of cart.

<< Back to HOWTO index