mccormicky

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:

<span style=""><?= $this->misc_components['search_img']->Render(); ?></span>

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?

Just yesterday I was confronted with a pretty cool challenge; how to get the text of dynamic heading (h1,h2,etc) that was inserted with jquery+livequery to be replaced with Cufon.

The dilemma: Cufon couldn’t replace the text I added to a div and heading using a selector, in this case the text of a last child of a breadcrumb trail, which I was using livequery to detect and then create the title of a page ( I flat out stole this method, but hey).

Luckily for me the last post this forum thread reported a way to fix it. Their code-fix was specific to the thing they were trying to accomplish but it was simple to figure out how to re write it to fit my task.

If you are using Cufon already you’ll be familiar with this bit:

Cufon.replace('h2.title', { fontFamily: 'greatfont' });

If you’re familiar with javascript you’ll be familiar with this bit,too:

$("h2.title").livequery(function() {
$(this).text($("#breadcrumbs li:last-child").text());})

What I had to do was combine each into one function as a separate call from my other Cufon.replace code.

$("h2.title").livequery(function() {
$(this).text($("#breadcrumbs li:last-child").text());
Cufon.replace('h2.title', { fontFamily: 'greatfont' });
})

As added insurance I placed this right before the closing body tag:

<script type="text/javascript">Cufon.now(); </script> 

Then wheee! My text was Cufon’d!

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 global $strPageTitle; ?>
	<?php if (isset($strPageTitle)): ?>
			<title><?=  _xls_get_conf('STORE_NAME', _sp('Shopping cart'));   ?> : <?php _p($strPageTitle); ?></title>
	<?php endif; ?>

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 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"/>
      

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

<meta property="og:image" content="" />

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:

<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>

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.

<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>

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

What do you do with a bit of free time? Make another Photoshop brush, of course. This download contains The Rays of Excellence, 3 Bad Stars and 1 man with an electric guitar and a mic at his feet (Photoshop CS3). I’ve also included a smaller,horizontally flipped of the man/guitar/mic brush. And the download is free as always, my friends.

Download: Man, Guitar, Microphone Photoshop CS3 Brushpack (113)