How to Get Store Information on Magento 2 Checkout Page by Knockout Js

Knockout is a JavaScript library that is widely used to develop the Magento 2 frontend part, particularly the checkout page. You can create dynamic pages based on the user’s action as Knockout implements the Model-View-View Model (MVVM) design pattern. With the introduction to the Knockout Js in Magento 2, it’s now become easy to develop responsive frontend components such as date picker, color picker, custom image viewer, popups, and other custom design elements which contribute a lot to UI convenience.

Even though this huge pool of benefit Knockout Js offers, it’s quite complicated to implement it in Magento 2. You may also love to read our another blog post on How to Configure Checkout Totals Sort Order in Magento 2.

Think of the website where you have set up store information for multiple stores and you require to show store information like store ID, store name, URL, phone number, email address and store website on the checkout page. You can also select shipping rate in the checkout page in Magento 2 to know which shipping rate is chosen by customers for customizable and information purpose. Today, I’ve come up with the solution to get store information on Magento 2 checkout page by Knockout Js.

Steps to get store information on Magento 2 checkout page by Knockout Js

1. Create app/code/[NameSpace]/[ModuleName]/etc/frontend/di.xml
   
   <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="lib/internal/Magento/Framework/ObjectManager/etc/config.xsd"> <type name="Magento\Checkout\Model\DefaultConfigProvider"> <plugin name="rh-checkout-summary-modify" type="[NameSpace]\[MOduleName]\Plugin\CheckoutSummaryModify" sortOrder="10" /> </type> </config>

   1 2 3 4 5 6

   <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">     <type name="Magento\Checkout\Model\DefaultConfigProvider">         <plugin name="rh-checkout-summary-modify" type="[NameSpace]\[MOduleName]\Plugin\CheckoutSummaryModify" sortOrder="10" />     </type> </config>

    
2. Create app/code/[NameSpace]/[ModuleName]/Plugin/CheckoutSummaryModify.php
   
   <?php namespace [NameSpace]\[MOduleName]\Plugin; class CheckoutSummaryModify { /** * @var \Magento\Store\Model\StoreManagerInterface */ protected $storeManager; /** * @param \Magento\Store\Model\StoreManagerInterface $storeManager */ public function __construct( \Magento\Store\Model\StoreManagerInterface $storeManager ) { $this->storeManager = $storeManager; } public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, $result) { $items = $result['totalsData']['items']; foreach ($items as $key => $value) { $items[$key]['storeName'] = $this->storeManager->getStore()->getName(); } $result['totalsData']['items'] = $items; return $result; } } ?>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

   <?php   namespace [NameSpace]\[MOduleName]\Plugin;   class CheckoutSummaryModify {       /**      * @var \Magento\Store\Model\StoreManagerInterface      */     protected $storeManager;       /**      * @param \Magento\Store\Model\StoreManagerInterface $storeManager      */     public function __construct(         \Magento\Store\Model\StoreManagerInterface $storeManager     ) {         $this->storeManager = $storeManager;     }     public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, $result) {         $items = $result['totalsData']['items'];         foreach ($items as $key => $value) {             $items[$key]['storeName'] = $this->storeManager->getStore()->getName();         }         $result['totalsData']['items'] = $items;         return $result;     } } ?>

    
3. Now, copy the file from
   vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html
   and add it to app/design/frontend/Vendor/YourTheme/Magento_Checkout/web/template/summary/item/details.html and add below line of code:
   
   <strong class="store-name" data-bind="text: $parent.storeName"></strong>

   1	<strong class="store-name" data-bind="text: $parent.storeName"></strong>

   After:
   
   <strong class="product-item-name" data-bind="text: $parent.name"></strong>

   1	<strong class="product-item-name" data-bind="text: $parent.name"></strong>

    
4. Deploy the files and clean the cache.

Implementing the above code, you will be able to get store information on Magento 2 checkout page by Knockout Js. Comment down if you stuck somewhere or have any queries, I would be happy to help 🙂 Don’t forget to share the solution with your Magento buddies.