Lightspeed – Page 5

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.

Webstore Main Column

For this one design of Webstore I’m using a horizontal dropdown menu instead of a vertical one. When a category tab in the menu is selected, if that category has child categories, a submenu is displayed, floated to the left of the main column that has the product list. I really needed to be able to use a narrow column if the subcategory list was shown and a wide column if it was not. I needed to use an if, else statement.

I added an else statement so that after the first if fires off and the submenu is to be shown, a div named main will be used. If it wasn’t to be shown div.mainwide was to be used. It’s a small change but it solved the issue of having one style for the product list pages just because of a submenu that is visible only when when a category has child categories. Now instead of 2 views and 1 style I have 2 views and 2 styles.

Original code in productlist.tpl.php.

[php]<?php if($this->subcategories && (count($this->subcategories) > 0)): ?>
<div style="display:inline; float:left;"><br />
<p style="font-weight: bold; margin: -10px 0 8px 15px; "><?php _p("Browse subcategories"); ?></strong></p>
<ul style="margin: 0 0 15px 0;">
<?php foreach($this->subcategories as $categ): ?>
<li style="margin: 0 0 3px 15px;"><a href="<?= $categ[‘link’]; ?>">>>  <?= $categ[‘name’]; ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<br style="clear:both"/>
<?php endif; ?>
</div>
<div id="main_panel" class="rounded {2px transparent}">
<?php $this->dtrProducts->Render(); ?>
<br style="clear:both"/>
</div>[/php]

My code:

[php]<?php if($this->subcategories && (count($this->subcategories) > 0)): ?>
<div class="subcatlist">
<ul>
<?php foreach($this->subcategories as $categ): ?>
<li><a href="<?= $categ[‘link’]; ?>"> <?= $categ[‘name’]; ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<div class="main">
<?php $this->dtrProducts->Render(); ?>
</div>
<?php else : ?>
<div class="mainwide">
<?php $this->dtrProducts->Render(); ?>
</div>[/php]

**edited Nov19th,2009**
In case you are scratching your head about this post I don’t blame you. I sometimes publish a post without proofreading that much!
To clarify what I am rambling on about above: I am trying to present a workaround if you have removed the left or right column of webstore because you only need to show a left or right column when the sub category list is being shown.

Perhaps you decided to use a horizontal menu or feel no need to have any other columns but the main content panel? How then might you show the subcategory list without needing to use an inline style?

By default the template uses an inline style to show the subcategory list. I happen not to like using inline styles because I find them hard to manage and they can end up giving code bloat. Besides with 76 template files, you’re going to want to streamline as much as you possibly can!

Because it is sort of hard to style one div for 2 views (one with a left or right column and one without), I used a php statement to show one div if we are going to be seeing the subcategory list and another if we are not. When we see the subcategory list we use a narrower px div. When we don’t see the list we can use a wider px div. This frees us up from having to use a div sized to accommodate another div that is only visible if we are browsing a category that has subcategories.

Accordion Menu for Lightspeed Webstore

Where have I been? Chained to my desk customizing Lightspeed Webstore templates. Lightspeed is Point of Sale software exclusively for Mac. And Webstore is Lightspeed’s shoppingcart. Webstore is not “standalone” you have to have Lightspeed — it makes sense for people who have real stores–and it is an additional cost to the POS.

The Webstore 2 series is much more advanced than the Webstore 1 although the new templates are harder to customize and therefore many people opted to use it as is rather than DIY or pay someone like me to do it. Luckily a few people have hired me to do it for them… In the course of all this work I found it necessary first of all to redo the Product Category navigation menu. It used to drop down a large category tree menu from one tab. Once you made your selection the menu snapped back up into the one tab leaving you to use the breadcrumbs to know where you were. I redid it to show all top level cats instead and click open to reveal child cats, accordion style. Building an accordion menu from a nested list of static links is super easy. The hard part was integrating it with the template php so that it would be dynamic.

Here are examples of 3 different menus, all using similar markup:

This is not a complete Deluxe template package download, it only contains the files needed to build an accordion menu. Plus the markup is ugly. But it works in Opera, Safari, Internet Explorer (6,7,8) and Firefox.

Download includes:

menu.tpl.php
index.tpl.php
Snippet from webstore.js
Snippet from webstore.css

Download here: [download id=”6″]

**edited Nov19th,2009**
I hope you noticed my menu adds in a “view all Category” link under the main category title/tab.
The reason I did this is – my menu disables the original Category tab/link so it becomes just a toggle open/close tab. This took even more usability away from an already usability-beleaguered menu! Older versions hoped that the Breadcrumb function would be enough but a client pointed out that users should be able to browse the top level categories as well as their subcategories. And the reason I used < h2 > tags instead of < li >for the main category tabs is…did you look at menu.tpl.php? That’s why! The subcats are in proper lists, don’t worry.