Share
Magento is al een tijdje de standaardset onder de e-commercekaders die op de markt beschikbaar zijn. Krediet gaat naar de overvloed aan verrijkte ingebouwde functies en de uitbreidbaarheid van het basisraamwerk zelf om op maat gemaakte extensies te ontwikkelen.
In deze tutorial leer je het concept van widgets in Magento en hoe je ze kunt gebruiken. Ik zal laten zien hoe je een aangepaste widget kunt maken, wat een zeer krachtige manier is om extra functies in Magento aan te sluiten.
Als Magento-ontwikkelaar of sitebeheerder bent u waarschijnlijk op de hoogte van de front-end lay-outstructuur van Magento. Bijna elk stukje inhoud dat wordt weergegeven aan de voorkant van Magento wordt gegenereerd door "Content Blocks". Magento-blokken zijn een erg krachtige manier om de front-end content te structureren en bieden flexibiliteit om je ermee te laten werken met behulp van XML-bestanden.
Aan de andere kant zijn widgets kleine goodies waarmee sitebeheerders nieuwe functies aan de voorkant kunnen inschakelen met behulp van een vooraf gedefinieerde set configuratie-opties. We kunnen zeggen dat widgets voor beheerders vriendelijker zijn in vergelijking met blokken, omdat ze niet te maken hebben met blokcodes om de blokken in te voegen. Om een widget op de pagina in te voegen, hoeft u alleen maar de widget in het vervolgkeuzemenu widgets te selecteren en de configuratieopties te selecteren, indien aanwezig.
Laten we proberen dit te begrijpen door een eenvoudig voorbeeld. In de informatiepagina's van uw site wilt u de koppelingen "Afdrukken" en "Contact opnemen" weergeven. Via de koppeling "Afdrukken" kunnen gebruikers de geselecteerde pagina afdrukken en via de koppeling "Contact" kunnen ze een query-e-mail naar de ondersteuningsafdeling verzenden. Om dit te bereiken, kunnen we eenvoudig een Magento-widget ontwikkelen waarmee sitebeheerders deze widget kunnen invoegen in de geselecteerde statische pagina van de site.
Dus zonder nog meer tijd te verspillen, duiken we in en zien we precies wat er nodig is om een aangepaste widget te ontwikkelen! En ja, ik blijf bij het hierboven genoemde voorbeeld.
We zullen een aangepaste widget ontwikkelen waarmee de sitebeheerder de koppelingen "Afdrukken" en "Contact" in CMS-pagina's kan invoegen. We bieden ook de widgetconfiguratie voor de koppelingen, zodat de beheerder kan selecteren welke links ze op de CMS-pagina wil weergeven.
Ik neem aan dat je bekend bent met de structuur van de Magento-modules. Laten we eerst kijken naar de bestandsstructuur die we moeten implementeren voor onze aangepaste widget.
Accentsconagua
app / etc / modules / Envato_All.xml: Het is een bestand dat wordt gebruikt om onze widget-module in te schakelen.app / code / local / Envato / WidgetLinks / etc / config.xml: Het is een module-configuratiebestand.app / code / local / Envato / WidgetLinks / etc / widget.xml: Het is een widget-declaratiebestand dat wordt gebruikt om widget-informatie en parameters te declareren.app / code / local / Envato / WidgetLinks / Model / Options.php: Het is een modelbestand dat de opties voor de configuratie biedt.app / code / local / Envato / WidgetLinks / Helper / data.php: Het is een bestand dat er gewoon is volgens de normen.app / code / local / Envato / WidgetLinks / Block / Links.php: De weergavelogica voor de widget komt hier.Volgens de Magento-conventies moeten we eerst het module-enabler-bestand maken. creëren app / etc / modules / Envato_All.xml en plak de volgende inhoud in dat bestand. We hebben "Envato" gebruikt als onze modulenaamruimte en "WidgetLinks" als onze modulenaam. Hiermee wordt onze module 'WidgetLinks' standaard ingeschakeld.
waar lokaal
Vanaf nu maken we de vereiste bestanden onder app / code / local / Envato / WidgetLinks, dat is ons widget-modulepad. creëren app / code / local / Envato / WidgetLinks / etc / config.xml en plak de volgende inhoud in dat bestand. Zoals u kunt zien, hebben we zojuist de namen van model-, helper- en blokklassen verklaard volgens de XML-conventies van de Magento-module.
0.0.1 Envato_WidgetLinks_Helper Envato_WidgetLinks_Block Envato_WidgetLinks_Model
Nu voor de interessante dingen: laten we de app / code / local / Envato / WidgetLinks / etc / widget.xml bestand en plak de volgende inhoud erin.
Afdruk- en onderzoekopties Staat toe om link- en afdrukopties toe te voegen 1 1 multi-Select widgetlinks / options
Laten we dit bestand in een beetje detail begrijpen. Eerst verklaren we onze widget door deze in te pakken met behulp van de unieke ID widgetlinks_links. Vervolgens de type attribuut wordt gebruikt om de naam van het widgetbestand in kaart te brengen - in ons geval zal dit het zijn app / code / local / Envato / WidgetLinks / Block / Links.php. De vertalen en module attributen spreken voor zich.
Verder, omdat we de configuratie voor onze widget willen bieden, hebben we dit met behulp van de app / code / local / Envato / WidgetLinks / Model / Options.php, vanwaar we onze opties voor de vervolgkeuzelijst krijgen.
Laten we vervolgens het modelbestand maken app / code / local / Envato / WidgetLinks / Model / Options.php.
'print', 'label' => 'Print Button'), array ('value' => 'email', 'label' => 'Enquiry Email Button'),); Heeft dit enige uitleg nodig? Het wordt alleen gebruikt om de opties voor onze configuratie drop-down te retourneren!
Ga verder en maak het app / code / local / Envato / WidgetLinks / Block / Links.php bestand en voeg de volgende code in dat bestand in.
getData (link_options); if (empty ($ link_options)) return $ html; $ arr_options = ontploffen (',', $ link_options); if (is_array ($ arr_options) && count ($ arr_options)) foreach ($ arr_options als $ optie) Switch ($ option) case 'print': $ html. = 'Afdrukken'; breken; case 'email': $ html. = 'Neem contact met ons op'; breken; return $ html; Dit is het bestand dat het echte werk doet van het weergeven van widgetlinks aan de voorkant. Eerst halen we de waarde van de configuratievariabele op link_options met behulp van het volgende codefragment.
$ link_options = $ this-> getData ('link_options');
Het zijn alleen de geselecteerde opties van de sitebeheerder tijdens het instellen van de widget op de CMS-pagina. De rest van de code is vrij gemakkelijk te begrijpen, omdat we de html uitvoer volgens de geconfigureerde opties.
Ten slotte moeten we het maken app / code / local / Envato / WidgetLinks / Helper / data.php bestand om ervoor te zorgen dat het vertaalsysteem van Magento naar behoren werkt. Het is bijna een leeg bestand, maar het zou daar moeten zijn! Dus laten we het maken.
Bedankt voor het geduld, we hebben het bijna gedaan! In het volgende gedeelte zullen we zien hoe we onze aangepaste widget kunnen gebruiken op de back-end CMS-pagina's.
Sluit de Widget aan met behulp van de beheerdersinterface
Wis nu alle caches aan de achterkant van Magento en zorg ervoor dat onze module is ingeschakeld. Ga daarna naar CMS> Pagina's en voeg een nieuwe CMS-pagina toe met behulp van Nieuwe pagina toevoegen. Vul de vereiste informatie in zoals vereist, en terwijl u zich in de Inhoud tab, is er een pictogram in de WYSIWYG-editor zoals hieronder getoond.
Klik op dat pictogram, waardoor de Widget-invoeging interface zoals getoond in de volgende screenshot.
In de Widget Type veld, selecteer onze aangepaste widget Afdruk- en onderzoekopties. Wanneer u dat selecteert, moet de configuratie-optie worden weergegeven Link opties. Selecteer de gewenste opties en klik op de Widget invoegen om onze widget in de CMS-pagina in te voegen. Zo ziet het eruit na het invoegen op de CMS-pagina.
Bewaar nu de CMS-pagina na het invullen van alle vereiste informatie en ga naar de voorkant om te zien hoe het eruit ziet!
Zoals u kunt zien, zijn er twee links weergegeven op de CMS-pagina aan de voorkant van Magento: Afdrukken en Neem contact met ons op. Dus dit was een heel eenvoudig voorbeeld om het concept van widgets te begrijpen, en ik hoop dat je het kunt uitbreiden naar iets nuttigs in jouw geval volgens jouw vereisten.
Conclusie
Widgets in Magento bieden een manier om de front-endfunctionaliteit specifiek voor niet-technische back-endbeheerders van de site te verrijken. Afgezien van dat, staat Magento je toe om aangepaste widgets te maken volgens je eigen vereisten, die ook heel eenvoudig in te stellen is.
Dus ik hoop dat deze tutorial je heeft geholpen om het concept van widgets en de ontwikkeling van aangepaste widgets te begrijpen! Ik kijk uit naar uw mening in de onderstaande feed!
