Magento 2 adding custom block to product page with show hide function

Magento 2 has a whole new process for adding custom content on product pages. Gone is the local.xml file as well as the catalog.xml file.
In it’s place, each module has it’s own set of layout files and templates.
In today’s example, we are going to be adding a custom content block to the product view page.
This block will display different static blocks based on the value of the chart attribute.

The first step is to add the chart attribute to your store. It will need to be a Dropdown attribute, since we are going to tie into that for displaying the appropriate block.

Once that is done, we’ll add the new block to the app/design/frontend/ThemePackage/Theme/Magento_Catalog/layout/catalog_product_view.xml file.

Then, we’ll upload a new template, called chart.phtml to the app/design/frontend/ThemePackage/Theme/Magento_Catalog/templates/product/view/ folder.
This should show a new block on the product view page.

Inside we are going to be showing a View Size Chart link. When the link is clicked on, it will display a block with the appropriate static block based on the chart attribute.
This will be done via a combination of some conditional logic and jquery. Magento 2 includes jquery, so it’s much easier to incorporate it on a page.
For detailed instructions click on Charts download link below.
Charts (1273)
Good luck!!

If you are looking for a web development company to help you make the transition from another platform to Magento, Woolley Design can help.

Woolley Design is located in the US. We don’t outsource. All work is performed by US based Magento developers, and at affordable prices.

Contact us for a quote.

This entry was posted in Magento, Uncategorized. Bookmark the permalink.