How to Convert Shipping Address into HTML Format using Magento 2?

Hello Magento Friends,

In today’s Magento 2 guide, I will explain How to Convert Shipping Address into HTML Format using Magento 2?

The shipping address information for eCommerce businesses helps to successfully deliver orders to customers. However, presenting this address in a visually appealing and organized format on your website can enhance the user experience and improve the overall professionalism of your store.

Let’s learn How to Convert Shipping Address into HTML Format using Magento 2.

Contents

1 Steps to Convert Shipping Address into HTML Format using Magento 2:
2 Conclusion:

Steps to Convert Shipping Address into HTML Format using Magento 2:

Step 1: Create a Data.php file inside the Helper folder.

app\code\Vendor\Extension\Helper

Then add the code as follows.

<?php
namespace Vendor\Extension\Helper;

use Magento\Framework\App\Helper\AbstractHelper;

class Data extends AbstractHelper
{
   protected $orderRepository;
   protected $_addressConfig;

   public function __construct(
         \Magento\Sales\Api\OrderRepositoryInterface $orderRepository,
         \Magento\Customer\Model\Address\Config $addressConfig
         )
   {
       $this->orderRepository = $orderRepository;
       $this->_addressConfig = $addressConfig;
   }
   
   public function _getAddressHtml($orderId)
    {
        try {
            $order = $this->orderRepository->get($orderId);
        } catch (NoSuchEntityException $e) {
            throw new \Magento\Framework\Exception\LocalizedException(__('This order no longer exists.'));
        }
        $address = $order->getShippingAddress();
        $renderer = $this->_addressConfig->getFormatByCode('html')->getRenderer();
        return $renderer->renderArray($address);
    }
}

Step 2: Now, create the Address.php file inside the Block folder.

app\code\Vendor\Extension\Block

Then add the code as below.

<?php

namespace Vendor\Extension\Block;
use Vendor\Extension\Helper\Data as Helper;

class Address extends \Magento\Framework\View\Element\Template
{
    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Framework\Registry             $registry
     * @param \Magento\Framework\Data\FormFactory     $formFactory
     * @param array                                   $data
     */     
     protected $helper;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Data\FormFactory $formFactory,
         Helper $helper,
        array $data = []
    )
    {    
       parent::__construct($context, $data);
       $this->helper = $helper;
    }

    public function getAddressHtml($orderId)
    {
       return $this->helper->_getAddressHtml($orderId);
        
    }
}

Step 3: Then, create a layout file inside the layout folder.

Vendor/Extension/view/frontend/layout/your_layout_file.xml

Add the code as follows.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> 
    <body>
        <referenceContainer name="content">
            <block template="Vendor_Extension::template.phtml" class="Vendor\Extension\Block\Address" name="address.html"/>
        </referenceContainer>
    </body>
</page>

Step 4: Now, create a template.phtml file inside the templates folder

Vendor/Extension/view/frontend/templates/template.phtml

Then add the code as given below.

<?php
    $orderId = 1;
    $shippingAddress = $block->getAddressHtml($orderId);
    $shippingFormat = strip_tags($shippingAddress);
    echo $shippingFormat;   
?>

Conclusion:

By following these steps, you can easily modify the shipping address display to match your store’s design and branding, contributing to a more polished and professional online shopping experience. You can also Add Shipping Address Details in Order Grid in Magento 2.

If you have any difficulty converting the shipping address into HTML format, you can drop a comment here.

Happy Coding!

Click to rate this post!

[Total: 0 Average: 0]

Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate ?️ Certified Magento Developer?‍?. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.?