Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Change shipping address dropdown to list view at checkout page Magento


shipping address dropdown to list view

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.

Magento shipping address dropdown to list view


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.

  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
  3. Thank you so much.. it works fine...

    But 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???

    ReplyDelete
  4. 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

 

Copyright @ 2017 HKBlog.