Bootstrap 3 post-migration: what if your search form depends on Bootstrap 2.3.2 Typeahead plugin?

You migrated and now bam: Uncaught TypeError: Object [object Object] has no method ‘typeahead’ : (

In Bootstrap 3 the typeahead plugin was left out, didn’t make it, is deprecated (harsh) in favor of not having it at all ( also harsh) – or using Twitter Typeahead and here I thought Bootstrap was Twitter. Shows you how much I know.

You spent a couple minutes migrating to Bootstrap 3 ( OK a couple hours) as soon as the first release candidate came out, like a good little early adapter and now your search form doesn’t typeahead because Bootstrap 3 is acting like it has no idea what that is and so now you just have to suffer. Right? Well, you can still grab the plugin from 2.3.2 bootstrap.js and include it as a regular old js file and the typeahead action in your search form will come back… so it’s not the end of the world after all.

If it were up to me I’d be all Bootstrap 3 all the way but I have to work with LightSpeed Webstore 3 (whose themes are all based on Bootstrap 2). So I can’t just scrap Bootstrap 2 and move on to 3, it’s not up to me. I can’t replace their core files ( LightSpeed Web Store includes CSS & Javascript from Bootstrap 2 in your theme, of course you can remove it with .remove(); if you’re really hardcore).

So if you’re like me and making custom WordPress & LightSpeed Web Store 3 themes you will find yourself having to still have to keep some Bootstrap 2 stuff.

Another weird bit is .collapse. How .collapse is handled in 3 and in 2.3.2. I’m not going to tell you how long it took me to find out why I couldn’t get a simple toggle to work.
Whenever something “javascripty” doesn’t work I blame the javascript. But there were no errors in the console so that was a stumper. You would not think it but CSS can be just as dangerous as javascript. I use dangerous jokingly, but it’s true. Think how powerful display: none is.

2.3.2 .collapse {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}

3.0.0 .collapse {
display: none;
}

.collapse.in {
display: block;
}

.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
transition: height 0.35s ease;
}

See what they did? They moved the CSS transition from .collapse to .collapsing – 2 doesn’t have .collapsing.
So because I am using both – making a WordPress theme on Bootstrap 3, a LightSpeed theme on 2.3.2 and 3 ( only the CSS though) I had to add some extra over ride to my Web store theme:

#mything .collapse {
display: block;
}
#mything .collapse.in {
display: block;
}

Both 2 & 3’s js adds inline style to the collapsed element – height: auto and height: 0px;
Because of the CSS conflicts between 2 and 3 versions of .collapse and the missing .collapsing class in 2,
this little over ride actually works but only in combination with the inline styles.

There is a really, really, good reason why you shouldn’t try to use 2 versions of the same thing on the same site running on top of each other. But I wanted to see how Bootstrap3 worked.
It’s really much better, surprise!!!

OK, I’m done. Happy Sunday. What, I should be out in the fresh air because it’s a gorgeous day?

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.

Fixing A WordPress Theme to Work with WP-E-Commerce 3.8.9 (or whatever)

I was contacted to fix a WP theme I did not design called Kassyopea – a premium theme that costs $55 for a regular license, $2750 for an extended license.

Error number 1: clicking the add to cart button with Fancy Notifications turned on showed the item in the fancy notification message overlay but didn’t actually add the item to the cart (going to check out you got the message “oops cart is empty”).With Fancy Nootifications turned off all you saw when clicking add to cart was “..Updating” and a little spinner icon but that’s it.Updating never went away and the items were never added to the cart.

So off I went to getshopped.org to check out the user forums and saw this exact same issue was marked Resolved, a rare thing if you’ve ever visited a forum for help with your exact issue. A user suggested de activating all the plugins except the shopping cart and switching over to TwentyEleven ( or any other “proven” WP theme) then go to Settings > Store and then to Presentation and click Flush Theme Cache a few times. I also turned off Fancy Notifications in Settings > store > Presentation. After I did that I went back to the shop and added something to the cart, now the add to cart button worked. I re activated the plugins and switched back to Kassyopea and then went back to Settings > Store and then to Presentation and clicked Flush Theme Cache a few times and then a few more times just to be safe.
The add to cart button worked with Fancy Notifications turned back on – one issue fixed!

Now we just had to deal with the fact that after the normal product listing – about 4 or 5 un-styled, duplicated products were also appearing on the page.
I had fixed this before – it’s always a matter of placing wp_reset_query(); in the right place…

Being too lazy to get an FTP login set up I went right over to Appearance > Editor > page.php and experimentally – just to see what would happen – clicked save without editing anything. Big oops now the page displayed with a big PHP error – somehow just saving the page did something bad!

Oh fab, can I please debug code I didn’t write? That’s what I like to do in my spare time, yay. Unfortunately I didn’t save the original but here is the corrected code in page.php:

if( is_front_page() || is_home() ) {
	add_filter( 'body_class', create_function( '$classes ="", "$classes[] = wpsc;" return $classes;' ) );
	get_template_part( 'home', 'store' ); 
	die;
}

After the last curly brace I added wp_reset_query(); now the code looks like this:

if( is_front_page() || is_home() ) {
	add_filter( 'body_class', create_function( '$classes ="", "$classes[] = wpsc;" return $classes;' ) );
	get_template_part( 'home', 'store' ); 
	die;
}
wp_reset_query();

No more duplicated products on the Shop using WP theme Kassyopea.

So there you have it. If you are having the problem where your add to cart button doesn’t work try switching to a different theme and in Presentation flushing the theme cache 2 or 3 times.Most plugin authors will say it’s another plugin and that is true some of the time but the other part of the time it’s usually the theme you’re using.

And you’re seeing duplicated products it’s probably because there is something like this in the theme:

if( is_front_page() || is_home() ) {

//special code 

}

Update

After I wrote this the site owner wrote me to tell me that the add to cart button wasn’t working. I did everything all over again and tested the button. It worked.
Then I cleared the cart items and it didn’t work. The add to cart button always worked with TwentyEleven and TwentyTen even after I cleared cookies. I poked and prodded and changed settings and etc, etc, etc nothing helped. The add to cart button just didn’t work.

Unfortunately I ended up giving up on fixing it.

The weirdest part of this whole thing was the site owner had the almost exact same site set up using the exact same theme with almost exact same domain (other domain ended in .com, this one ended in .com.au). On this set up the Home page contained the productspage shortcode and also had a products Page that also had the products page shortcode. On this site, the add to cart button worked all the time! What a head scratcher.