7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WooCommerce

Cómo crear tu propio plugin de lista de deseos AJAX para WooCommerce

Read Time: 20 mins

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

En este tutorial crearemos una funcionalidad de lista de deseos ligera para WooCommerce usando AJAX, la REST API de WordPress y gráficos SVG. WooCommerce no viene por defecto con funcionalidad para crear listas de deseos, por lo que siempre tendrás que confiar en una extensión que realice el trabajo por ti. A menos que la construyas tú mismo para tener un control total sobre ella.

Pídeselo a una estrella

La funcionalidad de lista de deseos permitirá a los usuarios marcar ciertos productos de manera que queden agregados a un listado para futuras referencias. En algunas tiendas de comercio electrónico (como Amazon) se pueden crear múltiples listas de deseos, y estas pueden compartirse con otras personas, lo que las hace ideales para ocasiones como cumpleaños o bodas. En nuestro caso, la lista de deseos de WooCommerce que vamos a crear permitirá a los clientes volver a visitar fácilmente los productos cuya compra estén valorando.

Nuestra funcionalidad de lista de deseos añadirá un icono con forma de corazón sobre las miniaturas de las imágenes del producto, que al hacer clic añadirá el producto a una lista de deseos en una tabla.

woocommerce wishlist solutionwoocommerce wishlist solutionwoocommerce wishlist solution
Haz clic en el icono del corazón para añadir un producto a la lista de deseos

Echa un vistazo a la demo para obtener una idea aproximada de cómo funciona.

1. Crear la estructura del plugin

Comencemos por la construcción de nuestro plugin. Crea una carpeta con el nombre "wishlist" y un archivo PHP con el mismo nombre. Añade el siguiente fragmento de código en dicho archivo:

No entraremos en detalles sobre el proceso de creación de plugins, pero si eres nuevo en el desarrollo de plugins te recomiendo encarecidamente este increíble nuevo curso de Rachel McCollin:


Añadir las funciones del plugin

Vamos a esbozar nuestro plan para que sepamos qué construir:

  • Añadir el conmutador de la lista de deseos a los productos en el bucle y en las páginas individuales usando ganchos de WooCommerce
  • Crear un shortcode de tabla de deseos que contendrá los productos agregados a la lista de deseos
  • Crear una opción personalizada de lista de deseos en el perfil de usuario

Todo el código del plugin entrará en la acción init del plugin, ya que primero necesitamos asegurarnos de que el plugin WooCommerce esté activo. Así que justo después de los detalles del plugin añadiremos el siguiente código:

Y ahora vamos a poner en cola los scripts y estilos de nuestro plugin.

Añade el siguiente código al archivo principal del plugin:

Aquí ponemos en cola el archivo style.css principal y el archivo main.js del plugin, también pasamos algunos parámetros al archivo main.js para trabajar con:

  • ajaxUrl – necesario para obtener algunos datos de WordPress, como el ID del usuario actual
  • ajaxPost – necesario para actualizar la lista de deseos del usuario
  • restUrl – necesario para enumerar los elementos de la lista de deseos en la tabla de la lista de deseos
  • shopName: necesario para añadir elementos de la lista de deseos al almacenamiento de la sesión para usuarios no registrados o para aquellos que no hayan registrado sesión

Y algunas cadenas en lugar de codificarlas en el archivo js, en caso de que necesiten ser traducibles.

Así que por ahora crea una carpeta css, y js y coloca los archivos correspondientes dentro de esas carpetas: style.css en la carpeta css y main.js en la carpeta js.

2. Enganchar el conmutador de la lista de deseos

Justo dentro de la acción init añade el siguiente código:

Aquí añadimos un conmutador de lista de deseos a cada producto en el bucle y a cada diseño de producto individual, utilizando los ganchos woocommerce_before_shop_loop_item_title y woocommerce_single_product_summary.

Aquí quiero señalar el atributo data-product que contiene el identificador de producto, esto es necesario para alimentar la funcionalidad de lista de deseos. Y echa también un vistazo más de cerca al icono SVG, esto es necesario para alimentar la animación.

3. Añadir iconos SVG

Ahora crea una carpeta de images en la carpeta del plugin y pon el archivo icon.svg en ella:

Si eres nuevo trabajando con SVGs te recomiendo encarecidamente que leas estos increíbles tutoriales sobre el tema:

Nuestra animación SVG tiene 3 estados:

  1. Predeterminado: el trazado del corazón
  2. Proceso: grupo de carga (etiqueta g)
  3. Finalizar: grupo de validación (etiqueta g)

Si ahora vas a la página de tu tienda verás los iconos SVG sin estilo apilados uno encima del otro:

unstyled svg iconsunstyled svg iconsunstyled svg icons

¡Añadamos un poco de estilo para solucionar este lío! Abre el archivo style.css y pega el siguiente código:

La lógica aquí es la siguiente:

  1. Inicialmente mostramos el trazado del corazón de nuestro SVG.
  2. Cuando el usuario haga clic sobre él, ocultaremos el trazado del corazón y mostraremos el trazado de carga.
  3. Una vez finalizada la carga, mostraremos la marca de verificación para indicar que el producto ha sido añadido correctamente a la lista de deseos.

Más adelante vamos a alternar el estado de carga a través de JavaScript; la animación para la carga es una simple transformación de rotación. Así que por ahora, si actualizas la página (no olvides borrar la caché del navegador, ya que a veces los antiguos estilos se almacenan en caché) verás un bonito icono de corazón en cada producto.

Actualmente este conmutador no hace nada, lo solucionaremos. Pero por ahora sigamos con nuestro plan.

4. Crear el shortcode de la tabla de listas de deseos

Añade el siguiente código en la acción init del plugin:

Este es un shortcode muy simple que puedes añadir a cualquier página, y los elementos de la lista de deseos aparecerán dentro de ella. No voy a describir el proceso de creación de shortcodes, pero si eres nuevo en esto, te recomiendo la lectura de este increíble tutorial:

Crear una página de lista de deseos

Ahora desde dentro del administrador de WordPress crea una página llamada "Wishlist" y pon el shortcode [wishlist] dentro de ella. Si ahora abres a la página de la lista de deseos, verás una tabla vacía.

¿Has observado la clase de la carga en la tabla? Eliminaremos la clase de la carga con JavaScript más adelante, una vez que los elementos de la lista de deseos estén listos para ser añadidos a la tabla. Pero por ahora abre el archivo style.css y añade el siguiente código:

Añade la imagen loading.svg a la carpeta de las imágenes:

Este es el mismo SVG de carga separado del archivo icon.svg principal. Podríamos usar sprites SVG, pero decidí quedarme con un SVG de carga independiente.

Ahora, si vas a la página de lista de deseos y la actualizas verás una tabla vacía con símbolo de carga en ella. Bien, sigamos adelante.

5. Opción personalizada de la lista de deseos en el perfil de usuario

Nuestra funcionalidad de lista de deseos funcionará tanto para los usuarios que han iniciado sesión como para los usuarios invitados. Con los usuarios que han iniciado sesión almacenaremos la información de la lista de deseos en los metadatos del usuario, y con los usuarios invitados almacenaremos la lista de deseos en el almacenamiento de la sesión.

También puedes almacenar la lista de deseos de los usuarios invitados en el almacenamiento local, la diferencia es que el almacenamiento de sesión se destruye cuando el usuario cierra la pestaña o el navegador y el almacenamiento local se destruye cuando se borra la caché del explorador. Depende de ti qué opción utilizar para los usuarios invitados.

Ahora añade el siguiente código a la acción init:

Una vez más, con el fin de permanecer dentro del ámbito de este tutorial, no voy a explicar cómo trabajar con metadatos de usuario. Si eres nuevo en este tema te recomiendo leer este increíble tutorial:

Todo lo que hacemos aquí es crear un campo de entrada de texto que contendrá los elementos de la lista de deseos separados por comas. Con las acciones show_user_profile y edit_user_profile añadimos la estructura del campo de entrada, y con las acciones personal_options_update y edit_user_profile_update potenciamos la funcionalidad de almacenamiento.

Así que una vez que la lista de deseos se actualice se guardará en la base de datos. Si vas a tu página de perfil verás que se ha añadido un nuevo campo de texto. Añade el valor que desees y pulsa Guardar para comprobar si la funcionalidad de actualización ha funcionado. Con CSS puedes ocultar este campo en el área de administración en el caso de que no desees que los usuarios lo vean. Yo lo dejaré tal como está.

6. ¡Pónlo en funcionamiento!

¡Ahora estamos listos para ponerlo todo en marcha!

Abre el archivo main.js y coloca el siguiente código en él:

Todo nuestro código irá dentro de esta función.

Ahora vamos a recopilar los datos necesarios y crear algunas variables:

Como posiblemente recuerdes, cuando pusimos en cola nuestro script main.js le pasamos algunos parámetros. Aquí, con JavaScript, podemos recopilar estos parámetros.

A continuación, crearemos una matriz vacía de lista de deseos que contendrá elementos de lista de deseos. Necesitaremos los datos del almacenamiento de sesión con el nombre de nuestra tienda (la variable ls significa almacenamiento local), y necesitaremos saber si el usuario es invitado o ha iniciado sesión.

Permíteme explicar la lógica que rige aquí: cada vez que el usuario visita la página de la tienda necesitaremos saber si ha iniciado sesión o es un usuario invitado. Si el usuario ha iniciado sesión, tendremos que comprobar si tiene elementos en su lista de deseos, y si es así tenemos que resaltar estos elementos. Si no es así, necesitamos ver si hay algún elemento en la sesión o el almacenamiento local y resaltarlos.

¿Por qué se hace esto así? Imagina que el usuario visita por primera vez el sitio web como invitado, añade elementos a la lista de deseos y, a continuación, decide iniciar sesión. Si el usuario no tiene elementos registrados en la lista de deseos del perfil, tendremos que mostrar los que haya añadido antes de iniciar sesión, que habrán sido almacenados en la sesión o el almacenamiento local.

Así que vamos a hacer esto paso a paso:

Si el usuario ha iniciado sesión

  • Obtener los datos actuales del usuario con AJAX
  • Si los anterior ha finalizado con éxito, actualizar la lista de deseos
  • Resaltar los elementos de la lista de deseos
  • Eliminar la sesión o el almacenamiento local
  • Si se da un error mostrar un mensaje de error en la consola del desarrollador

Si el usuario es un invitado

Obtener la lista de deseos del almacenamiento de la sesión o el local

Como habrás observado aquí tenemos doble AJAX y algunas funciones auxiliares. Así que primero vamos a crear las acciones de las solicitudes AJAX, y después de eso voy a explicar nuestras funciones auxiliares. No describiré en detalle la funcionalidad de AJAX en WordPress, pero si eres nuevo en AJAX y WordPress, te recomiendo leer este increíble tutorial sobre el tema:

Nuestra primera solicitud AJAX obtiene el ID del usuario y los datos de su lista de deseos de WordPress. Esto se hace con una acción AJAX personalizada añadida al archivo del código del plugin:

La parte más importante aquí es el nombre de la acción (fetch_user_data): asegúrate de que es el mismo para AJAX y para las funciones wp_ajax_fetch_user_data y wp_ajax_nopriv_fetch_user_data. Aquí estamos preparando datos con formato JSON con el ID del usuario y los datos de su lista de deseos.

Nuestra próxima solicitud AJAX actualiza la lista de deseos del usuario en el caso de que ya hubiesen elementos en su lista de deseos en el almacenamiento de sesión o en el almacenamiento local. Echa un vistazo de cerca a la opción de la url, advierte que es diferente.

La lógica es la misma que para la primera acción: la diferencia es que aquí no devolvemos ni hacemos eco de ningún dato, sino que actualizamos la opción de lista de deseos para el usuario actual.

Y si nuestro usuario es un invitado tendremos que comprobar si hay algún detalle de la lista de deseos en la sesión o en el almacenamiento local.

Funciones auxiliares

Antes de pasar a la parte de los eventos quiero explicar nuestras funciones auxiliares

La primera función auxiliar hace que la matriz sea única, eliminando duplicados, la segunda comprueba si el valor dado está presente en la matriz dada. La siguiente función se ejecuta cuando se añade un elemento a la lista de deseos y la última muestra los elementos que se encuentran en la lista de deseos.

Añadir el conmutador

Ahora vamos a añadir un evento de clic al conmutador de la lista de deseos para iniciar la funcionalidad actual. En cada evento de clic del conmutador se desencadena la animación y si el usuario ha iniciado sesión, la acción de actualización de la lista de deseos se activa con AJAX. Si el usuario es un invitado, el elemento se añade al almacenamiento de sesión o al almacenamiento local.

Ahora, si vas a la página de la tienda, actualiza el navegador, y verás que si haces clic en cualquier conmutador de la lista de deseos ¡ya funciona!

7. Listar elementos en la tabla de la lista de deseos

Ahora es el momento de enumerar los elementos de nuestra lista de deseos en la tabla de la lista de deseos que hemos creado anteriormente.

Añade el siguiente código a main.js en la parte inferior de nuestra función contenedora:

Aquí estamos usando la REST API de WordPress para obtener los productos por ID en la matriz de la lista de deseos.

Para cada uno de los productos que obtenemos estamos añadiendo una fila en la tabla con los datos necesarios a mostrar. Necesitamos la imagen del producto, el título, el estado del stock, el botón y el precio.

Aquí tenemos dos opciones para la REST API:

  1. usar la REST API de WordPress
  2. usar la REST API de WooCommerce

Aquí la diferencia está en que los datos del producto ya están presentes en la REST API de Woocommerce, pero es necesaria una clave de API. Con los datos predeterminados del producto REST API de WordPress están ausentes de forma predeterminada, pero se pueden añadir, y no se requiere ninguna clave de API. Para una tarea tan simple como una lista de deseos no creo que se necesite una clave de API, por lo que lo haremos extendiendo la REST API predeterminada de WordPress para devolver el precio de nuestro producto, el código de imagen y el nivel de stock.

Dirígete al archivo principal del plugin y en la parte inferior añade el siguiente código:

Todo lo que hace esto es crear nuevos campos para la REST API y amplíar el límite máximo de elementos por solicitud. Una vez más, si eres nuevo en este tema te recomiendo encarecidamente leer esta serie.

Por ahora, si vas a tu tabla de lista de deseos y actualizas la página verás la lista de elementos que se han añadido a tu lista de deseos.

8. Eliminar elementos de la lista de deseos

Ya casi hemos terminado; sólo falta la funcionalidad para la eliminación. Así que, ¡vamos a crearla! Añade el siguiente código en la parte inferior de la función contenedora en el archivo main.js

Una vez que se hace clic en el icono para eliminar (asegúrate de que tienes un archivo remove.svg en la carpeta de imágenes, puedes utilizar cualquier icono que desees), tenemos que comprobar si el usuario ha iniciado sesión. Si es así, eliminamos el identificador de elemento de la lista de deseos mediante AJAX con la acción user_wishlist_update. Si el usuario es un invitado, necesitamos quitar el ID del elemento del almacenamiento local o el de la sesión.

Ahora dirígete a tu lista de deseos y actualiza la página. Una vez hagas clic en el icono de eliminación, tu elemento será eliminado de la lista de deseos.

Conclusión

¡Este ha sido todo un proyecto! Una característica de lista de deseos simple, pero completa para tus tiendas WooCommerce. Eres libre de utilizar este plugin en cualquier proyecto; puedes ampliarlo, modificarlo y hacer sugerencias. Espero que te haya gustado. Aquí está el enlace a los archivos de origen en GitHub. Y aquí está la demostración.

Aprende más sobre el desarrollo de temas de WooCommerce

En Tuts+ tenemos una gran colección de tutoriales y cursos para aprender desarrollo de WooCommerce. ¡Echa un vistazo a estos cuatro excelentes cursos para empezar!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.