I have to make a pop-up window under the products on the sales page. Instead of redirecting to ordering, a feedback form should appear. The problem is that I do not know how to tie a pop-up window separately to each product in order to transfer its values ​​to the form. Js defines only the first press of the button, because the id of all buttons is the same.

<?php foreach ($block->getSaleCategory(16) as $product) : ?>

<div><?php echo $block->getMediaPath($product->getEntityId()) . $product->getImage() ?></div>
<div><?php echo $product->getName() ?></div>
<button type="button" id="openModel" class="custom_model_popup" >Order</button>

<?php endforeach; ?>
<div style="margin-top: 15px;">
    <div id="myModel">
        <form action="<?php echo $block->getBaseUrl() . 'sale/frontend/sendmail' ?>" method="post" id="form-validate" enctype="multipart/form-data" autocomplete="off" data-mage-init='{"validation":{}}' data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">
            <input name="email" value="email">Email<br>
            <input name="name" value="name">Name<br>
            //there must be hidden fields with product data

    <span id='ajax_loader1' style='display:none'>
            <img src="<?php $this->getBaseUrl() ?>pub/media/home/loader-2.gif" style="height: 150px;width: 150px">

        function($,modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Product Question',
                closeText: 'Close',
                buttons: [{
                    text: $.mage.__('Submit'),
                    class: '',
                    click: function (data) {
                        var form_data = jQuery("#form-validate").serialize();
                            url: "<?php  echo $block->getBaseUrl() . 'sale/frontend/sendmail' ?>",
                            type: 'POST',
                            data : form_data,
                            success: function(data){
                            error: function(result){
                                console.log('no response !');
                 * Escape key press handler,
                 * close modal window
                escapeKey: function () {
                    if (this.options.isOpen && this.modal.find(document.activeElement).length ||
                        this.options.isOpen && this.modal[0] === document.activeElement) {
            var popup = modal(options, $('#myModel'));

How can I implement a pop-up window for each product and transfer its values ​​to the form?


Your Answer

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

Browse other questions tagged or ask your own question.