ActiveCodeline

This screencast guides you trough the process of creating a Magento product image change based on color selected in dropdown option. It uses simple jQuery to achieve this functionality.

Sorry for not implementing the video player in site. I am having some minor issues with the wordpress flash player plugin. Hope to fix this soon. In a meantime you can download .swf file provided and watch it on your computer. I tested the video in Media player classic and it works just fine so if your favorite player gives you some trouble, try this one.

Download video MagentoProductColorChooser.swf.

I added the jQuery dropdown logic in special zip file for you to download (dropdown) in case you don’t want to write all the code from scratch. Just be sure to pay attention to id and classes used in my jQuery sample and yours.

And for the media.phtml file, this simple line is the magic one

<img src=”<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” alt=”no image” id=”productImg<?php echo $this->htmlEscape($_image->getLabel()) ?>” />

There is also the div element wrapping all that, you’ll see it in the screencast.

Hope you find this useful. Feel free to provide some feedback (comments)

Magento, WordPress, jQuery change, image, jQuery, Magento, product, select

One of the Magento projects I will be working on requires a functionality where user will be able to choose a different colors for a single product. Client wants the user to be presented with different color product upon color selection. I have managed to make that kind of functionality relatively easy. However, I will not post the solution in this post because I’m making a screencast.

How i did it? I created a small jQuery script that looks into certain div element with listed product images (styles set to display:none). jQuery then simply switches image display style from none to visible. The trick was to retrieve the inner text value of option element inside the select element. I needed to extract the inner text of option element because by default Magento shows dropdown boxes with value set to some number and inner text to te text you added when creating custom product options (some dropdown box). So if you created custom dropdown box with options (Red, Blue, Green) your option box would look like <option value=”24″>Green</option> for example. The idea is to upload few images to a product and give them the same names, that is Blue, Green, Red and so on. Names of the images are to be set the same as the name of the options. This is pretty trivial task. After that, the jQuery script and a few lines of code I inserted into media.ptml file would do the job.

I’m witting all of this from a coffee shop, and my laptop battery is almost dead so, no time for big HOWTO for now. I’ll be posting a screencast of this probably today at the evening. Consider this a teaser

Magento, jQuery jQuery, Magento, screencast

I have read tens of articles on Ajax. I fully understand the philosophy behind it (or at least I would like to think so). However, until today I have found a way to execute specific function from specific class ba simply calling it from any type of link (button or regular link). Today I stumbled upon this excellent article from Michael Wales. This article is a demonstration of CodeIgniter’s cool architecture and URL handling. It is simply a thing of beauty.

Just imagine you create a link with href attribute like

http://somesiteofmine.domain/index.php/controlername/controlerfunction/

This link executes some Ajax call to controlername.php file containing controlername class and controlerfunction function.

And all it takes is a little jQuery like

$(document).ready(function() {
    $('#ajaxCallSampleLink').click(function(event) {
        event.preventDefault();
        $('#list').load(this.href);
    });

    $('#loading').ajaxStart(function() {
        $(this).show();
    }).ajaxStop(function() {
        $(this).hide();
    });

    $('#list').ajaxStart(function() {
        $(this).hide();
    }).ajaxStop(function() {
        $(this).show();
    });
 });

Please follow the link to Michael Wales original article in order to read full tutorial and download his original files.

CodeIgniter, jQuery AJAX, CodeIgniter, jQuery

The greatness of JavaScript is… damn, why do I even bother. We all know what JavaScript can do. It brings life to your web site. If done right it can make your site more user friendly, accessible, functional and so on. In this example I’m gonna show you how to add Ajax into your web forms. I’ll be using my favorite JavaScript framework, jQuery.

Ajax with jQuery is extremely simple. If you browse to this url, you will clearly see supported methods for Ajax Requests and Ajax Events. I really like jQuery documentation. Seems very good organized. If you click on one of the method names, let’s say jQuery.ajax you will see 3 main navigation tabs at the top: Overview, Options, Example. Read more…

JavaScript, jQuery AJAX, form, JavaScript, jQuery

Although most of my work these days is done in PHP, I’m not a shame to say that I’m a proud owner of Microsoft Visual Studio 2008. I use it mostly for playing around with C#. Since Visual Studio 2008 there is a intellisense support for JavaScript. Personally I’m a big fan of intellisense technology, not because I like machine writing my code but because I don’t like to spent hours and hours digging trough some bad documentation in order to hunt down some object properties and methods.

Recently I started playing around with jQuery. I love it, it’s simple yet powerful. However, intellisense support in Visual Studio simply did not work on jQuery. At least I thought so

Today I discovered, this post. I cannot describe how happy I was.

Just check out the screenshot I provided, and you will soon understand what am I talking about.

JavaScript, jQuery JavaScript, jQuery