How to add my custom script/block to \Magento\Catalog\Block\Product\View\Options

Question

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

Answer 1

Yes, you can add your code to page.

First, you need to create a module (and block). For example, app/code/Vendor/MyModule.

Second, add this code in catalog_product_view.xml (mytheme).

<referenceContainer name="content">
    <block name="your-block" class="Vendor/MyModule/Block/Test" template="Vendor_MyModule/test.phtml">
</referenceContainer>