Tilpasset Widget Development i Magento

For en stund nå har Magento vært referansesettet blant e-handelsrammene som er tilgjengelige i markedet. Kreditt går til overflod av rikrike innebygde funksjoner som følger med og utvidelsen av basisrammen selv for å utvikle skreddersydde utvidelser. 

I denne opplæringen lærer du begrepet widgets i Magento og hvordan du kan bruke dem. Jeg skal demonstrere hvordan du kan lage en egendefinert widget, som er en veldig kraftig måte å plugge-i ekstra funksjoner i Magento.

Introduksjon til Widgets

Som Magento-utvikler eller nettstedadministrator er du sannsynligvis klar over Magento's front-end layout struktur. Nesten alle deler av innholdet som vises på forsiden av Magento, genereres av "Content Blocks". Magento-blokkene er en veldig kraftig måte å strukturere innholdet på, og gir fleksibilitet når det gjelder å gi deg mulighet til å håndtere dem ved hjelp av XML-filer.

På den annen side er widgets små godbiter som tillater nettstedet administratorer å aktivere nye funksjoner i front-end ved hjelp av et forhåndsdefinert sett med konfigurasjonsalternativer. Vi kan si at widgets er mer vennlige til administratorer i forhold til blokker, fordi de ikke trenger å håndtere blokkkortkoder for å sette blokkene inn. Hvis du vil sette inn en widget på siden, trenger du bare å velge widgeten fra rullegardinmenyen, og velg konfigurasjonsalternativene hvis den leveres.

La oss prøve å forstå dette gjennom et enkelt eksempel. På informasjonssidene på nettstedet ditt, vil du vise "Print" og "Kontakt oss" -koblinger. Koblingen "Skriv ut" lar brukerne skrive ut den valgte siden, og koblingen "Kontakt oss" lar dem sende en spørringsmelding til supportavdelingen. For å oppnå dette kan vi bare utvikle en Magento-widget som gjør at nettstedadministratorer kan sette inn denne widgeten i den valgte statiske siden på nettstedet.

Så uten å kaste bort noe lengre tid, la oss dykke inn og se nøyaktig hva som trengs for å utvikle en tilpasset widget! Og ja, jeg holder fast ved eksempelet som er nevnt ovenfor.

Egendefinert Widget Development

Vi utvikler en egendefinert widget som gjør at nettstedadministratoren kan sette inn koblingen "Print" og "Kontakt oss" på CMS-sider. Vi gir også widgetkonfigurasjonen for koblingene, slik at administratoren kan velge hvilke koblinger hun vil vise på CMS-siden.

Jeg antar at du er kjent med strukturen i Magento-modulene. Først, la oss se filstrukturen som vi må implementere for vår egendefinerte widget.

  • app / etc / moduler / Envato_All.xml: Det er en fil som brukes til å aktivere vår widget modul.
  • app / code / local / Envato / WidgetLinks / etc / config.xml: Det er en modulkonfigurasjonsfil.
  • app / code / local / Envato / WidgetLinks / etc / widget.xml: Det er en widgetdeklarasjonsfil som brukes til å deklarere widgetinformasjon og parametere.
  • app / code / local / Envato / WidgetLinks / Modell / Options.php: Det er en modellfil som gir alternativene for konfigurasjonen.
  • app / code / local / Envato / WidgetLinks / Helper / Data.php: Det er en fil som bare er der i henhold til standardene.
  • app / code / local / Envato / WidgetLinks / Block / Links.php: Skjermlogikken for widgeten går her.

Filoppsett

I henhold til Magento-konvensjonene må vi først opprette modulen enabler-filen. Skape app / etc / moduler / Envato_All.xml og lim inn følgende innhold i den filen. Vi har brukt "Envato" som vår modulnavn og "WidgetLinks" som vårt modulnavn. Det aktiverer vår WidgetLinks-modul som standard.

     ekte lokal   

Fra nå av lager vi de nødvendige filene under app / code / local / Envato / WidgetLinks, som er vår modul modul bane. Skape app / code / local / Envato / WidgetLinks / etc / config.xml og lim inn følgende innhold i den filen. Som du kan se, har vi nettopp erklært modellen, hjelperen og blokkering av klassenavnene i henhold til Magento-modulen XML-konvensjonene.

     0.0.1      Envato_WidgetLinks_Helper     Envato_WidgetLinks_Block     Envato_WidgetLinks_Model    

Nå for interessante ting: la oss lage app / code / local / Envato / WidgetLinks / etc / widget.xml fil og lim inn følgende innhold i den.

    Utskrifts- og forespørselsalternativer Tillater å legge til koblinger for utskrift og forespørsel    1 1 Flervalg widgetlinks / alternativer    

La oss forstå denne filen litt detaljert. Først erklærer vi vår widget ved å pakke den opp ved hjelp av den unike identifikatoren widgetlinks_links. Deretter type Attributt brukes til å kartlegge navnet på widgetfilen, i tilfelle det vil være app / code / local / Envato / WidgetLinks / Block / Links.php. De oversette og modul Attributter er selvforklarende.

Videre, som vi vil gi konfigurasjonen for widgeten vår, har vi erklært dette ved hjelp av tags. Du kan erklære så mange parametere som du vil gi, men i vårt tilfelle er det bare en enkelt parameter som heter . Det vil være en enkel multi-select-rullegardinmeny med to alternativer: "Skriv ut" og "Kontakt oss". Og ja, det tag kart til modellfilen app / code / local / Envato / WidgetLinks / Modell / Options.php, fra hvor vi får våre valg for rullegardinmenyen.

Neste, la oss lage modellfilen app / code / local / Envato / WidgetLinks / Modell / Options.php.

 'utskrift', 'label' => 'Utskriftsknapp'), array ('value' => 'email', 'label' => 'Send forespørselsknapp')); 

Trenger dette noen forklaring? Det er bare vant til å returnere alternativene for rullegardinmenyen!

Går videre, opprett app / code / local / Envato / WidgetLinks / Block / Links.php fil og sett inn følgende kode i den filen.

GetData ( 'link_options'); hvis (tomt ($ link_options)) return $ html;  $ arr_options = eksplodere (',', $ link_options); Hvis (is_array ($ arr_options) && count ($ arr_options)) foreach ($ arr_options as $ option) Bytt ($ opsjon) case 'print': $ html. = '
Skrive ut
'; gå i stykker; case 'email': $ html. = '
Kontakt oss
'; gå i stykker; returnere $ html;

Dette er filen som vil gjøre det virkelige arbeidet med å vise widgetkoblingene i frontendoen. Først henter vi verdien av konfigurasjonsvariabelen link_options ved hjelp av følgende kodestykke.

$ link_options = $ this-> getData ('link_options');

Det er bare de valgte alternativene av nettstedadministratoren mens du konfigurerer widgeten på CMS-siden. Resten av koden er ganske lett å forstå, da vi bare forbereder html output som per de konfigurerte alternativene.

Til slutt må vi opprette app / code / local / Envato / WidgetLinks / Helper / Data.php arkiver bare for å være sikker på at Magento oversettelsessystem fungerer som det skal. Det er nesten en tom fil, men det burde være der! Så la oss lage den.

Takk for tålmodigheten, vi har nesten gjort det! I neste avsnitt ser vi hvordan du bruker vår egendefinerte widget på CMS-sider på baksiden.

Plugg inn widgeten ved hjelp av admin-brukergrensesnittet

Nå, fjern alle hurtigbufferne fra bakenden av Magento og sørg for at modulen er aktivert. Etter det, gå til CMS> Sider og legg til en ny CMS-side ved hjelp av Legg til ny side. Fyll nødvendig informasjon etter behov, og mens du er i Innhold fanen, er det et ikon i WYSIWYG-editoren som vist nedenfor.

Klikk på det ikonet, som åpner Widget Insertion grensesnitt som vist i følgende skjermbilde.

I Widget Type feltet, velg vår egendefinerte widget Utskrifts- og forespørselsalternativer. Når du velger det, bør det vise konfigurasjonsalternativet Linkalternativer. Velg alternativene som du ønsker og klikk på Sett inn widget knappen for å sette inn vår widget på CMS-siden. Slik ser det ut etter at du har lagt inn på CMS-siden.

Nå lagre CMS-siden etter å ha fylt all nødvendig informasjon og gå over til forenden for å se hvordan det ser ut!

Så som du kan se, er det to koblinger som vises på CMS-siden i fronten av Magento: Skrive ut og Kontakt oss. Så dette var et veldig grunnleggende eksempel for å forstå konseptet med widgets, og jeg håper du kan utvide det til noe mer nyttig i ditt tilfelle som per dine krav.

Konklusjon

Widgets i Magento gir en måte å berikke front-end-funksjonaliteten spesielt for ikke-tekniske back-end administratorer av nettstedet. Bortsett fra det, gir Magento deg muligheten til å lage egendefinerte widgets i henhold til dine egne krav, noe som også er veldig enkelt å sette opp.

Så jeg håper denne opplæringen har hjulpet deg med å forstå konseptet med widgets og utviklingen av egendefinerte widgets! Ser frem til dine tanker i fôret nedenfor!