How we can get simple product data from configurable product through ajax from swatches

Question

Hi can you help me for this query Please

hi here is my code I want to show the product data on product page

  <?php  
namespace Meter\Calculation\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;

class Index extends Action
{
    protected $_productRepository;

    public function __construct(
        Context $context,
        \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
    )
    {
        $this->_productRepository = $productRepository;
        parent::__construct($context);
    }

    public function execute()
    {
        $id = $this->getRequest()->getParam('id');
        echo $this->_productRepository->getById($id)->getSku();        
    }

}

---

when i click on swatches then I get both product id but I want to get single product id from swatches when I will be click on swatches please help me

<?php $_product = $block->getProduct(); ?>
<?php 
$productTypeInstance = $_product->getTypeInstance();
if ($_product->getTypeId() == "configurable" ):
    $usedProducts = $productTypeInstance->getUsedProducts($_product);
?>    
<?php foreach ($usedProducts as $childProduct) { ?> 

    <div class="pro_conf" style="display: none;">
        <h1>Get the configurable Product Ids <?php echo $childProduct->getId(); ?></h1>
    </div>
<?php } ?>
<?php endif; ?>

Answer 1

here is my script code get the product data through ajax but I want to render the custom data of product on product page

    <script type="text/javascript">
    require(['jquery','underscore'], function(jQuery,_){
        jQuery(window).load(function(){
            jQuery( ".product-options-wrapper div" ).click(function() {
                selectedProduct();
            });
        });

        function selectedProduct() {
            var selected_options = {};
            jQuery('div.swatch-attribute').each(function(k,v){
                var attribute_id    = jQuery(v).attr('data-attribute-id');
                var option_selected = jQuery(v).attr('data-option-selected');
                if(!attribute_id || !option_selected){ return;}
                selected_options[attribute_id] = option_selected;
            });

            var product_id_index = jQuery('[data-role=swatch-options]').data('mageSwatchRenderer').options.jsonConfig.index;
            var found_ids = [];
            jQuery.each(product_id_index, function(product_id,attributes){
                var productIsSelected = function(attributes, selected_options){
                    return _.isEqual(attributes, selected_options);
                }
                if(productIsSelected(attributes, selected_options)){
                    console.log(product_id);
                    jQuery.ajax({
                        url: "<?php echo $block->getUrl('meter'); ?>",
                        type: "POST",
                        data: {id:product_id},
                        showLoader: false,
                        cache: false,
                        success: function(response){
                            jQuery(".pro_conf").show();
                            console.log(response);
                            console.log("success");
                        }
                    });
                } 
            });
        }
    });
</script>