Come usare Ajax con OpenCart

L'inclusione delle librerie jQuery nel nucleo di OpenCart rende l'implementazione Ajax un gioco da ragazzi e più che un'esperienza piacevole. In effetti, troverai diversi frammenti distribuiti su tutto il framework che mostrano l'uso pesante di jQuery, se provi a scavare nello specifico i file di visualizzazione.

Nel corso di questo articolo, costruiremo una pagina personalizzata per dimostrare l'utilizzo di Ajax in OpenCart. Sarà un'interfaccia semplice che consente di selezionare un prodotto dalla casella a discesa e visualizza un bel blocco di riepilogo del prodotto selezionato. La parte interessante del caso d'uso è il modo in cui viene costruito il blocco di riepilogo del prodotto: verrà preparato utilizzando Ajax al volo. Certo, non è qualcosa che lo rende un esempio fuori dal mondo, ma immagino che servirà allo scopo di base di mostrare come funzionano le cose in OpenCart.

Suppongo che tu stia utilizzando l'ultima versione di OpenCart, che è 2.1.x.x! Inoltre, la discussione principale di questo articolo si concentra su Ajax con OpenCart, quindi analizzerò le basi dello sviluppo di moduli personalizzati in OpenCart. Tuttavia, se non hai familiarità con esso, una rapida spiegazione dei frammenti di codice in mezzo ti assicura che puoi seguire fino alla fine!

Una rapida occhiata all'organizzazione dei file

Passiamo rapidamente alla configurazione del file richiesta per la nostra pagina personalizzata.

Catalogo / regolatore / Ajax / index.php: È un file controller che fornisce la logica dell'applicazione del solito controller in OpenCart.
Catalogo / lingua / inglese / Ajax / index.php: È un file di lingua che aiuta a impostare le etichette della lingua.
Catalogo / view / theme / default / template / Ajax / index.tpl: È un file modello di visualizzazione che contiene l'XHTML della pagina personalizzata.
Catalogo / view / theme / default / template / Ajax / product.tpl: È un file modello di visualizzazione che contiene l'XHTML della risposta AJAX.

Quindi, questo è un rapido elenco dei file che implementeremo oggi.

Crea i file del modulo

Vai avanti e crea un file Catalogo / regolatore / Ajax / index.php con i seguenti contenuti.

load-> lingua ( 'Ajax / index'); $ This-> load-> modello ( '/ Catalogo della merce'); $ This-> documento-> setTitle ($ this-> language-> get ( 'HEADING_TITLE')); // carica tutti i prodotti $ products = $ this-> model_catalog_product-> getProducts (); $ data ['products'] = $ prodotti; $ data ['breadcrumbs'] = array (); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> link ('common / home'), 'text' => $ this-> language-> get ('text_home' )); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> link ('ajax / index'), 'text' => $ this-> language-> get ('heading_title' )); $ data ['heading_title'] = $ this-> language-> get ('heading_title'); $ data ['text_product_dropdown_label'] = $ this-> language-> get ('text_product_dropdown_label'); $ data ['column_left'] = $ this-> load-> controller ('common / column_left'); $ data ['column_right'] = $ this-> load-> controller ('common / column_right'); $ data ['content_top'] = $ this-> load-> controller ('common / content_top'); $ data ['content_bottom'] = $ this-> load-> controller ('common / content_bottom'); $ data ['footer'] = $ this-> load-> controller ('common / footer'); $ data ['header'] = $ this-> load-> controller ('common / header'); if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/ajax/index.tpl')) $ this-> response-> setOutput ($ this-> load-> view ($ this-> config-> get ('config_template'). '/template/ajax/index.tpl', $ data));  else $ this-> response-> setOutput ($ this-> load-> view ('default / template / ajax / index.tpl', $ data));  // metodo chiamata ajax public function ajaxGetProduct () if (isset ($ this-> request-> get ['product_id'])) $ product_id = (int) $ this-> request-> get ['product_id ']; se ($ product_id> 0) // carica il particolare prodotto richiesto in ajax $ this-> load-> model ('catalog / product'); $ product = $ this-> model_catalog_product-> getProduct ($ product_id); $ data ['product'] = $ prodotto; // prepara thumb image $ this-> load-> model ('tool / image'); if ($ product ['image']) $ data ['thumb'] = $ this-> model_tool_image-> ridimensiona ($ product ['image'], $ this-> config-> get ('config_image_thumb_width'), $ this-> config-> get ( 'config_image_thumb_height'));  // format price $ data ['price'] = $ this-> currency-> format ($ this-> tax-> calculate ($ product ['price'], $ product ['tax_class_id'], $ this- > config-> get ( 'config_tax'))); $ This-> load-> lingua ( 'product / prodotto'); $ data ['text_manufacturer'] = $ this-> language-> get ('text_manufacturer'); $ data ['text_model'] = $ this-> language-> get ('text_model'); $ data ['text_note'] = $ this-> language-> get ('text_note'); $ data ['tab_description'] = $ this-> language-> get ('tab_description'); if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/ajax/product.tpl')) $ this-> response-> setOutput ($ this-> load-> view ($ this-> config-> get ('config_template'). '/template/ajax/product.tpl', $ data));  else $ this-> response-> setOutput ($ this-> load-> view ('default / template / ajax / product.tpl', $ data));

Per cominciare, il indice il metodo del controller viene utilizzato per caricare la lingua e i file di modello e impostare le variabili comuni per il consueto modello OpenCart. Stiamo caricando il modello del prodotto disponibile nel core stesso, quindi non dobbiamo duplicare il codice per recuperare le informazioni sul prodotto.

Dopo aver caricato il modello del prodotto, utilizziamo il getProducts metodo per caricare tutti i prodotti. Finalmente, concludiamo il indice metodo impostando index.tpl come il nostro file di modello principale.

Il prossimo è l'importante ajaxGetProduct metodo, che viene utilizzato per creare un blocco di riepilogo prodotto basato sull'ID prodotto passato nella chiamata Ajax, come vedremo presto nel file modello. Carica lo stesso modello di prodotto che abbiamo fatto nel indice metodo e chiama il EsprProdotto metodo per recuperare informazioni specifiche sul prodotto in base all'id del prodotto.

Alla fine, il product.tpl il modello è impostato come modello per questo metodo. Specifici per i requisiti nel nostro caso, stiamo utilizzando il modello per creare il nostro output Ajax, ma potresti anche inviare la risposta JSON.

Andando avanti, creiamo un file di lingua Catalogo / lingua / inglese / Ajax / index.php per contenere le informazioni dell'etichetta statica.

Il file del modello di visualizzazione, uno dei file più importanti nel contesto di questo tutorial, dovrebbe essere creato su Catalogo / view / theme / default / template / Ajax / index.tpl con i seguenti contenuti.

">

Il frammento del nostro interesse è alla fine di index.tpl, il codice JavaScript che utilizza i metodi jQuery per associare il cambiamento e gli eventi Ajax. Quando l'utente seleziona un prodotto dalla casella a discesa, viene generato l'evento change che alla fine effettua una chiamata Ajax. Nella chiamata Ajax, stiamo inviando il Codice prodotto aggiunto come variabile di stringa di query GET.

D'altra parte, come abbiamo già discusso nella configurazione del controller, il ajaxGetProduct invia l'XHTML del blocco di riepilogo prodotto in base a Codice prodotto variabile stringa di query. Nel metodo di successo, aggiungiamo la risposta XHTML al tag div che ha l'attributo id impostato su product_summary.

Infine, vai avanti e crea un file modello Catalogo / view / theme / default / template / Ajax / product.tpl con i seguenti contenuti per una chiamata Ajax.

Niente di eccezionale qui: abbiamo appena incluso un blocco di sintesi di prodotto XHTML.

Quindi, è tutto ciò che riguarda l'installazione del file. Nella prossima sezione, passeremo attraverso il front-end per testare ciò che abbiamo costruito finora.

Test front-end

Quindi abbiamo fatto tutto il duro lavoro, e ora è il momento di fare qualche test! Dirigiti verso il front-end di OpenCart e visita l'URL http://www.yourstore.com/index.php?route=ajax/index. Dovrebbe visualizzare un'interfaccia piacevole come mostrato nello screenshot seguente.

È la nostra pagina personalizzata e sta visualizzando una casella a discesa contenente l'elenco di tutti i prodotti. Ora proviamo a selezionare un prodotto dalla casella di selezione e effettueremo una chiamata Ajax in background.

Di conseguenza, dovresti vedere un bel blocco di riepilogo del prodotto visualizzato sotto la casella a discesa, come mostrato nello screenshot seguente.

Se hai seguito il tutorial e hai implementato tutti i file come spiegato, dovrebbe funzionare senza problemi per te e per me! Naturalmente, questa è stata una semplice dimostrazione di come Ajax funzioni in OpenCart, ma è possibile estenderlo al livello successivo in base alle proprie esigenze.

Vai avanti e gioca con esso, e prova a fare alcune cose interattive usando Ajax in quanto è il modo migliore per imparare. Quindi, è tutto per oggi, e tornerò presto con alcune cose più eccitanti.

Conclusione

Era Ajax con OpenCart che era l'attrazione principale dell'articolo di oggi. Come al solito, abbiamo adottato un approccio personalizzato per dimostrarlo e abbiamo creato un caso d'uso semplice ma efficace.

Come sempre, se stai cercando altri strumenti, utility, estensioni e così via che puoi sfruttare nei tuoi progetti o per la tua istruzione, non dimenticare di vedere cosa abbiamo a disposizione sul mercato.

Spero che sia stato informativo e utile, e non esitare a lasciare le tue domande e commenti!

Codice