Så här använder du Ajax med OpenCart

Införandet av jQuery-bibliotek i kärnan i OpenCart gör Ajax-implementeringen en vind och mer än en trevlig upplevelse. Faktum är att du hittar flera utdrag spridda över hela ramen som visar den stora användningen av jQuery, om du försöker gräva i visningsfilerna specifikt.

Under hela denna artikel ska vi bygga en anpassad sida för att visa användning av Ajax i OpenCart. Det blir ett enkelt gränssnitt som låter dig välja en produkt i rullgardinsmenyn och visar ett bra produktsammanställningsblock för den valda produkten. Den intressanta delen av användningsväskan är hur produktöversiktsblocket är byggt. Det kommer att förberedas med Ajax on-the-fly. Naturligtvis är det inte något som gör det till ett exemplar av världen, men jag antar att det kommer att tjäna det grundläggande syftet att visa hur sakerna fungerar i OpenCart.

Jag antar att du använder den senaste versionen av OpenCart, som är 2.1.x.x! Den primära diskussionen om den här artikeln koncentreras också på Ajax med OpenCart, så jag kommer att glida igenom grunderna för anpassad modulutveckling i OpenCart. Men om du inte är bekant med det, gör en snabb förklaring av kodutslagen däremellan att du kan följa till slutet!

En snabb blick på filorganisationen

Låt oss snabbt gå igenom den filinställning som krävs för vår anpassade sida.

katalog / styrenheten / ajax / index.php: Det är en kontrollerfil som tillhandahåller programlogiken hos den vanliga regulatorn i OpenCart.
Katalog / språk / engelska / ajax / index.php: Det är en språkfil som hjälper till att skapa språketiketter.
Katalog / view / tema / default / mall / ajax / index.tpl: Det är en bildmallfil som innehåller XHTML på den anpassade sidan.
Katalog / view / tema / default / mall / ajax / product.tpl: Det är en bildmallfil som innehåller XHTML av AJAX-svaret.

Så det är en snabb lista över de filer vi ska genomföra idag.

Skapa modulfiler

Gå vidare och skapa en fil katalog / styrenheten / ajax / index.php med följande innehåll.

last> språk ( 'ajax / index'); $ This-> last> modell ( 'katalog / produkten); $ This-> dokument-> setTitle ($ this-> språk-> get ( 'HEADING_TITLE')); // ladda alla produkter $ products = $ this-> model_catalog_product-> getProducts (); $ data ['products'] = $ produkter; $ data ['breadcrumbs'] = array (); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> länk ('vanlig / hem'), 'text' => $ this-> language-> get ('text_home' )); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> länk ('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'); om (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/ajax/index.tpl')) $ this-> response-> setOutput ($ this-> load-> visa ($ this-> config-> get ('config_template'). '/template/ajax/index.tpl', $ data));  annat $ this-> response-> setOutput ($ this-> load-> view ('standard / mall / ajax / index.tpl', $ data));  // ajax samtalsmetod offentlig funktion ajaxGetProduct () if (isset ($ this-> request-> get ['product_id'])) $ product_id = (int) $ this-> request-> get ['product_id ']; om ($ product_id> 0) // ladda den särskilda produkten som begärs i ajax $ this-> load-> model ('catalog / product'); $ product = $ this-> model_catalog_product-> getProduct ($ product_id); $ data ['product'] = $ produkt; // Förbered tummen bild $ this-> load-> model ('tool / image'); om $ produkt ['bild']) $ data ['thumb'] = $ this-> model_tool_image-> ändra storlek ($ produkt ['bild'], $ this-> config-> get ('config_image_thumb_width') $ this-> Config-> get ( 'config_image_thumb_height'));  // formatpris $ data ['price'] = $ this-> currency-> format ($ this-> tax-> beräkna ($ produkt ['pris'], $ produkt ['tax_class_id'], $ this- > Config-> få ( 'config_tax'))); $ This-> last> språk (produkt / produkt); $ 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'); om (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/ajax/product.tpl')) $ this-> response-> setUtgång ($ this-> load-> visa ($ this-> config-> get ('config_template'). '/template/ajax/product.tpl', $ data));  annat $ this-> response-> setOutput ($ this-> load-> view ('standard / mall / ajax / product.tpl', $ data));

Till att börja med, index Metoden för kontrollenheten används för att ladda språk- och modellfilerna och ställa in de gemensamma variablerna för den vanliga OpenCart-mallen. Vi laddar produktmodellen tillgänglig i själva kärnan, så vi behöver inte duplicera koden för att hämta produktinformationen.

Efter att ha laddat produktmodellen använder vi getProducts Metod för att ladda alla produkter. Slutligen slutar vi index metod genom att ställa in index.tpl som vår huvudsakliga mallfil.

Nästa är det viktiga ajaxGetProduct metod som används för att bygga ett produkt sammanfattningsblock baserat på produkt-id som passerat i Ajax-samtalet, som vi snart kommer att se i mallfilen. Det laddar samma produktmodell som vi gjorde i index metod, och kallar getProduct Metod för att hämta specifik produktinformation baserat på produkt-id.

I slutet, den product.tpl mall är inställd som en mall för denna metod. Specifikt för kraven i vårt fall använder vi mallen för att bygga vår Ajax-utmatning, men du kan också skicka JSON-svaret istället.

Flytta framåt, låt oss skapa en språkfil Katalog / språk / engelska / ajax / index.php för att hålla den statiska etikettinformationen.

Visningsmallfilen, en av de viktigaste filerna i sammanhanget med denna handledning, ska skapas på Katalog / view / tema / default / mall / ajax / index.tpl med följande innehåll.
     ">
  
          
      
 
 
 
 
 
 
  
Vårt intresse är i slutet av index.tpl, JavaScript-koden som använder jQuery-metoder för att binda förändringar och Ajax-händelser. När användaren väljer en produkt i rullgardinsmenyn, ändras händelsen som slutligen gör ett Ajax-samtal. I Ajax-samtalet skickar vi Serienummer bifogad som en variabel för GET-fråga-sträng.
Å andra sidan, som vi redan har diskuterat i regulatorns inställning, ajaxGetProduct skickar XHTML i produktöversiktsblocket baserat på Serienummer variabel för fråga-sträng. I framgångsmetoden lägger vi till XHTML-svaret på div-taggen som har id-attributet satt till product_summary.
Slutligen, fortsätt och skapa en mallfil Katalog / view / tema / default / mall / ajax / product.tpl med följande innehåll för ett Ajax-samtal.
   - 
 
  
  
 
Ingenting fancy här-Vi har bara inkluderat ett grundläggande produkt sammanfattningsblock XHTML.
Så, det är så långt det gäller filinstallationen. I vårt nästa avsnitt går vi igenom fronten för att testa vad vi hittills har byggt.
Front-End Testing
Så vi har gjort allt hårt arbete, och nu är det dags för lite test! Gå vidare till fronten av OpenCart och besök webbadressen http://www.yourstore.com/index.php?route=ajax/index. Den ska visa ett snyggt gränssnitt som visas i följande skärmdump.
Det är vår anpassade sida, och den visar en rullgardinsmeny med listan över alla produkter. Nu ska vi försöka välja en produkt från väljrutan, och det kommer att göra ett Ajax-samtal i bakgrunden.
 Som ett resultat bör du se ett bra produktsammanställningsblock som visas direkt under rullgardinsmenyn som visas i följande skärmdump.
Om du har följt handledningen och genomfört alla filer enligt förklaringen, ska det fungera smidigt för dig så bra som det gjorde för mig! Det var självklart en ganska enkel demonstration av hur Ajax fungerar i OpenCart, men du kan sträcka den till nästa nivå enligt dina krav.
Gå vidare och leka med det, och försök att göra några interaktiva saker med Ajax eftersom det är det bästa sättet att lära dig. Så det är det för idag, och jag kommer snart tillbaka med några mer spännande saker.
Slutsats
Det var Ajax med OpenCart som var den centrala attraktionen i dagens artikel. Som vanligt tog vi en anpassad modulinriktning för att visa det och gjorde ett enkelt men ändå effektivt användningsfall. 
 Som alltid, om du letar efter ytterligare OpenCart-verktyg, verktyg, tillägg och så vidare som du kan utnyttja i dina egna projekt eller för din egen utbildning, glöm inte att se vad vi har tillgängliga på marknaden.
Jag hoppas att det var informativt och användbart, och tveka inte att lämna dina frågor och kommentarer!




		
			
	   
	




Koda