WooCommerce: CodeLobster, probablemente el mejor editor de código
Publicado: 2020-07-07Los sitios de comercio electrónico son el tipo de sitio web más dinámico. Después del lanzamiento del sitio, el desarrollo no se detiene y la elaboración continúa. Muchas empresas simplemente no pueden vender sus productos sin la ayuda de programadores.
Si ya tiene habilidades de programación PHP y una comprensión de los principios de WordPress, este artículo le dará una ventaja sobre cómo puede optimizar su flujo de codificación.
Específicamente, veremos el popular complemento WooCommerce y le mostraremos cómo codificar de manera efectiva con CodeLobster IDE, un editor de código que es mucho más complejo que NotePad ++ o Atom, y eso se debe a que está optimizado y desarrollado con WordPress y WooCommerce en mente.
Crear un sitio web de WooCommerce desde CodeLobster
Probablemente, ya hayas leído muchos casos sobre la creación exitosa de tiendas en línea en WordPress. Puede elegirlo con seguridad como plataforma para el comercio en línea. Este es un sistema bastante seguro para construir recursos de este tipo.
Cada IDE moderno implementa principalmente un buen soporte de WordPress y CodeLobster facilita la implementación de un nuevo proyecto, es decir, la instalación de un sitio web de prueba de WordPress en su computadora (desarrollo local) o su servidor .
Puede instalar el CMS usando el asistente. Solo necesita ingresar los datos del administrador y la dirección del servidor para conectarse a MySQL.
Además, hay un panel de administración conveniente, que también presenta una búsqueda integrada y una instalación rápida de complementos o temas y una forma de actualizar automáticamente el núcleo y los complementos de WordPress.
WooCommerce también está allí y se puede agregar rápidamente a su instalación local/en vivo.
Personalización de WooCommerce con funciones y ganchos
Un desarrollador que esté familiarizado con el concepto de WordPress puede descubrir rápidamente cómo personalizar WooCommerce, ya que el complemento es fácil de configurar y su código es completamente extensible.
Un programador de PHP puede usar funciones y clases de WooCommerce. Gracias a ellos, obtendrá acceso a variables globales, configuraciones y todos los demás recursos con los que interactúa el WC.
Use la función de autocompletar cuando trabaje con estas funciones, presione Ctrl + Espacio cuando ingrese el nombre de la función, o Shift + Ctrl + Espacio para obtener una pista sobre los parámetros .
En la captura de pantalla anterior, hemos escrito el siguiente código:
//Get WC_Order object by order ID
$order_id = 55;
$order = wc_get_order( $order_id );
//Get customer ID
$customer_id = $order->get_user_id();
La función de WooCommerce wc_get_order () se usa para obtener el objeto del pedido, desde el cual puede extraer cualquier dato del pedido, por ejemplo, averiguar la identificación del cliente.
Puede pasar instantáneamente a la definición de la función si hace clic en su nombre mientras mantiene presionada la tecla Ctrl. Este enfoque lo ayudará a comprender en detalle cómo funcionan las funciones en WC.
Cuando solo necesite actualizar rápidamente en la memoria el propósito de cualquier método y averiguar qué parámetros pasarle, preste atención a la información sobre herramientas que aparece cuando pasa el cursor sobre un elemento en el código.
Los ganchos, como Acciones y Filtros, se usan ampliamente en WC para que pueda personalizar dicho complemento sin anular archivos o plantillas principales.
Si selecciona " hacer_acción " o " aplicar_filtros " en el archivo, el editor resaltará todas las coincidencias de gancho.
Puede usar Acciones para mostrar marcas adicionales. Solo necesita averiguar su ubicación en los archivos que son responsables de mostrar la interfaz. Los filtros se usan para procesar o analizar datos, por ejemplo, cuando necesita cambiar una matriz u objeto antes de usarlo.
Podemos agregar la funcionalidad necesaria al archivo “functions.php” en nuestro tema. Escriba su propia función y regístrela usando el método add_action ().
Ahorrará mucho tiempo si utiliza el sistema de ayuda dinámica cuando trabaja con WordPress y WooCommerce en CodeLobster IDE.
Tan pronto como comience a ingresar su código, el IDE selecciona automáticamente enlaces a la documentación oficial para todas las funciones y objetos.
Vaya a la pestaña "Ayuda dinámica" en el panel derecho del programa y haga clic en el enlace apropiado para comenzar a estudiar la documentación en el navegador.
Sobrescribir archivos de plantilla en WooCommerce
WooCommerce tiene su propio sistema de plantillas: los archivos de plantilla de interfaz se encuentran en la carpeta " wp-content/plugins/woocommerce/templates/ ".
Técnicamente, si desea diseñar una página de carrito personalizada o editar la página de un solo producto a fondo, puede "anular" el archivo de plantilla relevante y colocarlo en la carpeta de su tema secundario. Esto es a menos que desee trabajar con ganchos y filtros, que son mucho más fáciles y limpios desde el punto de vista del desarrollo.
Para comenzar a trabajar con plantillas, cree una carpeta " woocommerce " en su carpeta de temas. Ahora puede copiar cualquier plantilla de WooCommerce que desee anular y colocarla allí. WooCommerce encontrará dicha anulación y cargará la tuya y no la predeterminada.
Puede insertar directamente HTML, texto sin formato o código PHP en los archivos de plantilla encerrándolos entre “ <?php …. ? > ” etiquetas.
En este ejemplo, tomamos el archivo de plantilla de la página del carrito de " woocommerce/templates/cart/cart.php ", lo copiamos y lo pegamos en la carpeta /woocommerce de nuestro tema secundario (" storefront-business/woocommerce/cart/cart.php " ), y luego personalizarlo.
Ahora se reescribió la plantilla estándar para mostrar la página del carrito y se tendrán en cuenta todos los cambios que hicimos.
Trabajo en equipo efectivo del proyecto de comercio electrónico
Por lo general, las grandes tiendas en línea son desarrolladas y respaldadas por un equipo de programadores. CodeLobster IDE facilita el mantenimiento del código fuente del proyecto a través de la integración con Git .
Es posible trabajar con repositorios locales y remotos, crear nuevas ramas para realizar pruebas seguras y guardar cambios mediante confirmaciones.
La mayoría de los comandos de Git se pueden ejecutar directamente desde el menú contextual del proyecto, por ejemplo, para crear una confirmación, simplemente seleccione "Git" -> "Commit".
Al mismo tiempo, CodeLobster IDE ofrece un cuadro de diálogo conveniente en el que verá inmediatamente el estado de todos los archivos de su proyecto y podrá seleccionar aquellos archivos que deben agregarse a la instantánea.
IDE viene con útiles herramientas gráficas para ver el historial de cambios y comparar diferentes versiones de archivos. No hay necesidad de distraerse y ejecutar utilidades de terceros.
Después de ejecutar el comando “Git” -> “Historial”, tenemos la oportunidad de visualizar todo el historial de modificaciones , moviéndonos secuencialmente a través de las confirmaciones.
El siguiente comando útil "Git" -> "Comparar" facilita el examen del historial de ediciones y la visualización de todas las modificaciones del mismo archivo en diferentes confirmaciones.
Una forma conveniente de ver las versiones lo ayudará a lidiar rápidamente con las ediciones, incluso si fueron realizadas por otros desarrolladores. Las líneas del código que son diferentes o que se han agregado se resaltan en rojo.
La compatibilidad con un buen VCS garantiza la integridad del código fuente, así como una fácil gestión de todo el proyecto. Las características integradas serán útiles para equipos de cualquier tamaño, incluidos jóvenes programadores y profesionales.
El propietario del sitio podrá atraer visitantes y comenzar a realizar ventas, mientras que el equipo de desarrollo continuará introduciendo nuevas funciones y planificando la expansión del sitio, sin temor a interrumpir el trabajo de un código estable existente de la tienda.
Resumamos
Para implementar rápidamente nuevas soluciones digitales con WordPress, necesita un IDE confiable y funcional. Codelobster admite de manera integral este sistema y otros CMS populares para todas las tareas comerciales: Joomla, Drupal y Magento.
Los desarrolladores web tendrán que resolver la mayoría de las próximas tareas, así que prepárate para un trabajo serio y para la aparición de muchos proyectos interesantes pronto.