Following our recent policy of making all components available as standard, the CSS Responsive Premium Layouts are now included in the v7.2 updater.

What's more, they have been improved and updated so you can select the different Product, Detail and QuickBuy layouts independently.

The layouts have been totally overhauled to make them more robust and to perform better at different device widths. What's more, as they are now part of the updater then they will get updated with fixes and improvements as they become available, just as the cart core code.

How to use
=======

All the CSS include lines can be included with one simple line as follows...

' ASP
<!--#include file="vsadmin/inc/incectstyle.asp"-->

// PHP
include "vsadmin/inc/incectstyle.php";

Then the following parameters can be used to control the layouts...

' ASP
ectproductstyle=1 ' OR 2 OR 3
ectdetailstyle=1 ' OR 2 OR 3
ectqbuystyle=1 ' OR 2 OR 3

// PHP
$ectproductstyle=1; // OR 2 OR 3
$ectdetailstyle=1; // OR 2 OR 3
$ectqbuystyle=1; // OR 2 OR 3

The number of category columns is set to 2 unless you override it with this parameter. Breakpoints are automatically set...

' ASP
categorycolumns=2

// PHP
$categorycolumns=2;

The number of product columns is set to 3 unless you override it with this parameter. Breakpoints are automatically set...

' ASP
productcolumns=3

// PHP
$productcolumns=3;

The incectstyle.asp/php file will also by default include the base ECT cart CSS and JS files, css/ectcart.css and js/ectcart.js unless the following parameter is added to the includes.asp/php file...

' ASP
noectcartfiles=TRUE

// PHP
$noectcartfiles=TRUE;

There is an important reason now however to let the incectstyle.asp/php file automatically include the base cart files, and that is version control. The version number will be added to the CSS and JS include line so that the cache will be overwritten.

Product, detail and quick buy layouts
=======================

The product, detail and quick buy layouts are set automatically in the incectstyle.asp/php file, but only if this is not set by you in your includes.asp/php file and this is done to allow you to override the defaults. The layouts are designed to be as flexible as possible however there are limitations so you are advised to start with the defaults as below (or just remove these parameters from the includes.asp/php file which will enable the defaults.)

// ectqbuystyle=1
$quickbuylayout="productimage,productname,discounts,reviewstars,instock,productid,sku,description,options,listprice,price,currency,detaillink,addtocart";
// ectqbuystyle=2 OR 3
$quickbuylayout="productimage,productname,discounts,reviewstars,instock,productid,manufacturer,description,options,listprice,price,currency,detaillink,addtocart";
// ectproductstyle=1 OR 3
$productpagelayout="productimage,productname,discounts,reviewstars,instock,listprice,price,detaillink,quickbuy";
// ectproductstyle=2
$productpagelayout="productimage,productname,discounts,reviewstars,instock,description,listprice,price,currency,detaillink,quickbuy";
// ectdetailstyle=1
$detailpagelayout="navigation,productimage,productname,discounts,listprice,price,currency,instock,reviewstarslarge,shortdescription,options,quantity,addtocart,productid,manufacturer,sku,dateadded,description,previousnext,searchwords,socialmedia,reviews";
// ectdetailstyle=2
$detailpagelayout="navigation,productimage,reviewstarslarge,productname,discounts,shortdescription,listprice,price,currency,instock,productid,manufacturer,sku,dateadded,options,quantity,addtocart,description,previousnext,searchwords,socialmedia,reviews";
// ectdetailstyle=3
$detailpagelayout="navigation,productname,discounts,productimage,instock,reviewstarslarge,shortdescription,productid,manufacturer,sku,dateadded,listprice,price,currency,options,quantity,addtocart,description,previousnext,searchwords,socialmedia,reviews";

Manually adding CSS files
================

If you prefer you can add the css files manually like this...

<!-- The ECTCart Files -->
<link href="css/ectcart.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ectcart.js"></script>
<!-- The Base Style Sheet, required for all layouts -->
<link href="css/ectstylebase.css" rel="stylesheet" type="text/css" />
<!-- There are 3 alternate layouts for the product page, detail page and quick buy pages -->
<!-- ectstyleproduct1.css / ectstyleproduct2.css / ectstyleproduct3.css -->
<link href="css/ectstyleproduct1.css" rel="stylesheet" type="text/css" />
<!-- ectstyleqbuy1.css / ectstyleqbuy2.css / ectstyleqbuy3.css -->
<link href="css/ectstyleqbuy1.css" rel="stylesheet" type="text/css" />
<!-- ectstyledetails1.css / ectstyledetails2.css / ectstyledetails3.css -->
<link href="css/ectstyledetails1.css" rel="stylesheet" type="text/css" />
<!-- The break points for the product and category pages -->
<style>div.category{width:49%;}
@media screen and (max-width: 800px) {div.category{width:99%;}}
div.product{width:32.3333333333333%;}
@media screen and (max-width: 800px) {div.product{width:49%;}}
@media screen and (max-width: 360px) {div.product{width:99%;}}
</style>

Adding to existing websites
=================

If you have an existing premium responsive website then the site CSS styles have already been split between the site style in . . .
css/style.css
. . . and the product and detail page layouts in . . .
css/ectstyle1.css (2 or 3)

So remove the ectcart.css and ectcart.js files and add the vsadmin/inc/incectstyle.asp/php include at this location.

Then remove the css/ectstyle{1,2,3}.css file as this is now set by the new includes line.
Make sure the css/style.css line comes after this as this will allow you to override aspects of the site style as you wish.

Finally, the drop down minicart is now included free in the updater so the CSS for this is now included in ectcart.css by default. This means you can now remove the file...
css/minidropdowncart.css
...as it is no longer needed.

For other template designs the CSS for the product and detail page layouts and the site style is lumped together in the css/style.css file. and there is no css/ectstyle{1,2,3}.css file to remove. So that the layouts in css/style.css are overwritten by the new you need to make sure that the incectstyle.asp/php include line is after the css/style.css file.

Testing and Debugging
==============

You are highly recommended to test this before applying to your live website, and one easy way to do this is to create a copy of your website files in a subfolder, say "xxx". Once you are happy with the changes then copy the files to the website root. If you need help then why not post on our Site Critiques forum here...
https://www.ecommercetemplates.com/support/forum.asp?FORUM_ID=12

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater