Magento 2 Module

How to display a static block in a popup in Magento 2

Hide/Show description

Hi everybody, I am Cuong, Welcome back to my Magento 2 tutorial video series. #magento2tutorial Today, I am going to show everybody a best practice, How to display a static block in a popup in Magento 2. What will you get after completing this practice? You will understand: 1. How to show a static block from a template phtml file in Magento 2 2. How to create a popup in Magento 2 3. How to add a block into a layout Requirements: We are going to add a text link below the box select size and color on the product detail page. When the customer clicks this text link, the popup is going to show and displaying the content of a static block. This helps to consult the customer How to choose the right size for an item. We will add the text link there. Let's do this practice, you need to follow steps by step: Step 1: Declaring a new module called PHPCuong_PopupContent - Create the namespace PHPCuong in the path app\code. - Create the module named PopupContent in the path app\code\PHPCuong. - Create the file named registration.php in the path app\code\PHPCuong\PopupContent - Create the file named module.xml in the path app\code\PHPCuong\PopupContent\etc End of the step #1, I have been completed the step to create a new module called PHPCuong_PopupContent. Step 2: Create the new block - Before creating a new block, we need to determine the layout file and the position we need to add this block. - We only add this block to the configurable products, so the layout file will be catalog_product_view_type_configurable.xml - Let's determine the position we will add the new block, we need to enable the Template Path Hints for Storefront, Log into the backend and navigate to the STORES → Settings → Configuration → Advanced → Developer - The block name we will reference the product.info.options.wrapper - Create the new file catalog_product_view_type_configurable.xml in the path app\code\PHPCuong\PopupContent\view\frontend\layout - Create the new file choose-size.phtml in the path app\code\PHPCuong\PopupContent\view\frontend\templates\product\consulting You can learn How to use the Modal widget in the link https://devdocs.magento.com/guides/v2.2/javascript-dev-guide/widgets/widget_modal.html Step 3: Create a new static block - Log into the backend and navigate to the Content → Elements → Blocks → Add New Block - Enter the block information Step 4: Test and See the results Run the commands line following: php bin/magento setup:upgrade --keep-generated (Install the new modules) php bin/magento cache:flush (flush caches) Go to the product page. Yeah, it works perfectly. Thank you for your watching. If you have any questions about this practice please feel free to leave a comment below. Don't forget to like, comment, share and subscribe to my channel for getting the latest videos. Please do not hesitate to contact me if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2. Get the source codes of this practice in the Github https://github.com/php-cuong/magento2-popup-widget

Today Hex Color Code

#052418
#264539
#47665a
#68877b
#89a89c
#aac9bd