Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WooCommerce
Code

Añadiendo Campos Personalizados a Productos Simples Con WooCommerce

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

WooCommerce es discutiblemente el modo más popular de vender productos utilizando WordPress.  Con WordPress alimentado aproximadamente 25% del Internet y WooCommerce alimentando aproximadamente 39% de todas las tiendas en línea, es práctica segura utilizar ambos en conjunción si buscas mercadear bienes a clientes.

Pero, al igual que con cualquier otro 'software', hay tiempos en los cuales nosotros o nuestros clientes a menudo queremos extender las caracterícas de fábrica que se ofrecen.

Caso Ilustrativo: Con WooCommerce, digamos que tienes un producto simple que quieres vender pero quieres incluir un poco más de información acerca de el producto para ser mostrado al usuario.

Utilizando algunas herramientas provistas por WooCommerce y funcionalidad personalizada que escribiremos, observaremos como podremos lograr esto exactamente.

Herramientas Requeridas

Antes de comenzar, asumo que tienes lo suguiente ( o algo similar) en tu computadora:

  • El sistema operativo de tu preferencia - Yo estaré utlizando macOS
  • Al menos PHP 5.6.25, aunque estaré uilizando PHP 7
  • MySQL 5.6.33
  • Apache o Nginx
  • WordPress 4.7
  • WooCommerce 3.9
  • Tu IDE favorito

Para el resto del curso, asumo que todo esto esta instalado, activado y corriendo.

Setting up WooCommerce

Si descargas WooCommerce específicamente para este tutorial, no tienes porque preocuparte sobre cosas como las páginas para el proceso de pago, las de términos y condiciones, ni nada parecido. De hecho, nos vamos a centrar durante todo este tutorial únicamente en el meta box Simple Product.

Añadir Campos Personalizados

Cuando se trata de trabajar con WordPress, la noción de campos personalizados normalmente conlleva diferentes definiciones:

WordPress tiene la habilidad de permitir a los autores de las entradas asignar campos personalizados a las mismas. Esta información arbitraria extra es conocida como meta-datos.

Para los que no seáis desarrolladores, este tipo de información puede ser un poco más compleja e innecesaria. pero si estás acostumbrado a trabajar con ella, es importante advertir que cuando me refiero a campos personalizados en el tutorial, estoy hablando de algo completamente diferente.

En su lugar, estoy hablando de un campo de texto real que introduciremos en la pestaña Producto Relacionado del tipo de Producto Simple

The initial Simple Product type

Pero volveremos a esto más tarde en el tutorial. De momento, avancemos.

1. Los Ganchos o Hooks

Casi de la misma forma que WordPress, WooCommerce proporciona una API que nos permite vincular o enganchar con ciertas partes del ciclo de vida de su página. Así que, aunque hayas trabajado con la API de metadatos de WordPress con anterioridad, la forma de hacerlo con WooCommerce es diferente.

Existen dos hooks que es importante conocer:

  1. woocommerce_product_options_grouping. Usaremos esta función para crear una descripción y un campo para la introducción de texto que acepte nuestros valores.
  2. woocommerce_process_product_meta. Usaremos este hook para procesar, satinizar y guardar el valor de nuestro campo de texto.

Como con todos los hooks de WordPress, estos requerirán que definamos estos hooks y que después definamos una funcionalidad personalizada para ellos. Aunque puedes hacerlo usando programación procedimental, este tutorial implementará la funcionalidad usando programación orientada a objetos.

2. La Funcionalidad

Primero, vamos a definir una clase que tendrá tantas variables como instancias sus datos. Esta variable representará el ID del campo de entrada que aparecerá en la interfaz del usuario:

Después, iniciaremos esta instancia de la variable en el constructor de la clase:

En este punto, estamos preparados para empezar a usar los hooks enumerados antes. Para hacerlo, no obstante, añadiremos una función de inicialización que registrará dos funciones con el hook.

En las siguientes dos secciones, veremos exactamente cómo implementar la funcionalidad personalizada.

1. Añadir un Campo de Entrada de Texto

Primero, queremos añadir una función vinculada a woocommerce_product_options_grouping. En la función init que hemos definido en la sección anterior, haremos exactamente esto.

Observa como he llamado a función product_options_grouping. Hacerlo así, creo que facilita un poco la lectura del código. Debido a que la función, en si misma, podría no ser muy descriptiva respecto a lo que hace, en su lugar hace referencia a su hook espectivo.

Ahora, necesitamos implementar la función. Para conseguirlo, necesitaremos alguna información:

  • Necesitaremos un ID que usaremos para identificar únicamente el campo de texto. Usaremos el conjunto de datos en el constructor.
  • Usaremos una etiqueta para proporcionar alguna descripción el campo de entrada.
  • Podemos especificar opcionalmente una ubicación, y para el propósito de nuestro ejemplo, así lo haremos.
  • Existe una opción para mostrar un mensaje emergente (tooltip) siempre que el usuario sitúe el cursor sobre un icono.
  • Y tenemos la opción para una descripción que usaremos para rellenar el texto del mensaje emergente.

Toda la información anterior estará configurada en una cadena asociativa que después se enviará a woocommerce_wp_text_input. Esta es una función de la API de WooCommerce diseñada para mostrar un elemento de texto con los argumentos anteriormente citados.

En este punto, tenemos la primera parte del plugin hecho. Todavía tenemos que escribir el código que pone todo en marcha, y escribir el código que almacena la información en la base de datos, así que ocupémonos de ello ahora.

2. Guardar la Información

Después, añade las siguientes línea de código en el método init:

Luego, asegúrate de añadir la función add_custom_linked_field_save.

Voy a hablar un poco sobre la implementación de la función en la próxima sección.

Satinizar los Datos

Observa en la función de arriba, que aquí están sucediendo tres cosas:

  1. Hacemos una comprobación para asegurarnos de que varios valores únicos están presentes. Si no es así, entonces devolvemos false. Esta es una precaución de seguridad estándar. Los valores únicos son detectados buscando específicamente lo que WooCommerce proporciona en su código fuente.
  2. Sanitiza los datos en la collección $_POST que se corresponda con los datos introducidos por el usuario.
  3. Guarda la información en la tabla post metadata.
Our teaser field on the Linked Products

Observa que realmente no hacemos nada para mostrar la infromación en el front-end todavía, así que no existe ninguna llamada a get_post_meta. Esto es, en cualquier caso, la forma en la que mostraremos la información en el front-end.

3. Mostrar el Teaser en el Front-End

Para mostrar la información en el front-end, vamos a necesitar una clase que realizará en gran medida el mismo trabajo que ya hemos hecho. Específicamente, necesitaremos:

  • el ID de un campo de texto
  • la inicialización de susodicho ID en el constructor
  • una función que se inicie para enganchar nuestro código fuente en el front-end
  • renderizar el valor actual

Configurar todo esto no es realmente muy difícil, porque ya lo hemos hecho, así que voy a pasar la clase en su totalidad a continuación; sin embargo, tengo que hacer algunos comentarios sobre la manera en la que vamos a configurar esta clase después:

El resultado final debería ser algo como esto:

Displaying the result of the teaser

En este momento, tenemos algo de código redundante. Específicamente, tanto la clase pública como la administrativa usan un textfield_ID que configuran en el constructor. Este código hule mal ya que viola todo el principio DRY de la programación orientada a objetos.

Existen varias formas de mitigar esto, por ejemplo pasar el valor a los constructores cuando se crean instancias de las clases, usando un patrón de diseño sencillo para orquestar la información entre las dos clases, y así sucesivamente.

En el archivo que acompaña este tutorial, que puede descargarse usando el enlace de la columna lateral, verás cómo he pasado el valor el constructor para conseguir que sea un poco más manejable.

En segundo lugar, cómo he usado el hook woocommerce_product_thumbnails para ayudar a renderizar de la información. Hay ciertos hooks que WooCommerce ha hecho públicos, y yo simplemente he escogido éste de entre todos los que hay disponibles. Puedes zambullirte en la documentación para determinar qué hook funciona mejor para tus necesidades.

4. Reunir Todo Junto

Finalmente, lo último que necesitamos hacer es configurar un archivo bootstrap que iniciará el plugin. Ya hemos hecho esto en varios de mis tutoriales anteriores, así que no voy a emplear mucho tiempo insistiendo en este punto.

Aquí tienes el código de cómo lo estoy haciendo

Advierte que he incluido las dependencia y después, una vez que la función se ha disparado, compruebo si el escritorio está siendo mostrado o no. Si es así, entonces se carga la parte adecuada del plugin; si no es así, se carga el diseño estándar, que puedes ver en la página de producto.

Conclusión

Ahora, ya hemos visto todo lo que determinamos en la introducción del tutorial:

  • Hemos añadido un campo personalizado.
  • Lo hemos sanitizado y almacenado.
  • Hemos configurado una apariencia pública para el plugin.
  • Y hemos recuperado y mostrado el contenido.

No te olvides descargar la muestra del trabajo final desde la columna lateral de esta página. Es es botón grande azul de la barra lateral.  Aún más, si estás interesado en WooCommerce, no olvides revisar algunos de nuestros otros tutoriales o algunos de los elementos que tenemos disponibles en nuestro marketplace.

Como es habitual, si estás buscando otros materiales relacionados con WordPress, puedes vertodos mis otros tutoriales en la página de mi perfil, y también puedes seguirme en mi blog o en Twitter.

¡No te olvides de dejar cualquier duda o comentario en la sección de abajo!

Recursos

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.