2

I created a custom page, where users can input SKU of product and after they submit the button, its load product details, like name, image and a configurable option for configurable product.

Here is the issue: I get the SKU from the input field, but product details are not loading on my view page, or details not successfully sent from the controller to view(Actually from block to view, as some page suggested).

I am following the answer: Magento 2 - Send form data to Controller using AJAX and return Result to PHTML

File: viewproduct.phtml

Path

SimpleMagento/AddBulkProduct/view/frontend/templates/viewproduct.phtml

<form data-mage-init='{"validation": {}}' id="load_product">
   <div class="control">
       <input type="text" name="get_product" id="get_product" class="input-text" placeholder="<?= __('Product SKU') ?>" data-validate="{required:true}" />
   </div>
   <button type="submit" class="action-primary"><?= _('Submit') ?></button>
</form>


<?php
echo $test = $block->getProductBySku();
//var_dump($test); exit();
?>

<script>
 require(['jquery'],function(){
    jQuery(document).ready(function() {
        jQuery("#load_product").submit(function(){

            var getProduct = jQuery("input[name='get_product']").val();

            var url = "<?php echo $block->getBaseUrl().'AddBulkProduct/loadproduct/Index/' ?>";
             jQuery.ajax({
                url: url,
                type: "POST",
                data: {get_product:getProduct},
                showLoader: true,
                cache: false
                success: function(response){
                    console.log(response.output);
                }
            });
            return false;
         });
     });
 });
</script>

File: viewproduct_loadproduct_index.xml

Path

SimpleMagento/AddBulkProduct/view/frontend/layout

<body>
    <referenceContainer name="content">
        <block class="SimpleMagento\AddBulkProduct\Block\Index"  template="SimpleMagento_AddBulkProduct::viewproduct.phtml">

        </block>
    </referenceContainer>
</body>

File: Index.php (Controller)

Path

SimpleMagento/AddBulkProduct/Controller/loadproduct/Index.php

public function execute()
{
    $getProduct = $this->getRequest()->getParam('get_product');
    $result = $this->jsonFactory->create();
    $resultPage = $this->pageFactory->create();
    $block = $resultPage->getLayout()
        ->createBlock('SimpleMagento\AddBulkProduct\Block\Index')
        ->setTemplate('SimpleMagento_AddBulkProduct::viewproduct.phtml')
        ->setData('get_product',$getProduct)
        ->toHtml();
    $result->setData(['output' => $block]);
    return $resultPage;
}

File: Index.php (Block)

Path

SimpleMagento/AddBulkProduct/Block/Index.php

class Index extends Template
{
   /**
   * @var ProductRepositoryInterface
   */
    protected $productRepository;

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

    public function getProductBySku($sku)
    {
       return $this->productRepository->get($sku);
    }
}

Current Situation: As a new in Magento, Please tell me if I am using a correct flow or not?

As per my understanding, I am using the block to pass data from controller to my phtml file, but after using block, Magento's default layout is not showing just basic html input text and button, How can I restore my layout?

Currently after press submitting button, its just reloading with '?get_product=24-MB01' url.

Any help or suggestion would be appreciated.

Thanks

Improve this question

1 Answer 1

Reset to default
1

It's not showing you anything because, you didn't pass sku in getProductBySku() in this function in phtml file.

As I understand your requirement, you don't need to create function in block and pass to phtml file.

You just pass data from controller when ajax request send. Like this below way : 

$block = $resultPage->getLayout()
        ->createBlock('Magento\Framework\View\Element\Template')
        ->setTemplate('SimpleMagento_AddBulkProduct::viewproduct.phtml')
        ->setData('customproduct','yourdata')
        ->toHtml();

and get data in phtml using this below code :

$block->getCustomproduct();

Hope, It will helpful for you.

Improve this answer

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.