Kinetic Pulse
  • Home
  • Services
  • Portfolio
  • Blog
  • Terms
  • Contact

Create mouseover effect on Catalog page in Magento

December 29, 2010

UPDATE: For a smoother transistion see my solution that uses jQuery here: http://blog.kineticpulse.co.uk/2011/02/create-smoother-mouseover-effect-on.html
Merry Christmas & Happy Holidays everyone! As a small present for you all here’s how to create a neat effect to showcase your products better in a Magento catalog view.
The client had wanted to mimic the functionality she had seen on the ASOS (?) site where when you mouse over a picture of a product in the category view it shows you an alternate product view.
Here is a solution I have come up with to do this in Magento.

In the file \app\design\frontend\YOURTHEME\default\template\catalog\product\list.phtml
locate the two lines that generate the product thumbnails – in my theme and version 1.4.1.1 of Magento they are lines 52 and 93. You need to add the following javascript commands to the onmouseover and onmouseout events of the product image tag, so the following code is what I use for the the product links & images:

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img 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) ?>" onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217) ?>';" onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217) ?>';" />

</a>

Note: I am constraining my pictures to be no more than 217 px wide – you will need to update this to reflect your design.
Explanation
The onmouseover event is getting the product image that is specified as the “thumbnail” image for the product and switching the source of the product image to be that. The onmouseout event is (hopefully) restoring this image back to the original product image (the one that is specied as the small image on the product)

Considerations for use

  • Each product will obviously need a different small image & thumbnail image for this to work. Ideally of the same dimensions. The good thing about this approach is that the user will see no difference if there is only one product image per product
  • This process could be improved by using a JQuery aniation to smooth the transition, I just haven’t done it here! 
  • Assuming that the Magento theme you are using is not much different from the default one – this should reflect across the catalog search pages as well.

See it in action here: http://www.miminoor.com/denim.html
As always I love to hear your feedback!

Fix: Excel 2007 not opening shortcuts in Windows Vista

November 26, 2010

I’ve been having problems with Exel 2007 not opening .xlsx files from Explorer – either as shortcuts or the actual file locations themselves. I could get the file open by using the Open command within Excel – but that was a pain if someone mailed me a spreadsheet; I just wanted to be able to open the spreadsheet directly from the e-mail. Not such a big thing to ask, eh?

Googling it seems to bring up lots of other people experiencing the same problem. So I thought I’d mention how I finally fixed it.

  1. Click the Microsoft Office Button, and then click Excel Options.
  2. Click Advanced, and then click to clear the Ignore other applications check box in the General area.
  3. Click OK.
 

And lo – it worked!
A real case of a good/evil switch! If only all problems were that easy to solve!
Thanks to this post from Microsoft: http://support.microsoft.com/kb/211494

Creating New Product Type in Zen Cart

November 21, 2010

I needed to create additional fields for products in Zen Cart – namely 2 extra description fields for a “Soap” product being sold in the store
Now in the past I have hacked Zen Cart – like using the products_url field as a fake extra description field!
But thought I would investigate the “Proper” way of doing it.
Product Types are the way to go – you know in the admin screen when you click on “New Product” there is a drop down of different product types.
Well it looks like the official way to go is to create a new one of these.

So following the instructions in the Zen Cart guide here:
http://www.zen-cart.com/wiki/index.php/Product_Types

I wung my way through it:
1) First (via phpMyAdmin) I added a new product type to the product types table called “Product – Soap” with a “handler of “product_soap” (stick to this convention as you should be able to see which bits you need to duplicate from existing handlers – like product or product_music)
2) Then I copied the product.php file (in the root of the admin folder) and renamed it product_soap.php– this is the handler file
3) Then I copied the whole of the admin\include\modules\product folder and renamed it to admin\include\modules\product_soap
4) I also copied from the admin\include\modules “root” folder the files “update_product.php“, “preview_info.php” and “copy_to_confirm.php” to my new handler folder as these files would need slight tweaking to add the new fields I was adding
5) Mustn’t forget the language file else none of the labels in the handler file will mean anything, so copy includes\languages\english\product.php to includes\languages\english\product_soap.php
6) Dont forget to add the new product type to includes/filenames.php (just spent 2 hours trying to figure out why the CEON URI rewriter wasnt working for my new product types – doh!)

We’ve now got a back end framework that we can work with.

I want to add two new description fields so that the client can add descriptive information in 3 places (I have previously tried to “train” them to use HTML div’s and separators to frustratingly/horrific results!)
1) Edit the product description table in phpMyAdmin and add two new field products_description2 and products_description3 using same settings as the existing products_description field
2) In the collect_info.php in the new handler folder you will see various lines relating to products_description field.
I simply did a search for “products_description” and added extra bits to include the two other field
3) Do the same thing in the files preview_info.php & copy_to_confirm.php – do both a search for products_description and copy the code for that part & scan through it by eye.

3) The tricky bit came when I was trying to display the products_description2 and 3 in the the page. Zent Cart uses a function called “zen_get_products_description()” – which I obviously didn’t want to start hacking for my meagre purposes so I added a file called “product_soap_functions.php” in the folder “admin\includes\functions\extra_functions” containing the following code
  function zen_get_products_description2($product_id, $language = ”) {
    global $db;

    if (empty($language)) $language = $_SESSION[‘languages_id’];
    $product_query = “select products_description2
                      from ” . TABLE_PRODUCTS_DESCRIPTION . “
                      where products_id = ‘” . (int)$product_id . “‘
                      and language_id = ‘” . (int)$language . “‘”;

    $product = $db->Execute($product_query);
    return $product->fields[‘products_description2’];
  }

  function zen_get_products_description3($product_id, $language = ”) {
    global $db;

    if (empty($language)) $language = $_SESSION[‘languages_id’];
    $product_query = “select products_description3
                      from ” . TABLE_PRODUCTS_DESCRIPTION . “
                      where products_id = ‘” . (int)$product_id . “‘
                      and language_id = ‘” . (int)$language . “‘”;

    $product = $db->Execute($product_query);
    return $product->fields[‘products_description3’];
  }

And lo – it was imported in automatically once I had used the two new functions zen_get_products_description2() and zen_get_products_description3() in the collect_info.php page

To check this I created a product in the backend and checked it a) showed the new description fields and b) saved them and c) allowed me to edit them correctly

To view the page I needed to create
1) A copy of tpl_product_display_info.php called tpl_product_soap_display_info.php – show the new fields somewhere on this page
2) Copy of the folder “includes/modules/pages/product_info” and call it called includes/modules/pages/product_soap_info
3) Change the main_template_vars.php in the file to pull in the new description fields & importantly- change line that says
    $tpl_page_body = ‘/tpl_product_soap_info_display.php’; (line 37)
(why this isn’t automatic I dunno!)
2) A copy of /includes/languages/english/product_info.php called/includes/languages/english/product_soap_info.php and change any display fields in here for your new product type.

Save and view the newly created soap product and enjoy the display of your two new descript ion fields…

Next step now will be to figure out how we can get Easy Populate to look at these fields and import them. Obviously I’ll post here when I find out…

UPDATE: See this post for how to hide all other product types: http://blog.kineticpulse.co.uk/2011/05/custom-product-type-in-zen-cart-how-to.html

Magento – getting a list of Manufacturers &amp; landing pages

October 11, 2010

Well I”ve bitten the bullet and taken the step from the safety of ZenCart to the brave new world of Magento.
Boy is it complex!? The thing I love about Zen Cart is that you can hack it about to get it to do pretty much what ever you want. Magento seems just too clever for its own good…
Hopefully my attitude will change towards it – esp as I”ve agreed to do our latest ecommerce project in it!

So I”ve managed to set up some products and import some categories – but try to get list of products categorised by manufacturer? That seems a step too far for the basic Magento install, so I have been trawling through forums and blog posts on ways to achieve this. (Another plus to using Zen Cart is that because it has been around for so long the forums are teeming with solutions to most every problem)

My first starting point was to  install the “Landing pages module for Magento” from yoast.com
A nice module that gives you a  great little tool in the form of a CMS block that you can use on your static pages eg:

{{block type="Yoast_Filter/Result" 
name="filter_result"
template="catalog/product/list.phtml"
attribute="manufacturer"
value="24" }}

This will show you all products with a manufacturer id set to 24
(I”ll show you a neat way to find out these ids later – couldn”t see it when I looked in Magentos admin panel for attributes..)
Then I found this post about how to iterate through the list of Manufacturers
http://www.magentocommerce.com/boards/viewthread/19982/

To make this appear on a  static CMS  page:
edit the app\code\core\Mage\Catalog\Block\Product.php


//new LJ 11/10/10
    public function getAllManufacturers()
    {
      $product = Mage::getModel(“catalog/product”);
      $attributes = Mage::getResourceModel(“eav/entity_attribute_collection”)
                  ->setEntityTypeFilter($product->getResource()->getTypeId())
                  ->addFieldToFilter(“attribute_code”, “manufacturer”);
      $attribute = $attributes->getFirstItem()->setEntity($product->getResource());
      $manufacturers = $attribute->getSource()->getAllOptions(false);
      return $manufacturers;
     
     
    }

This will get you an array of the manufacturer names & ids
To make the list appear on a CMS page you will need to create a new .phtml file.
I created mine at app\design\frontend\MY_THEME\default\template\catalog\brand\view_one.phtml

<ul id="manufacturer_list">
    
foreach ($this->
getAllManufacturers() as $manufacturer): ?>
        
<li>echo $manufacturer["label"] ?>li>
    
endforeach; ?>ul>

Then I created a page in the CMS with the following code block:

{{block type=”catalog/product” template=”catalog/brand/view_one.phtml”}}

Et voila – I can see all the manufacturers in a list

But I need more – I need to be able to click on each Manf. name and it take me to a landing page giving some info about the Manf. and listing their products obviously

The Yoast module above claims to be able to dynamically generate the brand pages – however I cannot get this to work on Magento v1.4.1.1
So a more brute force method is required.
I will have to manually create CMS pages for each of my manufacturers, each page having the code snippet above to show all their products.
Not ideal – but we can use some nifty MySQL to make the initial task less daunting.

The insert statement for adding a new Manufactureur Landing page is as follows:

INSERT INTO `cms_page` VALUES (PAGE_ID, “MANUFACTURER_NAME”, “two_columns_right”, “”, “”, “brands/MANUFACTURER_NAME ?>”, “MANUFACTURER_NAME”, “
Info about MANUFACTURER_NAME Brand goes here…
\r\n{{block type=”Yoast_Filter/Result” name=”filter_result”   template=”catalog/product/list.phtml” attribute=”manufacturer”   value=”MANUFACTURER_ID”  }}
“, “2010-10-11 10:34:41”, “2010-10-11 10:35:06”, 1, 0, “”, “”, “”, “”, NULL, NULL);INSERT INTO `cms_page_store` VALUES (PAGE_ID, 0);

(the 2nd insert statement makes the page active on all stores. Note also that I want my landing pages to follow the “two_columns_right” layout which may not hold true for your site)

You can use the test CMS Except Mon best-horoscope.com afternoon, when your luck might falter. page you created above to generate these INSERT Statements for you (or generate just a list of ids & value pairs as I mentioend above)
Just edit app\design\frontend\MY_THEME\default\template\catalog\brand\view_one.phtml to say this:
 
        <?php
        //before running this find the last ID inserted into the CMS and make this one larger
        $i=14;
        foreach ($this->getAllManufacturers() as $manufacturer): ?>

            
            INSERT INTO `cms_page` VALUES (<?=$i?>, “<?php echo $manufacturer[“label”] ?>”, “two_columns_right”, “”, “”, “brands/<?php echo $manufacturer[“label”] ?>”, “<?php echo $manufacturer[“label”] ?>”, “<p>Info about <?php echo $manufacturer[“label”] ?> Brand goes here…</p>\r\n<p>{{block type=”Yoast_Filter/Result” name=”filter_result”   template=”catalog/product/list.phtml” attribute=”manufacturer”   value=”<?php echo $manufacturer[“value”] ?>”  }}</p>”, “2010-10-11 10:34:41”, “2010-10-11 10:35:06”, 1, 0, “”, “”, “”, “”, NULL, NULL);
            <br />

INSERT INTO `cms_page_store` VALUES (<?=$i?>, 0);

            <br />
            
        <?php $i ;
        endforeach; ?>
When you view the page you should see some nice rows of MySQL which you can copy & paste into phpAdmin (or whichever MySQL administrator you are using)

Now how to add the navigation to go to these landing pages?

You need to move (or copy) the function getAllManufacturers() from the app\code\core\Mage\Catalog\Block\Product.php code to the app\code\core\Mage\Catalog\Block\Navigation.php block
Edit the navigation file: app\design\frontend\YOURTEMPLATE\default\tempate\catalog\navigation\top.phtml

and include the following code where you want your Manufacturers drop down to be

<li class=”level0 nav-1 level-top first parent”>
            <a class=”level-top” href=”http://www.blogger.com/post-create.g?blogID=2874821183756499009#”>
            <span>Brands</span>
            </a>
            <ul class=”level0″ id=”manufacturer_list”>
                getAllManufacturers() as $manufacturer): ?>
                   
<li class=”level1″ id=”<?php echo $manufacturer[“value”] ?>”><a href=”http://www.blogger.com//brands/“></a></li>
               
            </ul>
        </li>

Tada – you shoudl have a drop down navigation list similar to teh dropdown Categories list!

I can think of a few things to improve this.
1) Not having to manually create teh CMS pages woudl be nice (but the client does need to add her own descriptions for each Brand so I guess that is inevitable – if a highly manual task)
2) There is no way of hiding certaing Manufacturers if for eaxmple there are no products in stock

Any feedback/input from other Magento developers out tehre woudl be appreciated! I”ll post a link to this site when it finally goes live!

Using multiple Google Analytics accounts on one site

September 16, 2010

I found this useful code snippet on the Google site:
http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html

for how to use two different Google accounts to track page views – so I can let client view his own anayltics, plus I can keep an eye on it with my account:

<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push(
[‘_setAccount’, ‘UA-XXXX-USER-1’],
[‘_trackPageview’],
[‘b._setAccount’, ‘UA-XXXX-USER-2’],
[‘b._trackPageview’]
);
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
  • Newer
  • 1
  • …
  • 9
  • 10
  • 11
  • 12
  • 13
  • …
  • 16
  • Older

Testimonials

Amazing and brilliant, Kinetic Pulse have lifted a dream to reality, Highly recommended and great if you are total novice, they know their stuff…Thanks again
Annie LindridgeSalt Yourself Out
Thank you guys so much for all that you’ve done helping us to create a really awesome website!! We get such great feedback – everyone loves it & we couldn’t be prouder! Look forward to working with you again soon!
Wild Thyme PlantsWild Thyme Plants
Thank you for all of your hard work its looks fab and I am over the moon with it!
Amanda MercerAmanda Mercer Ceramics
Absolutely fantastically professional web developer – I would highly recommend!!! Thank you so much Kinetic Pulse!
Tania MarstonDoris Designs
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
I like it.  I like it a lot !!!

 You have interpreted what I wanted to achieve perfectly considering what you have to play with i.e not redoing the whole thing in the process.

Fiona Simmons-MooreSouth Gloucestershire Parents & Carers
It’s been fab working with you – we love the site and certainly going to recommend you!
James DaviesThirty Eight Degrees North

Copyright 2026 Kinetic Pulse