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.
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:
<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.
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:
<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:
<a href="?file=&pageID=4"><b>Modify</b></a> |
This shows the total sum of items in the cart and generates links to shopping cart page and to checkout.
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