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.<\/p>\n\n\n\n
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<\/a>.<\/p>\n\n\n\n Think of the website where you have set up store information<\/a> 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<\/a> 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<\/strong><\/em>.<\/p>\n\n\n\n 1. Create app\/code\/[NameSpace]\/[ModuleName]\/etc\/frontend\/di.xml<\/strong><\/p>\n\n\n\n 2. Create app\/code\/[NameSpace]\/[ModuleName]\/Plugin\/CheckoutSummaryModify.php<\/strong><\/p>\n\n\n\n 3. Now, copy the file from After:<\/p>\n\n\n\n 4. Deploy the files and clean the cache.<\/p>\n\n\n\n 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 \ud83d\ude42 Don’t forget to share the solution with your Magento buddies.<\/p>\n","protected":false},"excerpt":{"rendered":" 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…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-767","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=767"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/767\/revisions"}],"predecessor-version":[{"id":10426,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/767\/revisions\/10426"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Steps to get store information on Magento 2 checkout page by Knockout Js<\/h2>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"lib\/internal\/Magento\/Framework\/ObjectManager\/etc\/config.xsd\">\n <type name=\"Magento\\Checkout\\Model\\DefaultConfigProvider\">\n <plugin name=\"rh-checkout-summary-modify\" type=\"[NameSpace]\\[MOduleName]\\Plugin\\CheckoutSummaryModify\" sortOrder=\"10\" \/>\n <\/type>\n<\/config><\/pre>\n\n\n\n
<?php\n\nnamespace [NameSpace]\\[MOduleName]\\Plugin;\n\nclass CheckoutSummaryModify {\n\n \/**\n * @var \\Magento\\Store\\Model\\StoreManagerInterface\n *\/\n protected $storeManager;\n\n \/**\n * @param \\Magento\\Store\\Model\\StoreManagerInterface $storeManager\n *\/\n public function __construct(\n \\Magento\\Store\\Model\\StoreManagerInterface $storeManager\n ) {\n $this->storeManager = $storeManager;\n }\n public function afterGetConfig(\\Magento\\Checkout\\Model\\DefaultConfigProvider $subject, $result) {\n $items = $result['totalsData']['items'];\n foreach ($items as $key => $value) {\n $items[$key]['storeName'] = $this->storeManager->getStore()->getName();\n }\n $result['totalsData']['items'] = $items;\n return $result;\n }\n}\n?><\/pre>\n\n\n\n
vendor\/magento\/module-checkout\/view\/frontend\/web\/template\/summary\/item\/details.html<\/strong>
and add it to app\/design\/frontend\/Vendor\/YourTheme\/Magento_Checkout\/web\/template\/summary\/item\/details.html<\/strong> and add below line of code:<\/p>\n\n\n\n<strong class=\"store-name\" data-bind=\"text: $parent.storeName\"><\/strong><\/code><\/pre>\n\n\n\n<strong class=\"product-item-name\" data-bind=\"text: $parent.name\"><\/strong><\/code><\/pre>\n\n\n\n