OpenCart Popup, modale Fenster

Ein Artikel unseres Mitarbeiters aus seinem persönlichen Blog.

Während der Entwicklung des Moduls im Admin-Bereich musste ich  OpenCart-Modalitäten verwenden  , um bestimmte Informationen sowie das Formular anzuzeigen. Meine Frontend Erfahrung zu dieser Zeit war  so lala , aber ein Kollege schlug vor , dass OpenCart verwendet Jquery (2.1.1), und diese Bibliothek hat die Unterstützung für Popup - Fenster. Aber nicht alles ist so einfach ...

Zur Verdeutlichung: modal == popup == popup .

Modale Fensterbibliothek

Um das  modale OpenCart-Fenster verwenden zu können , müssen Sie festlegen,  welche Bibliothek  die in dieser Engine verwendeten Funktionen bereitstellt. Beim Zerlegen des OpenCart 3.0-Administrationsbereichs (in 2.3 gibt es keine solche Schaltfläche)



 wurde in dem Abschnitt eine Schaltfläche gefunden, auf die  geklickt wurde, als ein  Popup-Fenster angezeigt wurde .

Was benötigt wird, beginnen wir zu analysieren :)

Gehen Sie zur Seite "Statusleiste", öffnen Sie den Quellcode und sehen Sie sich das Skript am Ende an:

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Jedes Mal, wenn Sie die Seite zur Auftragsbearbeitung aufrufen, wird ein Popup-Fenster mit einer Liste der Produkte angezeigt.

Sie können eine Schaltfläche in die Schaltflächenleiste im Admin-Bereich (oder an einer anderen Stelle) einfügen, einen Klick-Handler an die Schaltfläche hängen und ein modales Fenster anzeigen (wie auf der Seite beschrieben 



). Dies würde jedoch die Verwendung regulärer Ausdrücke  oder eines DOM-Parsers erfordern .

Verfasser: Vitaly Buturlin