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

Here is my code of template file.

            var skus = $('#skus1').val();                 
            skus = skus.replace(/,\s*$/, '');
            var res = skus.split(",");      
                    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.

    $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('Magento\Catalog\Model\Product')->getIdBySku(trim($recentSku));

            $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
            $product = $objectManager->create('Magento\Catalog\Model\Product')->load($productId);               
            $product_title = $product->getName(); //Get Product Name
            $StockState = $objectManager->get('\Magento\CatalogInventory\Api\StockStateInterface');
            $qty = $StockState->getStockQty($productId, $product->getStore()->getWebsiteId()); 
            $prodUrl = $product->getProductUrl();
            $helperImport   = $objectManager->get('\Magento\Catalog\Helper\Image');
            $priceHelper = $objectManager->create('Magento\Framework\Pricing\Helper\Data'); 

            $helperImport = $objectManager->get('\Magento\Catalog\Helper\Image');               
            $imageUrl = $helperImport->init($product, 'product_page_image_small')
            ->setImageFile($product->getSmallImage()) // image,small_image,thumbnail
            $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('\Magento\Catalog\Block\Product\ListProduct'); 
            $formKey = $objectManager->create('\Magento\Framework\Data\Form\FormKey')->getFormKey();    
            $addToCartUrl =  $listBlock->getAddToCartUrl($product); 
            $product = $objectManager->create("Magento\Catalog\Model\Product")->loadByAttribute('sku', $productSku);
            $reviewFactory = $objectManager->create('Magento\Review\Model\Review');
            $storeManager  = $objectManager->create('\Magento\Store\Model\StoreManagerInterface');
            $storeId = $storeManager->getStore()->getStoreId();
            $reviewFactory->getEntitySummary($product, $storeId);

            $ratingSummary = $product->getRatingSummary()->getRatingSummary();
            $reviewCount = $product->getRatingSummary()->getReviewsCount();
            $getBaseUrl = $storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::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" : '';
            $ratingText =  ":Rating";
            $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>
                <div class="product details product-item-details">

                <div class="product-reviews-summary short">
                <div class="rating-summary">
                <span class="label"><span>'.$ratingText.'</span></span>
                <div class="reviews-actions">
                <a class="action view" href="'.$reviewlink.'">'.$reviewCount.'</a>
                <strong class="product name product-item-name">
                <a class="product-item-link" href="'.$prodUrl.'">
                <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>

                <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>



    $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!!

  • You can use product layout, load that block set your product and call toHtml and pass that data into your ajax response. But in that you need to some customization for your JS file which changes the swatches and prices, you need to add them on your layout file Jul 17, 2019 at 3:40
  • @AshishRanade, can u please update me code for that.
    – Manjunath
    Jul 17, 2019 at 5:51


Your Answer

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