Using WP 3.1, jQuery, Cforms & WP-E-Commerce? Frustrated by Javascript Errors?

The main error I’ve seen when using these 2 plugins and using WordPress’ jQuery is “jquery form.product_form .livequery is not a function” which makes it look like the wp-e-commerce plugin is at fault but it actually isn’t. I know it isn’t because I de activated all my plugins and re activated them one by one until the error came back. With my specific set up the error only came back when I had cforms and wp-e-commerce activated at the same time.

You’ve learned how to enqueue jQuery plugins with WordPress’ jQuery without errors.WP-E-Commerce relies on WordPress’ jQuery. CformsII uses jQuery 1.4.2. WordPress uses jQuery 1.4.4. So now you’ve got 2 versions of jQuery being loaded at the same time which we all know means Javascript errors.

The easiest thing to do is FTP into your server, go to wp-content/plugins/cforms/js, open jquery.js and paste in a copy of jQuery 1.4.4. Doing this will not disrupt cformsII on the backend or submitting forms on the frontend.

If you upgrade cforms you’ll have to do this all over again. But since you’re not editing lines of code this is a snap to repeat.

* Note: Just because FireFox Web Developer or Firebug are reporting JS errors doesn’t necessarily mean things are not working as they should be. But you should remember that Internet Explorer is going show a nasty message: “error on page” or “done, but with errors on page” that your clients and their customers will see. But if you fix it before they see it it can be one less thing you’ll have to hear about.

This advice can be used with other combinations of plugins. If any plugin is enqueuing its own copy of jQuery that is not 1.4.4 and you’ve already enqueued WordPress’ jQuery you can just empty the plugin’s jquery.js so that its enqueuing an empty file or paste in 1.4.4. You’ll have to make sure doing this doesn’t stop the plugin from functioning, I’ve only tested this “fix” with cformsII.

In any event as long as everyone is using the same version of jQuery there won’t be any errors.

How are you dealing with Javascript errors?

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 (1128)

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 = 🙂 !