Ecommerce Templates > General Help > Mini css widgets & Mini Drop Down Cart

Mini css widgets

CSS widgets

We have introduced 6 plug-ins in one small file that allows you to display a sign up form for your store mailing list, a minicart that displays on one line, the regular multi-line minicart, the mini client login displaying on one line and on multiple lines and the css based mini recently viewed.

These are all css based making configuration highly flexible and simple to install. They do require a minimum version of 6.0.3 and can be purchased together from our store tools page.

 

Mini Mailing List Sign Up

Mini mailing list

Copying and pasting 2 lines of code you can allow customers to sign up to your mailing list from any page on your store. All the elements can be styled through your css file meaning that it will fit seamlessly into any design.

Once you have purchased the ASP or PHP version from the store tools page, unzip the file and upload incminicss.asp or incminicss.php to the vsadmin/inc/ folder on your server. If you are using 2 vsadmin folders for security, ssl or language reasons the file should be uploaded to each inc folder.

The next thing you will want to do is copy the following two lines of code where you want the mini signup to appear on your store pages. For the ASP version that will be

<% minicssaction="minisignup"%>
<!--#include file="vsadmin/inc/incminicss.asp"-->

or for the PHP version

<?php $minicssaction="minisignup"?>
<?php include "vsadmin/inc/incminicss.php" ?>

You will need to make sure that those lines come somewhere after the other main 4 ASP or PHP include lines. These can usually be found near the top of the code anyway but it is worth checking to be sure.

The final step is to style the signup box so it fits into your existing design and color scheme. These are the available css classes

  • div.minimailsignup: the container of the signup box
  • label.minimailsignup: the labels for the input fields
  • input.minimailsignup: the input fields
  • input.minmailsubmit: the submit button

The example above uses the following css copied into your main css file:

div.minimailsignup{
border:dotted 1px #e69d01;
background:#fdedc9;
margin:4px auto;
width:180px;
padding:4px;
}
label.minimailsignup{
display:block;
font-weight:bold;
width:70px;
padding-top:2px;
float:left;
}
input.minimailsignup{
font-size:12px;
padding:2px 2px;
border:solid 1px #999;
width:100px;
margin:2px;
}
input.minimailsubmit{
margin:6px;
}

That design allows plenty of space for the signup box to have the labels to the left of the input fields but it may be that in your store, there's not so much space available. If that's the case reduce the width of the container in div.minimailsignup and the input fields in input.minimailsignup and also remove the declaration float:left from that class. That will place the text above the input fields as in the example here:

Mini signup

After signing up the customer will receive a thank you message on the cart page, along with a message to confirm their subscription to the newsletter. The contents of the mini signup box will then change to avoid people spamming the form and signing up multiple times:

Sign up confirmation

If you have any problems with the installation, please take a look at the troubleshooting section below and if you need further clarification, please post on the support forum and one of our developers will be happy to help out.

Top of page

One Line Minicart

One line minicart

The regular minicart expands as more items are added to cart and this may cause layout problems if you want to show the cart contents in the header section of your store pages. That's why we have released a cut down one line version. It doesn't include the extra features of shipping estimate, tax and discounts that you can see in the multi-line minicart but it does provide a clear guide to the number and grand total of items placed in the cart.

Once you have purchased the ASP or PHP version from the store tools page, unzip the file and upload incminicss.asp or incminicss.php to the vsadmin/inc/ folder on your server. If you are using 2 vsadmin folders for security, ssl or language reasons the file should be uploaded to each inc folder.

The next thing you will want to do is copy the following two lines of code where you want the one line minicart to appear on your store pages. For the ASP version that will be

<% minicssaction="onelineminicart"%>
<!--#include file="vsadmin/inc/incminicss.asp"-->

or for the PHP version

<?php $minicssaction="onelineminicart"?>
<?php include "vsadmin/inc/incminicss.php" ?>

You will need to make sure that those lines come somewhere after the other main 4 ASP or PHP include lines. These can usually be found near the top of the code anyway but it is worth checking to be sure.

The final step is to style the one line minicart so it fits into your existing design and color scheme. These are the available css classes

  • div.minicartoneline: the container of the one line minicart
  • div.minicartoneline1: the first line showing the number of products in the cart
  • div.minicartoneline2: the second line showing the cost of the items added to cart (without shipping + tax)
  • div.minicartoneline3: the third line with the mini cart icon and link to the main cart page.
  • a.mincart: the link properties of the shopping cart link

The example above uses the following css copied into your main css file:

div.minicartoneline{
background:#fff;
}
div.minicartoneline1{
padding:2px;
font: normal 12px Arial, sans-serif;
float:left;
color:#333;
}
div.minicartoneline2{
padding:2px;
font: normal 12px Arial, sans-serif;
float:left;
color:#333;
}
div.minicartoneline3{
padding:2px;
font: normal 12px Arial, sans-serif;
color:#333;
}

Please note that the "float" element is important to keep the content on one line. You can use your own minicart icon replacing littlecart1.gif in the main images folder with your own 16 x 15 gif file of the same name.

If you have any problems with the installation, please take a look at the troubleshooting section below and if you need further clarification, please post on the support forum and one of our developers will be happy to help out.

Top of page

Multi-line Minicart

Mini mailing list

The original download of your Ecommerce Templates shopping cart software already comes with a minicart. It shows a summary of items that the customer has added to cart along with a shipping estimate, discounts that have been applied and any tax that is applied. The multiline css minicart here provides exactly the same functionality with the added bonus of extra formatting choices through the css classes we have made available

Once you have purchased the ASP or PHP version from the store tools page, unzip the file and upload incminicss.asp or incminicss.php to the vsadmin/inc/ folder on your server. If you are using 2 vsadmin folders for security, ssl or language reasons the file should be uploaded to each inc folder.

The next thing you will want to do is copy the following two lines of code where you want the multi-line minicart to appear on your store pages. For the ASP version that will be

<% minicssaction="minicart"%>
<!--#include file="vsadmin/inc/incminicss.asp"-->

or for the PHP version

<?php $minicssaction="minicart"?>
<?php include "vsadmin/inc/incminicss.php" ?>

You will need to make sure that those lines come somewhere after the other main 4 ASP or PHP include lines. These can usually be found near the top of the code anyway but it is worth checking to be sure.

The final step is to style the minicart box so it fits into your existing design and color scheme. These are the available css classes

  • div.minicart: the container of the multi-line minicart
  • div.minicartcnt: the contents of the minicart
  • span.minidsc: the Formatting for discounts and free shipping text
  • a.mincart: the link properties of the checkout / shopping cart link

The example uses the following css copied into your main css file:

div.minicart{
border:dotted 1px #e69d01;
background:#fdedc9;
margin:4px auto;
width:180px;
padding:4px;
}
div.minicartcnt{
text-align:center;
padding:2px;
font: normal 12px Arial, sans-serif;
border:1px solid #fff;
background-color: #fdedc9;
}
span.minicartdsc{
text-align:center;
font: normal 12px Arial, sans-serif;
color:#ff6600;
}

You can use your own minicart icon replacing littlecart1.gif in the main images folder with your own 16 x 15 gif file of the same name.

If you have any problems with the installation, please take a look at the troubleshooting section below and if you need further clarification, please post on the support forum and one of our developers will be happy to help out.

One Line Minilogin

One line minilogin

The regular mini login displays on three lines but if you are stuck for space in your design, you may find the one line mini login better suits your needs.

Once you have purchased the ASP or PHP version from the store tools page, unzip the file and upload incminicss.asp or incminicss.php to the vsadmin/inc/ folder on your server. If you are using 2 vsadmin folders for security, ssl or language reasons the file should be uploaded to each inc folder.

The next thing you will want to do is copy the following two lines of code where you want the one line minilogin to appear on your store pages. For the ASP version that will be

<% minicssaction="onelineminilogin"%>
<!--#include file="vsadmin/inc/incminicss.asp"-->

or for the PHP version

<?php $minicssaction="onelineminilogin"?>
<?php include "vsadmin/inc/incminicss.php" ?>

You will need to make sure that those lines come somewhere after the other main 4 ASP or PHP include lines. These can usually be found near the top of the code anyway but it is worth checking to be sure.

The one line minilogin uses the same css classes as the one line minicart above.

Multi-line Minilogin

Mini client login

The original download of your Ecommerce Templates shopping cart software already comes with a mini login feature. It shows if a customer is logged in or not. The multiline css minilogin here provides exactly the same functionality with the added bonus of extra formatting choices through the css classes we have made available

Once you have purchased the ASP or PHP version from the store tools page, unzip the file and upload incminicss.asp or incminicss.php to the vsadmin/inc/ folder on your server. If you are using 2 vsadmin folders for security, ssl or language reasons the file should be uploaded to each inc folder.

The next thing you will want to do is copy the following two lines of code where you want the multi-line minilogin to appear on your store pages. For the ASP version that will be

<% minicssaction="minilogin"%>
<!--#include file="vsadmin/inc/incminicss.asp"-->

or for the PHP version

<?php $minicssaction="minilogin"?>
<?php include "vsadmin/inc/incminicss.php" ?>

You will need to make sure that those lines come somewhere after the other main 4 ASP or PHP include lines. These can usually be found near the top of the code anyway but it is worth checking to be sure.

The multi-line minilogin uses the same css classes as the multi-line minicart above.

Recently Viewed

Recently viewed widget

Your Ecommerce Templates shopping cart software already comes with a recently viewed feature but this widget adds more flexibility and features. It is css based and comes with its own css classes, making the formatting much easier to control. You also have the opportunity to link from the Recently Viewed heading to a product page made up of the products the customer has viewed. The order of the elements in the display can also be controlled.

Once you have purchased the ASP or PHP version from the store tools page, unzip the file and upload incminicss.asp or incminicss.php to the vsadmin/inc/ folder on your server. If you are using 2 vsadmin folders for security, ssl or language reasons the file should be uploaded to each inc folder.

The next thing you will want to do is copy the following two lines of code where you want the Recent View widget to appear on your store pages. For the ASP version that will be

<% minicssaction="recentview"%>
<!--#include file="vsadmin/inc/incminicss.asp"-->

or for the PHP version

<?php $minicssaction="recentview"?>
<?php include "vsadmin/inc/incminicss.php" ?>

You will need to make sure that those lines come somewhere after the other main 4 ASP or PHP include lines. These can usually be found near the top of the code anyway but it is worth checking to be sure.

Make sure you have turned the recently viewed feature on in vsadmin/includes.asp

recentlyviewed=TRUE

or in vsadmin/includes.php

$recentlyviewed=TRUE;

To set the order of the elements add this to vsadmin/includes.asp

recentviewlayout="category,productname,productimage"

or for the PHP version

$recentviewlayout='category,productname,productimage';

You can change the order or remove elements you don't want to show

These are the available css classes

  • div.recentview - the main container
  • a.recentview - the link properties
  • div.recentviewheader - the header div
  • div.recentviewline - the various container divs
  • div.recentviewcategory - the category name div
  • div.recentviewname - the product name div
  • div.recentviewimage - the image div
  • img.recentviewimage - the image properties

So for example to get the layout shown above you would use the following in your css file

div.recentviewheader{
width:100%;
float:left;
border-bottom:1px solid #ccc;
padding-bottom:6px;
}

div.recentviewline{
width:100%;
float:left;
border-bottom:1px solid #ccc;
padding:6px 2px;
}

div.recentviewimage{
width:48%;
float:left;
}

img.recentviewimage{
width:70px;
float:left;
}

div.recentviewname{
width:48%;
float:left;
font-size:12px;
margin-top:8px;
}

and then this in vsadmin/includes.asp

recentlyviewed=TRUE
recentviewlayout="productimage,productname"

or in vsadmin/includes.php

$recentlyviewed=TRUE;
$recentviewlayout='productimage,productname';

Please Note

From Version 6.6 the "Recently Viewed" title will link to the products page listing the recently viewed items. In Version 6.5 and below you can set the link to the page of your choice with the following setting in includes.asp

recentviewlink="categories.asp"

or includes.php

$recentviewlink='categories.php';

Troubleshooting

The most common errors regarding the set up of the mini css widgets are the following:

  • The mini widgets must go on a page with a .asp or .php extension depending on the version you are working from eg example.asp / example.php and not example.html or example.htm
  • The mini widget include lines must come after the other 4 ASP or PHP include lines. If the placement is a problem then the other 4 include lines can be moved up the code.
  • The ASP or PHP include lines should not be duplicated on the page, if you receive an error then do check that there is only one instance of each.
  • The path to the include line is not correct. For example if you have the added the include line to a Dreamweaver library file (.lbi) or Template file (.dwt) then the path for the ASP version will probably be

<!--#include file="../vsadmin/inc/incminicss.asp"-->

  • If you enter the site using http://yourdomain.com and are then switched to the www domain when clicking on the cart link in the minicart, the main cart may well appear as empty because the cookie hasn't been copied across. To get round this, find this code at the top of your .php pages

<?php
session_cache_limiter('none');
session_start();
ob_start(); ?>

..and change it to

<?php
ini_set("session.cookie_domain", ".yourdomain.com");
session_cache_limiter('none');
session_start();
ob_start(); ?>

Remember to change .yourdomain.com to your own domain.

  • If the mini login box shows the message "Client login not enabled", it means you are missing the line
    enableclientlogin=true
    in vsadmin/includes.asp ... or
    $enableclientlogin=true;
    in vsadmin/includes.php

Top of page

Drop Down Minicart

CSS drop down cart

Add a drop down minicart to your ECT ASP, PHP or Wordpress based store. This plugin will display the contents of your cart when you hover over the cart link. The display includes the product image, name, price, total and discounts as well as the ability to delete items from the cart. There is a working example available on our Wordpress demo store.

It can be purchased from our store tools page.

Instructions - ASP Version

After unzipping the download file, upload the file incminidropdowncart.asp to your vsadmin/inc/ folder and miniajaxdropdowncart.asp to the /vsadmin/ folder.
In the location you want the Minicart Drop Down to display add the following line to your HTML

<!--#include file="vsadmin/inc/incminidropdowncart.asp"-->

Finally the css in minidropdowncartcss.css can either be copied and pasted into your main css file or before the closing </head> you can add the path to the css file like this...

<link href="css/minidropdowncart.css" rel="stylesheet" type="text/css" />

...after uploading minidropdowncartcss.css to your /css/ folder on the server.

Instructions - PHP Version

After unzipping the download file, upload the file incminidropdowncart.php to your vsadmin/inc/ folder and miniajaxdropdowncart.php to the /vsadmin/ folder.
In the location you want the Minicart Drop Down to display add the following line to your HTML

<?php include 'vsadmin/inc/incminidropdowncart.php'; ?>

Finally the css in minidropdowncartcss.css can either be copied and pasted into your main css file or before the closing </head> you can add the path to the css file like this...

<link href="css/minidropdowncart.css" rel="stylesheet" type="text/css" />

...after uploading minidropdowncartcss.css to your /css/ folder on the server.

 

 

Top of page