Get selected Attributes / Options with JS in the PDP of a configurable product

Ask your questions
1

I’m new in Magento2 and I’ve a very specific use case where I need to get the selected values of the attributes of a configurable product in the front end side with JavaScript.

Currently, In the catalog I’ve created a configurable product with 2 attributes and 2 options for each attributes, so I’ve, Upholstery with values Green and Gray and the Legs also with two values Metal and Wood. Magento2 has created 5 products in the database, 1 for the single product and 4 for the variations. Green|metal, green|wood, gray|metal and gray|wood, everything good so far.

I’m already able to see the product and the configuration panel in the PDP (Product Detail Page) of the product. Now for the next step I’ve loaded an external library that includes 2 files, one is a JS and the other one is a CSS file, the JS script expects to receive the values selected from the configuration panel each time it changes. So I’ve also created a js.phtml file to execute the script.

To load the external library, I’ve modified the file: /app/design/frontend/Magento/luma/Magento_Catalog/layout/catalog_product_view.xml by adding the below tags:

<head>
     <script src="https://path.to.file.js" src_type="url"/>
     <css src="https://path.to.file.css" src_type="url"/>
</head>

And in the same file I’ve added the below block of code to load the phtml file

<referenceContainer name="content">
   <block class="Magento\Framework\View\Element\Template" name="plugin.js" as="plugin.js" template="Magento_Catalog::product/js.phtml"/>
   </referenceContainer>

The content of the phtml file that is stored here: app/design/frontend/Magento/luma/Magento_Catalog/templates/product/js.phtml is this:

<script>
    // <![CDATA[
    require([
        'jquery',
    ], function($) {
       console.log('js loaded’);
       // here is where I need to load the script and listen for the events triggered each time the variation is changed through the configuration panel.
    });
    // ]]>
</script>

So far I’m able to see my scripts loaded in the frontend side but now I don’t find a good tutorial or documentation to do the rest, as I mentioned with JS I need to get the selected variation, so for example if the customer selects the combination Upholstery -> Green| Legs -> metal I need both values to be received by the script,

I tried to check the html elements generated by magenta but they seem to have internal Ids referring to the super attribute, so it doesn’t work for me :confused: it is also important to mention that even the labels are displayed this is not the information that I need, when I created the products with magento it allowed me to define a code for each option so I need the options not the labels

Any ideas how I can access to these values?