You must have noticed that sometimes you can’t use default Magento Models and require changes due to certain business logic you are about to follow. These changes are done to implement new functionality which are not part of existing Magento Installation. Overriding Controller is not difficult as you can copy the code from core in controller and keep the file in local directory. Now you can edit the class as per your requirement which will pretty much do the trick. You might know better and efficient way of doing this but that’s not a point here. I wanted to elaborate on how to override default Magento’s model class without even changing the core files. Tricky isn’t it?

In this article I am going to write a short code which will help you in overriding default Magento model without changing its core files. We have to create an extension which will do the trick. Simple difference between this extension and original class will be class name var_dump.

Now, we will choose any model class from core of Magento, in our case we will choose Mage_Wishlist_Model_Item which you can locate under app/code/core/Wishlist/Model/Item.php

In order to add new functionality in this class we will create a new module. What we are going to do now is to take a random model class from Magento core.
Let it be Mage_Wishlist_Model_Item located in app/code/core/Mage/Wishlist/Model/Item.php

What we want to do is to add new functionality to that class, so let’s make new module called as MagentoMagik_Wishlist (you can change the name as per your requirement)

Create app/code/local/MagentoMagik/Wishlist/model/ directory and copy app/code/core/Mage/Wishlist/Model/Item.php in that particular location.

Let’s rename class Mage_Wishlist_Model_Item to MagentoMagik_Wishlist_Model_Item.

Now, we have to add the line given below:

1

var_dump(get_class($this)); exit();

in loadByProductWishlist method

Now, let’s create MagentoMagik_Wishlist.xml in app/etc/modules/
and write the following code it in:

1
2
3
4
5
6
7
8
9

< ?xml version="1.0"?>
  <config>
    <modules>
       <magentomagik_wishlist>
          <active>true</active>
          <codepool>local</codepool>
      </magentomagik_wishlist>
    </modules>
 </config>

Now, create app/code/local/MagentoMagik/Wishlist/etc/Config.xml file and write the following code in it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< ?xml version="1.0"?>
  <config>
    <modules>
        <magentomagik_wishlist>
            <version>0.1</version>
        </magentomagik_wishlist>
    </modules>
    <global>
       <models>
          <wishlist>
              <rewrite>
                  <item>MagentoMagik_Wishlist_Model_Item</item>
              </rewrite>
          </wishlist>
       </models>
    </global>
</config>

This is merely an example of overriding the default Magento’s Model files and you can change the other model in similar way. All you have to do is plan what change you require and don’t hurt any Model which is required by Magento. I hope this example must have helped you in changing the default behavior. Please leave me a comment and share your experiences, problems with us.

We are proud to announce our new FREE Magento theme for our blog readers and rest of the Magento community. ElectroMagik is really a simple yet complicated Free Magento theme with no paid version means its entirely free. Our goal is to design and offer stunning free themes to the Magento community. You will also be able to download the theme from the Magento Connect. This article will give you a brief of what does it have in terms of design elements and few functional aspects. It’s one of our proudest work and I hope you like it.

Screenshots:

ElectroMagik Magento Theme - Home Page

ElectroMagik Magento Theme - Product List Page

ElectroMagik Magento Theme - Product Detail Page

Live Demo

Like what you see?  Be sure to check out the live demo to see ElectroMagik.

Download

Although, you can download this free theme from Magento Connect but if you are interested in playing with this theme before going live leave us a tweet @magentomagik. You can also download the Electromagik Theme from Magentomagik store.

Cross Browser Compatible

I’ve tried my full efforts to make ElectroMagik play nice with all the major browsers.  The following  browsers have been personally verified by us: Internet Explorer 6.0+, Firefox 2+, Opera 9+, Safari 3+ and Chrome 0.2+!

License

This is a free theme.  You may use, alter, tweak, tamper, modify and mangle it to your liking.  But please leave the footer links intact.  I know it sucks, if you still like to remove the links from footer then please signup with us for one time fee of $25.

Support

This theme is provide as is and we do not provide  free online support. Still, in order to order to obtain support please contact us.

What do you think about this free theme please leave us a comment and let us know. Don’t forget to subscribe our RSS to receive latest updates delivered to your mailbox for free.

People who love jQuery must not feel disappointed with Magento 1.2.1 simply because it does not support jQuery by default. Those interested in Magento customization often complain that jQuery is throwing an error and how they can install and use jQuery as their preferred JavaScript Library.

In this article i am going to tell you how you can use jQuery within your Magento 1.2.1 installation. Lets take an example of default Magento Product Zoom feature which we switch to jQuery version.

Default Files:

1. app/design/frontend/default/portero/layout/page.xml
2. app/design/frontend/default/portero/layout/catalog.xml
3. app/design/frontend/default/portero/template/catalog/product/view.phtml
4. app/design/frontend/default/portero/template/catalog/product/view/media.phtml

New jQuery Files:

1. js/jquery/jquery.js
2. js/jquery/jquery.jqzoom.js
3. skin/frontend/default/portero/css/jqzoom.css
4. skin/frontend/default/portero/images/zoomloader.gif

I would recommend to create different directories for your magento customization so that your existing customization won’t get overwritten while upgrading to newer version of Magento.

Steps (Follow them in exact sequence):

1. Create a new custom directory called portero under app/design/frontend/default.
2. Create a new custom directory called portero under skin/frontend/default.
3. Copy all the directories and files within app/design/frontend/default/default into the new directory at app/design/frontend/default/portero. You should end up with 3 directories under portero. The directories are layout, locale, template.
4. Copy all the directories and files within skin/frontend/default/default into the new directory at skin/frontend/default/portero. You should end up with 3 directories and a favicon.ico file under portero. The directories are css, images, js.
5. We need to tell Magento to reference the 2 custom directories we just created. For that we need to log into Magento’s Admin Panel. Go to System → Configuration. Under the General category, click on Design. Under the section Themes, make sure you provide the name of the custom directory for the input field Default. In our example, the value for the field would be portero. This will set the default theme directory to our custom directory. If you would not like to set the default theme directory to the custom directory; simply set 3 fields to their respective custom directory, these fields include: Templates, Skin, and Layout. Please refer to the screenshot below for all the possible fields that can be set.



6. Download the jQuery zoom plugin from http://www.mind-projects.it/projects/jqzoom/. This article assumes you have experience with jQuery plugins before. Create a new directory under the js directory of your Magento installation. We decided to name it jquery, but you can obviously name it anything you want. Copy jquery.js and jquery.jqzoom.js that you downloaded into the new jquery directory.
7. Copy the jqzoom.css file into the existing directory: skin/frontend/default/portero/css. Copy the zoomloader.gif file into the existing directory: skin/frontend/default/portero/images.
8. We now need to include the new files we just added. Open up: app/design/frontend/default/portero/layout/page.xml.
   

   Add the reference to jquery.js within the default/root/head block

1 2 3

<action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action> <action method="addItem"><type>skin_css</type><name>css/jqzoom.css</name><params/></action> <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>



Add the reference to jqzoom.css within the print/root/head block:

1 2 3

<action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action> <action method="addItem"><type>skin_css</type><name>css/jqzoom.css</name><params/></action> <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>

9. Finally we need to include jquery.jqzoom.js. We could have included it in page.xml; but since the purpose of the script is to provide a zoom feature for products; it can also be included in catalog.xml. Open up: app/design/frontend/default/portero/layout/catalog.xml.

   Add the reference to jquery.jqzoom.js within the catalog_product_view/root/head block:

1 2 3 4 5 6 7 8 9

<catalog_product_view> <reference name="root"> <action method="setTemplate"><template>page/2columns-right.phtml</template></action> </reference> <reference name="head"> <action method="addJs"><script>jquery/jquery.jqzoom.js</script></action> <action method="addJs"><script>varien/product.js</script></action> ... ...

10. Finally we are ready to write some actual code. Since jQuery and Prototype use the same selectors like “$”, scripts containing those selectors will conflict with each other. To resolve this problem, we have to apply the jQuery No Conflict function to the end of jquery.js and jquery.jqzoom.js.
    Open js/jquery/jquery.js.

    Go all the way to the last line and add the following:

1 2	});})(); jQuery.noConflict();

Open js/jquery/jquery.jqzoom.js.

Add the following near the end of the file:

1 2 3

})(jQuery); jQuery.noConflict(); function trim(stringa) {

11. Open app/design/frontend/default/portero/template/catalog/product/view.phtml.

    Add the following jQuery code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div class="product-img-box"> <?php echo $this->getChildHtml('media') ?> <script type="text/javascript"> jQuery(document).ready(function(){ var options = { zoomWidth: 265, zoomHeight: 265, showEffect: 'show', hideEffect: 'fadeout', fadeoutSpeed: 'slow', title: true } jQuery(".jqzoom").jqzoom(options); }); </script> </div>

12. Open app/design/frontend/default/portero/template/catalog/product/view/media.phtml.

    Since we are replacing Magento’s default product image zoom widget; we need to comment out the code that renders it

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!-- <p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p> <div class="image-zoom" id="track_outer"> <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" /> <div id="track"> <div id="handle"></div> </div> <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" /> </div> <script type="text/javascript"> Event.observe(window, 'load', function() { product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint'); }); </script> -->

Next we need to replace the following code:

1 2 3 4 5 6

<p class="product-image-zoom"> <?php $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />'; echo $_helper->productAttribute($_product, $_img, 'image') ?> </p>

With the following lines of code:

1 2 3 4 5 6

<p class="product-image-zoom"> <?php $_img = '<a href="'.$this->helper('catalog/image')->init($_product, 'image').'" class="jqzoom" title="Magnified Image"><img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'"/></a>'; echo $_helper->productAttribute($_product, $_img, 'image') ?> </p>

All set. Now, if you place your mouse over product image it will show you the desired jQuery effect. Please leave me a comment and let me know if you run into any trouble getting the jQuery installed within Magento 1.2.1 version.