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:
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
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