Ttdfjt

I am loading the Product Collection by calling the ajax request.

Here is my code of template file.

$('#modifyRecentAddSkus1').on('click',function()
 var skus = $('#skus1').val(); 
 skus = skus.replace(/,s*$/, '');
 var res = skus.split(","); 
 $.ajax(
 url: 'test1.php?skus='+skus,
 type: "POST",
 success : function(result) 
 $('#originalRecentHtml1 .product-thumbset').html(result);
 );
 
 );

Where #sku1 html is like below.

 <input id="skus1" value="20057959, 20058000, 20057925, 20057967, 20057977, 20057974" type="hidden"> <!-- Here is the comma separated skus -->

Then this is the code of my test1.php file.

if(isset($_REQUEST['skus'])) 
 $recentSkuArr = explode(',',$_REQUEST['skus']);
 $html = '';
 $currencySymbol = '£';
 $html .= '<div class="products wrapper grid products-grid">
 <ol class="products list items product-items">';
 $i = 0;
 foreach($recentSkuArr as $recentSku)
 if($recentSku !='') 
 $qty = 0; 
 $productId = $objectManager->get('MagentoCatalogModelProduct')->getIdBySku(trim($recentSku));

 $objectManager = MagentoFrameworkAppObjectManager::getInstance();
 $product = $objectManager->create('MagentoCatalogModelProduct')->load($productId); 
 $product_title = $product->getName(); //Get Product Name
 $StockState = $objectManager->get('MagentoCatalogInventoryApiStockStateInterface');
 $qty = $StockState->getStockQty($productId, $product->getStore()->getWebsiteId()); 
 $prodUrl = $product->getProductUrl();
 $helperImport = $objectManager->get('MagentoCatalogHelperImage');
 $priceHelper = $objectManager->create('MagentoFrameworkPricingHelperData'); 

 $helperImport = $objectManager->get('MagentoCatalogHelperImage'); 
 $imageUrl = $helperImport->init($product, 'product_page_image_small')
 ->setImageFile($product->getSmallImage()) // image,small_image,thumbnail
 ->resize(380)
 ->getUrl();
 $imageUrl = str_replace('pub/','',$imageUrl);
 $price = $priceHelper->currency($product->getFinalPrice(), true, false); 
 $productSku = $product->getSku();

 //you can also use load($id) if you know product id

 $listBlock = $objectManager->get('MagentoCatalogBlockProductListProduct'); 
 $formKey = $objectManager->create('MagentoFrameworkDataFormFormKey')->getFormKey(); 
 $addToCartUrl = $listBlock->getAddToCartUrl($product); 
 $product = $objectManager->create("MagentoCatalogModelProduct")->loadByAttribute('sku', $productSku);
 $reviewFactory = $objectManager->create('MagentoReviewModelReview');
 $storeManager = $objectManager->create('MagentoStoreModelStoreManagerInterface');
 $storeId = $storeManager->getStore()->getStoreId();
 $reviewFactory->getEntitySummary($product, $storeId);

 $ratingSummary = $product->getRatingSummary()->getRatingSummary();
 $reviewCount = $product->getRatingSummary()->getReviewsCount();
 $getBaseUrl = $storeManager->getStore()->getBaseUrl(MagentoFrameworkUrlInterface::URL_TYPE_WEB);
 $ratingSummary = isset($ratingSummary) ? "<div class='rating-result' title='".$ratingSummary."%'>
 <span style="width:'".$ratingSummary."%"><span>'".$ratingSummary."%'</span></span>
 </div>" : '';
 $reviewCount = isset($reviewCount) ? $reviewCount."&nbsp;<span>Review</span>" : '';
 $reviewlink = isset($reviewCount) ? $prodUrl."#reviews" : '';
 if(!empty($ratingSummary))
 
 $ratingText = ":Rating";
 
 else
 
 $ratingText = "";
 

 if($qty > 0) 
 $html .= '<li class="item product product-item"> 
 <div class="product-item-info" data-container="product-grid">
 <a href="'.$prodUrl.'" class="product photo product-item-photo" tabindex="-1">
 <span class="product-image-container" style="width:240px;">
 <span class="product-image-wrapper" style="padding-bottom: 125%;">
 <img class="product-image-photo" src="'.$imageUrl.'" width="240" height="300" alt="Tye Missa Euge Bone CD"></span>
 </span>
 </a>
 <div class="product details product-item-details">

 <div class="product-reviews-summary short">
 <div class="rating-summary">
 <span class="label"><span>'.$ratingText.'</span></span>
 '.$ratingSummary.'
 </div>
 <div class="reviews-actions">
 <a class="action view" href="'.$reviewlink.'">'.$reviewCount.'</a>
 </div>
 </div>
 <strong class="product name product-item-name">
 <a class="product-item-link" href="'.$prodUrl.'">
 '.$product_title.'</a>
 </strong>
 <div class="price-box price-final_price" data-role="priceBox" data-product-id="5641">
 <span class="price-container price-final_price tax weee">
 <span id="product-price-'.$productId.' data-price-amount='.$price.' data-price-type="finalPrice" class="price-wrapper ">
 <span class="price">'.$price.'</span> </span>
 </span>
 </div> 

 <form action="'.$getBaseUrl.'vendor/index/Productadd/" method="post"> 

 <input type="hidden" name="productId" value='.$productId.'>
 <button type="submit" title="Add to Basket" class="action tocart primary">

 <span>Add to Cart</span>
 </button>
 </form>

 </div>
 </div>
 </li>';
 $i++;
 

 

 
 $html .= '</ol> </div>'; 
 echo $html; 

From above code I am getting the HTML as response, then I am attaching the content to the div.

The above code works fine for all simple products,but my question here is How to load the html for configurable products over here.

Where all color and size attributes should show with price changing when selection is made.

Can anyone help me to achieve this functionality please. Thanks!!