Ventana emergente OpenCart, ventanas modales

Un artículo de nuestro empleado de su blog personal.

Mientras desarrollaba el módulo en el panel de administración, necesitaba usar  modales de OpenCart  para mostrar cierta información, así como para mostrar el formulario. Mi experiencia frontend en ese momento era  tan-tan , pero un colega sugerido que OpenCart utiliza jQuery (2.1.1), y esta biblioteca tiene soporte para ventanas emergentes. Pero no todo es tan sencillo ...

Para aclarar: modal == popup == popup .

Biblioteca de ventana modal

Para usar la  ventana modal de OpenCart , debe determinar  qué biblioteca  proporciona la funcionalidad utilizada en este motor para esto. Desmontando el panel de administración de OpenCart 3.0 (en 2.3 no existe tal botón),



 se encontró un botón en la sección  , al hacer clic en él  , apareció una ventana emergente .

Lo que se necesita, comenzamos a analizar :)

Vaya a la página "Barra de estado", abra su código fuente y mire el script al final:

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Cada vez que ingrese a la página de edición de pedidos, aparecerá una ventana emergente con una lista de productos.

Puede insertar un botón en la barra de botones en el panel de administración (o en cualquier otro lugar), colgar un controlador de clic en el botón y mostrar una ventana modal (como se hace en la página 



). Sin embargo, esto requeriría el uso de expresiones regulares  o un analizador DOM .

Autor: Vitaly Buturlin