OpenCart popup, modal Windows – InformTFB

OpenCart popup, modal Windows

OpenCart popup, modal Windows

When developing a module in the admin panel, I needed to use OpenCart modal Windows to display certain information, as well as to show the form. My frontend experience at that time was so-so, but a colleague suggested that OpenCart uses jquery (2.1.1), and this library has support for popup Windows. But not everything is so simple …

To clarify: modal window = = popup window == popup.

Modal window library

A button that opens the modal window when clicked
A button that opens the modal window when clicked

In order to use the OpenCart modal window, you need to determine which library provides the functionality used in This engine. When analyzing the OpenCart 3.0 admin panel (there is no such button in 2.3), Панель состоянияa button was found in the section, and a pop-up window appeared when clicked.

What you need, we start parsing 🙂

Modal window in the OpenCart admin panel developer Settings
Modal window in the OpenCart admin panel developer Settings

Go to the “status Panel” page, open its source code and look at the script at the end:

$('#button-setting').on('click', function() {
    $.ajax({
        url: 'index.php?route=common/developer&user_token=D9aTD65JQVdyOY9pcVxcRUx0M3eTefnr',
        dataType: 'html',
        beforeSend: function() {
            $('#button-setting').button('loading');
        },
        complete: function() {
            $('#button-setting').button('reset');
        },
        success: function(html) {
            $('#modal-developer').remove();
             
            $('body').prepend('<div id="modal-developer" class="modal">' + html + '</div>');
             
            $('#modal-developer').modal('show');
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    }); 
}); 

As you can see, button-settinga click handler is hung on the button with the id, which contains an ajax request, the successful result of which is shown in the popup window. And to display this window, use:

$('#modal-developer').modal('show');

Similar to the jquerymodal library . However, bootstrap also has support for modal Windows. We try to find out through the debugger which library is still being used, and set a breakpoint in the above script on the method modal.

Breakpoint on the modal method
Breakpoint on the modal method

Click on the button (on the first screen), get to the breakpoint, step inside and get to bootstrap.min.js.

The stack resulted in bootstrap.min.js
The stack resulted in bootstrap.min.js

Pop-UPS in OpenCart are implemented via bootstrap.

Using popup Windows in OpenCart

After inspecting the window we find out that it already contains the necessary logic for closing the window and consists of two important parts for us:

  • div with the class modal-headerin whichh4, which is the window title
  • div with the C11 classmodal-body, it contains the window content Inside
Viewing the html code of the developer Settings modal window
Viewing the html code of the developer Settings modal window

Since the window already has a design, just take its frame, classes, and based on the layout of this window, we will make our own:

<div id="modal-window" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
           
            <!--заголовок и кнопка закрытия-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"></h4>
            </div>
             
            <!--контентная часть окна-->
            <div class="modal-body"></div>
             
        </div>
    </div>
</div>

To display a window with an idmodal-window, we will use:

$('#modal-window').modal('show');

Now we will place our own layout and js in the appropriate place on the page in the admin panel. To do this, we use events in OpenCart. For example hang a handler on the order editing page:

$this->model_extension_event->addEvent('modal_window', 'admin/view/sale/order_form/after', 'extension/module/modal_window/eventSaleOrderFormAfter');

Now the handler:

public function eventSaleOrderFormAfter(&$route, &$args, &$output)
{
    $idOrder = $args["order_id"];
 
    $this->load->model('sale/order');
    $this->load->model('catalog/product');
 
    //загрузка списка продуктов заказа
    $aOrderProducts = $this->model_sale_order->getOrderProducts($args["order_id"]);
     
    //строка верстки списка товаров
    $sOrderProducts = "";
 
    //формируем список товаров
    for($i=0; $i<count($aOrderProducts); ++$i)
    {
        $aProduct = $this->model_catalog_product->getProduct($aOrderProducts[$i]["product_id"]);
        $sOrderProducts .= "<li>".$aProduct["name"]." - ".$aProduct["model"]." (".$aOrderProducts[$i]["quantity"]." шт.): ".round($aOrderProducts[$i]["total"], 2)."р. </li>";
    }
     
    $sOrderProducts = "<ul>$sOrderProducts</ul>";
 
    //верстка модального окна и скрипт вызова
    $sModal = '
    <div id="modal_window" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Список товаров</h4>
                </div>
                <div class="modal-body">
                    '.$sOrderProducts.'
                </div>
            </div>
        </div>
    </div>
    <script>$("#modal_window").modal("show");</script>
    ';
 
    //находим закрывающий тег body и перед ним вставляем модальное окно и скрипт его показа
    $iPos = strripos($output, "</body>");
    $output = substr($output, 0, $iPos).$sModal.substr($output, $iPos);
}

Every time you enter the order editing page, a pop-up window will appear with a list of products.

You can insert a button in the button panel in the admin panel (or in any other place), hang a click handler on the button, and show a modal window (as it is done on the page information panel). However, you will need to use regular expressions or a DOM parser to do this.

Valery Radokhleb
Valery Radokhleb
Web developer, designer

Leave a Reply

Your email address will not be published. Required fields are marked *