Enable Gift Wrapping module for certain countries – EE

I promised in one of my previous posts that I’ll share with you this nice feature about how to enable Gift Wrapping module in Magento Enterprise Edition, but for certain countries. So let’s extend it so merchants can easily enable this enhancement as they wish.

There’s one caveat about front-end look & feel. This enhancement is build on top of onestepcheckout Magento EE extension. It’s easy to set up everything for your needs (in case if you don’t use onestepcheckout extension) if you just follow logic in example mentioned bellow. Additionally, our request was that client wanted to remove checkbox for “Add gift options” and place radio buttons instead, where customers will have option to choose between “Basic” and “Luxury” gift wrapping service. In our example we’ll do the same. Feel free to modify everything for your own needs.

Let’s begin!

1. Tell Magento about our module
2. Create configuration file
3. Create system xml file
4. Create Helper class
5. Tweaking front-end look and feel

1. Tell Magento about our module

Create file app/etc/modules/Inchoo_GiftWrapping.xml with the following content:

<config>
    <modules>
        <Inchoo_GiftWrapping>
            <active>true</active>
            <codePool>local</codePool>
            <depends>
                <Enterprise_GiftWrapping/>
            </depends>
        </Inchoo_GiftWrapping>
    </modules>
</config>

2. Create configuration file

Create file app/code/local/Inchoo/GiftWrapping/etc/config.xml with the following content:

<?xml version="1.0"?>
<config>
    <modules>
        <Inchoo_GiftWrapping>
            <version>1.0.0.1</version>
        </Inchoo_GiftWrapping>
    </modules>
    <global>
        <helpers>
            <inchoo_giftwrapping>
                <class>Inchoo_GiftWrapping_Helper</class>
            </inchoo_giftwrapping>
        </helpers>
    </global>
 </config>

3. Create system.xml file

Create file app/code/local/Inchoo/GiftWrapping/etc/system.xml with the following content:

<config>
    <sections>
        <sales>
            <groups>
                <gift_options>
                    <fields>
                        <allowed_countries translate="label" module="inchoo_giftwrapping">
                            <label>Gift Wrap Service is available in the following countries:</label>
                            <frontend_type>multiselect</frontend_type>
                            <sort_order>14</sort_order>
                            <source_model>adminhtml/system_config_source_country</source_model>
                            <show_in_default>1</show_in_default>
                            <show_in_website>0</show_in_website>
                            <show_in_store>0</show_in_store>
                            <can_be_empty>1</can_be_empty>
                        </allowed_countries>
                    </fields>
                </gift_options>
            </groups>
        </sales>
    </sections>
</config>

Note that now you can see in Magento administration under System/Configuration/Sales/Sales/Gift Options tab new input field where you can specify desired amount for: “Gift Wrap Service is available in the following countries:“.

4. Create Helper class

Create file app/code/local/Inchoo/GiftWrapping/Helper/Data.php with the following content:

<?php
/**
 * GiftWrapping helper data
 *
 * @category    Inchoo
 * @package     Inchoo_GiftWrapping
 * @author      Ivan Galamboš <ivan.galambos@inchoo.net>
 */
class Inchoo_GiftWrapping_Helper_Data extends Mage_Core_Helper_Abstract
{
    /**
     * Allowed countries array
     *
     * @var array
     */
    public $_allowedCountriesArray = array();
    /**
     * Allowed countries array
     *
     * @var array
     */
    public $_allowedCountries = array();
 
    /**
     * Return response as JSON.
     *
     * @return string
     */
    public function getAllowedCountries()
    {
        $this->_allowedCountries = Mage::getStoreConfig('sales/gift_options/allowed_countries');
        if (strlen($this->_allowedCountries)) {
            $this->_allowedCountriesArray = explode(',', $this->_allowedCountries);
        } else {
            $this->_allowedCountriesArray = array();
        }
        return Mage::helper('core')->jsonEncode($this->_allowedCountriesArray);
    }
 
}

5. Front-end modifications

As I previously wrote, I did this enhancement on top of the onestepcheckout Magento EE extension. I’ll give you a JS code for it as well as modifications that I did.

Open file: app/design/frontend/enterprise/[YOUR_THEME]/template/onestepcheckout/checkout.phtml and find

<?php if($this->settings['enable_gift_messages']): ?>...<?php endif; ?>

(around line 600), replace everything with:

<script type="text/javascript">
//<![CDATA[
    var allowedCountries = <?php echo $this->helper('inchoo_giftwrapping')->getAllowedCountries();?>;
    var displayOnestepcheckoutGiftmessages = true;
    allowedCountries = $A(allowedCountries);
Event.observe(window, 'load', function() {
 
    if ($('billing:use_for_shipping_yes').getValue()) {
 
            displayOnestepcheckoutGiftmessages = false;
            allowedCountries.each(function(elem) {
                    if ($('billing:country_id').getValue() === elem) {
                        displayOnestepcheckoutGiftmessages = true;
                    }
                }
            );
            if (!displayOnestepcheckoutGiftmessages) {
                $('onestepcheckout-giftmessages').setStyle({display:'none'});
            } else {
                $('onestepcheckout-giftmessages').setStyle({display:'block'});
            }
 
    } else {
 
            displayOnestepcheckoutGiftmessages = false;
            allowedCountries.each(function(elem) {
                    if ($('shipping:country_id').getValue() === elem) {
                        displayOnestepcheckoutGiftmessages = true;
                    }
                }
            );
            if (!displayOnestepcheckoutGiftmessages) {
                $('onestepcheckout-giftmessages').setStyle({display:'none'});
            } else {
                $('onestepcheckout-giftmessages').setStyle({display:'block'});
            }
 
    }
 
    $('billing:country_id').observe('change', function(e) {
 
        if ($('billing:use_for_shipping_yes').getValue()) {
 
                displayOnestepcheckoutGiftmessages = false;
                allowedCountries.each(function(elem) {
                        if ($('billing:country_id').getValue() === elem) {
                            displayOnestepcheckoutGiftmessages = true;
                        }
                    }
                );
                if ( !displayOnestepcheckoutGiftmessages ) {
                    $('allow_gift_options_custom').checked = true;
                    toogleVisibilityOnObjectsCustom($('allow_gift_options_custom'), ['allow-gift-options-container']);
                    giftWrapRefresh('<?php echo $this->getUrl('onestepcheckout/ajax/set_methods_separate', array('_secure'=>true)); ?>');
                    $('onestepcheckout-giftmessages').setStyle({display:'none'});
                } else {
                    $('onestepcheckout-giftmessages').setStyle({display:'block'});
                }
 
        }
 
    });
 
    $('shipping:country_id').observe('change', function(e) {
 
        if ( !$('billing:use_for_shipping_yes').getValue() ) {
 
                displayOnestepcheckoutGiftmessages = false;
                allowedCountries.each(function(elem) {
                        if ($('shipping:country_id').getValue() === elem) {
                            displayOnestepcheckoutGiftmessages = true;
                        }
                    }
                );
                if ( !displayOnestepcheckoutGiftmessages ) {
                    $('allow_gift_options_custom').checked = true;
                    toogleVisibilityOnObjectsCustom($('allow_gift_options_custom'), ['allow-gift-options-container']);
                    giftWrapRefresh('<?php echo $this->getUrl('onestepcheckout/ajax/set_methods_separate', array('_secure'=>true)); ?>');
                    $('onestepcheckout-giftmessages').setStyle({display:'none'});
                } else {
                    $('onestepcheckout-giftmessages').setStyle({display:'block'});
                }
 
        }
 
    });
});
//]]>
</script>
        <?php if($this->settings['enable_gift_messages']): ?>
            <div id="onestepcheckout-giftmessages">
                <div class="onestepcheckout-giftmessagecontainer">
                    <?php echo $this->helper('onestepcheckout/message')->getInline('onepage_checkout', $this->getQuote(), $this->getDontDisplayContainer()) ?>
                    <?php if(is_object(Mage::getConfig()->getNode('global/models/enterprise_giftwrapping'))):?>
                        <script type="text/javascript">
                            Event.observe(window, 'load', function() {
                                var items = $$('.onestepcheckout-giftmessagecontainer input, .onestepcheckout-giftmessagecontainer select, .onestepcheckout-giftmessagecontainer textarea');
                                if(items.length > 0){
                                    items.each(function(elem){
                                        elem.observe('change', function(e){
                                            giftWrapRefresh('<?php echo $this->getUrl('onestepcheckout/ajax/set_methods_separate', array('_secure'=>true)); ?>');
                                        });
                                    });
                                }
                            });
                        </script>
                    <?php endif;?>
                </div>
            </div>
        <?php endif; ?>

Now we’ve prepared most of our JS code required for onestepcheckout extension to work on desired way. Now we need to change checkbox to radio button and we need to add method toogleVisibilityOnObjectsCustom().

Open file: app/design/frontend/enterprise/[YOUR_THEME]/template/giftmessage/inline.phtml and replace:

if(!window.toogleVisibilityOnObjects) {
    var toogleVisibilityOnObjects = function(source, objects) {
        if($(source) && $(source).checked) {
            objects.each(function(item){
                $(item).show();
                $$('#' + item + ' .input-text').each(function(item) {
                    item.removeClassName('validation-passed');
                });
            });
        } else {
            objects.each(function(item){
                if ($(item)) {
                    $(item).hide();
                    $$('#' + item + ' .input-text').each(function(sitem) {
                        sitem.addClassName('validation-passed');
                    });
                    $$('#' + item + ' .giftmessage-area').each(function(sitem) {
                        sitem.value = '';
                    });
                    $$('#' + item + ' .checkbox').each(function(sitem) {
                        sitem.checked = false;
                    });
                    $$('#' + item + ' .select').each(function(sitem) {
                        sitem.value = '';
                    });
                    $$('#' + item + ' .price-box').each(function(sitem) {
                        sitem.addClassName('no-display');
                    });
                }
            });
        }
    }
}

with:

if(!window.toogleVisibilityOnObjects) {
    var toogleVisibilityOnObjects = function(source, objects) {
        if($(source) && $(source).checked) {
            objects.each(function(item){
                $(item).show();
                $$('#' + item + ' .input-text').each(function(item) {
                    item.removeClassName('validation-passed');
                });
            });
        } else {
            objects.each(function(item){
                if ($(item)) {
                    $(item).hide();
                    $$('#' + item + ' .input-text').each(function(sitem) {
                        sitem.addClassName('validation-passed');
                    });
                    $$('#' + item + ' .giftmessage-area').each(function(sitem) {
                        sitem.value = '';
                    });
                    $$('#' + item + ' .checkbox').each(function(sitem) {
                        sitem.checked = false;
                    });
                    $$('#' + item + ' .select').each(function(sitem) {
                        sitem.value = '';
                    });
                    $$('#' + item + ' .price-box').each(function(sitem) {
                        sitem.addClassName('no-display');
                    });
                }
            });
        }
    }
 
    var toogleVisibilityOnObjectsCustom = function(source, objects) {
        if($(source) && $(source).checked) {
            objects.each(function(item){
                if ($(item)) {
                    $(item).hide();
                    $$('#' + item + ' .input-text').each(function(sitem) {
                        sitem.addClassName('validation-passed');
                    });
                    $$('#' + item + ' .giftmessage-area').each(function(sitem) {
                        sitem.value = '';
                    });
                    $$('#' + item + ' .checkbox').each(function(sitem) {
                        sitem.checked = false;
                    });
                    $$('#' + item + ' .select').each(function(sitem) {
                        sitem.value = '';
                    });
                    $$('#' + item + ' .price-box').each(function(sitem) {
                        sitem.addClassName('no-display');
                    });
                }
            });
        } else {
 
        }
    }
}

In same file, app/design/frontend/enterprise/[YOUR_THEME]/template/giftmessage/inline.phtml, replace:

<div class="add-gift-message no-display" id="add-gift-options-<?php echo $this->getEntity()->getId() ?>">
        <h3><?php echo $this->__('Do you have any gift items in your order?'); ?></h3>
        <p>
            <input type="checkbox" name="allow_gift_options" id="allow_gift_options" value="1" onclick="toogleVisibilityOnObjects(this, ['allow-gift-options-container']);"<?php if($this->getItemsHasMesssages() || $this->getEntityHasMessage()): ?> checked="checked"<?php endif; ?> class="checkbox" />
            <label for="allow_gift_options"><?php echo $this->__('Add gift options') ?></label>
        </p>
    </div>

with:

<div class="add-gift-message no-display" id="add-gift-options-<?php echo $this->getEntity()->getId() ?>">
            <p>
                <input type="radio" name="allow_gift_options" id="allow_gift_options_custom" value="0" onclick="toogleVisibilityOnObjectsCustom(this, ['allow-gift-options-container']);" class="checkbox" />
                <label for="allow_gift_options_custom"><?php echo $this->__('Basic Wrap (Free)') ?></label>
            </p>
            <p>
                <input type="radio" name="allow_gift_options" id="allow_gift_options" value="1" onclick="toogleVisibilityOnObjects(this, ['allow-gift-options-container']);"<?php if($this->getItemsHasMesssages() || $this->getEntityHasMessage()): ?> checked="checked"<?php endif; ?> class="checkbox" />
                <label for="allow_gift_options"><?php echo $this->__('Luxury Wrap') ?></label>
            </p>
        </div>

And that’s it. If you refresh your checkout page, you’ll notice that you can’t see anymore Gift Wrap functionality. That’s expected because now you need to go to administration and enable some/all desired countries that can get Gift Wrapping service. Go to Magento administration and under System/Configuration/Sales/Sales/Gift Options tab you’ll see new input field “Gift Wrap Service is available in the following countries:” where you can select desired countries.

You can see on default Magento EE installation with sample data and onestepcheckout extension how this looks like:

If you have any question, feel free to ask!