Add a Facebook Like Button to Your Xsilva Lightspeed Webstore Product Details Template

This tutorial demonstrates one method of getting the Facebook like button into your product detail tpl using XFBML which is Facebook Markup Language.
Difficulty: Medium
Requirements: You must be able comfortable editing webstore template files.

First configure your Like button . Hint, don’t reduce the size too much than the default which is 450. Much more information is available on the button configurator page.

Next make a backup of these 2 webstore template files:index.tpl.php and product_detail.php so that if you massively mess up you can just upload them and things will go back to normal.

We can add 2 of the 3 Open Graph tags required by Facebook because we have the code for dynamic meta titles. Open index.tpl.php in a text editor like Text Wrangler, find *@ lines 69 to 72 “@” in case you have made changes and line numbers have changed.

[php]<?php global $strPageTitle; ?>
<?php if (isset($strPageTitle)): ?>
<title><?= _xls_get_conf(‘STORE_NAME’, _sp(‘Shopping cart’)); ?> : <?php _p($strPageTitle); ?></title>
<?php endif; ?>[/php]

I reversed the order from the default phrasing because it’s good SEO to place the Page,Category or Product Title before the Site Title (Store Name in this case) but I digress.

[php]<?php global $strPageTitle; ?>
<?php if (isset($strPageTitle)): ?>
<title><?php _p($strPageTitle); ?> | <?= _xls_get_conf(‘STORE_NAME’, _sp(‘Shopping cart’)); ?> </title>
<meta property="og:title" content="<?php _p($strPageTitle); ?> | <?= _xls_get_conf(‘STORE_NAME’, _sp(‘Shopping cart’)); ?> "/>
<?php endif;?>
<meta property="og:site_name" content="Put Your Store Name Here"/>
[/php]

There’s one other og tag but I haven’ t figured it out, yet anyway here it is:

[html]<meta property="og:image" content="" />[/html]

Template files for the most part display product photos as background images which makes it trickier to do this one.The product slider you see on Custom Pages does use inline html photos but there is no access to the code that generates the HTML for the sliders… excuses excuses, I apologize. 2 out of 3 ain’t bad.

Moving on, we have to paste some Javascript into the bottom of the index.tpl.php template – I put mine before the last 2 lines of this file:
[js]<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<?php $this->RenderEnd(); ?>
</html>
[/js]

Edit alert !

Totally forgot about SSL on checkout and that http://connect.facebook.net/en_US/all.js index.tpl.php will break the security of the checkout page. Silly me. Not having time enough to write a solution on the spot – a simple solution is to host the file yourself, just download the file and upload it to the assets/js folder on your server. Then change the script src to “assets/js/all.js” and you’re good to go. Self hosting this file means that we have to keep an eye out for updates,though.

Now we can move on to putting the button in our product_details.tpl.php template. When it comes to advising you where in product_detail.php you can paste this code there are certain difficulties but here is where I recommend placement for an Unedited Deluxe product_details.tpl.php @ line 90, 89 is where the product description tag is. It makes sense to add the like button near the description.

[php]<p><?php $this->lblDescription->Render() ; ?><fb:like href="http://www.myawesomesite.com/index.php?product=<?php echo ($this->prod->Code) ?>" layout="button_count" show_faces="false" width="400" action="like" font="arial" colorscheme="light" /></p>[/php]

Yes, right in the paragraph tag! What an outlaw.

Use WordPress Rss Feeds to Show a Featured Content Gallery In Lightspeed Webstore Landing Page

WordPress+Simplepie+Lightspeed, awesome. In my last post I showed you how to make a featured content gallery with the_post_thumbnail. And in this post I talked about how to use Simplepie to show a WordPress feed on your Webstore.

I’m not going to lie, it requires extra work to use WordPress to enhance your Webstore. But it’s worth it. Because, lets face it, Webstores out of the box need a bit of pizazz.

In my last post I linked to a demo of a featured content gallery in a WordPress site. Snore, everybody has them on their WordPress sites, big deal, right? Well the only reason I built it was to learn how to build the exact same thing for a Webstore custom page using RSS feeds. And thanks to my friend David Auerbach over at dijitalfix.com I know how to code it into custom_page.tpl.php and have it show only on the landing page.

So enough chitter chatter, here’s the plain custom_page.tpl.php
[php]
<div style="padding: 15px 25px; line-height: 1.5em;"><?php echo $this->content; ?></div>
<?php if(isset($this->pnlSlider)): ?>
<br style="clear:both"/>
<?php $this->pnlSlider->Render(); ?>
<br style="clear:both"/>
<?php endif; ?>[/php]

Here’s my code:
[php]
<?php if($_GET[‘cpage’] && $_GET[‘cpage’]==’intro’):?>

<div id="product-specials">
<div id="slider">
<div id="sliderContent">
<?php foreach ($feed->get_items(0, 12) as $item): ?>
<div class="sliderImage"><?php print $item->get_description(); ?>
<span class="right"><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?> </a></span></div>
<?php endforeach; ?>
<div class="clear sliderImage"></div>
</div><!–slidercontent–>
</div><!–slider–>
</div> <!–product specials–>
<?php endif; ?>
<?php echo $this->content; ?>

<?php if(isset($this->pnlSlider)): ?>

<?php $this->pnlSlider->Name = ”; ?>

<?php $this->pnlSlider->Render(); ?>

<?php endif; ?>
[/php]

This line makes sure the gallery only shows on the “Welcome to my Store” custom page:

[php]<?php if($_GET[‘cpage’] && $_GET[‘cpage’]==’intro’):?> [/php]

If you have re named the Page Key from intro to something else Please make sure to make the changes,OK?

I’ve coded it to show 12 feed items in the gallery. For more or less items, modify this line:

[php]<?php foreach ($feed->get_items(0, 12) as $item): ?> [/php]

A commenter said that they changed this line:
[php]<?php print $item->get_description(); ?>[/php]
To:
[php]<?php print $item->get_content(); ?>[/php]
and was happier with the results. Try both out.

This line
[php]<?php $this->pnlSlider->Name = ”; ?>[/php]
takes off the title of the Webstore product slider.
If you want it put back in just comment it out or cut it.

Ok, so before you run off and start modifying your custom page templates…
I hope it goes without saying you have to have WordPress installed on your server.
You also have to have Simplepie installed on your server.
Download Simplepie
Just make a folder called inc in your directory root and upload simplepie.inc to it.
Then make another folder called cache. That’s it, Simplepie is now installed.

Insert this code at the top of your index.tpl.php:
[php]
<?php
include_once $_SERVER[‘DOCUMENT_ROOT’] . ‘/store/inc/simplepie.inc’;
//full link to your wordpress, either just the site:
$feed = new SimplePie(‘http://www.mysite.com/wordpress/feed/’);
$feed2 = new SimplePie(‘http://www.mysite.com/wordpress/category/feed/’);
function image_from_description($data) {
preg_match_all(‘/<img src="([^"]*)"([^>]*)>/i’, $data, $matches);
}?>
[/php]
I’ve included 2 kinds of feed links there. One links to posts and one links to categories. If you have a Specific category add it in after /category and before /feed/.

There must not be blank space before the < ?php or you'll get that error message "Cannot modify header information,etc" and your store will go down. So make sure there is no blank space, ok? Also if you want to link to a specific category feed and you have a category base name make sure to include that name before the ending /feed/ like this: http://www.mysite.com/wordpress/my-category-base-name/feed/. I'm also assuming you have permalinks turned on. If you don't you should turn them on. If you want to show your whole blog in the featured content gallery slider doo dad--all the posts, no matter what category they are from, just use the link to the feed. Here are the kinds of rss feeds available. (Not sure about using the RSS .92 feed link)

Without Permalinks!

“RSS 2.0″ http://www.your_domain.com/?feed=rss2”
“RSS .92″ href=”http://www.your_domain.com/?feed=rss”
“Atom 0.3″ href=”http://www.your_domain.com/?feed=atom”

With Permalinks!

“RSS 2.0″ href=”http://domain.com/feed/”
“RSS .92″ href=”http://domain.com/feed/rss/”
“Atom 0.3″ href=”http://domain.com/feed/atom/”

Extra Stuff
Because the RSS feed grabs the link to the post if you don’t take a few extra steps your content gallery feed items will end up linking to back to the blog , not the products in the featured content gallery which, depending on how you want to use the gallery, might defeat your purposes.

Oh what to do? Use a plugin that redirects using Custom Fields!
I pasted this into function.php of my WordPress theme to redirect each post link to a specific product link using a custom field:
[php]
//set the options
$key = ‘redirect’;
$status = 301;

//Hook the link rewrite function into the page_link filter
//This part replaces the page URL, wherever it is outputted, with our custom URL
add_filter(‘page_link’,’custom_field_page_link’,10,2);
function custom_field_page_link($link,$id) {
//globalize vars
global $key;

$custom_page_url = get_post_meta($id, $key, true);
if(!empty($custom_page_url)) $link = $custom_page_url;
return $link;
}

//Hook the redirect function into the template_redirect action
//This part actually does the redirect, if necessary
add_action(‘template_redirect’,’custom_field_redirect’);
function custom_field_redirect() {
//globalize vars
global $wp_query, $key, $status;

$redirect = get_post_meta($wp_query->post->ID, $key, true);
if(!empty($redirect) && is_singular()) {
//And do the redirect.
wp_redirect($redirect, $status);
}
}
[/php]

Thanks to Nathan Rice for this!

How to use it
Each time you want to create a post that is going to be featured in the content gallery make sure to add “redirect”, without quotes, into the custom field Name. The Value area is where you paste the product URL. This will make sure that when the title of the post of the RSS feed item in the gallery is clicked on it will lead customers to the product details page, not the WordPress post.

For information on gallery slider and the javascript files you will need to get it running, go here http://www.serie3.info/s3slider/

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.

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