Category: Lightspeed Webstore

Revised: Add a Facebook like button to Xsilva Lightspeed Web Store

New and improved way to add a Facebook like button to the product details page template file in your Xsilva Lightspeed Web Store template. How is it new and improved? Because now we can show the product image as well as the description and link when someone likes the item and posts it to their facebook page. Thanks to Patrick from Slick Willy’s of Dunedin for asking me take the time to figure this out. I might not have bothered otherwise!

Please take care when editing your templates and make sure to keep copies of any files you edit so you can replace the edited ones if a problem occurs.

File to be edited: INDEX.TPL.PHP

On line 69 of index.tpl.php you’ll find this:

[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 always revise this block so that the Title of the Page, Product or Whatever comes before the Store Name. This is good for SEO.

SEO Tip: the code below can also be moved to be right underneath the meta tag for the Content-Type which is found on line 35 of index.tpl.php and looks like this: [php]<meta http-equiv="Content-Type" content="text/html; charset=<?= _xls_get_conf(‘ENCODING’ , ‘utf-8’) ?>" />[/php]

So, find the code block on line 69 of index.tpl.php and cut it. Then copy the following and paste it under the meta tag for the Content-Type:

[php]<?php global $strPageTitle; 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 if( get_class( $this ) == "xlsws_product"):?>
<meta property="og:image" content="/index.php?listingimage=<?php echo ($this->prod->ImageId)?>.jpg" />
<?php endif; ?> [/php]

File to be edited:PRODUCT_DETAIL.TPL.PHP

Find this: [php]<?php $this->lblDescription->Render() ; ?>[/php]

Add this under it:

[php]<div id="fbLike">
<fb:like href="/index.php?product=<?php echo ($this->prod->Code)?>" send="false" layout="button_count" width="450" show_faces="false" font="arial"></fb:like>
</div>[/php]

Button Placement Tip: you can put the Facebook like button somewhere else – it doesn’t have to go under the product description.
CSS Style Tip: wrapping the button in a div gives you more control over padding,margin and etc.

Facebook JavaScript Connection Code
Because we don’t need to connect our like button with the Facebook API site-wide – just on the product details page where the like button is, we can put the JavaScript connection code in the product_details.tpl.php template file at the bottom of the file. Go here for the code.

How to TIP: Customizing Xsilva Lightspeed Web Store

If you’re given the assignment to customize Web Store you might start out with the feeling that you are limited in what you can do as far as Web Store’s templating system goes.
We all know by now that each tpl.php in each template package – Deluxe or Framework – is included by one main file: index.tpl.php. That means that this file runs the whole show for every section of the online store. This means that if you add a block to index.tpl.php and you don’t know how to use PHP to hide it and you don’t want it to show on every section, it will.

Luckily, we can use the unique form ID that Web Store creates for Categories, Products, Cart and Checkout and more.
Because the form element that generates a unique ID is listed in the document right after the body element we can use it like we would use a unique id or class in the body element.

  • List of XLSWS Form IDs:

  • #xlsws_product = a single product details page
  • #xlsws_category = a single category page
  • #xlsws_cart = the edit cart page
  • #xlsws_checkout = the checkout page
  • #xlsws_gregistry = a single wishlist page
  • #xlsws_myaccount = an account page
  • #xlsws_custom_page = a single custom page
  • #xlsws_sitemap = the site map page
  • #xlsws_contact_us = the contact us page

Practical application:

Say you’ve got a block of content and you added it to index.tpl.php but for whatever reason you don’t want this content to show on a single product details page.

You could add this to webstore.css

[css]
#xlsws_product #block-you-dont-want-toshow {display:none;}
[/css]

Try it out for yourself & good luck with all your projects!

Xsilva Web Store Tip:Get Product Price In Related Products Slider

If you’re into customizing the Xsilva LightSpeed Web Store you might find it handy to be able to make the way products are displayed in the slider more like the way they appear in your main product list and your Custom Pages. Over the years I’ve had lots of requests relating to redesigning the slider that shows on a Custom Page but not many of my clients actually use the slider that appears in the Product Details Page so I hadn’t really ever bothered with it. Right away I noticed the Related Products Slider shows the product code – not the price. It can be pretty ugly especially if your product codes look like “PGH-34rjd”. I can imagine this is useful for sites that sell machine parts but the average customer is probably not ever going to need to see the product code.

The first thing I did was look at the Related Products Slider code ( in product_detail.tpl.php starting @ line 114):

[php]<?php if(count($this->arrRelatedProducts)>0):?>
<?php $this->sldRelated->Render();?>
<?php endif; ?>[/php]

Then I compared it to the custom code I already had in the Custom Page Template :

[php]<?php if(isset($this->pnlSlider)):
foreach($this->pnlSlider->links as $ind=>$prod){
$this->pnlSlider->links[$ind][‘title2’]
= _xls_currency(Product::LoadByCode($prod[‘title2’])->Price);
}
$this->pnlSlider->Name = ”;
$this->pnlSlider->Render();
endif; ?>
[/php]

As you can see it was very easy to carry over into the Related Products Slider – since its practically the same, I only had to change the name of the slider.
From pnlSlider to sldRelated

Here is the final code:
[php]<?php
foreach($this->sldRelated->links as $ind=>$prod){
$this->sldRelated->links[$ind][‘title2’]
= _xls_currency(Product::LoadByCode($prod[‘title2’])->Price);
}
$this->sldRelated->Name = ”;
$this->sldRelated->Render();
endif; ?>[/php]

Maybe not incidentally, if you want to be able to get rid of the default title of the slider $this->sldRelated->Name = ”; will do that.
This way you can add your own heading HTML above the slider code. This will also stop the in-line styling and external CSS for the Slider Name kicking in. There’s nothing wrong with white text with CSS3 text-shadow. If it matches your design.

Example: [html]<h2>You Might Also Like</h2>[/html]

This is what the one I was working on looks like

@#$% SSL Image file breaking SSL connection on my latest project

I’ve been working on a new project customizing another Xsilva Lightspeed Web store with WordPress integration because that has been my ultimate goal and everything has been going along perfectly except it came down to testing the SSL connection for the customer registration and checkout pages (these 2 urls auto redirect to https:// if you turn SSL on in the admin panel). Well, the addressbar would start off a beautiful deep blue and the lower right hand of the locationbar lock icon would load but when it was all done zam! Lock icon broke, blue address bar disappeared. Nooooo.

The 1st thing I did to troubleshoot was make all links use / instead of http:// even though you can use http in urls that are not scripts or images. Then I took out some of my WordPress footer widgets,thinking it might be the Twitter Pro widget or something, but nope. Then I thought why not check all the media files with Tools >> Page Info >> Media? But every media file listed began with https:// so I closed the Page Info window and went back to work but it kept nagging me.These 2 pages must be secure, no way around it. So I opened Tools >> Page Info >> Media again and clicked on each image url to get the preview and there was the culprit, the default search icon -even though I did not want to use it it was being loaded into the page anyway. I’d loaded my own image folder to use in my stylesheet to reduce the clutter a bit and I did not have a search_go.png yet. So even though the path to the file was redirecting correctly to SSL, because it returned a 404, the secure connection was breaking.

The developers of Web Store give us a lot to work with but oftentimes some things are out of our hands. Things like input value and in this case image src are coded into the the template like this:
[php]<span style=""><?= $this->misc_components[‘search_img’]->Render(); ?></span>[/php]
Src file searchbox.tpl.php
Thankfully this is the easiest thing to fix, I just uploaded my search_go .png and it overwrote the default. Then I clicked back to my register page and this time the SSL connection remained alive! Who would have thought it could be something so small causing this much trouble?