Archive for the ‘CSS for Zen Cart’ Category

Step by Step Guide on How to Send HTML Emails from Zen Cart

Wednesday, December 3rd, 2008

Sending attractive, branded emails from your store is a nice touch, not only does it reinforce your presence with your customers, it puts you on the same level as other eCommerce big wigs. Follow the directions below to send html emails from you Zen Cart store.

1. Go to Configuration -> Email Options
Set “Use MIME HTML When Sending Emails” (3rd line) to true
and
Set “Email Admin Format?” to HTML (line 10)

2. Go to Configuration -> Customer Details
Set “Customer Default Email Preference” (line 10) to 1 for html

3. Upload your store logo, saved as header.jpg to email/ folder on the server (you will be overwriting the default zen cart logo)

4. Language File Changes:
Change the define for EMAIL_FOOTER_COPYRIGHT to link back to your store in:
admin/includes/languages/english/email_extras.php
and
includes/languages/english/email_extras.php

5. The design for each email is defined in style section of the header for each of the following email template file:
email/email_template_checkout.html
email/email_template_contact_us.html
email/email_template_coupon.html
email/email_template_default.html
email/email_template_direct_email.html
email/email_template_gv_mail.html
email/email_template_gv_queue.html
email/email_template_gv_send.html
email/email_template_low_stock.html
email/email_template_newsletters.html
email/email_template_order_status.html
email/email_template_password_forgotten.html
email/email_template_product_notification.html
email/email_template_product_notification.html

Change the css in each file or create a external stylesheet and link to it from the header of each file.

6.You can check your changes in Tools -> Email Welcome of your admin. When you have finalized the design, sign up as a new customer on your web site, you should get a branded email generated from zen cart.

Adding a “New Product” Icon to Product Description Pages in Zen Cart

Friday, October 24th, 2008

Here’s an easy way to add a “New Product” icon automatically to your product description pages in Zen Cart.

1. Create a small graphic that says New or NEW PRODUCT and name it new.gif. Then upload your image to includes/templates/YOUR_CUSTOM_TEMPLATE/images .

2. Open includes/templates/YOUR_CUSTOM_TEMPLATE/css/stylesheet.css at the bottom add the following lines:

.newProduct {
background-image:url(../images/new.gif);
width: Your image width in px;
height: Your image height in px;
}

Make sure you enter your actual image pixel dimensions.

3. Open includes/templates/YOUR_CUSTOM_TEMPLATE/templates/tpl_product_info_display.php and add the following:

$datesql = “select products_date_added from zen_products where products_id = “. (int)$_GET['products_id'] .” “;
$date_display = $db->Execute($datesql);
$newdate = $date_display->fields['products_date_added'];
$newdate2 = $newdate - 30;
function reformatDate($newdate) {
list($year, $month, $day, $hour, $min, $sec) = split( ‘[: -]‘,
$newdate);
return “$year-$month-$day”;
}
$dateA=$newdate;
$theDate=reformatDate($dateA);
$thirty_days_ago = mktime()-2592000;
if ($theDate >= date(’Y-m-d’, $thirty_days_ago)) { echo ‘<div class=”new”>
</div>’; }
?>

You may have to play with the placement of the code to get the image in the correct place.

Your products will display the new.gif icon you created for 30 days!

Using Zen Cart’s cPath System for Style Changes

Tuesday, August 26th, 2008

You probably already know that you can style certain category links differently based on the cPath. If not take a look at the notes in the file includes/templates/template_default/sideboxes/tpl_categories.php.

Using that same method, you can style the header, footer, and other parts of your site depending on the current cPath.

For example, let’s say you have a category on your web site that lists children’s decor. You want this area to have a more playful feel with a polka dot background for the header area. The category path is 5.

1. Open includes/templates/template_default/common/tpl_header.php

2. Right before the <div id=”headerWrapper”> type:

<?php
if ((int)$cPath == 5) {

<div id =”headerWrapperChildrens”>

the rest of the code here

</div>

} else {

<div id=”headerWrapper”>

the rest of the code here

</div>

}

3. Save the file and upload it to includes/templates/YOUR_CUSTOM_TEMPLATE/common/

4. Open your stylesheet.css file and define the style for #headerWrapperChildrens

Of course, this approach can be taken with many sections of your web site, the possibilities are up to you!