🧛🏻 😁 🍦 OpenCartポップアップ、モーダルウィンドウ 🈁 🍜 📨

従業員の個人ブログからの記事。

管理パネルでモジュールを開発しているときに、OpenCartモーダル を使用して特定の情報を表示したり、フォームを表示したりする必要がありました。当時の私のフロントエンドの経験だった ので、そう、しかし同僚はOpenCartはjqueryの（2.1.1）を使用し、このライブラリは、ポップアップウィンドウをサポートしていることが示唆されました。しかし、すべてがそれほど単純なわけではありません...

明確にするために：モーダル==ポップアップ==ポップアップ。

モーダルウィンドウライブラリ

OpenCartモーダルウィンドウを使用するには、このエンジンで使用される機能を提供するライブラリを決定する必要があります。OpenCart 3.0管理パネルを分解すると（2.3ではそのようなボタンはありません）、

クリックするとポップアップウィンドウが表示されるセクションにボタンが見つかりました。

必要なものは、解析を開始します:)

「ステータスバー」ページに移動し、そのソースコードを開いて、最後にあるスクリプトを確認します。

$('#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);
        }
    }); 
});

, id button-setting

, ajax , popup . :

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

jquerymodal. bootstrap . - , modal

.

( ), , bootstrap.min.js

.

OpenCart bootstrap.

popup OpenCart

, :

div

modal-header

h4

,
div

modal-body

¨C11C

, , :

<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>

id modal-window

:

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

js. OpenCart. :

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

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);
}

注文編集ページに入るたびに、製品のリストを含むポップアップウィンドウが表示されます。

管理パネル（または他の場所）のボタンバーにボタンを挿入し、ボタンにクリックハンドラーを掛けて、モーダルウィンドウを表示できます（ページで行うように

）。ただし、これには通常の式またはDOMパーサーを使用する必要があります。

著者：Vitaly Buturlin

OpenCartポップアップ、モーダルウィンドウ

モーダルウィンドウライブラリ

popup OpenCart

More articles: