1

Is it possible to add a few buttons and once the user clicks get pop up model which built by Magento 2? I want to allow the user to click a button and display a pop-up I was thinking to add 2/3 buttons and different content for each pop-up

2 Answers 2

1

I have a function which grabs all the details I need :

public function getDetails(){

    $ruleArray = $this->productCollectionFactory->create()->getData();
    $ruleArray = array_column($ruleArray,'rule_id');

    $ruleArray = array_chunk($ruleArray, 1);
        foreach( $ruleArray as $rule_id ) 
        {
        $currentTime = $this->_date->date()->format('Y-m-d H:i:s');

        $ruleId = $rule_id;
        $cData = $this->rule->create()->load($ruleId);
        $releaseDate = $cData->getFromDate();
        if ($releaseDate <= $currentTime){
            echo "<div class=id>" ."ID => ". implode(" ", $rule_id);"</div>";
            echo "<div class=code>" ." product=> "  .$cData->getName();"</div>";
            echo "<div class=description>" ." Description =>" .$cData->getDescription();"</div>";
        } 

        else {
            echo "<div class=coming-soon>" ." COMING SOON";"</div>";
        }

        }

}

in my phtml i am calling

<div class="test">
<h2>
<?php echo $block->getDetails(); ?>
</h2>
</div>

I get all the details but I want to show the only ID then if I click the id show popup with name and description is this possible?

5

By default, Magento 2 provides the Modal popup functionality.

Please check below code to open modal popup

<div>
    <button id="click-here">Click Here</button>
</div>

<div id="popup-modal-main" style="display:none;">
    <h1> Content for Popup </h1>
</div>

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

            var popup = modal(options, $('#popup-modal-main'));
            $("#click-here").on('click',function(){ 
                $("#popup-modal-main").modal("openModal");
            });
        }
    );
</script>

Hope it will work for you.

6
  • Hi @kishor I want more than 1 pop up. Commented Aug 27, 2019 at 5:50
  • Hello @JackBrooks, You can add multiple times with different ID for button and Popup content. Commented Aug 27, 2019 at 5:52
  • Would I follow ASQ folder structure? Like the phtml css and JS in separate Commented Aug 27, 2019 at 5:53
  • @JackBrooks yes you just need to repeat with var popup = modal(options, $('#popup-modal-main')); $("#click-here").on('click',function(){ $("#popup-modal-main").modal("openModal"); });
    – kunj
    Commented Aug 27, 2019 at 5:53
  • Okay thank you, I will give this a go and let you know soon thank you Commented Aug 27, 2019 at 5:54

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.