Our Work

Add static Delivery Promise in Product View page in Magento 2

Updated today

Here we will see how to add static content to Product view page.

  • Create a module.
  • Add Delivery Promise template to PDP.

1.Module

1.1 Create module

Create module which is  extended from Magento_Catalog module.Please refer this article for Module Creation.
https://ktree.com/create-magento-2-module-custom.html

1.2 Folder structure

1.3 Other files other then default files

  1. app/code/KTree/Custom/view/frontend/layout/catalog_product_view.xml

  2. app/code/KTree/Custom/view/frontend/templates/catalog/product/deliverypromise.phtml

2. Add Delivery Promise template to PDP

  • Updates in are applied to the corresponding.

  • Layouts provide the structures for web pages using an XML file that identifies all the containers and blocks composing the page.

  • Containers assign content structure to a page using container tags within a layout XML file. A container has no additional content except the content of included elements. Examples of containers include the header, left column, main column, and footer.

  • Blocks render the UI elements on a page using block tags within a layout XML file. Blocks use templates to generate the HTML to insert into its parent structural block. Examples of blocks include a category list, a mini cart, product tags, and product listing.

  • In this example we are creating “product.info.deliverypromise”  block with custom template  and displaying that new block before the “product.info.addtocart” block.

File: app/code/KTree/Custom/view/frontend/layout/catalog_product_view.xml

<?xml version="1.0"?>
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="product.info.form.content">
        <block name="product.info.deliverypromise"
          template="KTree_Custom::catalog/product/deliverypromise.phtml"
           before="product.info.addtocart" />
    </referenceContainer>
</body>
</page>

File: app/code/KTree/Custom/view/frontend/templates/catalog/product/deliverypromise.phtml

<div><?php echo __('Delivery: Tomarrow')?>  </div>

Note: To get dynamic content create block and map to  “product.info.deliverypromise”

<block name="product.info.deliverypromise"
   class="Custom/blockname"//add your block name here
          template="KTree_Custom::catalog/product/deliverypromise.phtml"
           before="product.info.addtocart" />
  • The full source code can be downloaded from this Github link Add static Delivery Promise in PDP
  • After completion above steps, please run the "php bin/magento setup:upgrade" command and "php bin/magento setup:static-content:deploy"
  • The final output will be like below

Looking for Magento Developer?

Please Contact us if you have any Magento Implementation requirements. Hire dedicated Magento developers or Magento Development services from KTree. KTree is Best offshore Magento E-commerce development company with extensive experience in E-commerce development and Magento Plugins.

Request For Quote