Cum se utilizează Ajax cu OpenCart

Includerea bibliotecilor jQuery în centrul OpenCart face din Ajax implementarea unei brize și mai mult decât o experiență plăcută. De fapt, veți găsi mai multe fragmente răspândite pe întregul cadru, care indică utilizarea intensă a jQuery, dacă încercați să explorați fișierele de vizualizare.

Pe tot parcursul acestui articol, vom construi o pagină personalizată pentru a demonstra utilizarea lui Ajax în OpenCart. Va fi o interfață simplă care vă permite să selectați un produs din caseta derulantă și afișează un bun tip de produs sumar al produselor selectate. Partea interesantă a cazului de utilizare este modul în care este construit blocul rezumat al produsului - acesta va fi pregătit folosind Ajax on-the-fly. Desigur, nu este ceva care face ca acesta să fie un exemplu din lume, dar cred că va servi scopul principal de a arăta cum funcționează lucrurile în OpenCart.

Presupun că utilizați cea mai recentă versiune a OpenCart, care este 2.1.x.x! De asemenea, discuția primară a acestui articol se concentrează pe Ajax cu OpenCart, așa că voi trece prin elementele de bază ale dezvoltării modulelor personalizate în OpenCart. Cu toate acestea, dacă nu sunteți familiarizat cu aceasta, o scurtă explicație a fragmentelor de cod între acestea vă asigură că puteți urma până la sfârșit!

O scurtă privire la organizarea fișierelor

Să trecem rapid la configurarea fișierelor necesare pentru pagina noastră personalizată.

Catalog / controler / ajax / index.php: Este un fișier de controler care oferă logica de aplicații a controlerului obișnuit în OpenCart.
Catalog / limba / engleză / ajax / index.php: Este un fișier lingvistic care ajută la configurarea etichetelor de limbă.
Catalog / Vedere / tema / default / template / ajax / index.tpl: Este un fișier de șablon de vizualizare care deține XHTML-ul paginii personalizate.
Catalog / Vedere / tema / default / template / ajax / product.tpl: Este un fișier de șablon de vizualizare care conține XHTML-ul răspunsului AJAX.

Așadar, este o listă rapidă a fișierelor pe care le vom implementa astăzi.

Creați fișiere de module

Continuați și creați un fișier Catalog / controler / ajax / index.php cu următorul conținut.

a sarcinii> limba ( 'ajax / index'); $ This-> a sarcinii> Model ( 'catalog / produse'); $ This-> pe documente> SetTitle ($ this-> language-> get ( 'Senzori si')); // încărcați toate produsele $ products = $ this-> model_catalog_product-> getProducts (); $ date ['produse'] = $ produse; $ date ['breadcrumbs'] = array (); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> link ('common / home' )); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> link ('ajax / index' )); $ data ['title_title'] = $ acest-> limbă-> obține ('title_title'); $ data ['text_product_dropdown_label'] = $ acest-> limbă-> primi ('text_product_dropdown_label'); $ data ['column_left'] = $ acest-> încărcător-> controler ('common / column_left'); $ data ['column_right'] = $ acest-> încărcare-> controler ('common / column_right'); $ data ['content_top'] = $ acest-> încărcare-> controler ('common / content_top'); $ data ['content_bottom'] = $ acest-> încărcare-> controler ('common / content_bottom'); $ data ['footer'] = $ acest-> încărcător-> controler ("common / footer"); $ data ['header'] = $ acest-> încărcător-> controler ('common / header'); dacă file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template') ./template/ajax/index.tpl)) $ this-> response-> setOutput ($ this-> load-> ($ this-> config-> get ('config_template'). '/template/ajax/index.tpl', $ data));  altceva $ this-> response-> setOutput ($ this-> load-> view ('default / template / ajax / index.tpl', $ date));  // ajax metoda de apel funcția publică ajaxGetProduct () if (isset ($ this-> request-> get ['product_id'])) $ product_id = (int) $ this-> request-> get ['product_id „]; dacă ($ product_id> 0) // încărcați produsul dorit în ajax $ this-> load-> model ('catalog / product'); $ product = $ acest-> model_catalog_product-> getProduct ($ product_id); $ date ['produs'] = $ produs; // pregătește imaginea degetului mare, $ this-> load-> model ('tool / image'); dacă $ product ['image']) $ data ['thumb'] = $ this-> model_tool_image-> redimensionați ($ product ['image'], $ this-> configura cam> get ( 'config_image_thumb_height'));  // preț formată $ date ['price'] = $ this-> currency-> format ($ this-> tax-> calculate ($ product ['price'], $ product ['tax_class_id'], $ this- > configura cam> get ( 'config_tax'))); $ This-> a sarcinii> limba ( 'produs / produs'); $ date ['text_manufacturer'] = $ acest-> limbă-> get ('text_manufacturer'); $ data ['text_model'] = $ acest-> limbă-> obține ('text_model'); $ date ['text_note'] = $ acest-> limbă-> primi ('text_note'); $ data ['tab_description'] = $ acest-> limbă-> get ('tab_description'); dacă file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template') ./template/ajax/product.tpl)) $ this-> response-> setOutput ($ this-> load-> ($ this-> config-> get ('config_template'). '/template/ajax/product.tpl', $ data));  altceva $ this-> response-> setOutput ($ this-> load-> view ('default / template / ajax / product.tpl', $ date));

Pentru început, index metoda de controler este folosită pentru a încărca fișierele de limbă și model și pentru a configura variabilele comune pentru șablonul OpenCart obișnuit. Încărcăm modelul de produs disponibil în miezul propriu-zis, deci nu trebuie să repetăm codul pentru a prelua informațiile despre produs.

După încărcarea modelului de produs, folosim getProducts metoda de încărcare a tuturor produselor. În cele din urmă, încheiem index metoda prin setare index.tpl ca fișierul șablonului principal.

Următorul este important ajaxGetProduct , care este folosit pentru a construi un bloc de rezumat al produsului bazat pe id-ul produsului trecut în apelul Ajax, așa cum vom vedea curând în fișierul șablonului. Se încarcă același model de produs ca și în cazul index metoda, și solicită getProduct pentru a obține informații specifice despre produs pe baza id-ului produsului.

În final, product.tpl șablonul este setat ca șablon pentru această metodă. Specifică cerințelor în cazul nostru, folosim șablonul pentru a construi ieșirea Ajax, dar, de asemenea, ați putea trimite răspunsul JSON.

Mergând înainte, hai să creăm un fișier de limbă Catalog / limba / engleză / ajax / index.php pentru a ține informațiile despre eticheta statică.

Fișierul șablon de vizualizare, unul dintre cele mai importante fișiere din contextul acestui tutorial, trebuie creat la Catalog / Vedere / tema / default / template / ajax / index.tpl cu următorul conținut.

     „>