 Y después de las diferentes sesiones de las 4h30 y 10h00 la verdad que se nota el día Espero que bueno, a lo largo del día y de lo que queda, siga disfrutando Os voy a presentar el compañero Oscar Abad que nos va a hablar sobre los hooks de WooCommerce Un tema bastante interesante porque yo creo que gracias a tener de ellos puedes solucionar o por lo menos ver qué mejorar Con que nada os dejo con ellos, con él, perdón, y adelante todos tuyos Venga, Mago, muchas gracias Bueno, buenas tardes, vamos a hablar un poquito de los hooks de WooCommerce, vamos a ver lo que es Primero, pues como presenté al compañero, soy Oscar Azulgueira, bueno, aquí tenéis una serie de Unas redes sociales, Twitter y demás, yo me dedico personalmente, exclusivamente a desarrollo y programación WooCommerce, y trabajamos mucho con WooCommerce, la verdad que es una herramienta muy útil ¿Qué es WooCommerce? ¿Sabéis todos aquí lo que es WooCommerce? Sí, vale, perfecto, muy bien, pues como ya sabéis es el plugin más utilizado Ahora mismo para WooCommerce, es un plugin que nos da muchas posibilidades, nos permite hacer muchísimas cosas Muy sencillas, como vamos a ver ahora, tenemos aquí una serie de características que les puse más o menos de prisa Y es muy fácil de instalar y configurar, como ya sabréis, aunque tienen muchas opciones de configuración Hablo del plugin en sí, no hablo de add-ons ni de plugins añadidos o suscritios o membership, hablo solo de WooCommerce, ¿vale? Es muy fácil de gestionar, o sea, con un poquito de enseñarle si hacemos una tienda online, Unicommerce para un cliente, o lo que es bastante fácil de esa persona que entienda o que comprenda cómo funciona su tienda online y que pueda subir productos, hacer los precios, una serie de cosillas, que es bastante sencillo Tiene una buena cantidad de plugins y temas añadidos, add-ons, hay temas específicos para WooCommerce y plugins que mejoran o cambian el comportamiento de WooCommerce, como hablábamos antes Suscritions, membership, hay muchísimos, ¿no? Llegamos para hacer ofertas, para hacer infinidad de cosas, ¿no? Hay una cantidad muy grande, está muy bien desarrollado, a nivel de código está muy desarrollado aunque sí que es cierto que es un plugin que no es pequeño, pesa bastante, pero lo hace muy bien y tiene, como vamos a ver, montones de hooks, ahora vamos a ver lo que son los hooks y cómo funcionaríamos con ellos y también permite la sobrescritura de ficheros de nuestro sim, esto es, ¿sabéis lo que es esto? Vale, lo que vamos a hacer para WooCommerce es un plugin, ¿vale? Entonces va en la carpeta de plugins, plugins, WooCommerce, ¿vale? Y dentro de ese plugin hay una serie de ficheros, una serie de templates, una carpeta de templates y luego podemos, nosotros en nuestro tema, podemos crear dentro de nuestro tema la carpeta WooCommerce y hay sobre escribir los ficheros que queramos, ¿vale? Por ejemplo, el cart.php, que es el carrito, pero podemos sobre escribir, hacer unos cambios directamente en nuestro tema y luego hay una gran comunidad, hay mucha gente trabajando con esto, que le gusta mucho esto y que lo utiliza, ¿vale? y hay muchísimas cosas más, ¿vale? Los hooks, lo explico para que nos entendamos, para que no sepa, un hook es más bien, un sitio o un momento puede ser un sitio o un momento, ¿vale? Un sitio dentro de nuestra tienda online, dentro de WooCommerce Veamos la página web, o sea, la página del producto, por ejemplo, puede ser un sitio, un lugar concreto o puede ser un momento, ¿vale? Al clicar el botón de daño al carrito, o sea, es un momento, ¿vale? Yo ya me lo explico bastante bien, pero que bueno, es que, ¿vale? Y luego tiene muchísimos hooks, ¿vale? Que podemos utilizar. Los diferencias WordPress, como WordPress también hay, WooCommerce tiene los suyos, ¿vale? Pero esto es de WordPress. Los Actions y los Filters. Los Actions, lo he puesto por aquí, no lo he puesto, ¿vale? Los Actions, digamos, que son, que podemos añadir o quitar funcionalidad. Por ejemplo, poner un texto debajo del botón del carrito o encima, que lo vamos a ver luego, ¿vale? Y el Filters ya sería modificar, por ejemplo, el texto del botón, ¿vale? Los Filters, digamos, que modifican, tú a final coges lo que tiene por defecto y lo modificas y eso lo das para que lo muestre ese texto, ¿verdad? En este caso, ¿vale? Es un ejemplo. Y los Actions son, pues, a final, vamos a poner algo en algún sitio dentro de nuestra página, ¿no? En este caso, WooCommerce. Vale, esta es una página de WooCommerce, tiene dentro de la documentación, tiene un montón de hooks que podéis ver. Aquí sé que he hecho un falta, así como WordPress tiene su codex, ¿no? Bueno, ahora Developer y tiene muy bien explicadito cada uno de los hooks, las funciones, las clases y tal. Aquí sí que vienen enumeradas y un poquito descritas, por decirlo de una forma, pero falta, yo animaría la gente de WooCommerce a que lo documentaran un poquito más, ¿vale? Pues como el codex, ¿no? Tienes ahí los argumentos, una serie de ejemplos, ¿vale? Es una cosa, pero, bueno, tenéis ahí toda la lista de hooks, de funciones y demás. En recursos interesantes que suelo usar yo, que seguramente sonarán, sobre todo el primero, ¿no? WooCommerce Visual Hook Guide Series, esta es una página web del chico este, que se llama, ¿no? Business Roomba, que aquí tenéis una serie de páginas donde él tiene, pues, la página de single, la página del cart, la página del checkout, ¿vale? Y está dibujado dentro de esa página donde están los hooks, ¿vale? Así lo podéis ver visualmente. Y el otro es un plugin, que hace prácticamente lo mismo, pero en directo llegamos, instaláis en vuestro WooCommerce y podéis ver los hooks, no están todos, porque ese plugin creo que hemos instalado hace dos años, pero os puede dar una idea más interesante, ¿vale? Vamos a ver un poquito estos dos opciones, ¿vale? Aquí veis la opción del Business Roomba este, aquí tenéis, por ejemplo, la página de... ¿esto pinta? Así, aquí tenéis la página de... La página de single, ¿no? Entonces aquí veis, pues, aquí tenéis los hooks, ¿vale? Aquí tenéis unos que son, digamos, antes de, a principio, la página del single, lo aquí tenéis en la zona de la... donde diría, digamos, el tema del botón, ¿no veis aquí? El tema de las categorías, todas estas cosas, ¿no? Entonces aquí tenéis una serie de... y si fijáis, en esta página tiene un más, que es el pulsar y se despliega, ¿vale? Y mostramos información sobre esos hooks, ¿vale? Y aquí tenéis el nombre de hook, ¿vale? Entonces, por ejemplo, ¿imaginaos? ¿Es que no? ¿Es que no sabe? Este, el que sea, cogís ese hook y dice, yo quiero poner ahí un texto, ¿vale? El que sea, vamos a ver ahora, pues cogís ese hook y dice, pues, por poner ese texto, ¿vale? Lo agregamos como se hace, ¿vale? Y, honeste, honeste, honeste, me da igual, ¿eh? Cualquiera de ellos, o de otras páginas, o... es muy sencillito, vamos a ver como se hace, ¿vale? Es simplemente que veáis esta página, la del visual hook guide, porque es muy interesante, os voy a dar una visión más... más general y más acertada, ¿no? Y ahora tenemos el otro, es el plugin, ¿no? Así es parecido, pero bueno, esto es un plugin para instalar en vuestro Google Comer, o en un Google Comer de acuerdo, si queréis, para que lo veáis también visualmente, ¿no? Aquí tenéis, por ejemplo, también los hooks que aparecen antes de la imagen del producto, aquí tenéis todo el tema del carrito, en las categorías, y aquí se la parte de abajo, por ejemplo, el producto relacionado, es que también tienen hooks. Hay hooks en todos los lados, ¿vale? Y esto es muy interesante para hacer una idea. Vale, hay páginas, pues hay muchas, ¿no? Para el carrito, para el checkout, mi cuenta, producto, hay muchísimas páginas de Google Comer, con las que podemos mirar, a ver si los hooks y jugar con ellos, ¿no? Bueno, jugar, trabajar con ellos. Vale, un hook, ¿vale? Yo aquí he oído un hook para hacer un ejemplo, ¿vale? Para que lo veáis más, lo vea mejor. El hook en Google Comer se llama, Google Comer Before Action Card Button, lo hice claramente, ¿verdad? Antes de añadir, antes del botón de añadir al carrito, ¿qué es este de aquí? Ya veis que está posicionado, ¿vale? Ya veis que está posicionado justo antes del botón de añadir al carrito, ¿vale? Vamos a hacer un ejemplo con este hook, ¿vale? Lo que hacemos es, la función, digamos, es azaktion, ¿vale? Es la función de Warpers que tiene para referirnos a los hooks. Azaktion, entonces ya sabemos que es un hook, ¿vale? No es un filter, es una acción. Y aquí pondríamos el nombre del hook, y aquí la función que hemos creado, que vamos a crear. Bueno, luego aquí tenemos la prioridad, que ya os comentaré si queréis un poco más tarde, y argumentos, ¿vale? Pero el momento con esto, con estas dos cosas, con el hook y la función, nos vale. Y aquí tenéis un ejemplo, que es, azaktion, como veis aquí, el nombre del playin, el nombre del hook, que es Google Merchant for Actual Car Button, y aquí la función que voy a crear ahora. ¿Vale? Es el nombre de la función. Ya veis que no tiene ni paréntesis, ¿vale? Simplemente el nombre de la función. Y aquí vemos ahora un poco más lo que antes, y la función que he creado yo. Simplemente he hecho un eco, simplemente muestro esto, ¿vale? Que es un H1 que pone compraplice. El suplicar, la cosa de suplicar es para... Para dar un poquito de... Eso es, ¿vale? Hay que pensar en todo, ¿vale? Vale, pues ya veis que la función... Bueno, las funciones no sabéis, las funciones de MPHP se crean así. Función y luego el nombre de la función con paréntesis, ¿vale? Estás muy sencillita, ¿eh? Lo único que haces es el eco, que es mostrar por pantalla esto, ¿vale? Esto es lo que hay entre la... ¡Oh, yeah! ¿Ese sí o yo? No, no, sí o yo. ¿Ese o yo he hecho? No. Aquí un botón que... Aquí un botón que hay en la pantalla, un monitor. Escape, escape, escape. Escape. Escape. Cancelar. Tendrá ahí algún botón de algo... Era para que te vayan las zapatillas, por cierto, ya. Zapatillas de Fernando. Pepsi, oh, yeah. Bueno, pues que ha momento esto, ya veis, ¿no? Las funciones se hacen muy sencillas, podemos complicarlo o mejorarlo como nosotros queramos, ¿no? Y también depende un poquito de nuestros conocimientos. Pero si buscamos en Google, seguro que vamos a encontrar lo que... o casi lo que queremos, ¿no? Entonces, ahora vamos a ver el resultado, ¿vale? El antes y el después, ¿vale? Ya veis que la clase de súplica era un poquito rojo, ¿vale? Para que se noten nada más. Entonces, lo que hacemos con esto, ya lo veis, ¿no? Es con... sin tocar, digamos, el código de Google Gumbes, nosotros no modificamos Google Gumbes como tal. Nosotros estamos utilizando un código que seguramente meteremos en el Functions, que podemos hablar luego si no sobra tiempo, que igual no hay que meter en el Functions, pero bueno, en el Functions PHP podemos meterlo, y lo que hace, simplemente, ese código es mostrar esto, compra please, o lo que queráis. Podéis complicarlo más, pues con algún condicional, pues, por lo que sea, pues si la persona ha comprado este producto, pues si quieren comprar please, pues, pues, igual compra por favor, o lo que sea, ¿no? Otra opción, ¿no? Vale, esto se entiende. Si tenéis preguntas, la preguntáis. Si no, no me preguntéis. ¿Vale? Si tenéis alguna duda. Vale, otro ejemplo, porque esto se ve bien mejor con ejemplos, ¿no? En este caso vamos a utilizar a jugar con un filter, ¿vale? Con un filtro. Vamos a cambiar el texto, como he comentado antes, he puesto este ejemplo porque es lo más sencillo de ver, y lo más... no, lo más suele utilizar. Cambiar el texto o añadir el carrito, como, no sé, comprar o... o otro texto, ¿no? Estás tratando mucho en comprar, o lo que sea, ¿no? Lo que queramos. Eso depende de nuestra... la chispa que tengamos. Vamos a cambiar el... el hook, el filter hook que vamos a utilizar es este. Ya veis que es descriptivo. Google comes product single a tocar text. ¿Vale? Sabemos todos inglés. ¿Vale? Entonces aquí tenemos el código. Vale, el... Yo, justo antes, el ejemplo del Actual, pues el filter es igual. O sea, aquí podemos el filtro, ¿no? Esto no hay que inventarse, esto ya está. Esto ya existe, los filtros ya existen. Podemos añadir filtros, pero eso es otra historia. ¿Vale? Los filtros que tiene Google comes. Cojemos el filtro, esto no es que es copiar y pegar, y luego de aquí, pues lo que hacemos es crear una función. Que no os asuste el tema de función, si no sabéis lo que es o no lo tenéis mucho... mucho... Pero es una tontería. Es una cosa sencilla. Function en el nombre de la función, con su abre y cierre, y luego el echo, en este caso hago echo, sencillito para que nos empezamos todos. En este caso lo que haces es comprar ya. Aquí no hay chispas, simplemente compre ya. Y lo que hacemos con estos, bueno, esto es una línea, porque está partida por la verdad, y esto es una función con una línea más. ¿Veis que es muy sencillito? Lo que hacemos con estos es esto. En el carrito lo hemos cambiado por comprar ya. Es muy sencillo. ¿Algún agua sobre esto? Luego sí que en Google comes, por ejemplo, podemos diferenciar, ya sabréis que en Google comes tenemos diferentes tipos de productos. Tenemos productos simples, como es el caso, productos variables, productos de otro tipo. Entonces, podemos incluso configurar en este caso, ya hablo del texto, o otras cosas, en función del tipo de producto que estemos trabajando. Porque igual en el caso del producto variable vamos a comprar ya, porque la persona tiene que seleccionar primero la opción, los zapatos, la taya 42, antes de dar el botón. Igual dependiendo de ahí, y es más allá de cumplir que lo hace. Pero es más bonito hacerlo nosotros, porque sé cómo funciona esto. He puesto este ejemplo porque este es diferente, quería que lo vierais. La página del checkout, la de finalizar, compra que es la última ya, le damos el botón y pagamos. He puesto el ejemplo de los datos de facturación. Tenemos también datos de facturación, datos de envío, y los datos de información. He cogido esto para que veáis un poquito el ejemplo. Ya veis que en este caso, por defecto en Google comes, luego podremos añadir campos o quitar campos, pero con los campos por defecto de Google comes, ya veis que tenemos aquí el nombre de apellido, el nombre de empresa, el país, una serie de campos. Y lo que vamos a hacer, esto lo trata Google comes como arrail. Un arrail es un arrail. Es una lista de propiedades o de elementos. Vamos a dar un poquito, vamos a hacer la billing, que es esta, para toda la facturación. Para los datos de envío habría otro arrail, pero el ejemplo he puesto con esto para que lo veáis bien. No os asustaros, simplemente. Estos son los campos que vienen por defecto que he visto antes, en el formulario de checkout, finalizar compra, y por ejemplo, he puesto este entre corchetes, hay que tratarlo así, y entre comillas. Billing, porque él tiene el ticket, digamos que este es el arrail de Billing. Pues le voy de prisa, no la tiene que dar, para que veáis, entonces aquí veis, dentro de Billing, todos estos son de Billing, de facturación. Entonces aquí tenemos el first name, esto es descriptivo, las names, la compañía, estos son los campos que corresponden a esto. Entonces nosotros vamos a trabajar con estos campos. Quiero modificar o quiero trabajar con la dirección 1, o con la provincia, tiene propiedades. Si estamos, hay tres corchetes digamos, pero no os asustéis porque son corchetes, no hacen nada. Todos entre comillas. Entonces tenemos diferentes propiedades. O sea, ya veis, el Billing, el campo, que ya hemos comentado antes, dirección. Tenemos tipo, ya veis aquí un poco, lo que es, o lo que puede hacer, pues el tipo de campo. Tenemos por defecto en Google Maps, tenemos esto. Un texto, una textarea, digamos una caja de texto, de contraseña o de selector. Por defecto hay esto. Luego seguramente si trasladamos un poco añadimos código o algún plugin, podemos añadir más tipos de campos. Pero por efecto son estos. El label, que es el texto de la etiqueta de campo, ya sabéis, el label digamos que sería y la caja, digamos, aquí había el Prince Holder, ahora lo vamos a ver. Por aquí, ¿vale? El texto de la etiqueta del campo, el Prince Holder es lo que va adentro, que puede ser generalmente igual, no hay nada, pero podemos poner algo, ¿no? Algún texto. Meter una clase, si queremos inyectar una clase para luego darle nosotros el color rojo, como hemos visto antes, por ejemplo, requides si es un campo requerido, que es obligatorio que el usuario que ya veis que los campos posterior este es True or False, no hay más. Clear, pues hace un Clear Fix, podemos decir True or False. La clase del label, aquí es la clase, digamos, del campo y aquí la clase del label, de lo que va adentro de la cajita, ¿no? del input. Y aquí un opción es que es una rare de opciones, ¿vale? Para los select, ¿eh? En caso de los select. Lo vamos a ver ahora y lo vamos a ver. ¿Vale? Ya, éste es. Para éste es. Aquí vemos cuatro ejemplos, ¿vale? Todos con Billing, todos de la... de Sarai, que dejamos el nombre, el codio postal, la empresa y la ciudad, ¿no? Y aquí veis, por ejemplo, vamos a cambiar el label. El label es, en este caso, su nombre, ¿vale? Voy a poner así, su nombre, le ponemos éste. Y en el caso del codio postal hemos cogido la propiedad de Placeholder. Placeholder es el texto que va adentro del input, dentro de la cajita, ¿vale? He puesto cp, para que sea descriptivo, ¿vale? El de la empresa le he puesto que sea obligatorio, no requides true, y el de la ciudad el tipo select, ¿vale? Vamos por ahí, ¿vale? Un select es un desplegable, ¿vale? Bueno, aquí tenemos el codio. Es mucho codio, porque son varias opciones, varios cambios, ¿no? Pero es sencillo, ¿no? O sea, se entiende, ¿no? Si hay preguntas, ya lo preguntaréis. Bueno, el filter, ¿vale? Este es el, digamos, el hook que vamos a utilizar, el check out fields, ¿vale? Los campos del check out, el hook, el filter hook que vamos a utilizar en este caso, ¿vale? Para cambiar, para modificar, para trabajar con los campos del check out. Y esta es la función que hemos hecho uno por cada uno de los que hemos visto en el momento. Entonces, por ejemplo, ya veis, hay que utilizar la variable fields, que tenemos que meter aquí también, ¿vale? Para traerla, traemos la variable fields, el campo, el billing, billing first name, y label. Y lo que hacemos es poner como lo hemos visto antes, ¿no? Ponemos el texto que aparezca, ¿vale? Y en este caso, como ya veis, que hemos un filter, lo que estamos haciendo es que, digamos, coger con el campo fields, cojemos lo que tiene el ya establecido en ese array, esos campos en el campo fields, y lo que hacemos es modificarlo, y se lo entregamos abajo, ¿vale? Hacemos aquí los cambios, chat ahí. ¿Vale? Hacemos aquí los cambios y aquí se los damos con los cambios hechos, ¿vale? Luego desacajemos el array y hacemos los cambios y se lo damos otra vez. Y aquí veis que, sin más, lo único que tiene un poco más diferentes es el select, ¿vale? Que lo que hacemos es, a ciudad le ponemos el tipo select y luego le pasamos las opciones. Para ese select, ¿vale? En este caso, lo que estoy haciendo es le doy un array con dos campos, ¿vale? Uno es a murro y otro es a la goza. Entonces, en ese desplegable van a aparecer sólo dos campos, que son a murro y a la goza. Muy bien. ¿Qué es el resultado? Ya veis que hemos puesto su nombre, el nombre de la empresa, ¿ya lo veis aquí? ¿Veis? ¿El nombre de la empresa a dónde ha salido? Ah, obligatorio, sí, pero está ahí el asterisquito. Aquí me dice la igualdad que pone a la murro y a la goza. Esas dos opciones. Podemos poner todos los que queramos. Pero bueno, en este caso, por la apresión, los intereses van a vender a la murro y a la goza. El CP, ¿no? Ya veis que es muy sencillito. ¿Cuánto queda tú? ¿Cinco? ¿Cinco, vale? Voy a aprovechar. Venga, ya está. Muchas gracias. Cualquier duda o pregunta que tengáis, me podéis hacer ahora o luego, sino mañana, como queráis. Cualquier feedback que os ocurra, esto es muy interesante, que despertáis el miedo y podéis hacer con unas líneas de código cambiarme muchísimas cosas en el código de Google Comments, ¿vale? Si tenéis que tocar el código... Hola. ¿Dónde recomiendas que se ponga crear un plugin nuevo para poder hacer estos hues en el tema? ¿Qué es lo que más recomiendas para poder hacer? Yo prefiero, siempre lo que hacemos es crear un plugin, ¿vale? Porque, al final, seguramente cuando hacemos cambios si es uno, no pasa nada, ¿vale? O dos, ¿vale? Pero, ¿sabes qué pasa? No es solo de Google Comments, vamos a hacer uno de WordPress o lo que sea, va a estar más snippets, como lo llamamos, ¿no? Y yo recomiendo crear un plugin, no cuesta nada crear un plugin, y es más, si te apuras, crear un Mew plugin, o sea, meterlo en la paca de PTMew para que sostesí o sí. Mi recomendación siempre es hacer un plugin siempre, nuestro. Es muy sencillito, ¿eh? Si no buscas en esto, o preguntáis luego, quedamos nuestro plugin de funciones. Es muy malo el plugin de funciones. Lugar de estar ahí, porque luego cambiamos el tema y se va eso, ¿vale? Por lo que sea, cambiamos el tema de funciones, ya no sé, funciones y no está ese código. Entonces lo lógico, lo ideal, sería crear un plugin, meter todo ese código, y ya está, es muy sencillito. ¿He respondido tu pregunta? ¿He respondido tu pregunta? Vale, bajo. Hay un señor aquí. Ya sé que supongo, la habrás puesto como modo ilustrativo para entender, pero no consideras, por ejemplo, una mala práctica, hacer un cambio de texto directamente con el ejemplo que has puesto en vez de utilizar los ficheros de traducción, porque si es un string, lo mejor es. Ya, pero el fichero de traducción tiene, si tú funcionas en multilenguaje o en diferentes países, ya es más complejo. Solo dices en español, en castellano, pues no hay problema, no hay ningún problema. Es más complicado. El tema de la traducción. No sé. Si es diferentes idiomas, todavía mejor, porque cada uno va a cargar su texto de texto. Sí, sí, eso. Y si lo fuerzas por aquí, se está forzando por aquí. Pero, claro, estos son cosillas que te pueden dar así rápidamente. Sí, sí, sí, sí. Yo creo que la gente le gusta mucho el concepto de snippet para la gente general. Tengo una tienda online, y tampoco quiero liarme con esto. No soy programador, ¿vale? Y eso, ya está, se lo hace todo el mundo. Pero no pasa nada, es que es lo bonito de golpes y lo bonito de esto, ¿no? Para que cualquier hijo de vecino pueda hacer esto. No me digas tú a mí que es copiar y pegar. Otra cosa es que luego, Google Commerz es un plugin, a mí me gusta muchísimo, y ¿qué pasa? que va cambiando con el tiempo. Y hay funciones que se precan, o justo lo que sea, pero no antes precando. No te das cuenta, ¿vale? Tienes igual la versión 2.5 y hasta la 5.3, y han deprecado la función esta y de repente casca, ¿vale? Pero eso pasa, nos pasa a todos. Es actualizar el... ¿Tú vas actualizando el Google Commerz? Si lo tienes en tu plugin, no pasa nada. Desactiva, si lo tienes en el tema. Si lo tienes recomendado, siempre. Obligatorio, diría yo. ¿Alguna pregunta más? Me voy corriendo. A un aplauso. Muchas gracias. Muchas gracias. Antes de que os...