2

When a product is out of stock, customers will see a pop-up with a message to inform them that the product is no longer available. How can i do that. please help !!

2
  • overide catalog_product_view.xml and call a template file, in template get product stock status for current product and based on that status use a jquery to show out of stock message popup alert
    – Pramod
    Jul 25, 2022 at 6:10
  • @Pramod Please help me with that, i will appreciate it.
    – Bayzel
    Jul 25, 2022 at 6:17

2 Answers 2

1

This is the working solution for you

Create

app/code/Vendor/Module/etc/di.xml

 <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <preference for="Magento\Catalog\Block\Product\View\Additional" type="Vendor\Module\Block\Product\Additional" />
</config>

Then

app/code/Vendor/Module/Block/Product/Additional.php

 <?php
namespace Vendor\Module\Block\Product;

use Magento\Catalog\Block\Product\View\Additional as CoreAdditional;
use Magento\CatalogInventory\Api\StockRegistryInterface;
use Magento\CatalogInventory\Api\Data\StockItemInterface;

class Additional extends CoreAdditional
{
    /**
     * @var array
     */
    protected $_list;

    /**
     * @var string
     */
    protected $_template = 'Vendor_Module::product/view/additional.phtml';

    protected $registry;

    public function __construct(
        \Magento\Framework\Registry $registry,
        \Magento\Framework\View\Element\Template\Context $context,
        StockRegistryInterface $stockRegistry,
        array $data = []
    )
    {
        $this->registry = $registry;
        $this->stockRegistry = $stockRegistry;
        parent::__construct($context, $data);
    }

    /**
     * @return array
     */
    public function getChildHtmlList()
    {
        if ($this->_list === null) {
            $this->_list = [];
            $layout = $this->getLayout();
            foreach ($this->getChildNames() as $name) {
                $this->_list[] = $layout->renderElement($name);
            }
        }
        return $this->_list;
    }

    public function getCurrentProduct()
    {
        return $this->registry->registry('current_product');
    }

    /**
     * get stock status
     *
     * @param int $productId
     * @return bool 
     */
    public function getStockStatus()
    {
        $productId = $this->getCurrentProduct()->getId();
        /** @var StockItemInterface $stockItem */
        $stockItem = $this->stockRegistry->getStockItem($productId);
        $isInStock = $stockItem ? $stockItem->getIsInStock() : false;
        return $isInStock;
    }
}

Create a

app/code/Vendor/Module/view/frontend/templates/product/view/additional.phtml

 <?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
/** @var $block \Magento\Catalog\Block\Product\View\Additional */
?>
<?php foreach ($block->getChildHtmlList() as $_html) :?>
    <?= /* @noEscape */ $_html ?>
<?php endforeach; 

$productStatus = $block->getStockStatus();
if ($productStatus == 0):
?>

<div id="custom-popup-modal">
  <p>The product is out of stock</p>
</div>

<script>
require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            modalClass: 'custom-popup-modal',
            buttons: [{
                text: $.mage.__('Close'),
                class: '',
                click: function () {
                    this.closeModal();
                }
            }]
        };

        var popup = modal(options, $('#custom-popup-modal'));
        $( document ).ready(function() {
            $('#custom-popup-modal').modal('openModal');
        });     
    }
);
</script>

<?php endif; ?>

Hope this will help you, let me know if you have any query.

11
  • hi @Arun Kumar I reached an error of construct and then i have edited the file but it doesn't want to work
    – Bayzel
    Jul 25, 2022 at 7:32
  • Updated my answer please check again Jul 25, 2022 at 7:39
  • producrt page view shows: An error has happened during application run. See exception log for details.
    – Bayzel
    Jul 25, 2022 at 7:45
  • Check execption.log and debug.log in var/logs Jul 25, 2022 at 7:47
  • it doesn't work
    – Bayzel
    Jul 25, 2022 at 8:08
0

does this work for products with swatches ?

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.