Popup OpenCart, fenêtres modales

Un article de notre employé tiré de son blog personnel.

Lors du développement du module dans le panneau d'administration, j'avais besoin d'utiliser des  modaux OpenCart  pour afficher certaines informations, ainsi que pour afficher le formulaire. Mon expérience frontend à cette époque était  couci-couça , mais un collègue a suggéré que OpenCart utilise jquery (2.1.1), et cette bibliothèque a un support pour les fenêtres pop - up. Mais tout n'est pas si simple ...

Pour clarifier: modal == popup == popup .

Bibliothèque de fenêtres modales

Pour utiliser la  fenêtre modale OpenCart , vous devez déterminer  quelle bibliothèque  fournit les fonctionnalités utilisées dans ce moteur pour cela. En désassemblant le panneau d'administration d'OpenCart 3.0 (dans la version 2.3, il n'y a pas de bouton de ce type),



 un bouton a été trouvé dans la section  , lorsque vous avez cliqué sur lequel une  fenêtre contextuelle est apparue .

Ce qui est nécessaire, nous commençons l'analyse :)

Allez sur la page "Barre d'état", ouvrez son code source et regardez le script à la fin:

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Chaque fois que vous accédez à la page de modification de la commande, une fenêtre contextuelle avec une liste de produits apparaît.

Vous pouvez insérer un bouton dans la barre de boutons du panneau d'administration (ou n'importe où ailleurs), accrocher un gestionnaire de clic sur le bouton et afficher une fenêtre modale (comme cela se fait sur la page 



). Cependant, cela nécessiterait l'utilisation d' expressions régulières  ou d'un analyseur DOM .

Auteur: Vitaly Buturlin