LightSpeed Webstore Pagination: don’t want pagination to show when there’s only 1 page

I don’t want to see pagination when there’s only 1 page (of products). There’s nothing more annoying than seeing that stupid < 1 > – even more so when there are only 3 products in a particular category.

Here is a solution that uses the Products Per Page in Tools > eCommerce > admin panel > appearance > Products > Products Per Page & the Pagination code in crumbtrail.tpl.php OR product_list.tpl.php. In Brooklyn Template the pagination code is in product_list.tpl.php. I think the other Templates have it placed in crumbtrail.tpl.php.

I used the pagination code I found in Brooklyn product_list.tpl.php and just tweaked it a teeny bit. Brooklyn adds a new code (webstore 2.5 and up) to get rid of the default arrow images which I like because those arrow images filenames are hardcoded in a core file which is a huge pain in the butt. So if your pagination code is in crumbtrail.tpl.php, your Template is probably not based on Brooklyn and you will have to incorporate the new code into crumbtrail.tpl.php in order to get rid of the pagination arrow images:

 if($this->dtrProducts->Paginator) {
	$this->dtrProducts->Paginator->LabelForPrevious = _sp('previous');
	$this->dtrProducts->Paginator->LabelForNext = _sp('next');
}
	$strPaginator = $this->dtrProducts->Paginator->Render(false);

?>

If you get stuck just open Brooklyn, find product_list.tpl.php and you will see what I mean.

By telling TotalItemCount only to show pagination if there are more products in a category than the amount you chose in Products Per Page, you can make it go away when there’s only 1 page. Here the TotalItemCount is told to check if there are more than 8 products on a page:

<?php if ($this->dtrProducts->TotalItemCount > 8) : ?>
<?php if($this->dtrProducts->Paginator) {  echo $strPaginator; } ?>
<?php endif; ?>

When there are more than 8 products, pagination shows up. This pagination thing has bugged me for a while. I was glad to find a solution and I hope it helps someone else. Please do be aware that if the Products Per Page number is changed you have to change the number in the pagination code, too.

In many places in the templates I see conditional statements checking to see if a particular setting has been set in the configuration settings. So I’m sure if I gave it a bit more time I could use a conditional statement to check what the Products Per Page amount is and that way if the setting is ever changed one wouldn’t have to edit the template file as well. But I am pressed for time. I don’t even have time to write this post. Bye!

LightSpeed Webstore: Don’t want button count in twitter button? Edit sharing.tpl.php

After spending a stupid amount of time trying to fit all the sharing buttons side by side in the exact same vertical alignment in a really small space (256 pixels with some padding on the left) I was about to shoot myself.

Instead, I decided to just go to Twitter and create the button all over again and stick the new code in sharing.tpl.php. The new button I made did not have button count turned on.

https://twitter.com/about/resources/buttons#tweet

Why did I not want the button count? Because with the button count turned on the Twitter button was created by JavaScript to be 120 pixels in width and had to be placed last or there was a big old gap between it and the next button. The actual size of the button is really only about 56 pixels. It’s the button count that adds all the extra width.

I opened mytemplate/sharing.tpl.php and found the twitter button stuff highlighted it and pasted this code in its place:

<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

You’ll notice the default twitter button code already has the data-count=”none” so what gives?

I have to admit I have expended as many braincells as I care to with this issue so I am not using any more trying to figure out why the default button code with data-count=”none” showed the button count but the one I got over at Twitter’s button maker didn’t.

Ways to add social buttons to LightSpeed Webstore

When it comes to adding social sharing buttons to LightSpeed webstore you can choose a quick and easy fix like Sharethis or add the buttons manually. If you use Sharethis you can customize the buttons. If you add the button using the site’s button code you have to use that site’s button style. This rule is usually laid out in black and white on the site’s terms of use page. Sharethis’ look and behavior is not to everyone’s taste but it is a heck of a lot easier to use.

Most clients want the usual suspects: Twitter and Facebook. Other clients want Pinterest as well and then there’s Svpply.

The Svpply social sharing button is not a common request from clients. Only one client has asked me to add the button to their webstore. So I got the code from the Svpply site and added it and styled it, case closed. Soon after I heard from the client that nothing was happening when they clicked the button. So I had to check out why.

To my knowledge Svpply is a relatively new social sharing site. Because it’s so new hardly anyone is using it and I couldn’t find any information on adding the Svpply button. The Svpply website is the only place to go for help. Their tech support probably would have tried to help me but I really didn’t feel like explaining how webstore shows product images and why their button wasn’t working on my project.

Svpply posts won’t work if the code in the button can’t find the product image. Webstore’s product image (in the single product details pages) is not an actual inline image; it’s a background image. So that is why the Svpply code can’t find it. And that is why the button didn’t work out of the box.

In your webstore template find the product image tag (in product_details.tpl.php), it looks like this:

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

You can get the main product image to display as an inline image with this code:

<img src="index.php?pdetailimage=<?php echo ($this->prod->ImageId)?>.jpg" alt=""/>

When I customize a webstore I usually wrap the Product Image tag with a div (for long and boring Internet Explorer related reasons) so all I needed was to add the second line of HTML containing the inline image.jpg and give that one a z-index less than the div that wraps the product image tag.

I gave div#imgHolder a higher z-index (z-index:2).
I gave div#inlineImage z-index:1. As far as the Svpply button is concerned there’s now an inline image on the page.

Here’s the HTML:

<div class="imgHolder"><?php $this->pnlImgHolder->Render(); ?></div>
<div class="inlineimage"><img src="index.php?pdetailimage=<?php echo ($this->prod->ImageId)?>.jpg" alt="" title=""/></div>

The downside is that no matter what image is being highlighted by the Svpply button, only the main product image will get posted on Svpply. Visitors using the button might choose a detail image and wonder why that image doesn’t show up. But I’m confident that it won’t cause any riots.

<div id="supply"  class="social_button">
<script src="//svpply.com/api/all.js#xsvml=1" type="text/javascript" ></script>
<sv:product-button type="boxed" ></sv:product-button>
</div>

Pinterest’s button code requires a complete URL for the product and the product image.
This code gets the large size of the main product image which will look better on a board than a little thumbnail-sized image.

Make sure to replace http://www.mywebstore.com/ with the real domain and path to webstore.
Example, if your domain is superfab.com and your store is located at superfab.com/store/ you’d need to add http://www.superfab.com/store/.
If your store is in the domain root just add http://www.superfab.com/. If you’re hosting with LightSpeed your store is in the root.

<div id="pinterest"  class="social_button">
<a href="http://pinterest.com/pin/create/button/?url=http://www.mywebstore.com/index.php?product=<?php echo($this->prod->Code)?>&amp;media=http://www.mywebstore.com/index.php?pdetailimage=<?php echo ($this->prod->ImageId)?>.jpg" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
</div>

Twitter’s button code requires a complete URL for the link to the product in the tweet.
Make sure to replace http://www.mywebstore.com/ with the real domain and path to webstore.
Example, if your domain is superfab.com and your store is located at superfab.com/store/ you’d need to add http://www.superfab.com/store/.
If your store is in the domain root just add http://www.superfab.com/. If you’re hosting with LightSpeed your store is in the root.

<div id="twitter" class="social_button">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.mywebstore.com/index.php?product=<?php echo($this->prod->Code)?>" data-text="<?= $this->prod->DescriptionShort ?>" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

Facebook’s button code is hard to add to webstore only because the default width is 450 pixels and most webstore product details containing divs don’t have that much room to devote. It also makes it hard to show the Facebook button in a row of other buttons.Thankfully other buttons are not wide.The width of the Facebook button might be why most designers put it last in the row. You can make the button width a lot smaller though – here I’ve made it 150 pixels. It will work ok if your template’s containing div isn’t using overflow:hidden. When I write “button width” I’m not referring to the image of the button.

<div id="facebook" class="social_button">
<fb:like href="index.php?product=<?php echo($this->prod->Code)?>" send="false"  width="150" show_faces="false" layout="button_count" font="lucida grande"></fb:like>
</div><script src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>

Facebook needs 1 additional javascript file at the bottom of product_details.tpl.php after all the rest of the code in that file.

<script type="text/javascript">
FB.init({
status : true,
cookie : true,
xfbml  : true 
});
</script>

Importing Google Web Fonts, LightSpeed Web Store & SSL

As I am sure you know, SSL is very sensitive. Every link href, script src and img src in the document must be HTTPS for the page to be delivered completely secure.

If not, the encryption is partial and you may receive warnings about it. Worse, your customers will see warnings about it and might leave your site before buying or registering. So it’s better to never to let this happen, if possible. Especially in a production site (live). Goes without saying, I guess.

Anyway my latest thing is using Google Web Fonts because although I worship, love and adore WP-Cufon and Cufon and usually use them whenever I can I can’t use Cufon site-wide. Well, I could but not in good conscience if I care about how long the page takes to load and all of that.

Most of my clients choose 1 Universally available font for their main Body font and a couple of Specialty fonts for titles,headings and menus, to dress things up a bit. But my latest client wanted a Specialty font for their main Body font and so I found 3 compatible fonts in Google Web Font’s library. I used the @import in my main stylesheet and thought everything was going rather well.
Until we had to start checking SSL and wouldn’t you know it it wasn’t kicking in all the way.
Something was not getting encrypted and I could not figure out what it was.

Like I do whenever this kind of thing happens I reverted the template back to a default Web store Template and SSL kicked in all the way. After I looked through my customized files I still couldn’t find anything off…

Then I checked my main stylesheet and at the top was:

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(http://fonts.googleapis.com/css?family=Alice);
@import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

AHA! I switched it to:

@import url(https://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(https://fonts.googleapis.com/css?family=Alice);
@import url(https://fonts.googleapis.com/css?family=Kameron:400,700);

And SSL kicked in all the way. JOY.

So don’t be silly like me. If you import fonts like this make sure the url is https. Good thing Google has SSL up the wazoo so this is not a problem. Awesome.