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!
Please support us, Like us on Facebook.
Subscribe to:
Post Comments (Atom)
Here is a guide to help you decide what beauty essentials to bring on your trip,
ReplyDeleteto 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
Cheers. Used the code to rewrite the select box as I needed to add some classes
ReplyDeleteWorking Fine
ReplyDeleteThankyou so much
Great Post Love it
ReplyDeleteThank you so much.. it works fine...
ReplyDeleteBut i want to highlight the address that my customer wants to shipping!
How my customers know on which address they get the parcel? How can i do that???
how to featch new address on shipping address.above your image related structure how to set please help me its same like myntra's checkout page shipping multiple time add new address..
ReplyDelete