[SOLVED] Make a button launch a modal in the Order Details page

[Silver Knight]

Hi!

I have spent about three hours searching the forum and the internet and have found nothing. I would like to make a button I created using hookActionGetAdminOrderButtons launch the content of the controller it points to, in a modal window, instead of redirecting.

Basically, I want to create a button that sends to an external endpoint a set of order data (for example, confirming the payment of a pre-authorization made on an external payment gateway). Now I have made that button redirects me to a very simple page where I fill in the data to be sent. I would like this to be shown in a modal, as it is much more comfortable for the user. How do I show the content of this TPL in a modal?

Code of the hook:

public function hookActionGetAdminOrderButtons(array $params){
		$orderDetails = xxx::getOrderDetails($params['id_order']);
		
        if(xxx){
			if(xxx){
				$bar = $params['actions_bar_buttons_collection'];
				$bar->add(
					new \PrestaShopBundle\Controller\Admin\Sell\Order\ActionsBarButton(
						'btn-info', ['href' => $this->_endpoint_xxx . "&id_order=" . $params['id_order']], 'Confirm payment'
					)
				);
				$bar->add(
					new \PrestaShopBundle\Controller\Admin\Sell\Order\ActionsBarButton(
						'btn-info', ['href' => $this->_endpoint_xxx . "&id_order=" . $params['id_order']], 'Cancel payment'
					)
				);
			}
		}
	}

The TPL:

<div class="wrap">
    <h1>Order #{$orderId}</h1>
    <form method="POST">
        <p>Fullfill amount of order #{$orderId}.</p>
        <div class="form-group">
            <label for="amount">Amount (*)</label>
            <input name="amount" type="number" step="0.01" value="{$amount}" />
        </div>
    
        <br/>
        
        <input type="submit" value="Cancel payment">
    </form>
</div>

PS: I simplified names of variable and other not important things in order to no make the post too long and because of the privacy of some parts of the code.

 

Buttons added:

 

Page wich the button "anular pago" redirects to:

 

Thank you so much in advance!!

Edited November 16, 2023 by Silver Knight
Solved (see edit history)

[dnk.hack]

Hello, with JavaScript. Make a function in JS and bind this function to the button!

function openYourModalWindow() {
    $('your_selector').dialog({
        modal: true,
        open: function ()
        {
            $(this).load('URL_PATH', () => {afterOpenFunction();});
        },
        height: 600,
        width: 800,
    });
}

[Silver Knight]

28 minutes ago, dnk.hack said:

Hello, with JavaScript. Make a function in JS and bind this function to the button!

function openYourModalWindow() {
    $('your_selector').dialog({
        modal: true,
        open: function ()
        {
            $(this).load('URL_PATH', () => {afterOpenFunction();});
        },
        height: 600,
        width: 800,
    });
}

So much thank you for your answer!!

 

How can I link the button to the JS? I know how to create the JS and include it in my module but, how can I from the declared hook

$bar = $params['actions_bar_buttons_collection'];
				$bar->add(
					new \PrestaShopBundle\Controller\Admin\Sell\Order\ActionsBarButton(
						'btn-info', ['href' => $this->_endpoint_xxx . "&id_order=" . $params['id_order']], 'Confirm payment'
					)
				);

call the JS. ¿Do I need to instead of call $this->_endpoint_xxx, just call the JS? ¿Is this allowed in PS?

[Stambaughsonwalton]

Hi there!

To display the content in a modal instead of redirecting, you can use JavaScript and Bootstrap's modal functionality. Here's a simplified example of how you can achieve this:

Modify your TPL to include a modal container:

htmlCopy code

<!-- Add this modal container at the end of your TPL --> <div class="modal" id="myModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <!-- Modal content will be loaded here --> </div> </div> </div>

Update your JavaScript logic:

javascriptCopy code

// Add this JavaScript code document.addEventListener('DOMContentLoaded', function () { // Function to open the modal and load content function openModal(endpoint) { // Fetch content from the provided endpoint fetch(endpoint) .then(response => response.text()) .then(data => { // Load the content into the modal document.querySelector('.modal-content').innerHTML = data; // Show the modal $('#myModal').modal('show'); }) .catch(error => console.error('Error fetching content:', error)); } // Assuming you have a button with the class 'btn-info-confirm' document.addEventListener('click', function (event) { if (event.target.classList.contains('btn-info-confirm')) { // Get the endpoint from the button's data attribute const endpoint = event.target.dataset.endpoint; // Open the modal with the specified endpoint openModal(endpoint); } }); });

Modify your PHP code to include the endpoint in the button's data attribute:

phpCopy code

$bar->add( new \PrestaShopBundle\Controller\Admin\Sell\Order\ActionsBarButton( 'btn-info-confirm', [ 'data-endpoint' => $this->_endpoint_xxx . "&id_order=" . $params['id_order'] ], 'Confirm payment' ) );

Now, when the "Confirm payment" button is clicked, it will fetch the content from the specified endpoint and load it into the modal, showing the modal to the user.

I hope this helps! Let me know if you have further questions or need additional assistance.

[dnk.hack]

4 hours ago, Silver Knight said:

So much thank you for your answer!!

 

How can I link the button to the JS? I know how to create the JS and include it in my module but, how can I from the declared hook

$bar = $params['actions_bar_buttons_collection'];
				$bar->add(
					new \PrestaShopBundle\Controller\Admin\Sell\Order\ActionsBarButton(
						'btn-info', ['href' => $this->_endpoint_xxx . "&id_order=" . $params['id_order']], 'Confirm payment'
					)
				);

call the JS. ¿Do I need to instead of call $this->_endpoint_xxx, just call the JS? ¿Is this allowed in PS?

Instead href use onclick HTML tag attribute

'btn-info', ['onclick' => 'openYourModalWindow()'

[Silver Knight]

Hi!

Thank you both, @dnk.hack and @Stambaughsonwalton!! I used your advice and now I have a working modal, this thread can be marked as solved.