Create a Magento layout block and display it on a page

Create a Standard Magento PHTML Block

Before creating a Knockout.js template or component, we must first create a standard Magento PHTML block. We’ll define this within a layout XML file.

1. Create a new file within your module route at view/frontend/layouts.
2. The format for the file name should be: routeID_controllerName_actionName.xml. For this example, it will be inventory_fulfillment_index_index.xml.

Define the Standard Layout File

To define a standard layout file, follow these steps:

1. Add the block to the main content container within Magento.
2. Use a <referenceContainer> tag for this purpose.
3. The container to reference is “content”.

Within the <referenceContainer> tag, define the <block> tag. The name of this block will be “shipping_plan”. Assign a template to it with the path Macademy_InventoryFulfillment::shipping-plan.phtml. This will be a self-enclosing tag.

To make the layout a one-column layout, go to the <page> node and create a new attribute named “layout”. Assign it the value “1column”.

Create the Shipping-plan.phtml File

Next, create the shipping-plan.phtml file:

1. Within the view/frontend folder, create another folder named “templates”.
2. The file to create will be named shipping-plan.phtml.

Inside the block template file, create a new <div> tag with the “id” set to “shipping-plan”. Then, close the tag.

Verify the Layout on the Frontend

To check if the layout is working correctly:

1. Go back to the frontend of the site at the /inventory-fulfillment route.
2. Reload the page.
3. Since the <div> is empty, inspect the contents of the page.
4. Expand the inspector, go into the columns, column main, and look for the <div> with the “id” of “shipping-plan”.

If the <div> with the “id” of “shipping-plan” is present, the layout has been set up correctly.