I'm new to Magento. In Magento 2, the product page, I would like to add a script to do something (show/hide some customized elements)
associate with this option block:
\Magento\Catalog\Block\Product\View\Options
I have a child-theme of Blank to customized the website and try to extend the product view:
app/design/frontend/Vendor/mytheme
|_/Magento_Catalog/
|_/layout/
|_/templates/
|_/products/view/options.phtml
|_/web/
|_/web/js/do_something.js
What is the best way to add additional block of code and the script to this options.phtml?
<div>
This is the block of code need to be added before product variations.
For more information, please <button>[ click here ]</button>
</div>
And clicking on the button would open the so_something.js script.
Such as before #product_addtocart_form
?
Can I create a separate file for the block only, then how to code them to locate it before #product_addtocart_form
, so the options.phtml
kept intack? I don't want to overwrite it.
I learned from Magento2 Unit Three (Core Principles for Theming in Magento 2). We can extend page layouts. Can I add it by adding an extending page layout file (catalog_product_view.xml), such as:
app/design/frontend/Vendor/mytheme
|_/Magento_Catalog/
|_/page_layout
|--catalog_product_view.xml