Change shipping address dropdown to list view at checkout page Magento



Once i need to change shipping address dropdown to div structure.
After a long research i found that this select box is comming form core php file and i do not want to make any change in core file. So at last i changed my shipping.phtml file as following.



I have changed in file
/app/design/frontend/default/[My-Theme]/template/checkout/onepage/shipping.phtml

This code is used for getting the html for select box for presaved address.
I added my new code after this.
<?php echo $this->getAddressesHtmlSelect('shipping') ?>

Now, my code looks like this,


<label for="shipping-address-select"><?php echo $this->__('Select a shipping address from your address book or enter a new address.') ?></label>
<div class="input-box" style="display: none;">
<?php echo $this->getAddressesHtmlSelect('shipping') ?>
</div>
        /*New Code start*/   
<div id="custAddress">
<?php $customerId = Mage::getSingleton('customer/session')->getCustomer();?>    
<?php $customer = Mage::getModel('customer/customer')->load($customerId->getId()); ?>
<?php $data = array();?>
<?php $i=0; foreach ($customer->getAddresses() as $address):?>
<?php $data = $address->toArray();?>
<div id="addresseList">
       <a href="javaScript:void(0);" onclick="setAddress(this.id)" id="<?php echo $i;?>">
       <address> 
          <div id="selected_<?php echo $i;?>" class="selectedImage" style="float: right; margin: -6px; display: none;"><img src="<?php echo $this->getSkinURl()?>images/right.jpg" /></div>
         <?php echo $data['firstname'].' '.$data['lastname'].'<br />';?>
         <?php echo $data['street'].'<br />';?>
         <?php echo $data['city'].','.$data['region'].','.$data['postcode'].'<br />';?>
         <?php $country_name = Mage::app()->getLocale()->getCountryTranslation($data['country_id']);?>
         <?php echo $country_name.'<br />';?>
          <?php echo 'T: '.$data['telephone'];?>
       </address>
    </a>
 </div>
 <?php $i++; endforeach; ?>  
 </div>


<li id="addNewtext"><a href="javaScript:void(0);" onclick="setNewAddress()"><?php echo $this->__('Click to Add new address') ?></a></li>

/*End of New code start*/

I have added javascript and jQuery function in same file at the bottom of the page.

<script type="text/javascript">
function setAddress(obj)
{
    document.getElementById('shipping-address-select').selectedIndex = obj;
    jQuery(".selectedImage").hide();
    jQuery("#selected_"+obj).show();
    jQuery("#shipping-new-address-form").hide();
    jQuery("#addNewtext").show();
}
function setNewAddress()
{
    jQuery("#shipping-address-select").find("option:contains('New Address')").each(function()
    {
     if( jQuery(this).text() == 'New Address' )
     {
        jQuery(this).attr("selected","selected");
        jQuery("#shipping-new-address-form").show();
        jQuery("#addNewtext").hide();
        jQuery(".selectedImage").hide();
      }
    });
}
</script>  


Hit like or leave comment if post help!

2 comments: Click to see all comments

  1. Here is a guide to help you decide what beauty essentials to bring on your trip,
    to ensure you have beautiful, flawless skin all the whole way through.
    More specifically, using coconut oil as an antioxidant.
    Toning helps remove all traces of dirt, grease and excess cleanser.


    My homepage :: face lift cream

    ReplyDelete
  2. Cheers. Used the code to rewrite the select box as I needed to add some classes

    ReplyDelete

 

Copyright @ 2013 Magento.