1-718-887-7598 
0141 416 3414
Ecommerce Templates > General Help > Mini css widgets
Mini css widgets
We have introduced 5 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.
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
- One line minicart
- Multi-line minicart
- One line minilogin
- Multi-line minilogin
- Troubleshooting
Mini Mailing List Sign Up
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 and shown on our demo store 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:
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:
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 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 and shown on our demo store 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.
Multi-line Minicart
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 above and shown on our demo store 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
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
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.
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(); ?>
- 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
