Project D

Ubercart - Custom Featured Product Page

by admin on Jun.18, 2009, under Linux Blerg

I have created a slider that contain the featured sale products using custom template, cck, ubercart, image cache, filter, language sections and content slider.

The steps to do it:
1. Install and configure ubercart (off course) :).
2. Install the content slider module.
3. Create a custom content type using cck
3.a. in the custom content type create fields and named it as featured_product content type:
a.1. slogan -> field_slogan -> text -> text fields -> multilanguage -> input filter enabled -> display: remove the label
a.2. slogan 2 -> field_matb -> text -> text fields -> multilanguage -> input filter enabled -> display: remove the label
a.3. slogan 3 -> field_slogan3 -> text -> text fields -> multilanguage -> input filter enabled -> display: remove the label
a.4. slogan 4 -> field_slogan4 -> text -> text fields -> multilanguage -> input filter enabled -> display: remove the label
a.5. product pages -> field_atb -> node reference -> display: remove the label
a.6. images -> field_image_cache -> file -> image -> multi image in one node enabled -> display: point the image to nowhere -> use custom featured products image cache preset.
3.b. Create custom Image cache preset
b.1. create custom image preset called featured products -> add resizing to 250px x 250 px
b.2. add any other preset that you like.
4. Install the language section module for multi language capabilities using input filter, you should configure the input filter to recognize the language section module filter.
5. Point the content slider to use featured content type as its slider base.
6. Copy the following template to theme directory and named it as node-featured_product.tpl.php (drupal is very picky about the name of the file as template, to summarize the name of the template should be node-YOURCONTENTTYPE.tpl.php)

< ?php
// $Id: node.tpl.php,v 1.1 2008/10/01 03:26:19 jwolf Exp $
?>
< ?php
$myoriginalnode = $node;
$myCoolProduct = $node->field_atb[0]['nid'];
$nid = $myCoolProduct;
$modifiednode = node_load($nid);
?>

<div class="f-image">
<div class="f-image-left">

</div>
	<div class="f-image-right">
    < ?php if ( $node->field_atb[0]['nid'] != NULL ) : ?>
		<p class="centerfix">< ?php print t('Sale Price'); ?> :</p>
        < ?php endif; ?>
			<div class="f-image-price-slash">
				<s>< ?php $node = $modifiednode; print uc_currency_format($node->sell_price);?></s>
			</div>
 			<div class="f-image-price-disc">
 				< ?php $node = $modifiednode; $discounted_price = theme(	"get_discounted_price", $modifiednode); print uc_currency_format($discounted_price); ?>
			</div>
	</div>
</div>
<div id="f-slogan">
<div class="slogan">
< ?php
$node = $myoriginalnode;
print t($node->field_slogan[0]['view']) ?>
</div>
<div class="slogan2">
< ?php
$node = $myoriginalnode;
print t($node->field_matb[0]['view']) ?>
</div>
</div>
<div id="buybutton">
< ?php if ( $node->field_atb[0]['nid'] != NULL ) : ?>
<div class="button">
<p class="centerfix">< ?php print t( $node->field_atb[0]['view']) ?></p>
< ?php
$node = $modifiednode;
  echo t(theme('uc_product_add_to_cart', $node));
?>
</div>
< ?php endif; ?>
<div id="footnote"><p>
< ?php
$node = $myoriginalnode;
print t($node->field_slogan3[0]['value']) ?></p>
</div>
</div>

and use the following css for the template :

.sliderwrapper {
width: 100%;
height: 440px;
border-bottom:none;
padding:0;
margin: 0;
}

.pagination {
width: 98%;
_width:100%;
background: url('images/banner.png') repeat-x bottom right;
height:20px;
border-top:none;
margin:0;
padding-right: 2%;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
}

.f-image {
background:#fff;
float:left;
width:100%;
height:200px;
margin:0 auto;
text-align:center;
}
.f-image .f-image-right {
float: right;
width: 49%;
color: #3399FF;
font-size:20px;
}

.f-image .f-image-left {
float: left;
width: 49%;
}
.f-image-price-slash {
float: left;
width: 100%;
margin-right: 10px;
color: #CC6600;
font-size:30px;
margin: 15px;
}
.f-image-price-disc {
float: left;
width: 100%;
margin-right: 10px;
color:#005db3;
font-size:30px;
margin: 15px;
}
#f-slogan {
float:left;
width:100%;
height:100px;
}

#f-slogan .slogan {
font-family:Tahoma, Arial;
font-size:23px;
font-weight:bold;
color: #0099CC;
text-transform:uppercase;
border:none;
float:left;
height:30px;
width: 100%;
padding: 0;
margin: 0;
}

#f-slogan .slogan2 {
font-family:Tahoma, Arial;
font-size:13px;
font-weight:bold;
color:#154B6F;
text-transform:uppercase;
border:none;
float:left;
width:100%;
height:70px;
margin: 0;
padding: 0;
}

#f-slogan .price {
font-family:Tahoma, Arial;
font-size:12px;
font-color:#fff;
border:none;
float:left;
width:100%;
height: auto;
}

#buybutton , #buybutton-2 {
float:right;
width: 100%;
height: 140px;
position:relative;
background: url('images/banner.png') repeat-x top right;
text-align:center;
}
#buybutton-2 {
background: url('images/banner2.png') repeat-x top right;
}
#buybutton a,#buybutton a.active,#buybutton a.hover {
font-size:12px;
text-align:center;
color:#CCC;
}

.button a,.button a.active,.button a.hover {
font-size:12px;
text-align:center;
}

#buybutton .button {
float:left;
padding-left:3px;
padding-right:3px;
padding-top:5px;
width:100%;
height:auto;
}
.button a {
font-color: #fff;
}
.button .form-item {
float:left;
position:relative;
margin:0;
padding:0;
margin-top: 2px;
margin-bottom: 2px;
}
.button input.form-submit {
margin-top: 2px;
}
.button .form-item label {
display:inline;
float:left;
color:#fff;
}

.button .form-item input {
float:left;
margin-left:5px;
}

.button .add-to-cart {
float:left;
margin-top: 2px;
margin-bottom: 2px;
}

#footnote {
background:#005db3;
font-family:Tahoma, Arial;
font-size:12px;
text-align:center;
color:#fff;
float:left;
width:0;
height:0;
padding-left:0;
padding-right:0;
padding-top:0;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:11px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:11px;
line-height:20px;
font-weight:700;
z-index:-1;
}

#footnote p {
font-family:Tahoma, Arial;
font-size:12px;
text-align:center;
color:#fff;
float:left;
line-height:20px;
font-weight:700;
z-index:-1;
}

You may need to change the css to suit your need and may also need to modify the theme css.

7. Now create a new content which type is featured product from your drupal create content menu and input all the data you wish to use in your slider.

Note: this is still not completely finish product, some of the field still cannot be viewed properly or used properly.

Enjoy.

-= end transmission =-

Share and Enjoy:
  • Share/Save/Bookmark

Leave a Reply

You must be logged in to post a comment.

125x125 Software

RSS Fresh Ebuild