Integrate shadowbox (alternative of lightbox) 3.0b with Magento

Here comes new steps to add latest shadowbox 3.0b to Magento, if you have any questions, please leave a comment so that I may help you:

Step 1:

Download Shadowbox, or you may download the modifed shadowbox package(because we will need to make some modifications in later steps).

Unpack you downloaded files into js/shadowbox-3.0b/ folder:

Put shadowbox under Magento js folder

Step 2:

Open /app/design/frontend/default/flower/layout/catalog.xml (in my exxample the bold Italic text would different from yours, the same as below) in your favourate text editor, find:

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

            <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>

Replace is with:

    <catalog_product_view>
        <!-- Mage_Catalog -->
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
        </reference>
        <reference name="head">
            <action method="addJs"><script>varien/product.js</script></action>
            <!-- shadowbox javascript -->
            <action method="addJs"><script>shadowbox-build-3.0b/shadowbox.js</script></action>
                      
            <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
            <!-- shadowbox css -->
<action method="addItem"><type>js_css</type><name>shadowbox-build-3.0b/shadowbox.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>

Step 3:

Insert shadowbox initialization code around line 32 (after ?> tag) in /app/design/frontend/default/flower/template/catalog/product/view/media.phtml, after inserting, the code would be like:

/**
 * Product media data template
 *
 * @see Mage_Catalog_Block_Product_View_Media
 */
?>
<script type="text/javascript">
Shadowbox.init();
</script>

There are more parameters can be used in initialization of shadowbox, please refer to its own usage documentation.

Remove all the lines bellow within this file start from 39 to 65:

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<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>
<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>
<?php else: ?>
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($_product->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image')
    ?>
<?php endif; ?>

After that, add following lines below:

<p class="product-image-zoom">
<a href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>"
title="<?php echo $this->htmlEscape($this->getImageLabel()); ?>"
rel="shadowbox[product]">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(300); ?>"
alt="<?php echo $this->htmlEscape($this->getImageLabel()); ?>"
title="<?php echo $this->htmlEscape($this->getImageLabel()); ?>" /></a>
</p>
<p class="a-center" id="track_hint"><?php echo $this->__('Click on above image to enlarge') ?></p>

And then, scroll down to line 72, you will see something like this:

            <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>

Now, we need to add some attribute to make shadowbox working with product gallery images, here will be the new lines after adding:

        <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()) ?>"
        title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"
        rel="shadowbox[product]">
                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(143); ?>"
                alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"
                title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
                </a>

Well, all done, if you downloaded my package of shadowbox, all should be working fine now. if not, please take more steps as below:

Step 4:

Right now, if you are using shadowbox library which was downloaded from its own website, you would found that a dark overlay shows up and image does not comes out when you trying to click the product image from the product page at front-end. And if you have firebug, you will see some error message as bellow:

    ({initialize:(function (config) { ... formatPrice:(function (price) {return formatCurrency(price, this.priceFormat);})}) is not a function
    http://your.domain/flower/js/index.php?c=auto&f=,prototype/prototype.js,prototype/validation.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,varien/js.js,varien/form.js,varien/menu.js,mage/translate.js,mage/cookies.js,jquery/jquery-1.2.6.min.js,varien/product.js,shadowbox-build-3.0b/players/shadowbox-img.js
    Line 1500

and/or

    uncaught exception: Unknown player: img
    Line 0

This is because re-declaration of the variable(s) of javascript which is located in /js/varien/product.js, and I can tell you is: this is caused by shadowbox.

The solution is easy, open the file /js/shadowbox-build-3.0b/shadowbox.js, at line around 616, replace:

            each(document.getElementsByTagName('script'), function(s){
                if((path = path_re.exec(s.src)) != null){
                    S.path = path[1];
                    return false;
                }
            });

with:

            each(document.getElementsByTagName('script'), function(s){
                if((path = path_re.exec(s.src)) != null){
                    S.path = path[1].split(",");
                    S.path = S.path[0]+","+S.path[S.path.length-1];
                    return false;
                }
            });
 All Done..

Source: http://www.swiftcore.com/

Set up the AddThis-button in your Magento theme

I’m sure many of you are big fans of the AddThis-button, that lets your users very easily add links to all major sites like Facebook, MySpace, blogs like Wordpress and Blogger plus it even let your users very easily send the page by email or print it out.

So, how do you add this great function to your Magento theme you might ask. Well its very simple. Just follow the steps below and you should be up running in no-time.

Step 1 – Create your AddThis-button

Go to http://www.addthis.com/web-button-select and create your own-styled AddThis-button, and then copy the code that is generated to your clipboard.

Step 2 – Add the code to your template-file

Open up your local template/catalog/view.phtml-file in Magento and find the following line:

                <h4><?php echo $this->__(’Quick Overview’) ?></h4>

Right above that line add a div style like this:

                <div style=”float:right;”>

                </div>

And paste the generated code in between that div-tag.

3 – Done

Well, thats actually it! If you run into any problems or have any suggestions around this functionality please feel free to add it as a comment in this article.

Source: http://www.silverthemes.com/

How to edit/change contact page form in magento

Step 1:

Change the contact form located at:

    Code:
    1-/app/design\frontend/default/your_template/template/contacts/form.phtml

Step 2:

Once it is ready create a new email template to get all the form data and post. You can design the template or leave as simple as it is. For this goto

    Code:
    1-admin -> System -> Transactional Emails -> Add New Template

Then from Template drop down select contact form and load the template. Then you can edit as you like and save the form with some name.

Step 3:

Now you need to select the newly created email template to use for sending data captured from contact us page form. For this goto:

    Code:
    1-admin -> System -> Configuration -> Contacts

Now under email options select the new contact form that you just created and save it.

That's it. You are all done.

Source: http://www.codefight.org/page/47/41/how-to-edit-change-contact-page-form-in-magento.html

Moving Magento sites

When you're moving a Magento site from one domain to another, you will run into the problem of the old domain still being used. To actually use the new domain, the MagentoTM configuration needs to be changed.

Instead of a configuration XML-file the right place to look for is the database. Within the database table "core_config_data" there are two values pointing to the current domainname: "web/unsecure/host" and "web/secure/host". Both need to be changed.

Either login through a tool like PhpMyAdmin or open up a SQL console, and cut-and-paste the SQL commands below. Replace the word "DOMAIN" with the actual domain you're using.

update core_config_data set value="http://DOMAIN/" where path=’web/unsecure/host’;    
update core_config_data set value="http://DOMAIN/" where path=’web/secure/host’;

Unfortunately Magento is very fond of caching, so we also need to flush the cache. Only after the cache is flushed . For this to work you will need to delete the contents of the Magento-folders "var/cache/" and "var/session/". Hopefully you're a Linux geek as I am, so you login to your favorite UNIX shell and execute the following:

cd /path/to/your/magento/site
rm -r var/cache/* var/session/*

Cross your fingers and refresh the page.

How to use jQuery with Magento?

Download jQuery from jQuery site

Add this line to the bottom of jQuery.js

    CODE:

    1-jQuery.noConflict();

Copy the file to the js/jquery folder|directory

In page.xml, add it to the list of js files as:

    CODE:

    1-<action method=“addJs“><script>jquery/jquery-1.2.6.noConflict.min.js</script></action>

or,

    CODE:

    1-<action method=“addItem“><type>js</type><name>jquery.js</name><params/></action>

How to use jQuery with magento now?

The below procedure is one way.

    CODE:

    1-jQuery(document).ready(function($){
    2-// Use jQuery with $(...)
    3-$('div').show();
    4-});
    5-// Use Prototype with $(...)
    6-$('id').hide();

note: $ sign inside function($).

And another procedure is,

    CODE:

    1-jQuery(document).ready(function(){
    2-// Use Prototype with $(...)
    3-$('id').hide();
    4-// Use jQuery with jQuery(...)
    5-jQuery('div').show();
    6-});

There are few more procedures available at jQuery site. But this much information is good to go with using jQuery with magento which uses prototype, scriptaculous etc...

Fixing Magento Login Problem after a Fresh Installation

This is just a quick little note to suggest two ways to solve the problem that you cannot log in to your Magento admin interface after a fresh install of Magento.

The Problem

The problem will manifest itself as a redirect back to the login screen, even though you typed the right username and password. If this problem is affecting you, you will be redirected back and see no error message. This indicates you have the right credentials, but the Magento Admin is just not letting you in. You can verify it by typing the wrong username and password, you’ll see you get redirected back and it shows an error message.
The problem occurs because the Magento backend tries to set a cookie on your browser, and then for some reason when you next make a request, the cookie is gone(or was never there). This makes Magento think you have never logged in, and of course it redirects you to the login screen. So the real guts of it is the missing cookie, we need to find out why it’s missing.

There are two solutions I have come across that will solve this, there may be others too, so please feel free to post them below. Both of these solutions have been suggested in the comments of my post on Setting up Apache Virtual Hosting.

Solution 1: Domain Name with no dots

This is the most common solution, if you have set up Magento to run locally (on MAMP for example) then you may be accessing the Apache webserver using the localhost hostname. A security setting in browsers means that the cookie will not be set, though apparently in FF3 at least, this behavior is a bug?.
So simply stop using localhost, you can use your localhost interface (e.g. 127.0.0.1 or 127.0.1.1). To determine your localhost interface you can look at the contents of your hosts file:

# Look for the number to the left of localhost
cat /etc/hosts
or your interface configuration.
# Look for interface loX with the LOOPBACK flag (probably lo0)
ifconfig

Once you know which number to use, you can replace localhost with the number. If you have already installed Magento using localhost then it will keep writing out links to localhost, even after you have changed to using the IP address, you will need to change the base_url values in the core_config_data table, you can run a query like this to find the right config values to change:

SELECT * FROM core_config_data WHERE value LIKE "%localhost%";

This should identfy two config values that will need to update with a query like:

UPDATE core_config_data SET value="http://127.0.0.1/" WHERE path IN ('web/unsecure/base_url','web/secure/base_url') ;

I’m going to assume you know to put the right value into that query, and not use the example one I have provided!

After changing that value you should delete your var/cache contents, and then refresh the page. Now you should have Magento running on an IP address, not a hostname with no dots in it. Of course you could always set up a fake domain name like www.testing.com by using a Virtual Hosting setup like I describe in my post on how to configure a MAMP Virtual host.

Solution 2: Timezone differences between server and client
One other, less likely problem, is that the cookie is being set, but expiring immediately. To check this you can inspect the cookies your browser is holding, and check if there is one there from Magento. If there is then check both the timezone your magento installation is using , and the one you have set locally, perhaps your local time is not set properly?

Hopefully one of these two solutions will get you back on track and able to log in to your newly installed Magento. Feel free to post problems or suggest other solutons in the comments below. I’m always more than happy to update my posts with helpful tips from readers.

Magento's iPhone Theme: Mobile Commerce for the Masses?

Magento Commerce, an open source ecommerce platform, has introduced an Apple iPhone specific theme that is potentially the first step toward leveling the playing field for small online retailers who want to compete in the lucrative and booming mobile ecommerce market.

Mobile eCommerce Has Massive Potential
Mobile ecommerce (often call m-commerce) is coming; 9 million Americans have already made a purchase from a mobile device, and perhaps half of the United States' 250 million odd mobile handset users are willing to make a purchase in the near future, according to a recent study from The Nielsen Company, New York, N.Y. All of those U.S. users plus the billions of consumers in Asia, Africa, and India, where a mobile handset may serve as phone, mobile TV, and primary point of Internet access, make m-commerce very attractive to e-retailers large and small.

But mobile browsing experiences can be frustrating for customers, and developing ecommerce websites that are functional, legible, and compelling for mobile device users has been the realm of moneyed and massive e-retailers like Amazon.com.

The Apple iPhone actually does an excellent job of rendering websites already, but there are still problems. Most online stores are designed to look good on a modern, flat-panel monitor which may be 19 inches in diagonal. While these sites are rendered properly on the iPhone, they take on diminutive dimensions, requiring an iPhone owner to zoom in, zoom out, and scroll in all directions. Bandwidth can also be a problem. iPhones use WiFi connections (802.11n standard), Bluetooth (radio), fast 3G cellular networks, or older and slower cellular networks depending on what sort of connection is available at a given time. Browsing on WiFi or a speedy 3G network might be no problem, but uploading an online store over older cellular networks can be painfully slow.
To address this, Magento developed a special theme or combination of layout, template, and presentation files that are optimized for an iPhone's browser. This theme still offers great looking graphics, full functionality, and the same payment gateways, but in proportions and layouts that make a store attractive and easy to use on an iPhone's palm-sized LCD screen.

Equalizing m-Commerce
Magento's new iPhone theme is an important (if small) step, giving independent e-retailers an easy way to tap m-commerce's amazing potential. Varien, a Los Angeles, Calif.-based ecommerce developer and consultancy, created Magento Commerce and then unleashed the platform, turning it over to a vibrant community of perhaps 400,000 users (store owners and developers), while staying intimately involved in the platform's development and expansion. The new theme makes it easier for iPhone users to browse and shop Magento-powered sites with ease. Basically, Magento utilizes "the iPhone's inherent navigation methods and offer[s] quick catalog browsing, global site search, customer accounts, and a shopping cart with a complete checkout process," Varien said, "The iPhone extension delivers a user experience that supports the iPhone's touch-screen functionality, taking users on a clearly defined path from browsing to purchasing."

The iPhone is Just a Drop in the Bucket
Unfortunately, as awesome, cool, and fantastic as the iPhone may or may not be, it represents a very tiny percentage of the total mobile handset universe. By some estimates, leading mobile phone makers Nokia, Motorola, Samsung, LG, Sony-Ericsson, BlackBerry, and the like, build between 700 million and 1 billion new mobile handsets each year. While something like 8 million to 10 million iPhones have sold worldwide based on Steve Jobs 2008 MacWorld keynote speech and estimates for the iPhone 3G. So the new Magento iPhone theme only scratches the m-commerce surface. On the other hand, what e-retailer wouldn't want to reach as many as 10 million or so potential customers all of whom represent the iPhone's decidedly upscale user base.

Using the iPhone Theme to Gain a Competitive Advantage.
m-Commerce is here to stay, and retailers who implement a mobile solution like Magento's iPhone extension will gain a competitive advantage over other ecommerce sites that are slower to adopt a mobile-specific platform. And there is still hope that Varien or other ecommerce developers will address the mobile mass market soon.

“We are looking to expand the capabilities of Magento to target additional mobile browsers in the future, but the iPhone, with its smart usability, market share and passionate audience was a natural place to start,” said Chris Marshall, a Varien spokesman.

Google Apps Email/Gmail Magento Extension v0.5 released

It’s been a while since I have written any updates on my Gmail and Google Apps email extension for Magento. I have just released version 0.5 and thought now would be a good opportunity to write a quick update on the changes and what I have planned for SMTP email support in Magento.

Version 0.5 of Google Apps Email/Gmail Magento Extension

Firstly the changes in the latest release of the Google Apps/Gmail Magento extension. Both have been inspired by user feedback so two ‘thank you’s to follow. Firstly thanks to Blue Acorn for pointing out the lack of multi-store capability on the self test. It’s actually a little clunky getting the store parameters in the admin of Magento, my custom button needed to add the parameter like so:

$buttonBlock = $this->getElement()->getForm()->getParent()->getLayout()->createBlock('adminhtml/widget_button');
 
$params = array(
    'website' => $buttonBlock->getRequest()->getParam('website')
);
 
$url = Mage::helper('adminhtml')->getUrl("googleappsmailtest", $params);

And then the controller needed to actually pick up which Magento store to get the config for:

$websiteModel = Mage::app()->getWebsite($this->getRequest()->getParam('website'));
 
$to = Mage::getStoreConfig('contacts/email/recipient_email', $websiteModel->getId());

The other change was a bit of a curve ball. I had a Magento + Gmail user named Matt contacted me with what seemed to be an unrelated issue. I have been poking around in the installation code trying to figure out what has been happening. It wasn’t until I did a full fresh install on Magento 1.3.2.3 that I noticed what was going on. My extension has a dependency on Mage_Core (obviously, right?) and the wiki guide on how to package Magento extensions says to include this dependency. However if you do then the downloader will download the Core files and a whole bunch of other required files. This is no problem if you have been a good boy or girl and made your changes to the themes outside of the default files, but if you have changed the default templates then there is a risk of your changes being lost!

So, the change is to remove this dependency, even though the guide says it should be there. It’s kind of obvious that you need Magento in order to run my extension anyway!

Magento SMTP support

The other update I wanted to post was that I am working on porting my Magento Gmail / Google Apps extension to also support full SMTP capability. I will be releasing the changes as a new extension, as it is important to me that the original goal of this extension (extreme simplicity and ease of use) is not lost under the weight of full SMTP configuration.

I know that there is already an older SMTP extension for Magento. I think I can improve upon it in several ways, I have developed Magento SMTP self test capability, and I have support for Magento newsletter sending. The current SMTP extension hasn’t been updated for nearly a year, and I have an opportunity to create a more modern, user friendly extension.

Steps to add Products to the Magento Home page

I wanted to add a small selection of products to the Magento homepage, and I thought I’d quickly write up how I did it, because it brings together a few little tidbits from around the net. This solution will use a specific category which can either be an actual category with a few products in it (e.g. specials), or one you created specifically for displaying on the home page (let’s call it ‘home page featured’). It takes only 3 simple steps as shown below.

Step 1:
First add this to your CMS page where you want the products to appear (I’ll assume from here on out that it’s your cms home page):

{{block type="catalog/product_list" category_id="YOUR_CATEGORY" template="catalog/product/list.phtml"}}

Notice you have to put your chosen category id in the code where I have YOUR_CATEGORY as a placeholder.

This will make the products show up but you’ll notice two annoying things probably. The first is the category you made for featuring showed up in your navigation menu and second the toolbar for paging and sorting may show up, which you won’t want if you just have 3-6 products featured on your home page.

Step 2:
So the second step is to hide away those toolbars on the cms homepage. We are using a standard magento template to display the prodcts (that’s the template="catalog/product/list.phtml" from above) so it’s cleaner and better for upgrading/template maintenance if we do not go and edit it just to remove the toolbars. Instead let’s just throw a display:none in just for this page on the two css classes that matter, the .pager and .sorter.

That will look like this, notice it is specifically the cms-home page that is being styled, you’d do the same for your page:

.cms-home .pager, .cms-home .sorter {
        display: none;
}

So this hides them away, the html is still there, but no one will see it. The template is unchanged, and easily upgradeable.

Now the last issue is the nav menu, if you chose to use a new category especially for home page featured products then you won’t probably want that showing up in the nav menu.

Step 3:
The 3rd and final step is a simple config option to disable categories from showing in the menu. It will allow you to have categories that can be used for display in parts of the store, but that will not show on the menu. The Is Active option is what you need to set to ‘no’ in order to hide the faux category.

Tips For Creating Dynamic Category Landing Pages

This will  give you a starting point for building a static block and PHTML file that can be applied to top level categories to dynamically create a block with of all the subcategories.

First create a new static block (CMS → Static Blocks), lets call it ‘Dynamic Landing Pages’. Within the content paste this:
{{block type="catalog/navigation" name="catalog.category" template="catalog/category/list.phtml"}} 

If you’ve not seen one of these before, then basically it loads the list.phtml into the block allowing you to include dynamic content in your site.

Next create list.phtml in app/design/frontend/default/your_theme/template/catalog/category/

Then go to ‘Manage Categories’ select the relevant category and then choose ‘Static Block Only’ in the ‘Display Mode’ dropdown and then choose the ‘Dynamic Landing Pages’ static block we’ve just created from the ‘CMS Block’ dropdown.

Now to look at some coding to put in list.phtml, to get the category id of the current category and an array containing the ids of its child categories, use the following:

$current = $this->getCurrentCategory()->getId();
$category = Mage::getModel('catalog/category')->load((int)$current);
$children = $category->getChildren();
$children = explode(",",$children);

This leaves you with:
$current, your current category id.
$category, which is an instance of Mage_Catalog_Model_Category.
$children, is an array of the child category ids.

Then cycle through each of the child categories by loading the category object using the id from the array. We check first that the first value is not just an empty string (as it will be if there are no categories):

if (strlen($children[0]) > 0)
{
 foreach($children as $child)
 {
  $_child = Mage::getModel('catalog/category')->load($child);
   // then use the $_child object to pull out category properties
 }
}

Some of the key methods that subsequently used to create the landing pages were:

• $_child->getName()
• $_child->getUrl()
• $_child->getImageUrl()
• $_child->getProductCount()

The Image URL is based on the image that is uploaded in the ‘General Information’ tab in ‘Manage Categories’ but be aware that if you use this functionality you will probably want to edit
frontend/default/your_theme/template/catalog/category/view.phtml so that it doesn’t load that image at the top of the subcategory.

To view the methods of the Mage_Catalog_Model_Category class look
at the file: app/code/core/Mage/Catalog/Model/Category.php.