Share
Desde hace un tiempo, Magento ha sido el conjunto de referencia entre los marcos de comercio electrónico disponibles en el mercado. El crédito se debe a la gran cantidad de características integradas y ricas con las que viene y la capacidad de ampliación del marco base en sí para desarrollar extensiones a medida..
En este tutorial, aprenderá el concepto de widgets en Magento y cómo puede usarlos. Mostraré cómo puede crear un widget personalizado, que es una forma realmente poderosa de agregar características adicionales en Magento.
Como desarrollador o administrador de sitios de Magento, es probable que conozca la estructura de diseño de front-end de Magento. Casi todos los elementos de contenido que se muestran en la parte frontal de Magento se generan mediante "Bloques de contenido". Los bloques de Magento son una forma realmente poderosa de estructurar el contenido de front-end y brindan flexibilidad para permitirle manejarlos utilizando archivos XML.
Por otro lado, los widgets son pequeñas golosinas que permiten a los administradores del sitio habilitar nuevas funciones en el front-end utilizando un conjunto predefinido de opciones de configuración. Podemos decir que los widgets son más amigables para los administradores en comparación con los bloques, porque no tienen que lidiar con los códigos cortos de bloque para insertar los bloques. Para insertar un widget en la página, solo tiene que seleccionar el widget en el menú desplegable de widgets y seleccionar las opciones de configuración si se proporcionan.
Intentemos entender esto a través de un ejemplo simple. En las páginas informativas de su sitio, le gustaría mostrar los enlaces "Imprimir" y "Contáctenos". El enlace "Imprimir" permite a los usuarios imprimir la página seleccionada, y el enlace "Contáctenos" les permite enviar un correo electrónico de consulta al departamento de soporte. Para lograr esto, simplemente podemos desarrollar un widget de Magento que permita a los administradores del sitio insertar este widget en la página estática seleccionada del sitio.
Entonces, sin perder más tiempo, ¡analicemos y veamos exactamente lo que se necesita para desarrollar un widget personalizado! Y sí, me quedo con el ejemplo que acabo de mencionar..
Desarrollaremos un widget personalizado que permitirá al administrador del sitio insertar los enlaces "Imprimir" y "Contáctenos" en las páginas de CMS. También proporcionaremos la configuración del widget para los enlaces para que el administrador pueda seleccionar qué enlaces desea mostrar en la página de CMS.
Supongo que está familiarizado con la estructura de los módulos de Magento. Primero, veamos la estructura de archivos que necesitaremos implementar para nuestro widget personalizado.
Accentsconagua
app / etc / modules / Envato_All.xml: Es un archivo usado para habilitar nuestro módulo de widgets..app / code / local / Envato / WidgetLinks / etc / config.xml: Es un archivo de configuración del módulo..app / code / local / Envato / WidgetLinks / etc / widget.xml: Es un archivo de declaración de widget que se utiliza para declarar información y parámetros de widget.app / code / local / Envato / WidgetLinks / Model / Options.php: Es un archivo modelo que proporciona las opciones para la configuración..app / code / local / Envato / WidgetLinks / Helper / Data.php: Es un archivo que está justo ahí según los estándares.app / code / local / Envato / WidgetLinks / Block / Links.php: La lógica de visualización para el widget va aquí..Según las convenciones de Magento, primero debemos crear el archivo de habilitador de módulos. Crear app / etc / modules / Envato_All.xml y pega los siguientes contenidos en ese archivo. Hemos utilizado "Envato" como espacio de nombres de nuestro módulo y "WidgetLinks" como nombre de nuestro módulo. Habilitará nuestro módulo "WidgetLinks" por defecto..
cierto local
De ahora en adelante, crearemos los archivos requeridos bajo app / code / local / Envato / WidgetLinks, que es nuestra ruta de módulo de widget. Crear app / code / local / Envato / WidgetLinks / etc / config.xml y pega los siguientes contenidos en ese archivo. Como puede ver, acabamos de declarar los nombres de clase de modelo, de ayuda y de bloque según las convenciones de XML del módulo Magento.
0.0.1 Envato_WidgetLinks_Helper Envato_WidgetLinks_Block Envato_WidgetLinks_Model
Ahora, para las cosas interesantes: vamos a crear el app / code / local / Envato / WidgetLinks / etc / widget.xml archiva y pega los siguientes contenidos en ella.
Opciones de impresión y consulta Permite añadir opciones de enlace de Impresión y Consulta. 1 1 selección múltiple widgets / opciones
Entendamos este archivo en detalle. Primero, declaramos nuestro widget envolviéndolo usando el identificador único widgetlinks_links. A continuación, el tipo atributo se utiliza para asignar el nombre del archivo de widget, en nuestro caso será app / code / local / Envato / WidgetLinks / Block / Links.php. los traducir y módulo los atributos son autoexplicativos.
Además, como queremos proporcionar la configuración de nuestro widget, lo hemos declarado utilizando el app / code / local / Envato / WidgetLinks / Model / Options.php, de donde obtendremos nuestras opciones para el desplegable.
A continuación, vamos a crear el archivo modelo app / code / local / Envato / WidgetLinks / Model / Options.php.
'print', 'label' => 'Print Button'), array ('value' => 'email', 'label' => 'Inquiry Email Button'),); ¿Esto necesita alguna explicación? Solo se utiliza para devolver las opciones para nuestro desplegable de configuración!
Yendo más allá, crea el app / code / local / Envato / WidgetLinks / Block / Links.php Archivo e inserte el siguiente código en ese archivo.
getData ('link_options'); if (vacío ($ link_options)) return $ html; $ arr_options = explode (',', $ link_options); if (is_array ($ arr_options) && count ($ arr_options)) foreach ($ arr_options como $ option) Switch ($ option) case 'print': $ html. = 'Impresión'; descanso; caso 'email': $ html. = 'Contáctenos'; descanso; devolver $ html; Este es el archivo que hará el trabajo real de mostrar los enlaces de widgets en el front-end. Primero, buscamos el valor de la variable de configuración. link_options usando el siguiente fragmento de código.
$ link_options = $ this-> getData ('link_options');
Es solo las opciones seleccionadas por el administrador del sitio al configurar el widget en la página de CMS. El resto del código es bastante fácil de entender, ya que acabamos de preparar el html salida según las opciones configuradas.
Finalmente, tendremos que crear el app / code / local / Envato / WidgetLinks / Helper / Data.php Archivo solo para asegurarse de que el sistema de traducción de Magento funciona correctamente. Es casi un archivo en blanco, ¡pero debería estar allí! Así que vamos a crearlo.
Gracias por la paciencia, casi lo hemos logrado! En la siguiente sección, veremos cómo usar nuestro widget personalizado en las páginas finales del CMS.
Conecte el widget usando la IU de administración
Ahora, borre todos los cachés de la parte de atrás de Magento y asegúrese de que nuestro módulo esté habilitado. Después de eso, ve a CMS> Páginas y agregar una nueva página CMS usando Añadir nueva página. Llene la información necesaria según sea necesario, y mientras esté en el Contenido pestaña, hay un icono en el editor WYSIWYG como se muestra a continuación.
Haga clic en ese icono, que abrirá el Inserción de Widget interfaz como se muestra en la siguiente captura de pantalla.
En el Tipo de widget campo, seleccione nuestro widget personalizado Opciones de impresión y consulta. Cuando seleccionas eso, debería mostrar la opción de configuración Opciones de enlace. Seleccione las opciones que desee y haga clic en el Insertar Widget Botón para insertar nuestro widget en la página CMS. Esto es lo que parece después de insertarlo en la página de CMS.
Ahora, guarde la página de CMS después de completar toda la información requerida y diríjase a la interfaz para ver cómo se ve.!
Como puede ver, hay dos enlaces mostrados en la página de CMS en la parte frontal de Magento: Impresión y Contáctenos. Así que este fue un ejemplo muy básico para entender el concepto de widgets, y espero que pueda extenderlo a algo más útil en su caso según sus requisitos.
Conclusión
Los widgets en Magento proporcionan una manera de enriquecer la funcionalidad de front-end específicamente para los administradores de back-end no técnicos del sitio. Además de eso, Magento le permite crear widgets personalizados según sus propios requisitos, que también es muy fácil de configurar.
¡Espero que este tutorial te haya ayudado a comprender el concepto de widgets y el desarrollo de widgets personalizados! Esperando tus pensamientos en el siguiente feed!
