[documentation] Site Recipes addition
MichelleX
michelle at steelveils.com
Mon Mar 6 15:16:53 UTC 2006
Skipped content of type multipart/alternative-------------- next part --------------
This will cover a lot of things and as such is certainly not limited to a shopping cart. It took me forever to figure out all the bits and
pieces to do all I this, so I thought some of this would be beneficial for others as well in a variety of tasks. There’s likely a better
way to do some of this, but after a month of working on it and trying <b>everything</b> else, this is what I found that worked the best for me.
Modules: <a href="http://drupal.org/project/image">image.module</a>,
<a href="http://drupal.org/project/taxonomy_browser">taxonomy_browser</a>
Drupal Version 4.6.4
PayPal or some other kind of simple shopping cart setup.
First of all, if you’re running this version of Drupal, you’re going to want to patch the common.inc, otherwise your <i>next</i> and <i>previous</i> links won’t work. More info <a href="http://www.pingv.com/blog/laura/200512/a-drupal-4-6-4-quick-fix">here</a>.
If you don’t know how to patch a file and are on a Windows OS, go <a href="http://drupal.org/node/32875">here</a>.
If you don’t already have the image.module installed, go <a href="http://drupal.org/project/image">here</a> to get it and follow its
instructions for installation. Make sure you have permission to administer and create images by going to administer/access control.
Go to settings/image and adjust image sizes, path and how many images you think you might want on a page. You can always come back to
this later if need be.
Start by figuring out what categories you’re going to need. For instance, for a Prints category, you might have black and white and colour.
You might have a books category. Whatever. Once you get that sorted out, go into administer/categories. Click “edit vocabulary”. In the Hierarchy, select multiple if you think you’ll need it and then multiple select if you might have
a product covering more than one category.
<ol>
<li>Create your categories and sub categories, selecting which
parent they belong to (if any) and a description if you want one.</li>
<li>Now you should be able to see the list of categories within
your Category Browser (provided you installed the taxonomy_browser module). I
wouldn’t worry too much about the way things look, it’s not going to be
available to the public anyway. Disable the “category browser” menu item. </li>
<li>Create your shopping cart menu in Blocks. Don’t enable it yet.</li>
<li>If you already have little promotional things you want in the
sidebars (or anywhere else) go ahead and create Blocks for those as well. </li>
<li>Upload your images by going to create content/image. </li>
<li>Since the title will be linked to the main preview page, I
named all my images “View More” with the url alias as the item name/number. </li>
<li>There should be a box with Image Galleries that has your list
of categories. Select which one (or more) you want it in. </li>
<li>Pick the image to upload </li>
<li>In your description is where you’ll put the add to cart button
and anything else you might have. For instance, the price, description of the
item and the button to add it to their cart. I found it easier to make a little
template in html and copy/paste each one, changing the item number as I went
along due to lack of space in the description box. </li></ol>
<b>Example:</b>
<code><div align="center">$126.00<br/>Collection of four 8x12 prints
<table align="center" cellspacing="0" cellpadding="0" border="0"><tr> <td>
<form method="post" action="http://www.ccnow.com/cgi-local/cart.cgi?account_name_item_name">
<input type="submit" style="background-color:#333333; border-style:solid; border-color:#000000; font-size: 10; color:#cccccc; font-family: verdana, helvetica, arial;" type="submit" name="Submit" value="Add to Cart"></form>
</td></tr></table></div>
</code>
If you’re using something like PayPal, you should already have the buttons made for you. Just copy and paste that.
Now when you go to <a href="http://yourdomain.com/image">http://yourdomain.com/image</a> or <a href="http://yourdomain.com/?q=image">http://yourdomain.com/?q=image</a> you’ll see your list of images there but not very impressive to look at. So this is where we get to make things pretty.
Follow the instructions from <a href="http://drupal.org/node/41257">here</a> in creating your template.php and image_gallery.tpl.php . This will be your base. From here on out you’re only going to be editing your main css file and the image_gallery.tpl.php file.
In order to further prettify things, I added a table (you can use divs if you’re more comfortable with that) in the image_gallery.tpl.php. Two columns, one for the block we’re going to be adding and one for the rest of it. I also had to add more tables within the code to keep it blocked into my existing style, you may not have to.
Below is what my code looks like in image_gallery.tpl.php:
<code>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top" style:"width:150px;"></td>
<td valign="top">
<?php
$size = _image_get_dimensions('thumbnail');
$width = $size['width'];
$height = $size['height'];
$content = '';
if (count($galleries)) {
$content.= '<table align="center" cellspacing="5" cellpadding="5" border="0" style="height:500px;"><tr><td valign="top"><ul class="galleries">';
foreach ($galleries as $gallery) {
$content .= '<li>';
$content .= "\n";
if ($gallery->count)
$content.= l(image_display($gallery->latest, 'thumbnail'), 'image/tid/'.$gallery->tid, array(), NULL, NULL, FALSE, TRUE);
$content.= "<h3>".l($gallery->name, 'image/tid/'.$gallery->tid) . "</h3>\n";
$content.= '<div class="price">'. check_output($gallery->description) ."</div>\n";
$content.= '<p class="count">' . format_plural($gallery->count, 'There is %count print in this section', 'There are %count prints in this section') . "</p>\n";
$content.= "</li>\n";
}
$content.= "</ul></td></tr></table>\n";
}
if (count($images)) {
$height += 5;
$content = '<table align="center" cellspacing="5" cellpadding="5" border="0" width="100%" style="height:500px;"><tr><td valign="top">';
$content.= '<ul class="images">';
foreach ($images as $image) {
$content .= '<li';
if ($image->sticky) {
$content .= ' class="sticky"';
}
$content .= ' style="height : 250px; width : 150px; border-style:solid; border-width:1px; border-color:black; text-align:center;"';
$content .= ">\n";
$content .= l(image_display($image, 'thumbnail'), 'node/'.$image->nid, array(), NULL, NULL, FALSE, TRUE);
$content .= '<h3>'.l($image->title, 'node/'.$image->nid)."</h3>\n";
$content.= '<div class="price">'. check_output($image->body) ."</div>\n";
if (theme_get_setting('toggle_node_info_' . $image->type)) {
$content .= '<div class="author">'. t('Posted by: %name', array('%name' => format_name($image))) . "</div>\n";
$content .= '<div class="date">'.format_date($image->created)."</div></span>\n";
}
$content .= "</li>\n";
}
$content.= "</ul></td></tr></table>\n";
}
if ($pager = theme('pager', NULL, variable_get('image_images_per_page', 6), 0)) {
$content.= $pager;
}
If (count($images) + count($galleries) == 0) {
$content.= '<p class="count">' . format_plural(0, 'There is %count print in this category', 'There are %count prints in this category') . "</p>\n";
}
print $content;
?>
</td>
</tr>
</table></code>
Here are some things to note:
<ul><li>If you want the description to show up with your thumbnails, add this line: <code>$content.= '<div class="price">'. check_output($image->body) ."</div>\n"; </code> below this one, <code>$content .= '<h3>'.l($image->title, 'node/'.$image->nid)."</h3>\n";</code></li>
<li>Add some style to the <li> tag to create little boxes around your product images, like this: <code>$content .= ' style="height : 250px; width : 150px; border-style:solid; border-width:1px; border-color:black; text-align:center;"'; </code></li>
<li>The first column in the table is going to be for your shop navigation, so keep it small. </li>
<li>Note the styles used here. Be sure you style them in your stylesheet.</li>
You can add blocks to any part of your site by slipping in this little bit of code:
<code><?php
$block = module_invoke('block', 'block', 'view', 6);
if ($block['content']) {
$output = "<div class=\"front-page-block\">\n";
$output .= "<div id=\"front-block-title\"><h2>".$block['subject']."</h2></div>\n";
$output .= "<div class=\"content\">".$block['content']."</div>\n";
$output .= "</div>\n";
print $output;
}
?></code>
(note the styles used here. Be sure you style them in your stylesheet.)
If you’re adding your own block, leave the first ‘block’ alone on this line:
<code>$block = module_invoke('block', 'block', 'view', 2);</code>
The number will change based on your block’s number. To figure out what number it is, go to your administer/blocks, click on “ configure” for one that you’ve made. In your address bar in the browser, you’ll see something like this: http://www.yourdomain.com/?q=admin/block/configure/block/2
That “2” at the end is the number you use.
You can do the same thing with other blocks by changing the first ‘block’ into the name of the module’s block. Which might be useful for
adding recent images, random images, etc. More information on this can be found <a href="http://drupal.org/node/26502">here</a>.
Now you wanna create a node-image.tpl.php to make the main image pages look nice.
This is the code I used: (<a href="http://drupal.org/node/17565">more info found here</a>)
<code><?php //$Id: node-image.tpl.php,v 1.3 2006/03/05 11:22:27 weitzman Exp $
?>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top" style:"width:150px;">
<?php
$block = module_invoke('block', 'block', 'view', 6);
if ($block['content']) {
$output = "<div class=\"front-page-block\">\n";
$output .= "<div id=\"front-block-title\"><h2>".$block['subject']."</h2></div>\n";
$output .= "<div class=\"content\">".$block['content']."</div>\n";
$output .= "</div>\n";
print $output;
}
?>
</td>
<td valign="top"><div align="center">
<div class="node <?php print ($sticky) ? " sticky" : ""; ?> ">
<?php if ($page == 0): ?>
<h2><a href=" <?php print $node_url ?> " title=" <?php print $title ?> "> <?php print $title ?> </a></h2>
<?php endif; ?>
<div class="content">
<?php print $content ?>
</div>
</div></div></td>
</tr>
</table></code>
Again, I split it up into two columns with a table and added the navigation block in the left side.
Now, on to the style sheet
Aside from the little bits of style used in all the above code, you’re gonna need to add:
<code>
/*Image Galleries*/
ul.galleries {
margin : 0;
padding : 5px;
list-style:none;
}
/*this is going to set the style for the “album” view*/
ul.galleries li {
list-style:none;
float : left;
text-align:center;
margin : 15px 15px 75px 15px;
padding:5px;
list-style:none;
background:#444444;
height:150px;
width:230px;
border-style:solid; border-width:1px; border-color:black;
}
ul.galleries li img {
float : left;
text-align:center;
padding : 3px;
margin-right : 0px;
list-style-position: inside;
list-style:none;
}
ul.galleries li div.count {
clear : both;
list-style:none;
}
ul.galleries h3 {
margin : 0;
padding : 0;
list-style:none;
}
ul.images {
list-style:none;
margin : 0;
padding : 0px;
}
/*this is going to set the style for the “album” view*/
ul.images li {
float : left;
text-align:center;
margin : 15px 15px 75px 15px;
padding:5px;
list-style:none;
background:#444444;
}
</code>
I also added my own class for the description:
<code>
.price {
color: #cccccc;
font-size: 11px;
font-family: Arial, "Lucida Sans", Tahoma, Sans-Serif;
background:#444444;
text-align:center;
}</code>
Upload your image-node.tpl.php, image_gallery.tpl.php, template.php and stylesheet to your themes directory.
Make your link to the shop go to ?q=image or image, if your using clean urls.
If you made any blocks for promotional items, you can now set them to show on whatever pages you want.
<a href="http://www.steelveils.com/?q=image">Here</a> is a working example.
===========================================================
Log Message:
First, I apologize for using the 1st person, I wasn't sure how else to put this.
- Being a Drupal newbie, it took nearly a month to figure out how to do most of this stuff. The information is scaterred and difficult to find. Some things aren't listed anywhere. I think this will be an excellent starting point for those who are new and would like to push the image module a little more to make it usable and pretty. This body covers many topics and could easily be put to use for many other things.
More information about the documentation
mailing list