How to create magento 2 blocks with blocks builder
16
How To Create Magento 2 Blocks With Blocks Builder In this post, we will show you how to create magento 2 blocks in 2 ways. The first one is to write code to test out functionality. The second one is to use magento 2 blocks builder. This tool is included in Magento 2 Page Builder extension. Learn more here.
-
Upload
alesiamagento -
Category
Software
-
view
104 -
download
2
Transcript of How to create magento 2 blocks with blocks builder
How To Create Magento 2 Blocks With Blocks Builder
In this post, we will show you how to create magento 2 blocks in 2 ways. The first one is to write code to test out functionality. The second one is to use magento 2 blocks builder. This tool is included in Magento 2 Page Builder extension. Learn more here.
1. How To Create Magento 2 Blocks by writing code
1.1 Create a module.xml in in app/code/Lof/HelloWorld/etc
<?xml version="1.0"?><config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd"> <module name="Lof_HelloWorld" setup_version="1.0.0"> </module></config>
1.2. Create app/code/Lof/HelloWorld/registration.php file
<?phpMagentoFrameworkComponentComponentRegistrar::register( MagentoFrameworkComponentComponentRegistrar::MODULE, 'Lof_HelloWorld __DIR__ );
1.3. Create a layout file in the following directory
• appcodeLofHelloWorldViewfrontendlayoutcms_index_index.xml• The cms_index_index.xml name will make our block only
appear on the home page (module_controller_action.xml).<?xml version="1.0"?><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="LofHelloWorldBlockHelloWorld" before='-' template="helloworld.phtml"/> </referenceContainer> </body></page>
1.4 Lets create a block for our module. Create block
file app/code/Lof/HelloWorld/Block/HelloWorld.php
<?phpnamespace LofHelloWorldBlock; /*** Helloworld Block*/class Helloworld extends MagentoFrameworkViewElementTemplate{ public function getTitle() { return __("LOF Hello World"); }}
• 1.5 Create a template file app/code/Lof/HelloWorld/View/frontend/templates/helloworld.phtml
• 1.6 Active Lof_HelloWorld extensionWe have two ways to active Lof_Helloworld extension
1.6.1 Open Command line in folder root of magento and run commands:
php bin/magento setup:upgrade
1.6.2 Directly edit file app/etc/config.xml: In the array module, add the element: ‘Lof_Helloworld’ => 1
1.7. Run the command line refresh cache and check home page
php bin/magento cache:flush
2.How to create block with block builder.
• Ves Block Builder is one of amazing tool that let you to build any type of blocks with ease. This tool included in Magento 2 Page Builder extension
2.1 Add block profile
2.2 Design your block
– Prefix class: This class is to custom– Enable container: If you want to enable container, you can select yes and vice versa– Use backup layout: You can take use of backup layout from select box– Design in: This funtions lets you create responsive blocks on lagre screen, laptop, tablets, mobile.
– Enable Grid: you can enable/disable grid
3 Manage blocks
Learn more: http://landofcoder.com/magento-2-page-builder.html/
Thank you for your attention
View detail: landofcoder.comBrought by Venus Team with love
