Web Design and Build

Multiple images on WP e-Commerce product pages Last updated:31 January 2012

Dismayed this morning to find that WP e-Commerce does not support multiple images on a product page unless you pay for the “gold cart” option. Since I’m basically stingy, I did it myself. Here’s how:

I replaced this code in wpsc-single_product.php:

   <?php if ( wpsc_the_product_thumbnail() ) : ?>
      <a rel="<?php echo wpsc_the_product_title(); ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>" href="<?php echo wpsc_the_product_image(); ?>">
         <img class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(get_option('product_image_width'),get_option('product_image_height'),'','single'); ?>"/>
      </a>
      <?php if ( function_exists( 'gold_shpcrt_display_gallery' ) )
         echo gold_shpcrt_display_gallery( wpsc_the_product_id() );
      ?>
   <?php else: ?>

with this code:

   <?php if ( wpsc_the_product_thumbnail()) ://if the product has any images...
      if (has_post_thumbnail()):?>//...display the thumbnail if there is one...
         <a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" class="<?php echo wpsc_the_product_image_link_classes(); ?>" href="<?php echo wpsc_the_product_image(); ?>">
         <?php echo get_the_post_thumbnail(wpsc_the_product_id(),'thumbnail',array('alt' => wpsc_the_product_title(),'title' => wpsc_the_product_title() ));?>
         </a>
      <?php endif;
      sb_get_images_for_product(wpsc_the_product_id());//...and then display all the rest of the images
else: ?>

I’ve used the standard WP function get_the_post_thumbnail() instead of the WP e-commerce function wpsc_the_product_thumbnail() simply to ensure a consistent display of thumbnails. So, I’m displaying the product thumbnail and then using a custom function sb_get_images_for_product() to retrieve any other images associated with the product. This function effectively replaces the gold_shpcrt_display_gallery() function for which you have to pay. I saved sb_get_images_for_product() in the functions.php (located in the theme folder). This function retrieves all images attached to the post and then displays any which are not the thumbnail – we’ve already displayed that. Here’s the code:

function sb_get_images_for_product($id){
   global $wpdb;
   $post_thumbnail = get_post_thumbnail_id();//read the thumbnail id
   $attachments = $wpdb->get_results($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE post_parent = $id AND post_type = 'attachment' ORDER BY menu_order ASC"));
   foreach ($attachments as $attachment){
      if ($attachment->ID <> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail
         $image_attributes = wp_get_attachment_image_src($attachment->ID,'thumbnail');?>
	<a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" href="<?php echo $attachment->guid; ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>">
	<img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo wpsc_the_product_title(); ?>"/>
	</a>
   <?php }		
   }
}

Note that WP 3.3 changed the way images work and messed up the WP e-commerce product images on version 3.8.7.4, with the result that it's possible to have a product without a product thumbnail. This is fixed with WP e-commerce version 3.8.7.6. Howevere, I've added the if (has_post_thumbnail()) condition in the first code snippet above to trap this. Thanks to Brian for flagging this up.

Heart Internet and CSS3PIE/PIE.htc Last updated:16 November 2011

Discovered this evening that a website I’d built a month or so ago using CSS3PIE for box-shadow and border-radius had lost both of these. I’d just made a couple of changes so at first I thought I’d messed something up, but after backing all the changes out only to find the problem was still there, and then discovering all was fine using xampp locally, it looks to me like Heart have changed something on their servers. I fixed the problem by using a php file which forces the PIE.htc file to be served as the correct content type – see the CSS3PIE pages for the details of this.

Just thought I’d post this in case anyone else is searching for the same issue.

To IE6 or not IE6, that is the question… Last updated:28 October 2011

I have now officially moved my stance on IE6 support from “must support” to “not sure”. The last two companies I’ve worked in have had IE6 as the only browser available, and I’ve been heartily fed up with sites telling me I’m retarded and lazy for not upgrading. Consequently I’ve always been quite keen on things working in IE6, or at least degrading gracefully.

Only a fifth of one percent of visitors to this site used IE6 (and even some of those were me testing) – most of them from Russia, USA and the UK if you’re interested. Some of the other sites for which I have stats, that perhaps have a more general audience (for which read less geeky…) vary between 0 and 2%.

So logic says forget IE6, but not sure I’m quite ready yet. IE6 is a pain, but it’s not like it’s that much extra effort in most cases to tame it.

Just had a look at the Save IE6 Campaign’s website. Excellent.

Views?

New online shop for Adelaide Walker Last updated:5 October 2011

Launched a full e-commerce website last month at Adelaide Walker. This represents the third stage in the evolution of this particular website which started as three static pages to provide an initial online presence about four years ago.

I’ve built it using Opencart – which I’ve not used before. Overall pretty good, the odd bit of strange coding in the version I used (1.4.9.8), and I’ve found that in order to make the site do what was required I’ve ended up compromising the upgrade path by amending the core files.

Cufon not working in Opera 11 Last updated:10 July 2011

Latest bizarre oddity.

By chance I spotted that Cufon wasn’t working on some pages on my site in Opera 11. Turns out Opera doesn’t like empty stylesheets – these pages had links that I hadn’t removed to a now defunct stylesheet. Removed the dead link and everything works again. Nothing in the stylesheet referred to anything to do with the Cufon text, but it still failed….