Módulo de cuadro de compra

Artículo
03/08/2023

En este artículo se tratan los módulos de cuadro de compra y se describe cómo agregarlos a las páginas de sitio en Microsoft Dynamics 365 Commerce.

El término cuadro de compra hace referencia normalmente a una página de detalles de productos (PDP) que se encuentra “por encima del pliegue” y que hospeda toda la información más importante necesaria para crear una compra del producto. (Un área que está “por encima del pliegue” es visible cuando la página se carga por primera vez, de modo que los usuarios no tengan que desplazarse hacia abajo para verla).

Un módulo de cuadro de compra es el contenedor especial que se usa para hospedar todos los módulos que se muestran en el área del cuadro de compra de una página de detalles de producto.

La dirección URL de una página de detalles de producto incluye el id. de producto. Toda la información que se necesita para representar un módulo de cuadro de compra se deriva de este id. de producto. Si no se proporciona un id. de producto, el módulo de cuadro de compra no se representará correctamente en una página. Por lo tanto, un módulo de cuadro de compra solo se puede usar en páginas que tienen contexto de producto. Para usarlo en una página que no tiene contexto de producto (por ejemplo, una página de inicio o una página de marketing), debe realizar personalizaciones adicionales.

La siguiente imagen muestra un ejemplo de un módulo de cuadro de compra en una página de detalles del producto.

Ejemplo de un módulo de cuadro de compra.

Franjas y propiedades del módulo de cuadro de compra

En una página de detalles de productos, un cuadro de compra se divide en dos regiones: una región multimedia a la izquierda y una región de contenido a la derecha. De manera predeterminada, la proporción del ancho de columna de la región multimedia con respecto al ancho de columna de la región de contenido es 2:1. En los dispositivos móviles, se apilan las dos regiones, de modo que una región aparece debajo de la otra. Los temas se pueden usar para personalizar los anchos de columna y la clasificación de pilas.

Un módulo de caja de compra representa el título, la descripción, el precio y las calificaciones de un producto. También permite a los clientes seleccionar variantes de productos que tienen atributos de producto distintos, como tamaño, estilo y color. Cuando hay una variante de producto seleccionada, se actualizan otras propiedades del cuadro de compra (por ejemplo, la descripción del producto y las imágenes) para reflejar la información de la variante.

Se proporciona un selector de cantidad, para que los clientes puedan especificar la cantidad de artículos a comprar. La cantidad máxima que se puede comprar se puede establecer en la configuración del sitio.

Desde el cuadro de compra, los clientes también pueden realizar acciones como agregar un producto al carro, agregar un producto a su lista de deseos y seleccionar una ubicación de recogida. Estas acciones se pueden realizar en un producto o una variante de producto. Para agregar un producto a una lista de deseos, el cliente debe iniciar sesión.

Los temas se pueden usar para eliminar o cambiar el orden de las propiedades del producto de la caja de compra y los controles de acción.

Propiedades del módulo

Etiqueta de encabezado: esta propiedad define la etiqueta de encabezado para el título del producto. Si el cuadro de compra está en la parte superior de la página, esta propiedad debe establecerse en h1 para cumplir los estándares de accesibilidad.
Habilitar recomendaciones de "comprar looks similares": esta propiedad permite que el cuadro de compra muestre enlaces a productos que se parecen al artículo que se ve actualmente. Esta función está disponible en Commerce, versión 10.0.13 y posterior.

Módulos que se pueden usar en un módulo de cuadro de compra

Galería de medios Este módulo se usa para mostrar imágenes de un producto en una página de detalles de productos. Para obtener más información sobre este módulo, consulte Módulo de galería de medios.
Selector de tienda: este módulo muestra una lista de las tiendas cercanas en las que un artículo está disponible para su recogida. Permite a los usuarios especificar una ubicación para encontrar tiendas cercanas. Para obtener más información sobre este módulo, consulte Módulo selector de tienda.
Compartir en redes sociales: este módulo se puede agregar al cuadro de compra para permitir a los usuarios compartir información del producto en las redes sociales. Para más información, consulte Módulo Compartir en rees sociales.

Configuración del módulo de cuadro de compra

Las siguientes opciones de cuadro de compra pueden configurarse en Configuración de sitio > Extensiones:

Límite de cantidad de línea de carro: esta propiedad se usa para especificar el número máximo de cada artículo que se puede agregar al carro. Por ejemplo, un minorista puede decidir si solo 10 de cada producto se pueden vender en una única transacción.
Inventario: para obtener información sobre cómo aplicar la configuración de inventario, consulte Aplicar configuración de inventario.
Agregar producto al carrito - Para obtener información sobre cómo aplicar la configuración Agregar producto al carrito, vea Agregar producto a la configuración del carrito.

Compre extensiones de definición de módulo de caja en el tema Adventure Works

El módulo de caja de compra que proporciona el tema Adventure Works tiene una extensión de definición de módulo que admite la implementación de un módulo de especificaciones de producto dentro de un módulo de acordeón en una caja de compra de PDP. Para mostrar los atributos de especificación del producto en una caja de compra de PDP, agregue un módulo de especificación de producto a la ranura del módulo de acordeón en la ranura de la caja de compra.

Importante

El tema de Adventure Works está disponible a partir del lanzamiento de la versión 10.0.20 de Dynamics 365 Commerce.

Interacción con Commerce Scale Unit

El módulo de cuadro de compra recupera la información de producto mediante las interfaces de programación de aplicaciones (API) de Commerce Scale Unit. El id. del producto de la página de detalles de productos se utiliza para recuperar toda la información.

Agregar un módulo de cuadro de compra a una página

Para agregar un módulo de cuadro de compra a una página nueva y establecer las propiedades necesarias, siga estos pasos.

Vaya a Fragmentos y seleccione Nuevo para crear un nuevo fragmento.
En el cuadro de diálogo Nuevo fragmento, seleccione el módulo Cuadro de compra.
En Nombre del fragmento, especifique el nombre Fragmento de cuadro de compra y luego seleccione Aceptar.
En el espacio Galería de medios del módulo de cuadro de compra, seleccione los puntos suspensivos (...) y luego seleccione Agregar módulo.
En el cuadro de diálogo Seleccionar módulo, seleccione el módulo Galería de medios y, a continuación, Aceptar.
En el espacio Selector de tienda del módulo de cuadro de compra, seleccione los puntos suspensivos (...) y luego seleccione Agregar módulo.
En el cuadro de diálogo Seleccionar módulos, seleccione el módulo Selector de tienda y elija Aceptar.
Seleccione Guardar y seleccione Finalizar edición para proteger el fragmento y luego seleccione Publicar para publicarlo.
Vaya a Plantillas y luego seleccione Nuevo para crear una nueva plantilla.
En el cuadro de diálogo Nueva plantilla, en Nombre de plantilla, introduzca Plantilla PDP y luego seleccione Aceptar.
En el espacio Cuerpo, seleccione los puntos suspensivos (...) y después seleccione Agregar módulo.
En el cuadro de diálogo Seleccionar módulos, seleccione el módulo Página predeterminada y, a continuación, Aceptar.
En el espacio Principal de la página predeterminada, seleccione los puntos suspensivos (...) y, a continuación, Agregar fragmento.
En el cuadro de diálogo Seleccionar fragmento, seleccione el fragmento Fragmento de cuadro de compra creado anteriormente y, a continuación, seleccione Aceptar.
Seleccione Guardar y seleccione Finalizar edición para proteger la plantilla y luego seleccione Publicar para publicarla.
Vaya a Páginas y seleccione Nuevo para crear una nueva página.
En el cuadro de diálogo Crear nueva página, en Nombre de página, introduzca una Página PDP y luego seleccione Siguiente.
En Elegir plantilla, seleccione Plantilla PDP y luego seleccione Siguiente.
En Elija un diseño, seleccione un diseño de página (por ejemplo, Diseño flexible), y luego seleccione Siguiente.
En Revisar y terminar, revise la configuración de la página. Si necesita editar la información de la página, seleccione Atrás. Si la información de la página es correcta, seleccione Crear página.
En el espacio Principal de la nueva página, seleccione los puntos suspensivos (...) y, a continuación, Agregar fragmento.
En el cuadro de diálogo Seleccionar fragmento, seleccione el fragmento Fragmento de cuadro de compra creado anteriormente y, a continuación, seleccione Aceptar.
Guarde la página y obtenga una vista previa de ella. Agregue el parámetro de cadena de consulta ?productid=<id. de producto> a la dirección URL de la página de vista previa. De esa manera, el contexto del producto se usa para cargar y representar la página de vista previa.
Seleccione Guardar y seleccione Finalizar edición para proteger la página y luego seleccione Publicar para publicarla. Un cuadro de la compra debe aparecer en la página de detalles de productos.