uiComponent popup with form in Magento 2 front in product detail page

Question

I want to add custom form in popup with a few custom fields before the product gets addtocart.

Once the user clicks on addtocart button it will open popup and ask for a few inputs after fill-up those inputs it will allow the user to add product in the cart. I want to make it using uiComponet.

Can anyone have any hints?

Answer 1

Please check with below code its only have when you click on add to cart. you can add your popup code via block.

Step1 :

Generate events.xml file in app/code/NameSpace/ModuleName/etc/frontend location and add the code mentioned below:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xs  d">

<event name="controller_action_predispatch_checkout_cart_add"><observer name="beforecart" instance="Adamsmage\Beforecart\Observer\RestrictAddToCart" /></event>

</config>

Step 2:

Next step is to create a class where you can check condition and restrict ‘Add To Cart’.

<?php
    namespace Adamsmage\Beforecart\Observer;

use Magento\Framework\Event\ObserverInterface;

class RestrictAddToCart implements ObserverInterface

{
protected $_messageManager;
public function __construct(

\Magento\Framework\Message\ManagerInterface $messageManager

)

{

$this->_messageManager = $messageManager;

}


public function execute(\Magento\Framework\Event\Observer $observer)

{

if (/* your condition */) { // add your code for popup

$this->_messageManager->addError(__('here add you popup code or block load.'));

//set false if you not want to add product to cart

$observer->getRequest()->setParam('product', false);

return $this;

}

return $this;

}

}