Popup OpenCart, jendela modal

Artikel oleh karyawan kami dari blog pribadinya.

Saat mengembangkan modul di panel admin, saya perlu menggunakan  modals OpenCart  untuk menampilkan informasi tertentu, serta untuk menampilkan formulir. Pengalaman frontend saya saat itu  biasa-biasa saja , tetapi seorang rekan menyarankan agar OpenCart menggunakan jquery (2.1.1), dan library ini memiliki dukungan untuk jendela popup. Tapi tidak semuanya sesederhana itu ...

Untuk memperjelas: modal == popup == popup .

Perpustakaan jendela modal

Untuk menggunakan  jendela modal OpenCart , Anda perlu menentukan  pustaka mana yang  menyediakan fungsionalitas yang digunakan di mesin ini untuk ini. Membongkar panel admin OpenCart 3.0 (di 2.3 tidak ada tombol seperti itu),



 sebuah tombol ditemukan di bagian tersebut  , ketika diklik di mana  jendela pop-up muncul .

Apa yang dibutuhkan, kita mulai parsing :)

Buka halaman "Status Bar", buka kode sumbernya dan lihat skrip di bagian akhir:

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Setiap kali Anda masuk ke halaman edit order, jendela pop-up dengan daftar produk akan muncul.

Anda dapat memasukkan tombol ke dalam bilah tombol di panel admin (atau di mana pun), menggantung penangan klik pada tombol dan menampilkan jendela modal (seperti yang dilakukan di halaman 



). Namun, ini akan membutuhkan penggunaan ekspresi reguler  atau pengurai DOM .

Penulis: Vitaly Buturlin