CubeCart v4 Documentation Feed

Thumbnails Explained

CubeCartForums.org Documentation — Fri, 04 Jun 2010 08:09:48 +0100

Page Contents

CubeCart Thumbnails Explained

CubeCart generates product thumbnails automatically when you assign an image to a product. The size of the thumbnail is determined by the size setting you have entered inside the admin area under General Settings:

As you can see it only allows you to enter one number for thumbnail size. It doesn't allow you to enter both a width and a height. So what it does with that number is resize the longest side of the image to that number and the other side is then sized proportional to the original image.

Further explanation on size: If the product image is horizontal, or wider than it is tall, the width of the thumbnail will be the sized in pixels to the number that is set in general settings and the height of the image will be proportional to the height of the original image. If the product image is vertical or taller than it is wide, the height of the thumbnail will be the sized in pixels to the number that is set in general settings and the width of the image will be proportional to the original product image that you uploaded.

For example:

How this works in conjunction with the skin

It really depends on how your skin is coded. I'm going to use one of CubeCarts original skins Classic as an example of the problems and solutions for common problems with thumbnails. These techniques are used by many free and commercial skins available for CubeCart.

Thumbnails on the homepage in Latest Products

The thumbnails here are inside divs along with the product's title and price, imagine invisible boxes if you don't understand divs. These boxes float left and line up in horizontal rows. If your thumbnails are all the exact same height then you won't run into many problems. But if your thumbnails vary in height your layout might look like this:

A common fix for this problem is to add a height to the div that contains the the thumbnails, title and price: v4 Classic already has this, and the newer versions of Classic that come with v3 also have this.

This is from 'layout.css':

div.latestProds {
float:left;
height:100px;
overflow:hidden;
text-align:center;
width:131px;
}

Using the example above, this almost works for all our images, except those that are too big.

An easy fix for this would be to increase the height of the div, here's an example of an increase from a height of 120px to a height of 195px so that we can see the entire image, it's title, and it's price.

This is from 'layout.css':

div.latestProds {
float:left;
height:195px;
overflow:hidden;
text-align:center;
width:131px;
}

The result:

For some people this fix is sufficient, for others they would like for the titles and the prices to line up, too. Here's where it gets tricky, because there are different ways to accomplish this.

One technique is the add a div that contains only the thumbnail and add attributes to that div that tell it to crop the image if the image is longer or wider than a certain setting. Here's how you do this:

Step 1: You need to add html to the template file. Open up yourskin/styleTemplates/content/index.tpl and find the thumbnail image:

Now you need to put that image inside a surrounding div, this is what that code looks like:

This is v3 code, v4 is very similar just use the same technique:

Step 2: You need to add the CSS for that surrounding div to 'layout.css':

.imgcrop {
height: 100px;
width: 100px;
overflow: hidden;
text-align:center;
margin:0px auto;
}

This code basically makes an invisible box that is exactly 100x100 any image that is larger that this will be cut off and will align top left inside the invisible box. Any image that is smaller than 100x100 will align top and centre.

Here's our example with this code (I also changed the height of div.latestproduct to 175px from 195px):

This will fix most, if you have mega-long product titles and want the prices to line up exact, you will need to use this same technique for the titles. Place the title in a surrounding div and give that div a height. This is just a basic example, you can get as fancy as you want for this area, you can even recode your category pages to look just like your latest product area.

Other issues:

Featured Product box will have issues with large thumbnails.

Fix technique #1, add code to the css which crops anything that tries to go outside of the box.

This is code from the 'layout.css' stylesheet:

.boxContentLeft, .boxContentRight {
background-color:#EBEDFE;
border:1px solid #000000;
margin-bottom:10px;
padding-bottom:5px;
padding-left:5px;
padding-top:3px;
}

Add this:

overflow: hidden;

For example:

.boxContentLeft, .boxContentRight {
background-color:#EBEDFE;
border:1px solid #000000;
margin-bottom:10px;
padding-bottom:5px;
padding-left:5px;
padding-top:3px;
overflow: hidden;
}

The result:

Fix technique #2, add a width to the image to it never can get too big.

This is code from yourskin/styleTemplates/boxes/randomProd.tpl:

Now add a width:

The result:

Fix technique #3, add a surrounding div to the image, set width and height and add an overflow:hidden; attribute. This is the same technique we used above for the Latest Product box.

Category pages for some skins will have issues with thumbnails that are too wide.

For example:

For the example above, any image over 190px wide will push table which contains it out too wide. You can use the same 3 techniques used above to fix this problem.

Latest Product 'Buy' Buttons

CubeCartForums.org Documentation — Mon, 04 Jan 2010 09:52:33 +0000

Page Contents

Easy Method

This is a simple modification to add 'buy' and 'more' buttons to the front page latest products. It does not use the langiage file for the button text, therefore eliminates the need to modify core CubeCart files on upgrade.

Edit:

/skins/SKIN_NAME/styleTemplates/content/index.tpl

Search for:

And paste this just before, or where ever you would like to have the buttons:

To change the text used on the buttons, change the text shown in bold.

This code must be within the repeating area of the latest products area:

The code in here somewhere.

Save, and upload.

The buttons have standard functionality as on the Categories page, with the following exceptions:

It does not use the language file for button name text, therefore not multi-language compatible.
It assumes that the products are in stock, ie there is no stock control element to the 'buy' button appearing.

Advanced Method

This is the more advanced version which behaves in the same way as the categories page product list. Language and stock control compatible.

Edit:

/skins/SKIN_NAME/styleTemplates/content/index.tpl

Search for:

And paste this just before, or where ever you would like to have the buttons:

This code must be within the repeating area of the latest products area:

The code in here somewhere.

Save, and upload.

Edit:

/includes/content/index.inc.php

Search for (around line 31):

$lang = getLang("includes".CC_DS."content".CC_DS."index.inc.php");

Add below it:

$langLP = getLang("includes".CC_DS."content".CC_DS."viewCat.inc.php");

Search for (around line 63):

$latestProducts = $db->select("SELECT I.productId, I.image, I.price, I.name, I.sale_price FROM ".$glob['dbprefix']."CubeCart_inventory AS I, ".$glob['dbprefix']."CubeCart_category AS C WHERE C.cat_id = I.cat_id AND I.disabled != '1' AND I.showFeatured = '1' AND I.cat_id > 0 AND C.hide != '1' ORDER BY I.productId DESC LIMIT ".$config['noLatestProds']);

Amend the query to include 'I.useStockLevel' and 'I.stock_level', as shown below:

$latestProducts = $db->select("SELECT I.productId, I.image, I.price, I.name, I.sale_price, I.useStockLevel, I.stock_level FROM ".$glob['dbprefix']."CubeCart_inventory AS I, ".$glob['dbprefix']."CubeCart_category AS C WHERE C.cat_id = I.cat_id AND I.disabled != '1' AND I.showFeatured = '1' AND I.cat_id > 0 AND C.hide != '1' ORDER BY I.productId DESC LIMIT ".$config['noLatestProds']);

Search for (around line 93):

$index->parse("index.latest_prods.repeat_prods");

And paste the following just before:

// BEGIN Latest Products Buttons
if ($config['outofstockPurchase'] == true) {
$index->assign("BTN_BUY", $langLP['viewCat']['buy']);
$index->assign("VAL_PRODUCT_ID", $latestProducts[$i]['productId']);
$index->parse("index.latest_prods.repeat_prods.buy_btn");

} else if ($latestProducts[$i]['useStockLevel'] == true && $latestProducts[$i]['stock_level']>0) {
$index->assign("BTN_BUY", $langLP['viewCat']['buy']);
$index->assign("VAL_PRODUCT_ID", $latestProducts[$i]['productId']);
$index->parse("index.latest_prods.repeat_prods.buy_btn");

} else if ($latestProducts[$i]['useStockLevel'] == false) {
$index->assign("BTN_BUY", $langLP['viewCat']['buy']);
$index->assign("VAL_PRODUCT_ID", $latestProducts[$i]['productId']);
$index->parse("index.latest_prods.repeat_prods.buy_btn");
}
$index->assign("BTN_MORE", $langLP['viewCat']['more']);
// END Latest Products Buttons

Save, and upload.

Latest Product Descriptions

CubeCartForums.org Documentation — Thu, 24 Sep 2009 15:36:30 +0100

Page Contents

Adding description text to the Homepage Latest Products similar to the product list on the Category pages, is fairly simple. It only required two files to be edited, one file in the core CubeCart system, and the other in the skin.

Core PHP Modification

Find:

/includes/content/index.inc.php

Search for :

Add 'I.description' to the query:

$latestProducts = $db->select("SELECT I.productId, I.description, I.image, I.price, I.name, I.sale_price FROM ".$glob['dbprefix']."CubeCart_inventory AS I, ".$glob['dbprefix']."CubeCart_category AS C WHERE C.cat_id = I.cat_id AND I.disabled != '1' AND I.showFeatured = '1' AND I.cat_id > 0 AND C.hide != '1' ORDER BY I.productId DESC LIMIT ".$config['noLatestProds']);

Search for:

$index->assign("VAL_PRODUCT_NAME", validHTML($latestProducts[$i]['name']));

Add directly below:

// MOD to add LATEST PRODUCTS descriptions - BEGIN
if (strlen($latestProducts[$i]['description']) > $config['productPrecis']) {
$index->assign("TXT_DESC", substr(strip_tags($latestProducts[$i]['description']), 0, $config['productPrecis'])."…");
} else {
$index->assign("TXT_DESC", strip_tags($latestProducts[$i]['description']));
}
// MOD to add LATEST PRODUCTS descriptions - END

Skin HTML Modification

Find:

/skins/SKIN_NAME/styleTemplates/content/index.tpl

Search for:

and

Paste the following code somewhere between the BEGIN and END.

{TXT_DESC}

Positioning within that area, and the styling is up to you. Remember to clear your store cache afterwards.

Upgrading the Images

CubeCartForums.org Documentation — Tue, 25 Nov 2008 19:36:25 +0000

Page Contents

Open 'skins/YOURSKIN/styleImages'.

Ratings

Copy the 'ratings' folder from 'skins/classic/styleImages/icons' to 'skins/YOURSKIN/styleImages/icons'.

Icons

Copy all files (only one file is also in v3 as default - 'basket.gif') from 'skins/classic/styleImages/icons' to 'skins/YOURSKIN/styleImages/icons'.

Images

Copy 'more.gif' and 'index.php' from 'skins/classic/styleImages' to 'skins/YOURSKIN/styleImages'.

Upgrading the Stylesheets

CubeCartForums.org Documentation — Sun, 23 Nov 2008 20:26:01 +0000

Page Contents

Note these upgrade additions are designed to add the new styles to your skin. If you have a customised skin, a lot of the changes in v4 that are not in v3 are not necessarily important to migrate as they will likely change the 'look and feel' of your store from what you want. Therefore, only new style 'classes' and 'ids' are noted.

Open 'skins/YOURSKIN/styleSheets'.

New files in v4.3.7

Copy 'index.php', 'ie.css' and 'lightbox.css' from 'skins/classic/styleSheets' to 'skins/YOURSKIN/styleSheets'.

layout.css

If the .latestProds code does not exist, there is no need to add it. If it does exist and is different to the text below, there is still no need to add it. In other words, the 'latestProds' bit is entirely optional.

/*BEGIN OPTIONAL*/
Find this at the end of the file...

.latestProds {
float: left;
text-align: center;
width: 131px;
height: 120px;
}

Change to...

div.latestProds {
text-align: center;
width: 131px;
height: 100px;
float: left;
overflow: hidden;
}

/*END OPTIONAL*/

Add this on the end...

#imgThumbSpace{
line-height: 0px;
}
#imgThumbSpace img {
padding-right: 3px;
padding-bottom: 3px;
}
/*
Start Cross-Browser DHTML Menu
*/
#mainmenu-nav {
list-style: none;
list-style-type: none;
width: 158px;
padding: 0px;
margin: 0px;
}
.li-nav a {
padding: 2px 1px;
background-color: #EBEDFE;
width: 148px;
display: block;
text-indent: 2px;
color: #070F72;
text-decoration: none;
margin: 0px;
}
.li-nav a:hover {
background-color: #FFFFFF;
color: #FF6600;
}
.ul-nav, .li-nav {
display: block;
list-style: none;
}
.ul-nav {
width: 150px;
padding: 0px;
}
.li-nav {
float: left;
}
.li-nav .ul-nav {
display: none;
position: absolute;
margin-left: 100px;
margin-top: -19px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 4px solid #0858B6;
z-index: 99;
}
a.hassubmenu {
background-image: url(../styleImages/more.gif);
background-repeat: no-repeat;
background-position: 143px 6px;
}
/*
End Cross-Browser DHTML Menu
*/

style.css

Add the following to the skin at the bottom

img {
border: none;
}
.cart_icon {
border: none;
margin: 12px 0px;
}

a.txtSelected:hover, a.txtSelected:active, a.txtSelected:link, a.txtSelected:visited {
color: #FF6600;
text-decoration:none;
}

a.flashBasket:active, a.flashBasket:link, a.flashBasket:visited, a.flashBasket:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #66CC33;
text-decoration: none;
font-weight: bold;
padding: 2px;
border: 1px solid #000000;
}

.addCoupon:hover, .addCoupon:active, .addCoupon:visited, .addCoupon:link {
font-weight: bold;
color: #000000;
text-decoration: none;
font-weight: bold;
}
.RatingTop {
border-top: 1px solid #070F72;
border-right: 1px solid #070F72;
border-left: 1px solid #070F72;
background-color: #EBEDFE;
padding: 3px;
}
.RatingMain {
border-right: 1px solid #070F72;
border-left: 1px solid #070F72;
background-color: #EBEDFE;
padding: 3px;
font-style:italic;
}
.ReviewBot {
border-right: 1px solid #070F72;
border-left: 1px solid #070F72;
background-color: #EBEDFE;
padding: 3px;
border-bottom: 1px solid #070F72;
}
.RatingBottom {
background-color: #070F72;
padding: 3px;
border-right: 1px solid #070F72;
border-left: 1px solid #070F72;
color: #FFFFFF;
/*font-size: 11px;*/
}
a.sortLink {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a.sortLink:hover {
text-decoration: underline;
}
#shipping-select {
width: 220px;
}

Upgrading the Content

CubeCartForums.org Documentation — Sat, 22 Nov 2008 19:06:23 +0000

Page Contents

Open 'skins/YOURSKIN/styleTemplates/content'.

New files in v4.3.7

Copy 'error.tpl', 'giftCert.tpl', 'search.tpl', 'recaptcha.tpl' and 'index.php' files from 'skins/classic/styleTemplates/content' to 'skins/YOURSKIN/styleTemplates/content'.

account.tpl

Only the address paths changed in this file.

Change....

{TXT_PERSONAL_INFO}

{TXT_ORDER_HISTORY}

{TXT_CHANGE_PASSWORD}

{TXT_NEWSLETTER}

To...

{TXT_PERSONAL_INFO}

{TXT_ORDER_HISTORY}

{TXT_CHANGE_PASSWORD}

{TXT_NEWSLETTER}

cart.tpl

Copy the entire template over, as most of it is different. If your template has been customised, you will need to manually compare the differences you have added to the shipped v3 skin in order to reapply it to the new v4 template.

changePass.tpl

Only the address paths changed in this file.

Change....

To...

confirmed.tpl

forgotPass.tpl

gateway.tpl

Copy the entire template over, as it is unlikely your template would have been altered. If your template has been customised, you will need to manually compare the differences you have added to the shipped v3 skin in order to reapply it to the new v4 template.

index.tpl

Change....

To...

Change....

To...

Only the address paths have changed in the 'latest products area'. If your template latest products has been customised, you will need to manually compare the differences you have added to the shipped v3 skin in order to reapply it to the new v4 template and just change the file path references. Otherwise, just copy and past the code below... Change....

{VAL_PRODUCT_NAME}

To...

{VAL_PRODUCT_NAME}

login.tpl

Copy the entire template over, as it's unlikely you would have customised this file. If your template has been customised, you will need to manually compare the differences you have added to the shipped v3 skin in order to reapply it to the new v4 template.

newsletter.tpl

Change....

To...

profile.tpl

Copy the entire template over, as most of it is different and it's unlikely you would have customised this file. If your template has been customised, you will need to manually compare the differences you have added to the shipped v3 skin in order to reapply it to the new v4 template.

reg.tpl

step1.tpl

Copy the entire template over, as it's unlikely you would have customised this file. If your template has been customised, you can follow these simple changes.

Find this...

{LANG_LOGIN_TITLE}

Paste below...

{LANG_CART} --- {LANG_CHECKOUT} --- {LANG_PAYMENT} --- {LANG_COMPLETE}

Change....

To...

Change....

To...

Change....

To...

tellafriend.tpl

unsubscribe.tpl

To...

viewCat.tpl

viewOrder.tpl

Copy the entire template over, as a lot of it is different and it's unlikely you would have customised this file. If your template has been customised, you will need to manually compare the differences you have added to the shipped v3 skin in order to reapply it to the new v4 template.

viewOrders.tpl

viewProd.tpl

Upgrading the Boxes

CubeCartForums.org Documentation — Sat, 22 Nov 2008 18:39:47 +0000

Page Contents

Open 'skins/YOURSKIN/styleTemplates/boxes'.

New files in v4.3.7

Copy 'index.php' and 'skin.tpl' from 'skins/classic/styleTemplates/boxes' to 'skins/YOURSKIN/styleTemplates/boxes'.

cartNavi.tpl

Change....

To...

categories.tpl

currency.tpl

Only the address paths changed in this file.

Change....

session.tpl

shoppingCart.tpl

Change....

{PRODUCT_PRICE}{VAL_NO_PRODUCT} x {VAL_PRODUCT_NAME}

To...

{PRODUCT_PRICE}{VAL_NO_PRODUCT} x {VAL_PRODUCT_NAME}

Change....

To...

Change....

{LANG_VIEW_CART}

To...

{LANG_VIEW_CART}

siteDocs.tpl

Change....

{DATA.doc_name}

To...

{DATA.doc_name}

Upgradng the Globals

CubeCartForums.org Documentation — Sat, 22 Nov 2008 18:28:35 +0000

Page Contents

Open 'skins/YOURSKIN/styleTemplates/global'.

New files in v4.3.7

Copy 'index.php' from 'skins/classic/styleTemplates/global' to 'skins/YOURSKIN/styleTemplates/global'.

index.tpl

Change....

To...

Change....

To...

(Optional) Change....

(Optional) To...

{DEBUG_INFO}

cart.tpl

Change....

To...

Change....

To...

(Optional) Change....

(Optional) To...

{DEBUG_INFO}

No Products in Category

CubeCartForums.org Documentation — Sat, 26 Jul 2008 22:16:57 +0100

Page Contents

Overview

When there are no products in a category, a message appears on the category page:

There are no products in this category.

The message does not always apply if the category descriptions mod has been installed, or there are subcategories within that category.

Therefore to remove this message there are two ways of doing it, removal in the language file, or removal in the skin.

Removal from the skin.

Removal from the skin automatically affects all languages the store uses.

Edit:

/skins/SKIN_NAME/styleTemplates/content/viewCat.tpl

Find near the bottom:

{TXT_NO_PRODUCTS}

Remove, or comment out the following:

{TXT_NO_PRODUCTS}

Save and Upload.

Removal from the language file.

Removal from the language system only affects the language it is removed from.

In Admin, find the Language menu option, select the language.

Select the 'Front End Phrases', then 'Content', then 'View Products/Subcategories Page'.

Remove the text 'There are no products in this category.'.

Select 'Modify Language File'.

Taxes

CubeCartForums.org Documentation — Thu, 01 Nov 2007 19:26:16 +0000

Page Contents

Standard Tax

The taxes section gives the ability to set the tax levels for the store's area.

You also have the option of enabling flexible taxes, this is useful if you have to charge different tax amounts to different countries etc.

Status	With this disabled you will charge a flat rate of tax, with it enabled you have flexible taxes running.
Mode	This can be set to testing or live, recommend you try testing first.

Country	Country to apply Tax to (If flexible tax is disabled).
Mode	County/State/Zone to apply Tax to (If flexible tax is disabled).

Here you can add, rename, edit or add new tax classes (If flexible tax is disabled).

Flexible Tax

In the section we will learn how to use the flexible tax option in V4.

This is a complex module to set up.

Step 1 - Set the module to enabled.

Step 2 - Create new Tax Class.

Type in your Tax name, I have used V.A.T. in this example, and click 'Add Tax'.

Step 3 - Set up the Tax Details.

Name	A name for your reference. Each row must have a unique name. Example: UK V.A.T.
Display As	This is the name of the tax as you want it displayed on the checkout webpages and in receipts. Example: V.A.T.
Display Reg. Number	(Optional) If you want your V.A.T number(s) to be displayed on your receipts, then enter them exactly as you want them displayed. Example: V.A.T Number 123456789.
Status	You can use the status to disable a particular tax.

Step 4 - Setting up the tax rates.

Click on the button.

Step 5 - Setting zones and rates.

Class	Each product and shipping method will be associated with a single tax class. Usually all products and shipping methods will be associated with the "Standard Tax" class and you should setup all your tax rates/zones with this tax class.
Country	The country to apply this Tax Class to.
County/State/Zone	The county to apply Tax Class to (This is generally used in US stores only).
Tax	This refers to one of the Tax Details setup on the previous page. Example: V.A.T.
Rate (%)	The amount of Tax to apply.
Apply To	Should the tax be applied to goods (ST), shipping (S&H), or both (ST & S&H).
Active	Enabled or Disabled.

Now Click 'Add'.

Repeat this again if you need to set up more than 1 Tax band.

Step 6 - Check Your Tax Rates/Zones

In this example there are 4 tax bands added.

So any orders from customers in.....

>> UK will be charged 17.5% V.A.T >> United States will be charged 17.5% V.A.T >> France will be charged no V.A.T >> Mexico will be charged no V.A.T