WooCommerce: Explorando la base de código

WooCommerce es un complemento con una base de código grande y complicada.

Si es un desarrollador, comprender el código subyacente en detalle es muy beneficioso y casi seguro que le reportará beneficios a largo plazo.

Si puede escribir un poco de PHP (la mayor parte de Business Bloomer está hecho de PHP Snippets), definitivamente necesita buscar en el núcleo de vez en cuando. De lo contrario, Stackoverflow no será suficiente por sí solo.

Si por casualidad vio y usó las guías de gancho visual de WooCommerce, como la de la página de un solo producto, bueno, simplemente se generan (manualmente...) a partir del código mismo mediante la ejecución de muchas búsquedas de PHP. Personalmente, guardo una copia de los últimos archivos de complementos en las descargas de mi PC, de modo que siempre puedo buscarlos cuando busco un gancho o una función específica.

Entonces, sígueme en este artículo mientras exploramos el código base de WooCommerce, cómo está estructurado y algunos de sus secretos internos.

Dónde encontrar el código

Para explorar el código base de WooCommerce, tiene un par de alternativas, además de descargar los archivos del complemento desde https://wordpress.org/plugins/woocommerce

En primer lugar, y más accesible, está navegando el código en línea a través de WordPress Trac . Esta es la forma más conveniente de navegar por el código, ya que siempre está actualizado y disponible al instante. Todo lo que necesita es una conexión a Internet y acceso a un navegador.

Este método es excelente para realizar búsquedas rápidas de códigos y marcar archivos de código para consultarlos en una fecha posterior. Incluso puede marcar un número de línea en particular también. por ejemplo, para vincular el método de procesamiento del bloque Checkout Gutenberg (que comienza en la línea 66), puede usar esta URL: https://plugins.trac.wordpress.org/browser/woocommerce/trunk/packages/woocommerce-blocks/src /BlockTypes/Checkout.php#L66

La otra opción para ver el código es clonar el repositorio oficial de WooCommerce GitHub . Esto se recomienda si necesita explorar el código con más detalle localmente a través de su editor preferido, ya que tiene acceso a herramientas de búsqueda más potentes.

Para hacer esto, deberá usar la línea de comando para descargar y administrar el repositorio de WooCommerce. Si está utilizando macOS o un sistema operativo Linux, puede usar la aplicación Terminal integrada. Git Bash es una excelente opción para los usuarios de Windows.

Independientemente de la aplicación de terminal que esté utilizando, ábrala y ejecute el siguiente comando para clonar WooCommerce en un directorio local de su computadora:

 clon de git https://github.com/woocommerce/woocommerce.git

Puede clonarlo directamente en su directorio local de complementos de WordPress (ubicado en /wp-content/plugins/), o en su lugar, clonar WooCommerce en una carpeta genérica en su computadora y vincularlo a su carpeta local de complementos de WordPress. La ventaja de este método es que puede agregar/eliminar fácilmente WooCommerce de una instancia local de WordPress en particular. No está vinculado a uno específico.

Una vez que haya clonado el repositorio, asegúrese de ejecutar también el siguiente comando para instalar las dependencias del complemento y los paquetes externos.

 instalación de npm && instalación de compositor

Esto es importante ya que no todo el código de WooCommerce está incluido en el repositorio central. Por ejemplo, los bloques de Gutenberg están contenidos en un repositorio separado de forma predeterminada. Para incluirlos en el código base, deberá usar el comando anterior para instalarlos específicamente.

Una vez que se hayan instalado todas las dependencias y repositorios externos, estarán disponibles al instante. Aquí está el mismo código de bloque de Checkout que vimos anteriormente en WordPress Trac, pero ahora tenemos acceso localmente.

Estructura del código

El complemento WooCommerce está organizado en varias carpetas de nivel superior:

• /activos
• /i18n
• /incluye
• /lib
• /paquetes
• /Data de muestra
• /origen
• /plantillas
• /vendedor

La carpeta de activos contiene una gran colección de estilos, fuentes, imágenes y JavaScript que ayudan con la estética y la interactividad de los complementos tanto en el administrador de WordPress como en la interfaz.

Las carpetas de complementos estándar, como i18n , sample-data y vendor , contienen funciones para funciones de internacionalización, datos de productos de muestra y bibliotecas de terceros, respectivamente.

La carpeta de plantillas contiene todas las plantillas de PHP estructuradas que se utilizan para varios contenidos de WooCommerce, como el carrito, el pago, los correos electrónicos, etc. Cada plantilla se puede sobrescribir copiándola en la ubicación correspondiente en un tema personalizado (generalmente un tema secundario), por lo que vale la pena navegar a través de esta carpeta en detalle para ver todas las plantillas disponibles que se pueden personalizar. Tenga en cuenta: personalizar WooCommerce a través de fragmentos es mejor que anular plantillas.

El núcleo principal de la funcionalidad del complemento está contenido en las carpetas include , lib , packages y src . En particular, la carpeta de inclusión contiene la lista principal de clases de complementos de PHP para una variedad de características de WooCommerce.

Además, todas las definiciones de bloques de Gutenberg disponibles en WooCommerce se encuentran en la carpeta de paquetes.

Explorando el código

El archivo de complemento principal en la carpeta raíz es woocommerce.php . Esto arranca el cargador automático y los paquetes.

El cargador automático administra la carga de paquetes y clases ubicados en el directorio /src. Los paquetes incluyen código desarrollado fuera del complemento principal de WooCommerce, como los bloques del editor.

Una vez que se ha cargado todo el código autocargado, la clase principal de WooCommerce se incluye y se crea una instancia a través de:

 WooCommerce::instancia()

Esto crea una nueva instancia de la clase WooCommerce y la almacena dentro de una variable de clase estática. Luego, esta nueva instancia se devuelve y se almacena en una variable global para que se pueda acceder a ella desde cualquier lugar.

Buscando en la base de código

La mayoría de los editores de código modernos proporcionan potentes funciones de búsqueda para poder navegar por la base de código. Para los ejemplos que se muestran a continuación, estamos usando VS Code, pero realmente no importa tanto, ya que casi todos los editores brindan una funcionalidad de búsqueda similar.

Podemos averiguar mucho sobre el código base realizando algunas búsquedas básicas. Por ejemplo, si buscamos qué ganchos están disponibles, la búsqueda de ' add_filter ' arroja alrededor de 380 ganchos de filtro.

Compare eso con los ganchos de acción que devuelven aún más con alrededor de 618 coincidencias para el término de búsqueda ' add_action '.

Hay mucho margen para refinar nuestras búsquedas, como hacer búsquedas solo en tipos de archivos específicos y para cadenas que coincidan específicamente con el caso del término de búsqueda y si es una palabra completa.

Por ejemplo, el siguiente resultado de búsqueda muestra coincidencias para ' WooCommerce ' donde es una palabra completa, distingue entre mayúsculas y minúsculas y se encuentra solo en un archivo PHP (otros tipos de archivos se ignoran).

Una de las razones por las que VS Code es tan popular es por la gran cantidad de extensiones disponibles, y hay varias que pueden ayudar con la navegación del código. Una extensión particular que se destaca es Bookmarks.

Le permite marcar ubicaciones en su código para que pueda regresar a secciones de código específicas de interés con solo hacer clic en un botón. Es muy útil, especialmente para grandes bases de código como WooCommerce.

En la siguiente captura de pantalla, he marcado algunos ganchos de acción de WooCommerce para un acceso rápido a los que me gustaría volver más adelante.

Simplemente haciendo clic en cualquiera de los elementos marcados en el panel del explorador lo llevará directamente a una línea de código específica.

Hay muchos otros términos que podría buscar. Tal vez le gustaría explorar qué clases de WooCommerce están disponibles. Este tipo de búsqueda podría hacerse más potente cuando se combina con Regex.

Por ejemplo, es fácil buscar nombres de clases que contengan 'WC' al principio (p. ej., 'WC_Structured_Data'). Pero, ¿qué pasa con las clases que contienen 'WC' en cualquier parte del nombre de la clase? Para eso, se requiere Regex ya que necesitaría buscar la cadena 'clase' seguida de un espacio, que luego es seguido por una cadena que contiene 'WC' en cualquier lugar dentro.

Con Regex también puede hacer cosas como buscar un nombre de función (o parte de un nombre) que sea un método de una clase y no una función independiente. Las posibilidades son infinitas, por lo que se recomienda encarecidamente un buen conocimiento práctico de Regex.

Un ejemplo rápido de personalización de WooCommerce

Supongamos que necesita personalizar la página de pago y, específicamente, necesita mostrar un subtítulo debajo del encabezado "Detalles de facturación".

Lo que podría hacer es buscar en el archivo del complemento de WooCommerce la cadena ' Detalles de facturación ', para ver si hay "algo" que luego pueda usar en su código personalizado. En este caso, usaré el editor de código NotePad++, solo para mostrar que cualquier software es válido:

Obtuve 2 resultados de búsqueda, pero solo uno es relevante para la página de pago. Entonces, abro ese archivo específico (form-billing.php), en esa línea específica (28):

… ¡y observe que hay un do_action() justo después del encabezado!

Esto nos da la oportunidad de "inyectar" algo de código allí sin anular todo el archivo de plantilla. Voy a functions.php de mi tema hijo y escribo lo siguiente:

/**
 * @snippet       Add Subtitle Below Billing Heading @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_before_checkout_billing_form', 'bbloomer_billing_details_subtitle' );

function bbloomer_billing_details_subtitle() {
   echo '<h4>This is a subtitle</h4>';
}

Y aquí está el “después”:

¡Seguir explorando!

Solo hemos arañado la superficie de lo que, francamente, es una base de código muy grande. Le llevaría mucho tiempo revisar cada línea de código, pero espero haber logrado abrir su apetito lo suficiente como para continuar investigando la fascinante base de código de WooCommerce y aprender aún más.