Hoe Ajax te gebruiken met OpenCart

De opname van jQuery-bibliotheken in de kern van OpenCart maakt Ajax-implementatie een eitje en meer dan een aangename ervaring. Sterker nog, je zult verschillende fragmenten vinden verspreid over het hele framework die het zware gebruik van jQuery laten zien, als je in de viewbestanden specifiek probeert te graven.

In de loop van dit artikel zullen we een aangepaste pagina maken om het gebruik van Ajax in OpenCart te demonstreren. Het is een eenvoudige interface waarmee u een product kunt selecteren in de vervolgkeuzelijst en een mooi productoverzichtsblok van het geselecteerde product kunt weergeven. Het interessante deel van de use-case is de manier waarop het productsamenvattingsblok is gebouwd. Het wordt dan met Ajax on-the-fly voorbereid. Het is natuurlijk niet iets dat het een 'out of the world'-voorbeeld maakt, maar ik vermoed dat het het basisdoel dient om te laten zien hoe dingen werken in OpenCart.

Ik neem aan dat je de nieuwste versie van OpenCart gebruikt, die 2.1.x.x is! Ook concentreert de primaire discussie van dit artikel zich op Ajax met OpenCart, dus ik zal de basisbeginselen van de ontwikkeling van aangepaste modules doornemen in OpenCart. Als u er echter niet bekend mee bent, zorgt een korte uitleg van de codefragmenten er tussendoor voor dat u tot het einde kunt volgen!

Een snelle blik op bestandsorganisatie

Laten we snel de bestandsinstellingen doorlopen die nodig zijn voor onze aangepaste pagina.

catalogus / controller / ajax / index.php: Het is een controllerbestand dat de toepassingslogica biedt van de gebruikelijke controller in OpenCart.
catalogus / taal / Engels / ajax / index.php: Het is een taalbestand dat helpt bij het instellen van taallabels.
catalogus / view / theme / default / template / ajax / index.tpl: Het is een beeldsjabloonbestand dat de XHTML van de aangepaste pagina bevat.
catalogus / view / theme / default / template / ajax / product.tpl: Het is een beeldsjabloonbestand dat de XHTML van het AJAX-antwoord bevat.

Dus dat is een snel overzicht van de bestanden die we vandaag gaan implementeren.

Maak modulebestanden

Ga je gang en maak een bestand aan catalogus / controller / ajax / index.php met de volgende inhoud.

load> taal ( 'ajax / index'); $ This-> load-> model ( 'catalogus / product'); $ This-> document-> setTitle ($ this-> language-> krijgen ( 'HEADING_TITLE')); // laad alle producten $ products = $ this-> model_catalog_product-> getProducts (); $ data ['producten'] = $ producten; $ 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-> taal-> 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));  // ajax-methode openbare functie ajaxGetProduct () if (isset ($ this-> request-> get ['product_id'])) $ product_id = (int) $ this-> request-> get ['product_id ']; if ($ product_id> 0) // laad het specifieke product gevraagd in ajax $ this-> load-> model ('catalogus / product'); $ product = $ this-> model_catalog_product-> getProduct ($ product_id); $ data ['product'] = $ product; // maak duimafbeelding $ this-> load-> model ('tool / afbeelding'); if ($ product ['image']) $ data ['thumb'] = $ this-> model_tool_image-> formaat wijzigen ($ product ['image'], $ this-> config-> get ('config_image_thumb_width'), $ this-> config-> krijgen ( 'config_image_thumb_height'));  // formaat prijs $ gegevens ['prijs'] = $ dit-> valuta-> formaat ($ dit-> belasting-> berekenen ($ product ['prijs'], $ product ['tax_class_id'], $ this- > config-> krijgen ( 'config_tax'))); $ This-> load-> taal ( 'product / product'); $ 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));

Om te beginnen, de inhoudsopgave methode van de controller wordt gebruikt om de taal- en modelbestanden te laden en de algemene variabelen in te stellen voor de gebruikelijke OpenCart-sjabloon. We laden het productmodel dat beschikbaar is in de kern zelf, dus we hoeven de code niet te dupliceren om de productinformatie op te halen.

Na het laden van het productmodel gebruiken we de getProducts methode om alle producten te laden. Ten slotte concluderen we de inhoudsopgave methode door in te stellen index.tpl als ons hoofdsjabloonbestand.

Het volgende is het belangrijke ajaxGetProduct methode, die wordt gebruikt om een productoverzichtsblok te bouwen op basis van het product-ID dat is doorgegeven in de Ajax-call, zoals we binnenkort in het sjabloonbestand zullen zien. Het laadt hetzelfde productmodel als in de inhoudsopgave methode, en roept de getProduct methode om specifieke productinformatie op te halen op basis van het product-ID.

Aan het eind, de product.tpl sjabloon is ingesteld als sjabloon voor deze methode. Specifiek voor de vereisten in ons geval gebruiken we de sjabloon om onze Ajax-uitvoer te bouwen, maar je kunt ook de JSON-reactie verzenden in plaats daarvan.

Laten we een taalbestand maken catalogus / taal / Engels / ajax / index.php om de statische labelinformatie vast te houden.

Het beeldsjabloonbestand, een van de belangrijkste bestanden in de context van deze tutorial, moet worden gemaakt op catalogus / view / theme / default / template / ajax / index.tpl met de volgende inhoud.

">

Het fragment van ons belang is aan het einde van index.tpl, de JavaScript-code die gebruikmaakt van jQuery-methoden om wijzigingen en Ajax-gebeurtenissen te binden. Wanneer de gebruiker een product in de vervolgkeuzelijst selecteert, wordt de wijzigingsgebeurtenis geactiveerd die uiteindelijk een Ajax-oproep doet. In de Ajax-call sturen we de Product-ID toegevoegd als een GET-queryreeks variabele.

Aan de andere kant, zoals we al hebben besproken in de controller setup, de ajaxGetProduct verzendt de XHTML van het productsamenvattingsblok op basis van de Product-ID query-string variabele. In de succesmethode voegen we de XHTML-reactie toe aan de div-tag met het id-kenmerk ingesteld op product_summary.

Maak tenslotte een sjabloonbestand catalogus / view / theme / default / template / ajax / product.tpl met de volgende inhoud voor een Ajax-oproep.

Hier is niets bijzonders aan - We hebben zojuist een blok XHTML voor basisproductsamenvatting opgenomen.

Dus dat is het voor zover het de configuratie van het bestand betreft. In ons volgende gedeelte gaan we door de front-end om te testen wat we tot nu toe hebben gebouwd.

Front-end testen

Dus we hebben al het harde werk gedaan, en nu is het tijd voor wat testen! Ga naar de voorkant van OpenCart en bezoek de URL http://www.yourstore.com/index.php?route=ajax/index. Het zou een mooie interface moeten weergeven zoals getoond in de volgende screenshot.

Het is onze aangepaste pagina en er wordt een vervolgkeuzelijst weergegeven met de lijst met alle producten. Laten we nu proberen een product uit het select vakje te selecteren en het zal een Ajax-oproep op de achtergrond maken.

Als gevolg hiervan zou u een mooi productoverzichtsblok moeten zien te zien recht onder de vervolgkeuzelijst zoals getoond in de volgende screenshot.

Als je de tutorial hebt gevolgd en alle bestanden hebt geïmplementeerd zoals uitgelegd, zou het voor jou net zo goed moeten werken als voor mij! Dat was natuurlijk een vrij eenvoudige demonstratie van hoe Ajax in OpenCart werkt, maar je zou het naar een hoger niveau kunnen tillen volgens jouw vereisten.

Ga je gang en speel ermee en probeer een aantal interactieve dingen te maken met Ajax, want het is de beste manier om te leren. Dus dat is het voor vandaag en ik kom snel terug met nog een aantal spannende dingen.

Conclusie

Het was Ajax met OpenCart dat de centrale attractie van het artikel van vandaag was. Zoals gewoonlijk hebben we een aangepaste moduleaanpak gebruikt om het te demonstreren en een eenvoudige maar effectieve use-case te maken.

Zoals altijd, als u op zoek bent naar aanvullende OpenCart-hulpmiddelen, hulpprogramma's, uitbreidingen en dergelijke die u kunt gebruiken in uw eigen projecten of voor uw eigen opleiding, vergeet dan niet te zien wat we beschikbaar hebben op de markt.

Ik hoop dat het informatief en nuttig was en aarzel niet om uw vragen en opmerkingen achter te laten!

Code