Slik bruker du Ajax med OpenCart

Inkluderingen av jQuery-biblioteker i kjernen i OpenCart gjør Ajax-implementeringen til en bris og mer enn en hyggelig opplevelse. Faktisk finner du flere utdrag spredt over hele rammen som viser den store bruken av jQuery, hvis du prøver å grave inn i visningsfilene spesifikt.

Gjennom hele denne artikkelen bygger vi en tilpasset side for å demonstrere bruk av Ajax i OpenCart. Det vil være et enkelt grensesnitt som lar deg velge et produkt fra rullegardinlisten og viser en fin produktsammendragsblokk for det valgte produktet. Den interessante delen av brukssaken er måten produktsammenleggelsesblokken er bygd på. Den vil bli utarbeidet ved å bruke Ajax på flyet. Selvfølgelig er det ikke noe som gjør det til et eksempel utenfor verden, men jeg antar det vil tjene det grunnleggende formålet med å vise hvordan ting fungerer i OpenCart.

Jeg antar at du bruker den nyeste versjonen av OpenCart, som er 2.1.x.x! Også den primære diskusjonen av denne artikkelen konsentrerer seg om Ajax med OpenCart, så jeg vil glede seg over det grunnleggende om tilpasset modulutvikling i OpenCart. Men hvis du ikke er kjent med det, sørger en rask forklaring av kodestykket i mellom at du kan følge til slutten!

Et raskt blikk på filorganisasjonen

La oss raskt gå gjennom filoppsettet som kreves for vår tilpassede side.

katalog / styreenhet / Ajax / index.php: Det er en kontrollerfil som gir applikasjonslogikken til den vanlige kontrolleren i OpenCart.
Katalog / language / engelsk / ajax / index.php: Det er en språkfil som hjelper til med å sette opp språketiketter.
Katalog / view / tema / default / mal / ajax / index.tpl: Det er en visningsmalfil som inneholder XHTML på den egendefinerte siden.
Katalog / view / tema / default / mal / ajax / product.tpl: Det er en visningsmalfil som inneholder XHTML av AJAX-responsen.

Så det er en rask liste over filene vi skal implementere i dag.

Opprett modulfiler

Gå videre og lag en fil katalog / styreenhet / Ajax / index.php med følgende innhold.

last> språk ( 'Ajax / indeks'); $ Dette-> last> modell ( 'katalogen / produkt'); $ Dette-> dokument-> setTitle ($ dette-> Språk> får ( 'HEADING_TITLE')); // laste alle produkter $ products = $ this-> model_catalog_product-> getProducts (); $ data ['products'] = $ produkter; $ data ['breadcrumbs'] = array (); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> lenke ('common / home'), 'text' => $ this-> språk-> få ('text_home' )); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> lenke ('ajax / indeks'), '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-> kontroller ('common / column_left'); $ data ['column_right'] = $ this-> load-> kontroller ('common / column_right'); $ data ['content_top'] = $ this-> load-> kontroller ('common / content_top'); $ data ['content_bottom'] = $ this-> load-> kontroller ('common / content_bottom'); $ data ['footer'] = $ this-> load-> kontroller ('common / footer'); $ data ['header'] = $ this-> load-> kontroller ('common / header'); hvis (file_exists (DIR_TEMPLATE. $ this-> config-> få ('config_template'). '/template/ajax/index.tpl')) $ this-> response-> setOutput ($ this-> load-> vis ($ this-> config-> get ('config_template'). '/template/ajax/index.tpl', $ data));  ellers $ this-> response-> setOutput ($ this-> load-> view ('standard / mal / ajax / index.tpl', $ data));  // ajax samtale metode offentlig funksjon ajaxGetProduct () if (isset ($ this-> request-> get ['product_id'])) $ product_id = (int) $ this-> request-> get ['product_id ']; hvis ($ product_id> 0) // laster det bestemte produktet som er forespurt i ajax $ this-> load-> model ('katalog / produkt'); $ product = $ this-> model_catalog_product-> getProduct ($ product_id); $ data ['product'] = $ produkt; // forberede tommelbilde $ this-> load-> model ('tool / image'); hvis ($ produkt ['bilde']) $ data ['thumb'] = $ this-> model_tool_image-> endre størrelse ($ produkt ['image'], $ this-> config-> get ('config_image_thumb_width'), $ dette-> config-> får ( 'config_image_thumb_height'));  // formatpris $ data ['pris'] = $ dette-> valuta-> format ($ dette-> skatt-> beregne ($ produkt ['pris'], $ produkt ['tax_class_id'], $ this- > config-> få ( 'config_tax'))); $ Dette-> last> språk ( 'produktet / 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'); hvis (file_exists (DIR_TEMPLATE. $ this-> config-> få ('config_template'). '/template/ajax/product.tpl')) $ this-> response-> setOutput ($ this-> load-> vis ($ this-> config-> get ('config_template'). '/template/ajax/product.tpl', $ data));  ellers $ this-> response-> setOutput ($ this-> load-> view ('standard / mal / ajax / product.tpl', $ data));

Til å begynne med, index Metoden til kontrolleren brukes til å laste språk- og modellfiler og sette opp de vanlige variablene for den vanlige OpenCart-malen. Vi laster inn produktmodellen som er tilgjengelig i kjernen selv, så vi trenger ikke å duplisere koden for å hente produktinformasjonen.

Etter å ha lastet produktmodellen bruker vi getProducts Metode for å laste alle produktene. Til slutt konkluderer vi index metode ved innstilling index.tpl som vår viktigste malfil.

Neste er det viktige ajaxGetProduct metode, som brukes til å bygge en produktsammenleggelsesblokk basert på produktidentifikasjonen som ble sendt i Ajax-samtalen, som vi snart vil se i malfilen. Den laster den samme produktmodellen som vi gjorde i index metode, og kaller getProduct Metode for å hente spesifikk produktinformasjon basert på produkt-ID.

På slutten, den product.tpl mal er satt som en mal for denne metoden. Spesifikt i forhold til kravene i vårt tilfelle, bruker vi malen til å bygge vår Ajax-utgang, men du kan også sende JSON-responsen i stedet.

Fortsett, la oss lage en språkfil Katalog / language / engelsk / ajax / index.php for å holde statisk etikettinformasjon.

Visningsmalenfilen, en av de viktigste filene i sammenheng med denne opplæringen, skal opprettes på Katalog / view / tema / default / mal / ajax / index.tpl med følgende innhold.
     ">
  
          
      
 
 
 
 
 
 
  
Utdraget av vår interesse er på slutten av index.tpl, JavaScript-koden som bruker jQuery-metoder for å binde endring og Ajax-hendelser. Når brukeren velger et produkt fra rullegardinlisten, blir endringshendelsen avbrutt som til slutt gjør et Ajax-anrop. I Ajax-anropet sender vi Produkt ID vedlagt som en GET-spørringsstreng variabel.
På den annen side, som vi allerede har diskutert i regulatoroppsettet, ajaxGetProduct sender XHTML av produktsammendragsbasen basert på Produkt ID variabel for søkeord. I suksessmetoden legger vi til XHTML-responsen på div-taggen som har id-attributtet satt til product_summary.
Til slutt, gå videre og lag en malfil Katalog / view / tema / default / mal / ajax / product.tpl med følgende innhold for et Ajax-anrop.
   - 
 
  
  
 
Ikke noe fancy her - Vi har nettopp tatt med en grunnleggende produktsammendragsblokk XHTML.
Så, det er det så langt som filoppsettet angår. I vår neste del går vi gjennom fronten for å teste hva vi har bygget så langt.
Front-End Testing
Så vi har gjort alt hardt arbeid, og nå er det på tide for noen tester! Gå over til forsiden av OpenCart og besøk URL http://www.yourstore.com/index.php?route=ajax/index. Den skal vise et flott grensesnitt som vist i følgende skjermbilde.
Det er vår tilpassede side, og den viser en rullegardinboks som inneholder listen over alle produktene. Nå, la oss prøve å velge et produkt fra velg boksen, og det vil lage et Ajax-anrop i bakgrunnen.
 Som et resultat, bør du se en fin produktsammendragsboks som vises rett under rullegardinlisten som vist på følgende skjermbilde.
Hvis du har fulgt opplæringen og implementert alle filene som forklart, bør det fungere jevnt for deg så vel som det gjorde for meg! Selvfølgelig var det en ganske enkel demonstrasjon av hvordan Ajax jobber i OpenCart, men du kan strekke den til neste nivå i henhold til dine krav.
Gå videre og spill med det, og prøv å lage noen interaktive ting ved hjelp av Ajax, da det er den beste måten å lære. Så det er det for i dag, og jeg kommer snart tilbake med noen flere spennende ting.
Konklusjon
Det var Ajax med OpenCart som var den sentrale attraksjonen i dagens artikkel. Som vanlig tok vi en tilpasset modul tilnærming til å demonstrere det og laget en enkel, men effektiv bruk-sak. 
 Som alltid, hvis du leter etter ekstra OpenCart-verktøy, verktøy, utvidelser og så videre som du kan utnytte i dine egne prosjekter eller for din egen utdanning, ikke glem å se hva vi har tilgjengelig på markedet.
Jeg håper at det var informativ og nyttig, og ikke nøl med å legge igjen dine spørsmål og kommentarer!




		
			
	   
	




Kode