Para poder empezar a utilizar el carrito de compra de ThriveCart no es necesario que te vuelvas loco con ningún código, de manera que puedas ponerte a vender por Internet al instante. Pero si quieres ir más allá y te apetece experimentar con el checkout de tipo popup de ThriveCart, debes saber que puedes combinarlo con un poco de HTML para customizarlo.
Código básico para lanzar el checkout de tipo popup
Sólo necesitarás añadir un código JavaScript y un HTML para tenerlo:
<script async src="//thrivecart.com/embed/v1/thrivecart.js"></script>
<a href="javascript:;" class="thrivecart-button" data-thrivecart-account="tu-cuenta" data-thrivecart-product="1">Texto con enlace</a>- data-thrivecart-account=”tu-cuenta”: tendrás que cambiar tu-cuenta por lo que te corresponda, habitualmente será tu nombre de usuario. Sabrás qué poner en función de la URL que tengas en ThriveCart (https://tu-cuenta.thrivecart.com)
- data-thrivecart-product=”1″: el número 1 indica el producto que quieres vender. Tendrás que introducir ahí el ID del producto que le corresponda. Para saber el ID de un producto, vete a su página de edición y en la URL el número que aparece es el ID.
- Texto con enlace: será el texto que funcionará como CTA. Cuando alguien lo pulse, saltará el popup para realizar la compra.
Por supuesto, el código anterior puede crecer y personalizarse tanto como quieras o necesites. Puedes combinarlo con imágenes, botones o incluso utilizar shortcodes que tenga disponible tu propio tema para darle forma. El límite aquí lo pondrá tu imaginación (y las necesidades que tengas).
<!-- AÑADIENDO UN BOTÓN -->
<script async src="//thrivecart.com/embed/v1/thrivecart.js"></script>
<a href="javascript:;" class="thrivecart-button" data-thrivecart-account="tu-cuenta" data-thrivecart-product="1"><button>Texto dentro de un botón</button></a><!-- AÑADIENDO UNA IMAGEN -->
<script async src="//thrivecart.com/embed/v1/thrivecart.js"></script>
<a href="javascript:;" class="thrivecart-button" data-thrivecart-account="tu-cuenta" data-thrivecart-product="1"><img src="https://tuweb.com/imagen.png" alt="oferta"></a><!-- UTILIZANDO VARIOS ENLACES A PRODUCTOS DIFERENTES -->
<script async src="//thrivecart.com/embed/v1/thrivecart.js"></script>
<div class="column-1">
<a href="javascript:;" class="thrivecart-button" data-thrivecart-account="tu-cuenta" data-thrivecart-product="1">Compra el producto 1</a>
</div>
<div class="column-2">
<a href="javascript:;" class="thrivecart-button" data-thrivecart-account="tu-cuenta" data-thrivecart-product="2">Compra el producto 2</a>
</div>
<div class="column-3">
<a href="javascript:;" class="thrivecart-button" data-thrivecart-account="tu-cuenta" data-thrivecart-product="3">Compra el producto 3</a>
</div>Checkout emergentes con Thrivecart y Elementor
Si estás creando una página de ventas con Elementor, seguramente te interese cómo crear un carrito de compra Thrivecart dentro de un popup en tu web. Lo más importante es que todos los pasos anteriores son importantes aunque hay que hacer unos pasos más.
01. Integración directa: Si quieres integrar el botón de Thrivecart directamente en Elementor, solo tendrás que agregar un bloque HTML y dentro del mismo pegar el código que hemos mostrado al principio de esta entrada:
Luego tendrás que ir a la pestaña “Avanzado” del bloque html y ajustar el margen izquierdo – en porcentaje o en píxeles – para, por ejemplo, centrarlo en la página. No olvides hacer lo mismo con la versión móvil de ese apartado:
02. Integración avanzada. Si lo que quieres es “disparar” el popup Thrivecart con un botón creado con Elementor, los pasos son un poco más largos y debes seguirlos en el siguiente orden:
- En primer lugar, agrega tu botón con Elementor. Dale el estilo de diseño que tú quieras.
- Después, selecciona la pestaña “Avanzado” y casi abajo del todo, abre el desplegable “Attributes”. Si te fija en el script que adjuntamos al principio de esta entrada, los verás en detalle.
- El siguiente paso es añadir la clase “thrivecart-button” al botón creado en Elementor:
- En último lugar, añadir el código javascript es obligatorio para que funcione todo de forma correcta. Tendrás que añadir un bloque html dentro de tu diseño de página con Elementor. Hazlo arriba o abajo del todo para que no te estorbe en tu diseño.
- Finalmente, aquí tienes el resultado. Dale a previsualizar página y cuando hagas clic en el botón, ocurrirá la magia:
Conclusiones: la principal ventaja de Elementor con respecto a otros editores visuales como Beaver Builder y Thrive Architect es la posibilidad de añadir atributos a botones por lo que te va a permitir realizar una integración a nivel de estilo mucho más pro 😉
(3 votos, promedio: 5,00 de 5)
