Zen Cart – stock by attributes plugin bug

I’ve found a couple of bugs with this, otherwise excellent, module:


  1. If you are not logged in Zen Cart will allow you to progress to the login page even if you have ignored the ‘delete out-of-stock’ products message on the shopping cart page. This may not seem a big deal, as you can’t progress further, but from a user experience perspective it’s definitely not ideal.
  2. If there is an out-of-stock product in your cart, all subsequent products you add will also be flagged as out-of-stock whether or not this is true.



Fortunately both issues were easy to fix with a little digging.

Issue 1 involves a modification to /includes/modules/pages/checkout_shipping/header_php.php.
Simply move the block of code under
// Stock Check
until it is above the section beginning with

// if the customer is not logged on, redirect them to the login page

This will force the page to check for stock before redirecting to the login page.

Issue 2 needs a small addition to
/includes/modules/pages/shopping_cart/header_php.php

Look for this section around line 59:

$flagAnyOutOfStock = false;
$products = $_SESSION[‘cart’]->get_products();
for ($i=0, $n=sizeof($products); $i$n; $i++) {
if (($i/2) == floor($i/2)) {
Change it to read:

$products = $_SESSION[‘cart’]->get_products();
for ($i=0, $n=sizeof($products); $i$n; $i++) {
$flagStockCheck = false;
if (($i/2) == floor($i/2)) {


This will force a reset of the flag for each iteration of the loop which builds the product array.

Custom Post Types glitch in WordPress 3.1

I love the fact that you can now create Custom post Types in WordPress since v3.0.
I can now offer clients the ability to create entities in their WP sites that are actually relevant to their site (eg Case Studies, Team Members etc) without having to give lengthy training sessions in how to tag posts a certain way to make them show on certain pages etc etc.

BUT I recently upgraded ro 3.1 a WP site that had been working fine with these Custom Post Types for months now, and they suddenly stopped working.

By stopped working I mean:
1) The permalinks no longer worked – each post was just using the default permalink settings for posts (and not my slug I had set up in register_post_type)
2) Even stranger, in the Admin panel each post in the custom post list was greyed out, un-editable! Couldn’t even delete them! The only option available was “view” and that didn’t work because of the problem I mentioned above.

I discovered the solution by creating a new post of my custom post type – and yes the permalinks worked – and I could edit/delete it as normal. Woo hoo!

Looking in the database I discovered why:
Custom post type names need to be LOWERCASE!

Once I had changed this in my register_post_type function AND updated my database so that all custom post types had the new name, it seems to work ok now.

I guess the custom post types in WordPress are still in beta after all!

Using jQuery to automatically turn email addresses into links

Heres a quick jQuery function to change all incidences of a particular email address on a page into a clickable link.
Useful for things like Terms & Conditions pages where clients will be adding their email adddress multiple times:

<script type="text/javascript">
 $(document).ready(function() {
    var thePage = $("body");
  thePage.html(thePage.html().replace(/info@somewhere.co.uk/ig, '<a href="mailto:info@somewhere.co.uk">info@somewhere.co.uk</a>'));
 });
</script>

Create smoother mouseover effect on product images using jQuery in Magento UPDATE

Well at the insistence of you guys out there I thought I’d post my results for getting a nice smoother mouseover effect using jQuery.

You need to edit the list.phtml in the two places it is pumping out images for the List view & the Grid View.
Copy and past the following code completely over the <a> tag that covers the product image:


<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
<img class="small_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217); ?>" width="147" height="217" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<img class="thumbnail" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217) ?>" width="147" height="217" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>

(Note: As before I am constraining my images to be 217px high for my theme)
This will basically put the thumbnail image directly below the small_image & when you add the following lines to your stylesheet they will be absolutley positioned on top of each other.


.product-image{position:relative}
.product-image img{position:absolute}
.product-image img.small_image{z-index:10}
.product-image img.thumbnail{z-index:1}

Then in the file:
\app\design\frontend\YOURTHEME\default\template\page\html\head.phtml add the following script:


<script type="text/javascript">

jQuery(document).ready(function() {
jQuery("img.small_image").hover(
function() {
jQuery(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
jQuery(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>

You can see the results here:
http://miminoor.kineticpulse.net/denim.html

With many thanks to this post for the quick inspiration:
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Add clickable links to header of Squarespace site

SEPT 2012: See Updated post on <a href=”http://www.kineticpulse.co.uk/?p=427″>how to add clickable links to hear of a Squarespace site </a>

I do like Squarespace but often clients want something more than one large banner as their header. So here is my solution to add a few clickable links into the header.

Essentially the links aren’t in the header at all they are in the footer section and miraculously moved up into the header by the wonders of CSS and absolute positioning.

Step 1: Upload banner with images embedded in it eg: Social media icons

Step 2: In Website Management > Website Settings, Add the links into your footer eg:

<a id=”MMWLink” class=”headerLink” href=”http://www.yourlink1.co.uk” title=”Visit Manage My Website’s site” target=”_blank”>www.yourlink1.co.uk</a>
<a id=”MMELink” class=”headerLink” href=”http://www.yourlink2.co.uk” title=”Visit Manage My Event’s site” target=”_blank”>www.yourlink2.co.uk</a>

Step 3: Then in the Custom CSS add the following:


/*------ new styles for header links -----*/
#canvasWrapper{
position:relative;
}
.headerLink{
position:absolute;
width:133px;
height:57px;
text-indent:-9999px;
top:68px;
}

#MMWLink{
right:155px;
}

#MMELink{
right:20px;
}

Its a bit of a dark art getting the exact positions of the links to hover the a tags over, but you can usually make a good estimation by measuring the top corner positions in Photoshop or other photo app, then do the final tweaks in the CSS file. (Tip put a border:1px solid #ccc round teh links while you’re tweaking teh positions)

See it in action here: www.managemywebsite.co.uk and www.yearofthemad.net
Note: The Manage My Website header links have extra juiciness in the fact that they have a background images that changes on hover. But you can figure out how to do that yourselves – its just a few lines of extra CSS!

Testimonials

Thanks so much for all your work on this, really appreciated. It’s come on in leaps and bounds since you took over.
Pete KewRedwood Strip Curtains