3 New Ecommerce Designs

About a month ago we relaunched Chillyo.com with a new design – while I was working on it Nsha Club approached me about a new design for their site. I have to admit it I love designing Ecommerce websites. And I really love it when I am allowed to use my 2 favorite tools: WordPress and WordPress E-Commerce. Because I know how to use both tools pretty well by now, I am able to say to a client “I can do that, I can make that happen”.

I also designed a new site for an online Indian grocery using Lightspeed Webstore which went very well (and fast!) only 8 days from start day 1 to finish day which was today.
The client, India Stop Shop loved everything I did and if you’re in the same racket as me you’ll know that doesn’t happen all that often.

Using the New Post Image Function in WP 2.9 to Build a Featured Content Gallery

Now that WordPress lets you upload an image and crop it and set it as the post thumbnail you can do a lot of cool things with it.
All you have to do is add support for the function into your functions.php file and then use the set thumbnail option in the Post editor to have post thumbnails. I set it up today and then used the new function to build a featured content gallery. I went looking to find the code & I read a lot of tutorials but didn’t find any about using post thumbnails and the Loop to build content galleries, so I made my own.

View a Demo

This is the code to add that adds theme support for the new post thumbnail template tag -paste it into functions.php Template Name: Theme Functions

if (function_exists('add_theme_support')) {
	add_theme_support('post-thumbnails');
	set_post_thumbnail_size(500, 300, true);
}

500 px by 300px in set_post_thumbnail_size is not exactly a thumbnail sized image, but it’s what I needed for the content gallery. Because they look good if the images are that size.You can make it 150 by 150 or any other dimensions you want. You don’t have to set an image size in functions.php but if you do you can override these settings per template by adding this code to your Loop:

<?php the_post_thumbnail(array( 260,200 ), array( 'class' => 'center' )); ?>

That adds a thumbnail image to the post with class “center”. You can name the class anything you want: class=”floopdedoo” if that’s your thing.

You have to add the template tag to every file you want a post thumbnail to show.

It’s not retroactive, adding the tag tonight won’t automatically add post_thumbs to posts you added last week. I could explain it more but that is not the fun part.
For more examples on how to use this new tag, go to this site.

The fun part, building a featured content gallery:

<div id="gallery">
    <div id="slider">
      <div id="sliderContent">
   <?php  
query_posts('cat=12');
if (have_posts()) : ?>		
<?php while (have_posts()) : the_post(); ?>      
<div class="sliderImage"><?php the_post_thumbnail();?><span class="right"><h2 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2><br/><?php the_excerpt();?></span></div>       
<?php endwhile; ?>
<div class="clear sliderImage"></div>	
		
	<?php else : ?>
		Sorry, but you are looking for something that isn't here.
	<?php endif; ?>
     </div>
   </div>
</div>

So if you’re familiar with WordPress you can see that that is a Loop up there. So you’ll probably say hey wait all my theme files already have a loop in them! So you’ll have to figure out for yourself where you can use this. There’s a lot of documentation on modifying the WordPress Loop and in order to keep this post short I’ll just send you to go look for it:

Yes, I know the markup is a ugly. Not be the best idea to wrap a heading tag with a span tag. You need to clean it up if you have to be 100% standards compliant. For my fast and dirty needs it worked but I’ll clean it up before we go to production. See where it says cat=12? That’s because I wanted to make a featured content gallery out of the posts in category 12.

Here’s code for a content gallery for a Loop with no category designated:

<div id="gallery">
    <div id="slider">
      <div id="sliderContent">
   <?php  
if (have_posts()) : ?>		
<?php while (have_posts()) : the_post(); ?>      
<div class="sliderImage"><?php the_post_thumbnail();?><span class="right"><h2 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2><br/><?php the_excerpt();?></span></div>       
<?php endwhile; ?>
<div class="clear sliderImage"></div>	
		
	<?php else : ?>
		Sorry, but you are looking for something that isn't here.
	<?php endif; ?>
     </div>
   </div>
</div>

Next thing you want to do is download the gallery code from here:

http://www.serie3.info/s3slider/
You should look at the demos and view the page source. They explain how to implement the slider and stuff. If you have trouble with it there are many tips over there.
You get the CSS to style the content gallery from that site,too.

I put the javascript in the footer.php of my theme like this:

<script type="text/javascript" src="/wp-content/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="/wp-content/js/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 5000
       
        });
    });
</script>

Download both templates: Post Thumbnail Featured Content Gallery (1050)

Simplepie + WordPress Blog + Lightspeed Webstore = :) !

feed items using webstore,wordpress and simplepieGetting SimplePie and WordPress together and whomping a few snippets of code into your Webstore tpl files is darn near close to an actual “integration” of WordPress and Webstore as I have been able to get. OH HOW I HAVE TRIED EVERYTHING ELSE! Sorry for yelling.

My tests so far have gone really well, especially for my client’s sites that use Webstore as the main site. Which most people do. Although perhaps many have not bothered with WordPress at all because it’s been extremely difficult for the medium level coder (that’s me) to get WP and LS to “talk” to each other ever since the upgrade from Webstore 1 to Webstore 2 series. Webstore 1 series was so slight it didn’t really mind what you put into the tpl files.

WP to WS Trying to use wp-blogheader.php=fail.

WS to WP trying to use a php include=fail.

Lord Knows I spent hours trying to use include wp-blogheader.php to get WP posts into a Webstore template. And I long ago gave up trying to get WS into a WP theme. I read up on it. And I tried installing the WP tables into the same DB as WS and the Webstore and WP files into the same directory. No luck. This may be a testimony to the limits of my coding skills!

But what can I do? I keep working until I find a solution. And I did: RSS & Simplepie!

Simplepie is a PHP RSS Feed Parser. And as it turns out SimplePie can pull in any RSS feed local (your own feeds) or external (anybody’s feeds) and you can craft these feed items to look like a full blog post, post excerpt, a product on your Webstore (yes, you can create a post that looks exactly like a Webstore produc-it’s a bit more extra work and not for the lazy post-er) or an image feed from Flickr, for a dynamic photo gallery maybe, if that’s what you want.

If you don’t know it: WordPress generates feeds for everything! And Simplepie has been integrated into the WP core. They really are made for each other.

Anyway, even though Webstore templates are a bit of a maze you can easily add feeds from your WordPress blog. Because while Webstore gives us the option to make as many custom pages as we want in almost a CMS (content management system) capacity – as of yet it is not nearly as beefy as WordPress as a CMS. So think about all the fabulous things you can do with a WP page or Post and then think how you can craft special posts and excerpts & use specifc categories to feature items of your choice on your Webstore home.

Safety First!

Its been tested. You can safely embed the Simplepie include code in index.tpl.php and the code for the feed items in any Webstore tpl file. More about this later. Please have backups of your files before beginning this project!.

I’m not going to explain how WP works or how to start customizing the Webstore templates because that would make this post really long. So please have a basic knowledge of WP and editing Webstore files.
Thanks!

Getting Started

First you need to have WP installed and a category in mind to use for the feed items.

I made a new category called Featured and I excluded it from the main index.php (in my WP theme) so they don’t get displayed on the blog home.

If you already have categories up and running that are suitable to be displayed on the Webstore home page then you can skip that step.

The feed gets called very simply: if your WP is in a folder called blog and you have a category called New Products you’d type this: (I’ll show you where this goes later.)

‘http://www.mydomain.com/blog/category/new-products/feed/’. And if you have another category you’d like to feature — maybe an events category–

‘http://www.mydomain.com/blog/category/upcoming-events/feed/’. You can add that too. Simplepie doesn’t limit how many feeds you can grab.

Next download Simplepie. You can upload everything in the unpacked zip but all you really need is simplepie.inc.

Upload simplepie.inc to a folder in your root directory of your server. Name the folder inc because that’s easiest.

So now you should have a folder called inc with the file simplepie.inc in it.

Create another folder called cache and set the permissions to at least 755. This may not be enough for some servers. 777 is as high as you can go.

The Simplepie Include

Open index.tpl.php and paste this code at the very top of the file.

All LS Webstore templates have a big notice at the top so paste this right under it after the last ? > of the notice.

Make sure you don’t have any spaces before the new code, too.

More code-liciousness after the link!

Continue reading Simplepie + WordPress Blog + Lightspeed Webstore = 🙂 !

Problems When Uploading Color Cart Green?

I got this comment today:

Hello…Theme looks really cute but it does not work. Doesn’t even change the look. All I have are links and texts…

Uploading a WP theme in a zip with a Mac

WP theme loader makes 2 directories and puts the theme in a subfolder of the same name.
So this is what you get:
wp-content/themes/color-cart-green/__MACOSX/color-cart-green/images/
wp-content/themes/color-cart-green/color-cart-green/
That would explain the stylesheet not taking effect.

The path to the stylesheet is:

wp-content/themes/color-cart-green/stylesheet.css

Not:
wp-content/themes/color-cart-green/color-cart-green/stylesheet.css

To get rid of this mess you must log into your server and find the badly loaded theme and rename the first folder “color-cart-green” to “piece-of-crap” and then move the real theme folder that has all the template files to where its supposed to be /wp-content/themes/.

Or just delete it.

Then if you still want to try it out you can unpack the zip you downloaded from my site and upload it with ftp or if you don’t have an ftp client you can use your control panel if you log into your hosting account and upload it with the file manager.

If I am wrong and this mess isn’t caused by uploading a theme in a zip with a Mac somebody please correct me.