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

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.

  • Hi @kishor I want more than 1 pop up. – Jack Brooks Aug 27 at 5:50
  • Hello @JackBrooks, You can add multiple times with different ID for button and Popup content. – Kishor Thummar Aug 27 at 5:52
  • Would I follow ASQ folder structure? Like the phtml css and JS in separate – Jack Brooks Aug 27 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 Aug 27 at 5:53
  • Okay thank you, I will give this a go and let you know soon thank you – Jack Brooks Aug 27 at 5:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.