Getting Content From WordPress When Your Webstore Is Hosted By LightSpeed

If you’re someone who does this kind of thing (customizing LightSpeed Web Stores) and you also like to use WordPress to run the “main site” – main site being everything else in the Web site that is not the actual Web Store – you’ve probably often been disappointed at the rule that you can’t install WordPress on a LightSpeed hosted server.

LightSpeed offers great hosting & support packages, but just for their native eCommerce solution, Web Store. The hosting plan they offer will not provide email@yourdomain.com and will not host a Content Management System like WordPress which requires a MySQL database (and runs tons of queries and could get hacked if it is aged-out:very old and out of date and/or uses a theme that is very old and out of date. Age-ing out can happen since not all WordPress users know the dangers of letting their install or themes get all old and sit there begging to be hacked).

Again, LightSpeed offers hosting for Web Store and that is all they host. I do not blame them or think they are being too strict or whatever. They have to protect their servers.

Which means if you want a Web site (not “just” a Web Store) and have email@yourdomain.com and all of that, they assume you will buy an additional hosting plan with another Web hosting company.

The thing is, although most business already have a site with a server that can probably run Web Store, they’re sold the hosting package for Web Store when they purchase the license for it. And then a good amount of my clients come to me with their Web Store hosted by LightSpeed and their Web Site hosted by whatever hosting company. I either end up letting them know that their Web Store will have to be kind of not as awesome or I tell them that in order to get WordPress stuff in a Web Store they have to be on the same server – then let them decide if they want to make a change in hosting.

My latest project was set up exactly as described above. I’d gotten so many project requests that I mixed up how their hosting was set up. So I’d quoted them the cost of a WordPress/Web Store integration. I would not have minded reducing the quote to just a LightSpeed Web Store customization but I felt bad that I had promised them all this other good stuff. Forget money, I wanted to see if I could actually do it. I got into this business because I enjoy challenges and problem solving and what is Web site development if not a series of challenges requiring problem solving?

So, The Problem:
How to get WordPress stuff (pages, posts, custom post types, sidebars and menus) to show up in a Web Store?

I tried my usual Simple HTML Dom but it didn’t fly. SHD is what I usually use to get Web Store stuff in WordPress. But the other way around was always a bit of a mess. So I gave up on Simple HTMl Dom. I’ll still use it when I can, though.

What about JSON? Can’t you use JSON to get content from somewhere and spit it into a div? Sure you can but what about Same Origin Policy? Oh, right. Has to be JSONP, then. To test JSONP, I used a service offered by Any Origin and it worked, sort of. I mean it worked swell: it spit the content into a div and blah blah. The issue was really the content it was getting also included the WordPress Header & Footer and everything else in the theme file the page,post or whatever was using. I’d like to avoid getting into a whole WordPress theme tutorial here but basically the way around this was to make a page and then make it use a theme file that only had the content I wanted to show, no sidebars, headers or footers.

So by now you’re probably guessing that I don’t know JSON from a hole in the ground. If I did wouldn’t I be able to target the div I wanted to show the content from? Yeah, but I didn’t know how to do that. 20 minutes into my 1st test case using JSON I was just happy to get something working. I figured I’d have time later to make things more suited for a production environment.

Sooo, the thing I did know how to do was to make a theme file that only had the template tag for the thing I wanted to get. For example, a custom menu. I made a Custom Page file and put the template tag for the specific menu I wanted and saved it as json.php. Then I made the Page and made it use the Custom Page. When I viewed the page all I saw was the plain list of menu items. Great! Wouldn’t work stand alone but would work as a way to only show the menu:

[php]<?php
/**
* Template Name: getwpmenupleeez
*
* A custom page template to get a custom menu.
*
* The "Template Name:" bit above allows this to be selectable
* from a dropdown menu on the edit page screen.
*
* @package WordPress
*
*/

wp_nav_menu( array(‘menu’ => ‘my-pages’ ));

?>[/php]

My-pages being the custom menu I created by going to Dashboard > Appearances > Menus and making a menu named My Pages. In Dashboard > Pages, I created a Page called Just the Menu which had a slug just-the-menu. When I viewed http://myawesomeproject.com/just-the-menu/ all I saw was just the menu. myawesomeproject.com is not a real address.

So in Web Store land I went to templates/my-template/index.tpl.php and located the area of the document into which I wanted to embed Just the Menu.

Like this:

[php]
<script type="text/javascript">
$.getJSON(‘http://anyorigin.com/get?url=myawesomeproject.com/just-the-menu/&callback=?’, function(data){
$(‘.the-menu’).html(data.contents);
});

</script>
<div class="the-menu"></div>[/php]

myawesomeproject.com is not a real address.

The beauty of this is that I’d already styled the menu in my WordPress theme style.css. I didn’t have to make new style for .the-menu because it inherited the style from the theme. If there’s anything I hate it’s doing the same work 2 times.

Anyway such triumphs may seem small but add them up and they’re very big. Nothing makes me happier than to be able to get around a problem.

Have fun!

What’s Up With That?

I don’t usually use my website to complain about something that is not 100% work related – it is impolitic to complain about my work since that basically means complaining about clients and I’m not sure clients exactly love that. But I do like to shop online and here is an odd and really unhelpful event that occurred after attempting to shop on the Lucky Brand website.

I’d been ogling this blouse because I love the print and the big sleeves. I don’t know why but I am a total sucker for big, flappy, drapey sleeves. I don’t hate my arms any more than the average female person over 35 who isn’t built like a lady Schwarzenegger or Stick Bug, I just like this kind of sleeve.

But I didn’t buy. Why? Because of the product images. The model is quite Stick Bug-esque and the shirt is styled tucked in. The horror! No additional images are provided with the shirt not tucked in. To confuse me even more the product description blatantly declares this shirt could be worn “as an unexpected cover-up over swimwear”. Describing an item of clothing as unexpected is not helpful! Why is it unexpected? Is it because this is a shirt you’d not normally wear as a cover up because it is short? Or because it is fancier than your usual coverup? This kind of playfulness in product descriptions is fine as long as it is playfully helpful not playfully confusing!

I spent a decent amount of time on this site and I read the product descriptions and details. As I browsed, I noticed that a lot of shirts had very similar product descriptions. As if someone had copied description text from one product and pasted it into others. I don’t have a problem typing. I can type and I am pretty wordy even when it isn’t my job to be typing wordily, like on my website writing unrelated-to-work posts.So if it is your job to write product descriptions for a major online shopping website why are you being so lazy? And who is your boss? Don’t they care that you are writing the same product descriptions for multiple items?

Still, this blouse intrigued me so I wrote to Lucky Brand to ask them how long it was and if it really could be worn as a beach coverup. Online, the product description clearly states the blouse is 100% Rayon and “can be worn as an unexpected coverup over swimwear”. I included the link to the shirt on the website and the product id number just so there could be no mistake about which item I was inquiring.

Here is the reply I received from customer service:

Thank you for contacting the Lucky Brand Corporate Customer Service. Unfortunately, this item would not be appropriate for a beach cover up top.
This blouse is made from silk chiffon and should be worn with pants for a dressier occasion. The blouse also is not very long and can only be tucked in or left out.

They didn’t even bother to check the product I was asking about!!!

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]<?php $this->pnlImgHolder->Render(); ?>[/php]

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

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

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:
[php]<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>[/php]

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.

[php]<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>[/php]

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.

[php]<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>[/php]

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.

[php]<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>[/php]

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.

[php]<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>[/php]

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

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

Launched Projects

Even though my home page has had the same launched project on it for almost a year

I have more in the works. And on0n.com is getting a facelift, too.

New websites [list updated Oct 17th, 2012]: