Hi can you help me for this query Please

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

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;

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


enter image description here

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(); ?>
$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>
<?php } ?>
<?php endif; ?>
  • please explain little bit more?
    – Mehran
    Commented Feb 3, 2022 at 8:02
  • Hi, I want to show the custom attribute data in configurable product from the simple when I click on swatches then load the simple product data through ajax
    – moazzams
    Commented Feb 3, 2022 at 8:15

1 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( ".product-options-wrapper div" ).click(function() {

        function selectedProduct() {
            var selected_options = {};
                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)){
                        url: "<?php echo $block->getUrl('meter'); ?>",
                        type: "POST",
                        data: {id:product_id},
                        showLoader: false,
                        cache: false,
                        success: function(response){

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.