Saltar al contenido principal

¿Cómo podemos ayudarte?

Has comprado en Digistore24

Carrito de compras de Digistore24: múltiples productos - un solo checkout

Este artículo ha sido traducido mediante IA

¿Tienes comentarios sobre esta traducción? Avísanos aquí.

El carrito de compras de Digistore24 es una función útil si ofrece múltiples productos en su página de ventas.

Con el carrito de compras, los clientes pueden primero seleccionar y “recopilar” todos los productos que les interesan, y luego completar la compra en un solo checkout combinado.

Esto tiene beneficios para sus clientes:

  • Simplicidad: Seleccionar todo primero y luego pagar en un solo paso, en lugar de tener que pasar por varios procesos de checkout separados.
  • Claridad: Ver todos los productos seleccionados de un vistazo durante el checkout.

Y también tiene beneficios para usted:

  • Un proceso de compra más sencillo para múltiples productos puede reducir la fricción y generar más compras completadas (mayor conversión).
  • Puede colocar estratégicamente productos relacionados en su página de ventas que los clientes puedan añadir fácilmente a su compra.

Incruste el carrito de compras de Digistore24 en su página de ventas. Hay distintas opciones (JavaScript o mediante el plugin de WordPress de Digistore24) y puede configurar el carrito de compras de forma amplia si es necesario. Este artículo le muestra cómo hacerlo.

Cómo funciona la compra con el carrito de compras

Una vez que el carrito de compras de Digistore24 está incrustado en su página de ventas, el flujo de compra para sus clientes funciona así:

  1. El cliente abre su página de ventas.
  2. El cliente hace clic en el botón Comprar de un producto.
    El producto se añade al carrito de compras. Justo después, el cliente ve una breve confirmación que incluye:
    • Una nota que indica que el producto se ha añadido al carrito de compras
    • Subtotal y número de productos seleccionados
    • Un botón Continuar comprando
    • Un botón Ir al checkout
  3. Opcional: El cliente abre el carrito de compras en su página.
    Puede añadir un enlace o botón que abra el carrito de compras como una ventana superpuesta.
  4. El cliente va al checkout.
    Cuando hace clic en Ir al checkout, es redirigido al formulario de pedido de Digistore24.
  5. El cliente paga todo junto en el formulario de pedido.
    Todos los productos seleccionados aparecen allí, y el cliente completa la compra en un paso.

Añada el carrito de compras de Digistore24 a su página de ventas

Para que sus clientes puedan usar el carrito de compras de Digistore24, debe añadirlo una vez a su página de ventas. Dependiendo de su sitio web, hay dos formas de hacerlo: con un pequeño fragmento de JavaScript o, si usa WordPress, con el plugin de WordPress de Digistore24 y un shortcode.

Incrustar el carrito de compras

Para que el carrito de compras esté disponible en su página de ventas, debe incrustarlo una vez.

Seleccione una de las siguientes opciones:

Incrustar el carrito de compras mediante JavaScript

  1. Añada este código al código fuente de su página de ventas (por ejemplo, en el área donde se incrustan otros scripts).

    <script src="https://www.digistore24-scripts.com/service/digistore.js"></script> <script> digistoreCart("theme=v2"); </script>

  2. Guarde / publique la página.

El carrito de compras ahora está incrustado en su página y puede usarse.

Incrustar el carrito de compras mediante WordPress (plugin + shortcode)

Requisito: El shortcode solo funciona con WordPress y el plugin de Digistore24 (versión 2.17 o superior).

  1. Instale el plugin de Digistore24 (si aún no lo ha hecho).
  2. Abra la página que contiene su página de ventas en el editor de WordPress.

  3. Inserte el shortcode en un lugar adecuado.

    [digistore_cart theme=v2]

  4. Guarde / actualice la página.

El carrito de compras ahora está incrustado en su página de WordPress y puede usarse.

Vincule los botones de compra para que los productos lleguen al carrito de compras

Para que un producto llegue al carrito de compras cuando el cliente haga clic en Comprar, su botón de compra debe enlazar a una dirección específica de Digistore24. El cliente permanece en su página de ventas; el producto simplemente se añade al carrito de compras.

Cómo funciona

URL de compra (principio básico)

La URL de compra para el carrito de compras es:

https://www.digistore24.com/add/PRODUCT-ID

Reemplace PRODUCT-ID por su ID de producto. Puede encontrarlo, por ejemplo, en Mis productos > Lista de productos en la fila del producto.

Importante: use solo enlaces HTML clásicos

Use un enlace HTML normal para el botón de compra en el siguiente formato:

<a href="LINK">TEXTO-DEL-ENLACE</a>

De lo contrario, Digistore24 podría no reconocer correctamente el botón de compra.

Ejemplos

Ejemplo: enlace de texto

<a href="https://www.digistore24.com/add/PRODUCT-ID">Comprar ahora</a>

Ejemplo: enlace de imagen

<a href="https://www.digistore24.com/add/PRODUCT-ID"><img src="IMAGE-URL" /></a>

Añadir un enlace o botón de carrito de compras

Para que sus clientes puedan ver siempre lo que ya está en el carrito de compras, debe añadir un enlace al carrito de compras o un botón de carrito de compras a su página de ventas. Esto permite al cliente abrir el carrito de compras y luego completar la compra.

Cómo funciona

URL del carrito de compras

https://www.digistore24.com/cart

Ejemplos

Ejemplo: enlace de texto

<a href="https://www.digistore24.com/cart">Mostrar carrito de compras</a>

Ejemplo: enlace de imagen

<a href="https://www.digistore24.com/cart"><img src="IMAGE-URL" /></a>

Opcional: enlace directo al checkout

Si lo desea, también puede añadir un enlace directo al checkout. Esto permite al cliente pasar directamente al formulario de pedido.

https://www.digistore24.com/checkout

Ejemplo: enlace de texto

<a href="https://www.digistore24.com/checkout">Ir al checkout</a>

Ejemplo: enlace de imagen

<a href="https://www.digistore24.com/checkout"><img src="IMAGE-URL" /></a>

Configurar checkout: estándar o su propio dominio

En la mayoría de los casos, el checkout en Digistore24 es suficiente. Para ciertas configuraciones de seguimiento del formulario de pedido, puede ser útil usar el checkout en su propio dominio.

Checkout en Digistore24 (estándar)

Con la opción estándar, no necesita hacer nada más. Cuando un cliente hace clic en Ir al checkout en el carrito de compras, es redirigido al formulario de pedido de Digistore24.

Opcional: configurar un formulario de pedido específico (orderform_id)

Si desea usar un formulario de pedido específico, puede especificar su ID en el código de incrustación del carrito de compras. Reemplace 4321 por el ID de su formulario de pedido.

JavaScript

<script src="https://www.digistore24-scripts.com/service/digistore.js"></script> <script> digistoreCart("theme=v2 orderform_id=4321"); </script>

Shortcode de WordPress

[digistore_cart theme=v2 orderform_id=4321]

Checkout en su propio dominio (p. ej., seguimiento del formulario de pedido / iOS)

Si desea incrustar el checkout en su propio dominio (por ejemplo, para ciertas configuraciones de seguimiento del formulario de pedido como anuncios de Facebook con dispositivos iOS), siga estos tres pasos:

Cómo funciona

  1. Incrustar el checkout en su dominio
    Añada uno de los siguientes fragmentos de código a su página de checkout (en su dominio):

    • JavaScript

      <style> body { margin:0; } </style> <script src='https://www.digistore24.com/service/js/orderform_widget.js'></script> <iframe class='ds24_payIFrame' style='overflow: hidden; width: 100%; height: 100%; border: none; margin:0; padding: 0; background: transparent;' src='https://www.digistore24.com/checkout?iframe=1'></iframe>

    • Shortcode de WordPress

      [digistore_cart_checkout]

  2. Proporcione la URL de checkout al carrito de compras
    Pase la URL de su propia página de checkout en el código de incrustación del carrito de compras.

    • JavaScript

      <script src="https://www.digistore24-scripts.com/service/digistore.js"></script> <script> digistoreCart("theme=v2 checkout_url=https://www.mydomain.com/my-checkout_url"); </script>

    • Shortcode de WordPress

      [digistore_cart theme=v2 checkout_url=https://www.mydomain.com/my-checkout_url]

  1. Reemplace el marcador de posición
    Reemplace https://www.mydomain.com/my-checkout_url por la URL de su página de checkout del paso 1.

Nota

Puede especificar la URL de checkout y el formulario de pedido al mismo tiempo:

JavaScript

<script src="https://www.digistore24-scripts.com/service/digistore.js"></script> <script> digistoreCart("theme=v2 orderform_id=4321 checkout_url=https://www.mydomain.com/my-checkout_url"); </script>

Shortcode de WordPress

[digistore_cart theme=v2 orderform_id=4321 checkout_url=https://www.mydomain.com/my-checkout_url]

Ajustes y configuración del carrito de compras de Digistore24

Puede personalizar cómo se comporta el carrito de compras de Digistore24 usando opciones adicionales, por ejemplo idioma, visualización del IVA o el destino después de la compra. Simplemente añada las opciones al código o shortcode que ya usa para el carrito de compras.

Valor predeterminado en este artículo: Todos los ejemplos usan theme=v2. Si desea usar ajustes adicionales, simplemente añádalos al final.

Cómo añadir ajustes (principio básico)

JavaScript

digistoreCart("theme=v2 OPTION1 OPTION2");

WordPress

[digistore_cart theme=v2 OPTION1 OPTION2]

Ejemplo

digistoreCart("theme=v2 language=en netto");
[digistore_cart theme=v2 language=en netto]

Ajustes comunes (recomendados)

Estas opciones se usan con mayor frecuencia. Puede combinarlas según sea necesario.

Idioma

Configure el idioma del carrito de compras.

  • language=de (alemán)
  • language=en (inglés)

Ejemplo:
digistoreCart("theme=v2 language=en");
[digistore_cart theme=v2 language=en]

Precios con IVA incluido o sin IVA

  • brutto - precios con IVA incluido
  • netto - precios netos más IVA

Ejemplo:
digistoreCart("theme=v2 brutto");
[digistore_cart theme=v2 brutto]

Después de la compra / volver a su página

  • thankyou_url=https://xyz - página de destino después de la compra
  • return_url=https://xyz - destino cuando el comprador hace clic en “Continuar comprando” en el formulario de pedido
  • no_return_button - oculta “Continuar comprando” en el formulario de pedido

Vale y seguimiento del formulario de pedido

  • voucher=some_voucher_code - añade un código de vale
  • tracking='Your tracking key' - añade una clave de seguimiento del formulario de pedido a la compra
    Nota: Si su clave de seguimiento del formulario de pedido contiene espacios, use comillas.

Comportamiento del checkout

  • orderform_id=4321 - usa un formulario de pedido específico
  • orderform_as_popup - abre el formulario de pedido en una nueva ventana

Controlar ventas adicionales (con ejemplos)

Con upsell=..., usted define si y cómo se muestran las ventas adicionales durante el proceso de pedido.

Variantes comunes

  • upsell=any - Digistore24 selecciona las ventas adicionales del primer producto en el carrito de compras que tiene ventas adicionales (predeterminado)
  • upsell=none - desactiva las ventas adicionales por completo
  • upsell=first - muestra solo las ventas adicionales del primer producto en el carrito de compras
  • upsell=1234 - muestra las ventas adicionales del producto 1234 después de la compra inicial

Reglas de orden (ejemplos)

Puede especificar varios ID de producto en un orden. Digistore24 comprueba entonces qué productos hay en el carrito de compras, en el orden en que los enumera.

  • upsell=12,34,56,78,12 - comprueba si los productos 12/34/56/78 están en el carrito de compras (consulte la lógica existente para obtener detalles)
  • upsell=123,any,456 - prefiere 123; de lo contrario, cualquier otro producto en el carrito de compras; de lo contrario, 456
  • upsell=123,456,none - prefiere 123; de lo contrario, 456; de lo contrario, sin ventas adicionales

Ejemplo:
digistoreCart("theme=v2 upsell=none");
[digistore_cart theme=v2 upsell=none]

Para desarrolladores: mostrar valores y usar eventos

Estas opciones son útiles si desea integrar el carrito de compras más profundamente en su página (por ejemplo, mostrar el valor del carrito de compras o reaccionar a cambios).

Mostrar el total del carrito de compras en su página

show_total_amount=some_name muestra el total del carrito de compras en un elemento HTML con el ID o clase CSS especificados (o nombre coincidente).

Ejemplo:
digistoreCart("theme=v2 show_total_amount=total_amount");
[digistore_cart theme=v2 show_total_amount=total_amount]

Mostrar elementos del carrito de compras en su página

show_cart_items=some_name muestra el contenido del carrito de compras en un elemento HTML con el ID o clase CSS especificados (o nombre coincidente).

Ejemplo:
digistoreCart("theme=v2 show_cart_items=cart_items");
[digistore_cart theme=v2 show_cart_items=cart_items]

Reaccionar a cambios

on_cart_change=some_js_function llama a una función JavaScript cada vez que cambia el carrito de compras. La función recibe un objeto cart (incluidos importes brutos/netos, moneda y elementos).

Gestionar mensajes personalizados

on_message=some_alert_function llama a una función JavaScript cuando debe mostrarse un mensaje al usuario. msg_type es error, warning o info.

Todos los ajustes (tabla de referencia)

Esta tabla enumera todas las opciones disponibles como referencia. (Los ejemplos de este artículo usan theme=v2 de forma predeterminada).

Opción

Explicación

info_position Define dónde se muestra el mensaje informativo “Añadido al carrito de compras”.
  • top (predeterminado) - en la parte superior de la ventana del navegador
  • bottom - en la parte inferior de la ventana del navegador
  • Número (p. ej., 50) - esta cantidad de píxeles por debajo del borde superior de la ventana del navegador
info_sticky Si se especifica, el resumen del carrito de compras siempre se muestra y se “fija” al borde de la ventana.
bruto Los precios en el carrito de compras se muestran con IVA incluido. Si no se define explícitamente, la configuración del primer producto en el carrito de compras se usa como predeterminada para todos los productos adicionales.
neto Los precios en el carrito de compras se muestran como precios netos más IVA. Si no se define explícitamente, la configuración del primer producto en el carrito de compras se usa como predeterminada para todos los productos adicionales.
orderform_id=4321 Selecciona el formulario de pedido que se muestra después de que el cliente hace clic en “Ir al checkout”. Si no se define explícitamente, la configuración del primer producto en el carrito de compras se usa como predeterminada para todos los productos adicionales.
checkout_url=https://xyz Define qué URL de checkout se usa (por ejemplo, si incrustó el checkout en su propio dominio).
return_url=https://xyz Define a dónde se redirige al comprador cuando hace clic en “Continuar comprando” en el formulario de pedido. El valor predeterminado es el referente HTTP (es decir, la página visitada más recientemente).
thankyou_url=https://xyz Después de la compra, el comprador es redirigido a esta página.
no_return_button Oculta el enlace “Continuar comprando” en el formulario de pedido.
currency_symbol Muestra el símbolo de la moneda en el formulario de pedido en lugar del código de moneda (p. ej., EUR → €).
currency=USD Usa la moneda especificada en el carrito de compras (p. ej., EUR o USD).
upsell=XXX Define si y cómo se muestran las ventas adicionales durante el proceso de pedido (consulte las variantes a continuación).
upsell=any Digistore24 selecciona las ventas adicionales del primer producto en el carrito de compras que tiene ventas adicionales. (Predeterminado)
upsell=1234 Muestra las ventas adicionales del producto 1234 después de la compra inicial.
upsell=12,34,56,78,12 Comprueba la lista en orden: si el producto 12 está en el carrito de compras, se muestran sus ventas adicionales. De lo contrario 34, de lo contrario 56, de lo contrario 78. Si ninguno de estos productos está en el carrito de compras, se muestran las ventas adicionales del último ID de producto de la lista (aquí: 12; los duplicados son posibles, pero no se recomiendan).
upsell=123,any,456 Muestra las ventas adicionales del producto 123 si está en el carrito de compras; de lo contrario, las ventas adicionales de cualquier otro producto en el carrito de compras (si están disponibles); de lo contrario, las ventas adicionales del producto 456 (aunque 456 no esté en el carrito de compras).
upsell=123,456,none Muestra las ventas adicionales del producto 123 si está en el carrito de compras; de lo contrario, las ventas adicionales del producto 456 si está en el carrito de compras; de lo contrario, no hay ventas adicionales y el comprador es redirigido directamente a la página de agradecimiento.
upsell=none Desactiva las ventas adicionales por completo, independientemente de si los productos en el carrito de compras tienen ventas adicionales.
upsell=first Muestra solo las ventas adicionales del primer producto en el carrito de compras. Este es el comportamiento predeterminado para las ventas que no usan un carrito de compras.
language=en Cambia el idioma a inglés. De forma predeterminada, se usa el idioma del primer producto añadido al carrito de compras. Idiomas disponibles: en y de.
orderform_as_popup Cuando el comprador hace clic en “Ir al checkout”, el formulario de pedido de Digistore24 se abre en una nueva ventana.
tracking=your_tracking_key
tracking='Your tracking key' 		Añade la clave de seguimiento del formulario de pedido especificada a la compra (como el parámetro GET ds24tr). Si la clave de seguimiento del formulario de pedido contiene espacios, use comillas (p. ej., tracking='my key').
quantity_readonly La cantidad no puede cambiarse en el formulario de pedido y los productos no pueden eliminarse.
show_total_amount=some_name Muestra el total del carrito de compras en el elemento HTML con el ID o clase CSS especificados (o nombre). Cuando cambia el carrito de compras, el importe se actualiza automáticamente.
show_cart_items=some_name Muestra el contenido del carrito de compras en el elemento HTML con el ID o clase CSS especificados (o nombre).
on_cart_change=some_js_function Llama a la función JavaScript some_js_function(cart) cada vez que cambia el carrito de compras.

cart incluye (entre otros):

  • gross_amount, net_amount
  • gross_amount_msg, net_amount_msg
  • divisa
  • items (array), cada elemento incluye (entre otros): product_id, gross_amount, vat_amount, can_show_price, max_quantity, quantity, is_quantity_readonly
on_message=some_alert_function Llama a la función JavaScript some_alert_function(msg_type, msg_text) cuando debe mostrarse un mensaje. msg_type es error, warning o info.
voucher=some_voucher_code Añade el código de vale al pedido. El código se aplica (siempre que sea válido para el primer producto comprado).
theme=v2
theme=modern
theme=classic 		Selecciona un tema para el carrito de compras. En este artículo, usamos theme=v2 de forma predeterminada. (Para el tema clásico, configure theme=classic; alternativamente theme=modern.)

Nota

Si un ajuste no se define explícitamente en el código o shortcode, la configuración del primer producto en el carrito de compras se usa como predeterminada para todos los productos adicionales.

Ejemplo:

[digistore_cart theme=v2 language=es netto tracking="campaign 1"]

Consejos y trucos para el carrito de compras de Digistore24

Aquí tiene algunos consejos prácticos basados en el uso real.

Consejo 1: Alinear los planes de pago de sus productos

Si vende productos mediante suscripción o pagos a plazos, debe usar los mismos intervalos de facturación para todos los productos siempre que sea posible (p. ej., mensual o anual). Esto da como resultado menos cargos individuales para el comprador y mantiene claro el proceso de checkout.

Puede mezclar pagos únicos con productos de suscripción y a plazos. Digistore24 ofrece entonces al comprador el intervalo de facturación que se ajusta a todos los productos seleccionados.

Ejemplo

  • Producto 1: pago anual y pago mensual
  • Producto 2: pago anual y pago bienal
  • Producto 3: solo pago único

Resultado: El comprador solo puede pagar usando pagos anuales (porque ese es el denominador común).

Si sus productos tienen períodos de prueba, se usa el período de prueba más corto entre los productos seleccionados. Y para garantizar que los cargos coincidan, también debe decidir de forma coherente para todos los productos (incluidos los pagos únicos) si el IVA está incluido en el precio o no.

Puede configurar ambas cosas en Digistore24 en Mis productos > Lista de productos, en los detalles del producto en la pestaña “Planes de pago”.

Consejo 2 (para diseñadores web): Mantener las ventanas visibles permanentemente

Si su diseñador web necesita ajustar el aspecto del carrito de compras, ayuda que las ventanas del carrito de compras permanezcan visibles permanentemente. Esto facilita aplicarles estilo y probarlas.

Añada el parámetro ?ds24debug a la URL de la página donde está incrustado el carrito de compras.

Ejemplo

https://www.domain.com?ds24debug

Consejo 3 (para desarrolladores web): Añadir productos mediante JavaScript

Si desea hacer que su página sea más flexible (p. ej., botones personalizados, listas de productos dinámicas), también puede añadir productos al carrito de compras directamente mediante JavaScript.

Añadir productos

ds24cart_add(123) - añade el producto 123 al carrito de compras
ds24cart_add(123, 3) - añade el producto 123 al carrito de compras tres veces

Mostrar el carrito de compras

Use ds24cart_show(button) para abrir el carrito de compras.

Ejemplo

<button onclick="return ds24cart_show(this);">Mostrar carrito de compras</button>