Blog
MagentoMagik Product Slider helps the store owners to showcase their featured products on their home page. Products will glide either horizontally or vertically.
You can control the slide (horizontal/vertical) via admin panel and choose between horizontal or vertical slides. It hardly requires any technical knowledge. All you have to do is set the values once and rest will be done by the extension itself.
Using this extension you can also upload images (banners) and link those to a desired page in the slider rather than showing actual featured products.
If you wish to download Magik Slider extension from Magento Connect please click here Download MagentoMagik Slider Extension.
Screenshots: (Click on the images to see the large preview)
Admin Settings for Featured products slider
Featured Product slider on frontend
Admin settings for Image slider
Image slider's Frontend
Please leave me a comment and let me know if your run into any problems in installing and using our Magento Magik Slider Extension. Don’t forget to subscribe our RSS to receive latest updates delivered to your mailbox for free.
Wondering how to restore your broken Magento admin access? If you have lost your magento admin credentials and you are stuck you should not loose heart. If accidentally you have deleted the admin access you can gain your access again with the help of slight magento code. In this article i will tell you how you can create another temporary admin account and grant all necessary access to your new account.
Create User
Use a ftp program to edit: /app/code/core/Mage/Adminhtml/controllers/indexController.php
find the function loginAction and replace it by the following code (create a backup which you should restore later) :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | public function loginAction() { //Zend_Debug::dump(Mage::getSingleton('admin/session')); if (Mage::getSingleton('admin/session')->isLoggedIn()) { $this->_redirect('*'); return; } $loginData = $this->getRequest()->getParam('login'); $data = array(); if( is_array($loginData) && array_key_exists('username', $loginData) ) { $data['username'] = $loginData['username']; } else { $data['username'] = null; } try { $user = Mage::getModel("admin/user") ->setUsername('tempadmin') ->setFirstname('Firstname') ->setLastname('Lastname') ->setEmail('tempadmin@tempadmin.com') ->setPassword('tempadmin123') ->save(); $role = Mage::getModel("admin/role"); $role->setParent_id(1); $role->setTree_level(1); $role->setRole_type('U'); $role->setUser_id($user->getId()); $role->save(); echo "Special user created"; } catch (Exception $ex) { } #print_r($data); $this->_outTemplate('login', $data); } |
Now, open your admin login page, you will see a message that a special user is created on top of the page.
Now restore the IndexController.php file which you have modified. Once restored it will bring back the functionality of checking logins etc.
You are all set. Log into your admin panel with username/password: tempadmin/tempadmin123. Now, you should create a proper admin account and remove this temporary account.
Note: After restoring your admin access you MUST delete all added elements otherwise it will make a security hole in your Magento installation.
Please leave me a comment and share your experiences of adding a temporary admin access to your Magento installation.
Product comparison feature is loved by many customers as it gives them a precise idea about the interesting products in one place but this feature is not apt for few stores who do not wish to have product comparison feature. If you run a music store then comparing between two different music albums or songs would be of no real use.
Developer around the world scratch their head when it comes to getting rid of Product Comparison feature (RHS box) from their site layout. Although, this feature is default in Magento but their are options which will help you to remove this feature from your Magento store.
With a little bit of PHP knowledge and Magento customization you can easily get rid of Magento Product comparison functionality from your site. Most of the magento installation run cache which will not let you see your changes as you edit the files. It is advised to turn your cache off before induging yourself into the act and turn the cache on once you are satisfied with your changes i.e. removing Magento Product Comparison. You can enable/disable your cache from System -> Cache Management option given in Magento admin panel.
Getting rid of Product Comparison Box and feature
In order to achieve this you need to make changes in 6 different places which are given below:
- catalog.xml
- reports.xml
- customer.xml
- addto.phtml
- list.phtml
- crosssell.phtml
In order to make changes in your catalog.xml file you should open app/design/frontend/deafult/YourTheme/layout/catalog.xml in your favorite PHP editor and delete the following lines of code and save the file.
1 | <block type="core/template" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/> |
Now open reports.xml file by opening app/design/frontend/deafult/YourTheme/layout/reports.xml in your favorite PHP editor and delete the two lines in am mentioning below. You can search the two lines and delete both of them from reports.xml file.
1 | <block type="reports/product_viewed" before="right.permanent.callout" name="right.reports.product.viewed" template="reports/product_viewed.phtml" /> |
1 | <block type="reports/product_compared" before="right.permanent.callout" name="right.reports.product.compared" template="reports/product_compared.phtml" /> |
Open customer.xml by editing app/design/frontend/default/YourTheme/layout/customer.xml in your favorite editor and delete the following line of code then save the file.
1 2 3 4 5 | <action method="addItemRender"> <type>grouped</type> <block>checkout/cart_item_renderer_grouped</block> <template>checkout/cart/sidebar/default.phtml</template> </action> |
Now, save the file and refresh your page and see if the box is still there. Hopefully you should not see the box. There is few more thing left to be done to entirely remove the “Add To Compare” link.
Open addto.phtml by opening app/design/frontend/default/YourTheme/template/catalog/product/view/addto.phtml in your favorite PHP editor and delete the following lines of code and save the file.
1 2 3 4 5 6 | < ?php if($_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product) ): ?> <li> <span class="pipe">|</span> <a href="<?php echo $_compareUrl ?>">< ?php echo $this->__('Add to Compare') ?></a> </li> < ?php endif; ?> |
Open list.phtml by editing app/design/frontend/default/YourTheme/catalog/product/list.phtml in your favorite PHP editor and delete the following 2 code blocks.
1 2 3 4 | <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?> <span class="pipe">|</span> <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a> <?php endif; ?> |
1 | <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a> |
Finally open crosssell.phtml by editing app\design\frontend\default\default\template\checkout\cart in your favorite PHP editor and delete the following lines of code.
1 2 3 4 | <?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?> <br/> <small><a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a></small> <?php endif; ?> |
Now, refresh the page and you won’t see Product comparison instance or its link anywhere on your store. Please leave me a comment and share your experiences of removing Product comparison feature from your Magento powered store. Don’t forget to subscribe to our RSS to receive latest updates delivered to your mailbox for Free!
We are glad to announce our new FREE Magento Extension which helps in sending mass emails out to their customers (those who have opted to sign up for email subscription). Sending an email from your existing Magento Installation was a pain as there is no such extension which helps in sending mass emails to the customers without putting load on the server.
If you are a non techinal person and fighting hard to understand Magento to send out mass emails then this extension will help you in great deal. This extension won’t require you to set cron files to send emails rather work on its own intelligent system to send mass emails without effecting your system and putting load on server.
This extension once installed will also helps you in selecting your preferred Email Template to send out to your customers. Moreover, if one or some of your customers do not wish to receive your newsletter and wish to unsubscribe then this extension will remember their choice and won’t send emails to those customers. Best thing about MagentoMagik Email Subscription extension is that you can select your template (email template to be sent) and customer emails in very few clicks which will really save you lot of time. You can easily select/deselect customers from your email subscription list without going back and forth.
If you wish to download MagentoMagik Email Subscription extension from Magento Connect please click here Download MagentoMagik Email Subscription Extension .
Screenshots: (Click on the images to see the large preview)
Selecting Magento's Email Templates
Selecting Customer Email Addresses
Please leave me a comment and let me know if your run into any problems in installing and using our Email Subscription Magento Extension. Don’t forget to subscribe our RSS to receive latest updates delivered to your mailbox for free.
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:
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):
- Create a new custom directory called portero under app/design/frontend/default.
- Create a new custom directory called portero under skin/frontend/default.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
- 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:
- 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:
- Open app/design/frontend/default/portero/template/catalog/product/view.phtml.
Add the following jQuery code:
-
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 | <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> |
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> ... ... |
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) { |
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> |
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.
You must have wondered how to add a new Shipping Module in Magento especially if you don’t find your preferred payment module in existing Magento installation with your preferred Shipping Module. Adding a new Magento Shipping Module in not difficult but requires little bit of programming at your end. In this article i am going to elaborate on how to add a new Shipping module to your existing Magento Installation.
Few Notes:
- Just Replace all instances of ‘YourCompany’ with your company name.
- Replace ‘NewModule’ with the Payment Module name.
- Ensure that the path of the PHP include_path is /app/code/local/
- Clean your cache after modifying the config xml files.
Now, you are all set to create a new shipping module of your own. Following is a step by step guide to build your own shipping module, just follow them in exact order and make sure that the above requirements are taken care of.
Set The Configuration
You need to create app/code/local/YourCompany/NewModule/etc/config.xml file and write the following lines of code in it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <?xml version="1.0"?> <config> <modules> <!-- declare module's version information --> <YourCompany_NewModule> <!-- this version number will be used for database upgrades --> <version>0.1.0</version> </YourCompany_NewModule> </modules> <global> <!-- declare model group for new module --> <models> <!-- model group alias to be used in Mage::getModel() --> <newmodule> <!-- base class name for the model group --> <class>YourCompany_NewModule_Model</class> </newmodule> </models> <!-- declare resource setup for new module --> <resources> <!-- resource identifier --> <newmodule_setup> <!-- specify that this resource is a setup resource and used for upgrades --> <setup> <!-- which module to look for install/upgrade files in --> <module>YourCompany_NewModule</module> </setup> <!-- specify database connection for this resource --> <connection> <!-- do not create new connection, use predefined core setup connection --> <use>core_setup</use> </connection> </newmodule_setup> </resources> </global> </config> |
Now, edit app/etc/modules/YourCompany_NewModule.xml file
1 2 3 4 5 6 7 8 9 10 11 12 13 | <config> <!-- ... --> <modules> <!-- ... --> <!-- declare YourCompany_NewModule module --> <YourCompany_NewModule> <active>true</active> <codePool>local</codePool> </YourCompany_NewModule> <!-- ... --> </modules> <!-- ... --> </config> |
Now, the Magento installation is aware that there is a new Module but nothing will happen as there is no Database selected for this.
Adding Information Into Adapter
Now, create app/code/local/YourCompany/NewModule/Model/Carrier/ShippingMethod.php file and put the following code in it. You can always set the ShippingMethod name of your choice, depending upon for which Payment Gateway you are making a module.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <?php /** * Our test shipping method module adapter */ class YourCompany_NewModule_Model_Carrier_ShippingMethod extends Mage_Shipping_Model_Carrier_Abstract { /** * unique internal shipping method identifier * * @var string [a-z0-9_] */ protected $_code = 'newmodule'; /** * Collect rates for this shipping method based on information in $request * * @param Mage_Shipping_Model_Rate_Request $data * @return Mage_Shipping_Model_Rate_Result */ public function collectRates(Mage_Shipping_Model_Rate_Request $request) { // skip if not enabled if (!Mage::getStoreConfig('carriers/'.$this->_code.'/active')) { return false; } /** * here we are retrieving shipping rates from external service * or using internal logic to calculate the rate from $request * you can see an example in Mage_Usa_Model_Shipping_Carrier_Ups::setRequest() */ // get necessary configuration values $handling = Mage::getStoreConfig('carriers/'.$this->_code.'/handling'); // this object will be returned as result of this method // containing all the shipping rates of this method $result = Mage::getModel('shipping/rate_result'); // $response is an array that we have foreach ($response as $rMethod) { // create new instance of method rate $method = Mage::getModel('shipping/rate_result_method'); // record carrier information $method->setCarrier($this->_code); $method->setCarrierTitle(Mage::getStoreConfig('carriers/'.$this->_code.'/title')); // record method information $method->setMethod($rMethod['code']); $method->setMethodTitle($rMethod['title']); // rate cost is optional property to record how much it costs to vendor to ship $method->setCost($rMethod['amount']); // in our example handling is fixed amount that is added to cost // to receive price the customer will pay for shipping method. // it could be as well percentage: /// $method->setPrice($rMethod['amount']*$handling/100); $method->setPrice($rMethod['amount']+$handling); // add this rate to the result $result->append($method); } return $result; } } |
Soon after you have created a Model, just give admin an option to configure it and let checkout process made aware of this (it will show up in checkout process which your users can choose to pay).
How To Develop Admin Module For Shipping Customizations
Once, you are done with the above steps, you need to inform Magento that there is a new Payment Module which needs to be configured and displayed in admin. In order to do so, you need to create app/code/local/YourCompany/NewModule/etc/system.xml file and put the following lines of code in it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 | <?xml version="1.0"?> <config> <sections> <carriers> <groups> <newmodule translate="label" module="shipping"> <label>Carrier Name</label> <frontend_type>text</frontend_type> <sort_order>13</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> <fields> <account translate="label"> <label>Account number</label> <frontend_type>text</frontend_type> <sort_order>7</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </account> <active translate="label"> <label>Enabled</label> <frontend_type>select</frontend_type> <source_model>adminhtml/system_config_source_yesno</source_model> <sort_order>1</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </active> <contentdesc translate="label"> <label>Package Description</label> <frontend_type>text</frontend_type> <sort_order>12</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </contentdesc> <!-- If the free_shipping_enable flag enable, the system will check free_shipping_subtotal to give free shipping otherwise will use shopping cart price rule behaviour --> <free_shipping_enable translate="label"> <label>Free shipping with minimum order amount</label> <frontend_type>select</frontend_type> <source_model>adminhtml/system_config_source_enabledisable</source_model> <sort_order>21</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </free_shipping_enable> <free_shipping_subtotal translate="label"> <label>Minimum order amount for free shipping</label> <frontend_type>text</frontend_type> <sort_order>22</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </free_shipping_subtotal> <dutiable translate="label"> <label>Shipment Dutiable</label> <frontend_type>select</frontend_type> <source_model>adminhtml/system_config_source_yesno</source_model> <sort_order>13</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </dutiable> <gateway_url translate="label"> <label>Gateway URL</label> <frontend_type>text</frontend_type> <sort_order>2</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </gateway_url> <handling_type translate="label"> <label>Calculate Handling Fee</label> <frontend_type>select</frontend_type> <source_model>shipping/source_handlingType</source_model> <sort_order>10</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>0</show_in_store> </handling_type> <handling_action translate="label"> <label>Handling Applied</label> <frontend_type>select</frontend_type> <source_model>shipping/source_handlingAction</source_model> <sort_order>11</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>0</show_in_store> </handling_action> <handling_fee translate="label"> <label>Handling fee</label> <frontend_type>text</frontend_type> <sort_order>12</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </handling_fee> <max_package_weight translate="label"> <label>Maximum Package Weight (Please consult your shipping carrier for maximum supported shipping weight)</label> <frontend_type>text</frontend_type> <sort_order>13</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </max_package_weight> <id translate="label"> <label>Access ID</label> <frontend_type>text</frontend_type> <backend_model>adminhtml/system_config_backend_encrypted</backend_model> <sort_order>5</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </id> <password translate="label"> <label>Password</label> <frontend_type>text</frontend_type> <backend_model>adminhtml/system_config_backend_encrypted</backend_model> <sort_order>6</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </password> <shipping_intlkey translate="label"> <label>Shipping key (International)</label> <frontend_type>text</frontend_type> <backend_model>adminhtml/system_config_backend_encrypted</backend_model> <sort_order>8</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </shipping_intlkey> <shipping_key translate="label"> <label>Shipping key</label> <frontend_type>text</frontend_type> <backend_model>adminhtml/system_config_backend_encrypted</backend_model> <sort_order>8</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </shipping_key> <sort_order translate="label"> <label>Sort order</label> <frontend_type>text</frontend_type> <sort_order>100</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </sort_order> <title translate="label"> <label>Title</label> <frontend_type>text</frontend_type> <sort_order>2</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </title> <sallowspecific translate="label"> <label>Ship to applicable countries</label> <frontend_type>select</frontend_type> <sort_order>90</sort_order> <frontend_class>shipping-applicable-country</frontend_class> <source_model>adminhtml/system_config_source_shipping_allspecificcountries</source_model> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </sallowspecific> <specificcountry translate="label"> <label>Ship to Specific countries</label> <frontend_type>multiselect</frontend_type> <sort_order>91</sort_order> <source_model>adminhtml/system_config_source_country</source_model> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </specificcountry> <showmethod translate="label"> <label>Show method if not applicable</label> <frontend_type>select</frontend_type> <sort_order>92</sort_order> <source_model>adminhtml/system_config_source_yesno</source_model> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </showmethod> <specificerrmsg translate="label"> <label>Displayed Error Message</label> <frontend_type>textarea</frontend_type> <sort_order>80</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </specificerrmsg> </fields> </newmodule> </groups> </carriers> </sections> </config> |
Once this file is saved you will find your new Payment Module under System> Configuration > Shipping Methods. It’s now up to you to add your custom fields in the fields tag, and subsequently make your configuration do something constructive.
Please leave me a comment and let me know if you run into any problems implementing the above code.
We are proud to announce our FREE Magento theme for our blog readers and rest of the Magento community. Magik Soft Goods 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:
Magik soft Goods - Category View
Magik Soft Goods - Product Description Popup
Live Demo
Like what you see? Be sure to check out the live demo to see Magik Soft Goods.
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. Send us a message in twitter and we will get back to you with the source code. You can also contact us by filling our form.
Cross Browser Compatible
I’ve tried my full efforts to make Magik Soft Goods 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 in tact. 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.
Have you ever wondered how people are showing larger images for products on mouseover or mouse click using lightbox (very popular JavaScript library). Adding Lightbox to your magento theme is not difficult and by adding very little code to your theme you can get the Lightbox functionality easily. Lightbox will give the ability to highlight your products by showing lager image of the product along with brief description. Our approach will be based on default layout, you can change the theme name based on your selection.
Steps To Add Lightbox To Magento Theme (Prerequisites)
Following are the steps to add Lightbox to your Magento Theme
- Download Lightbox from here
- Make a directory called /lightbox under /skin/frontend/default/default/js/ and copy the entire lighbox code under that directory. Once done, your directory will look like /skin/frontend/default/default/js/lightbox (all code under this directory)
- copy the lightbox.js under /magento/js/lightbox (create a folder under js directory and name it lightbox). If you installation is under root directory then copy it under /root/js/lightbox
- Now, you should copy the lightbox.css to /skin/frontend/default/default/css directory.
- Create a folder called lightbox under /skin/frontend/default/default/images. Your directories for images will finally look like /skin/frontend/default/default/images/lightbox. Copy all the images from source lightbox directory here.
Changing Lightbox default’s As Per Your Magento Theme
Lightbox is free open source JavaScript library to suit any kind of environment. In order to use Lightbox with Magento we have to change few default settings by assigning your theme’s original path. Following are few changes which you have to make in order to install Lightbox with your Magento theme installation.
How To Change Image Directory Location Of The Lightbox
Soon after you are done with the above pre-requisites change the following code by editing /skin/frontend/default/default/css/lightbox.css
find the following line of code
1 | background: transparent url(../images/blank.gif) no-repeat; |
and replace it with
1 | background: transparent url(../images/lightbox/blank.gif) no-repeat; |
Now find the following line of code
1 | #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } |
and replace it with
1 | #prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; } |
Find the following line of code
1 | #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; } |
and replace it with
1 | #nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; } |
Now, lets make few changes in the lighbox.js file which will be found under /skin/frontend/default/default/js/lightbox/lightbox.js
Edit this JS file with your favorite editor and find the following line of code
1 2 | fileLoadingImage: 'images/loading.gif', fileBottomNavCloseImage: 'images/closelabel.gif', |
and replace these lines with this
1 2 | fileLoadingImage: SKIN_URL + 'images/lightbox/loading.gif', fileBottomNavCloseImage: SKIN_URL + 'images/lightbox/closelabel.gif', |
Now, change the head.phtml file which will be found under /app/design/frontend/default/default/template/page/html/head.phtml
Edit this file using your favorite editor and find the following line of code
1 2 3 | <script type="text/javascript">var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>'; var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>'; </script> |
replace this code with the following line of code
1 2 3 | <script type="text/javascript">var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>'; var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>'; var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>';</script> |
Adding Stylesheet & JavaScript To Your Magento Installation
Open page.xml from /app/design/frontend/default/default/layout/page.xml using your favorite editor.
Under the following line of code
1 2 3 | <block type="page/html_head" name="head" as="head"> .... </block> |
Add this
1 2 | <action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action> <action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action> |
AFTER the prototype.js. It is recommended to add the two lines where the list of js and css files intersect so it will look something like this:
1 2 3 4 5 6 | ... <action method="addJs"><script>mage/cookies.js</script></action> <action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action> <action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action> <action method="addCss"><stylesheet>css/reset.css</stylesheet></action ... |
How To Add Lightbox To Magento Product Detail Page
Edit media.phtml from /app/design/frontend/default/default/template/catalog/product/view/media.phtml using your favorite editor
Find the following line of code
1 2 3 4 5 | <?php foreach ($this->getGalleryImages() as $_image): ?> <li><a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=200,height=200,resizable=yes');return false;"> <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68,68); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/></a> </li> <?php endforeach; ?> |
and replace the above lines with this
1 2 3 4 | <?php foreach ($this->getGalleryImages() as $_image): ?> <li><a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/></a> </li> <?php endforeach; ?> |
Now, you are all set. You will see the Lightbox opening up for your product images. Leave me a comment and let me know if you run into any difficulty.
- Recent Posts
- July 2010 (8)
- June 2010 (1)
- March 2010 (1)
- February 2010 (2)
- January 2010 (10)
- November 2009 (1)
- October 2009 (1)
- September 2009 (3)
- August 2009 (5)