Dynamic shopping cart

In online store MegaPodarki the shopping cart area dynamically changes depending on whether a customer has added something to cart:

When there are no products in the cart, it looks empty.

If something has been added to the cart, it visually “appears” in it.

It is quite easy to make the shopping cart dynamically change its appearance in your WebAsyst Shop-Script store, you only need to use the built-in CSS design editor for that.

The shopping cart area in the storefront is contained inside a DIV tag to which CSS class cpt_shopping_cart_info is applied:

<div class="cpt_shopping_cart_info">
...here come the contents of the customer's shopping cart...
</div>

If there are products in the cart, the cart_not_empty ID is automatically specified:

<div class="cpt_shopping_cart_info" id="cart_not_empty">
...here come the contents of the customer's shopping cart...
</div>

Different appearance of the shopping cart area can be defined using CSS styles for the #cart_not_empty selector. Open the design editor of your online store and click the “CSS” tab. Find the cpt_shopping_cart_info class, it should look similar to the following:

.cpt_shopping_cart_info {
background: transparent url("../../images/shopping-cart-empty.gif") no-repeat top left;
background-position: 28px 38px;
}

To make the shopping cart change its appearance when products are added by a customer, just add style rules for the #cart_not_empty selector, e.g.:

#cart_not_empty {
background: transparent url("../../images/shopping-cart-full.gif") no-repeat top left;
...
}

Here you can use any necessary CSS rules: for background color, background image, etc.