Com crear un widget personalitzat a Magento 2

Els ginys són funcions increïbles que permeten afegir contingut dinàmic o estàtic a les pàgines i blocs CMS del vostre lloc web de Magento 2. Són eines essencials reutilitzables i que ofereixen múltiples funcionalitats que es poden utilitzar al bloc CMS d’una botiga Magento 2.


Quan s’afegeixen a la botiga Magento, els ginys permeten als visitants navegar i veure la seva botiga amb facilitat. Creen plantilles i dissenys atractius del lloc web que enriqueixen l’experiència dels usuaris alhora que ofereixen un control i una flexibilitat sense precedents al plafó d’administració..

Aquest tutorial us ajudarà a crear un widget personalitzat a la vostra botiga Magento 2 per millorar l’experiència dels visitants i millorar la navegació a la botiga.

A punt? Comencem.

Pas 1: Creació d’un nou mòdul

El primer pas per crear un widget personalitzat a Magento 2 és establir un nou mòdul. El mòdul necessita una carpeta del mòdul i s’utilitzarà un espai de noms, en el nostre cas HostAdvice com a espai de noms i CustomWidget com a nom de carpeta del mòdul. La carpeta del mòdul es localitzarà a la carpeta del venedor titulada app / codi.

Per obtenir aquest tutorial, farem servir app / code / HostAdvicel / CustomWidget / composer.json. El compositor carregarà aquest fitxer quan l’executem, tot i que no utilitzarem el compositor amb el mòdul.

Pas 2: creació de register.php

Cal registrar el mòdul a Magento. Per aconseguir-ho, primer creeu un registre.php a la ubicació app / code / HostAdvice / CustomWidget / register.php utilitzant el codi següent.

<?php
\ Magento \ Framework \ Component \ ComponentRegistrar :: registre (
\ Magento \ Framework \ Component \ ComponentRegistrar :: MUDUL,
‘Toptal_CustomWidget’,
__DIR__
);

A continuació, utilitzeu el codi següent per crear un fitxer de registre, module.xml a la ubicació app / code / HostAdvice / CustomWidget / module.xml.

<?versió xml ="1.0" ?>

Pas 3: inicialització del giny

Un cop creats els fitxers de registre necessaris, el següent pas és inicialitzar el giny. Crea un widget.xml fitxer de configuració a la ubicació app / code / HostAdvice / CustomWidget / etc / widget.xml. Utilitzeu la següent comanda:

<?versió xml ="1.0" ?>

Widget Exemple HostAdvice

Títol

Contingut

A la comanda anterior, hem etiquetat dos camps d’entrada, Títol, i Contingut. Sempre que es truqui al nou giny, es mostraran els valors dels dos camps. També, a l’etiqueta, hem declarat la classe de bloc, HostAdvice \ CustomWidget \ Block \ Widget \ Samplewidget per dirigir el nou giny a utilitzar la plantilla particular.

Pas 4: Creació d’un bloc de widgets

A continuació, creeu un camp de bloc titulat Samplewidget.php, a la ubicació HostAdvice / CustomWidget / Block / Widget /, mitjançant el codi següent:

<?php

namespace HostAdvicel \ CustomWidget \ Block \ Widget;

utilitzeu Magento \ Framework \ View \ Element \ Template;
utilitzeu Magento \ Widget \ Block \ BlockInterface;

La classe Samplewidget estén la plantilla que implementa BlockInterface
{

protegit $ _template = "widget / samplewidget.phtml";

}

Al comandament anterior, HostAdvice \ CustomWidget \ Block \ Widge \ Samplewidget està declarat correctament i s’assigna una plantilla personalitzada a l’interior $ _template variable.

Ara, farem servir la comanda següent per crear un fitxer de plantilles samplewidget.phtml, a la ubicació HostAdvice / CustomWidget / view / frontend / templates / widget.

<?php si ($ $ bloc)->getData (‘widgettitle’)): ?>

<?php eco $ block->getData (‘widgettitle’); ?>

<?php endif; ?>
<?php si ($ $ bloc)->getData (‘widgetcontent’)): ?>

<?php eco $ block->getData (‘widgetcontent’); ?>

<?php endif; ?>
Al codi anterior, els paràmetres del widget s’han seleccionat trucant $->getData (‘widgettitle’); i $ això->getData (‘widgetcontent’); valors.

Pas 5: publicació del giny

En aquest moment, el vostre widget personalitzat s’ha creat correctament. Inicieu la sessió a l’àrea d’administració de Magento 2 i seleccioneu Contingut aleshores Pàgines.

Feu clic a Selecciona a l’opció Pàgina inicial i seleccioneu Edita.

Amplieu la secció Contingut i feu clic a la secció Insereix widget de la icona per publicar el giny personalitzat.

Això us portarà a la web Insereix widget àrea. Feu clic a la fletxa del tipus de widget i seleccioneu Widget Exemple HostAdvice, de la llista desplegable.

A la Opcions de widgets, entrar a la Contingut i Títol que es mostrarà a la pàgina principal i feu clic a Insereix giny.

Finalment, per fer qualsevol canvi, renteu la memòria cau Magento 2 llançant el CLI i executant les ordres a continuació:

php bin / magento cache: net
php bin / magento cache: flush

Carregueu el front-end de la vostra botiga.

Conclusió

Això és! Heu desenvolupat i publicat correctament un nou giny personalitzat a la vostra botiga Magento 2. El nou giny serà crucial per a la vostra operació front-end, ja que ofereix una llibertat més creativa i us permetrà comercialitzar els vostres productes amb facilitat.

Consulteu aquests tres millors serveis de hosting Magento:

FastComet

Preu inicial:
2,95 dòlars


Fiabilitat
9.7


Preu
9.5


Usuari amigable
9.7


Assistència
9.7


Característiques
9.6

Llegiu comentaris

Visita FastComet

A2 Hosting

Preu inicial:
3,92 dòlars


Fiabilitat
9.3


Preu
9.0


Usuari amigable
9.3


Assistència
9.3


Característiques
9.3

Llegiu comentaris

Visita Hosting A2

ScalaHosting

Preu inicial:
4,95 dòlars


Fiabilitat
9.4


Preu
9.5


Usuari amigable
9.5


Assistència
9.5


Característiques
9.4

Llegiu comentaris

Visita ScalaHosting

Articles relacionats amb la informació

  • Com crear productes de paquets a Magento 2
    intermèdia
  • Com crear un producte nou a Magento
    principiant
  • Com configurar el xifratge SSL / TLS a Magento
    intermèdia
  • Com crear un nou tema Magento
    intermèdia
  • Com instal·lar Magento a Cpanel
    principiant
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me