Las ventajas de los Widgets
Principales ventajas:
- Nueva tecnología React: mejor rendimiento y mayor facilidad de búsqueda en Google
- Enfoque mobile-first
- Diseño moderno y actual
Otras ventajas:
- Mejora de la tasa de conversión gracias a una mejor experiencia de usuario
- Opciones de seguimiento optimizadas
- Aumento de la puntuación de Google Lighthouse
- Clasificación de productos integrada en la búsqueda de Google
- Navegación moderna con widgets
- Funcionalidad mejorada de filtrado y clasificación
- Tecnología React JS en lugar de iFrame
Widget de catálogo
¿Qué puede hacer el widget Catálogo?
El widget de catálogo le ofrece una visión general de sus ofertas con un diseño moderno. Al cliente se le muestra el título de la oferta, una imagen, el precio y una pequeña descripción. Con el botón "Reservar aquí", el cliente es redirigido a la vista del producto.
Por un lado, es posible filtrar las ofertas por ubicación, fecha y categoría, como excursiones o deportes al aire libre. Por otro lado, las ofertas también se pueden ordenar por precio más bajo y más alto, diferentes idiomas y otros.
Widget de productos
¿Qué puede hacer el widget de producto?
El widget de producto puede mostrar fotos de sus productos y ofertas, así como su descripción. Además, es posible que un cliente compre la oferta directamente a través del widget de reserva integrado. Para que el widget de producto también se adapte visualmente a su sitio web, también puede adaptar los colores y estilos con CSS.
Cómo añadir los widgets
Paso 1
Si desea utilizar los widgets, vaya a Panel de control > Configurar tienda > Integración en el sitio web.
Paso 2
A continuación, haga clic en Editor de widgets para ir a la configuración de la integración.
Paso 3
Añada el Widget deseado utilizando el botón + Nuevo Widget.
Nota: El artículo Cómo utilizar el Editor de Widgets explica información más detallada. Echa un vistazo y añade tu primer Widget.
Personaliza tus Widgets con CSS
Todos los elementos HTML importantes del widget tienen nombres de clase específicos, que empiezan por "regiondo-". Esto permite una fácil personalización mediante CSS. Los nombres de las clases se enumeran a continuación. El widget utiliza la técnica de aislamiento de estilos (Shadow DOM), por lo tanto todos los estilos para el widget tienen que ser puestos dentro de una etiqueta específica: <template id="product-catalog-widget-styles"></template> . Asegúrate de que la propiedad id de la etiqueta template coincide con la propiedad styles-template-id de la etiqueta Widget.
Nota: El artículo Cómo ajustar el código de su Editor de widgets le muestra ejemplos para cada posibilidad de personalización de forma más detallada.
export const classes = {
details: {
prefix: 'Re-p',
root: 'regiondo-product-details',
drawer: {
root: 'regiondo-drawer',
header: 'regiondo-drawer-header',
content: 'regiondo-drawer-content',
},
collapsible: {
root: 'regiondo-collapsible',
header: 'regiondo-collapsible-header',
content: {
root: 'regiondo-collapsible-content',
closed: 'regiondo-collapsible-content-closed',
open: 'regiondo-collapsible-content-open',
},
},
backLink: 'regiondo-back-link',
content: {
root: 'regiondo-content',
main: 'regiondo-content-main',
side: 'regiondo-content-side',
},
reviews: {
root: 'regiondo-reviews',
header: 'regiondo-reviews-header',
preview: 'regiondo-reviews-preview',
summary: 'regiondo-reviews-summary',
loadButtonContainer: 'regiondo-reviews-load-button-container',
list: 'regiondo-reviews-list',
carousel: 'regiondo-reviews-carousel',
review: {
root: 'regiondo-review',
header: 'regiondo-review-header',
body: 'regiondo-review-body',
caption: 'regiondo-review-caption',
replies: 'regiondo-review-replies',
},
rating: 'regiondo-reviews-rating',
ratingCategory: 'regiondo-reviews-rating-category',
},
crossSelling: {
root: 'regiondo-cross-selling',
header: 'regiondo-cross-selling-header',
list: 'regiondo-cross-selling-list',
item: 'regiondo-cross-selling-product',
},
booking: {
root: 'regiondo-booking-container',
header: 'regiondo-booking-header',
price: 'regiondo-booking-price',
priceLabel: 'regiondo-booking-price-label',
priceValue: 'regiondo-booking-price-value',
mobileButton: 'regiondo-booking-mobile-button',
drawer: 'regiondo-booking-drawer',
},
tripadvisor: 'regiondo-tripadvisor',
shortDescription: 'regiondo-product-short-description',
highlights: 'regiondo-product-highlights',
description: 'regiondo-product-description',
information: {
root: 'regiondo-product-information',
product: {
root: 'regiondo-product-information-item',
icon: 'regiondo-product-information-item-icon',
header: 'regiondo-product-information-item-header',
body: 'regiondo-product-information-item-body',
},
covid19: 'regiondo-product-information-item-covid19',
services: 'regiondo-product-information-item-services',
notIncluded: 'regiondo-product-information-item-not-included',
duration: 'regiondo-product-information-item-duration',
equipment: 'regiondo-product-information-item-equipment',
participants: 'regiondo-product-information-item-participants',
languages: 'regiondo-product-information-item-languages',
openingHours: 'regiondo-product-information-item-opening-hours',
importantInfo: 'regiondo-product-information-item-important-info',
attachments: 'regiondo-product-information-item-attachments',
},
location: {
root: 'regiondo-product-location',
description: 'regiondo-product-location-description',
details: {
root: 'regiondo-product-location-details',
address: 'regiondo-product-location-address',
operator: 'regiondo-product-location-operator',
name: 'regiondo-product-location-name',
},
additional: {
root: 'regiondo-product-location-additional',
parking: 'regiondo-product-location-parking',
publicTransport: 'regiondo-product-location-public-transport',
},
map: {
image: 'regiondo-product-location-map-image',
interactive: 'regiondo-product-location-map-interactive',
},
},
header: 'regiondo-product-header',
headerLabels: 'regiondo-product-header-labels',
tags: 'regiondo-product-tags',
labels: {
rating: 'regiondo-product-label-rating',
covid19: 'regiondo-product-label-covid19',
duration: 'regiondo-product-label-duration',
location: 'regiondo-product-label-location',
soldOut: 'regiondo-product-label-sold-out',
saleEnded: 'regiondo-product-label-sold-sale-ended',
new: 'regiondo-product-label-new',
bestseller: 'regiondo-product-label-bestseller',
},
gallery: {
root: 'regiondo-product-gallery',
thumbnails: {
root: 'regiondo-product-thumbnails',
previousButton: 'regiondo-product-thumbnails-previous',
nextButton: 'regiondo-product-thumbnails-next',
pages: 'regiondo-product-thumbnails-pages',
page: 'regiondo-product-thumbnails-page',
thumbnail: 'regiondo-product-thumbnail',
},
screen: {
root: 'regiondo-product-gallery-screen',
imageSlide: 'regiondo-product-gallery-slide regiondo-product-image',
videoSlide: 'regiondo-product-gallery-slide regiondo-product-video',
previousButton: 'regiondo-product-gallery-previous',
nextButton: 'regiondo-product-gallery-next',
video: {
frame: 'regiondo-product-video-frame',
preview: 'regiondo-product-video-preview',
playButton: 'regiondo-product-video-play',
},
},
},
},
catalog: {
prefix: 'Re-c',
root: 'regiondo-catalog',
header: 'regiondo-catalog-header',
list: 'regiondo-catalog-list',
product: {
root: 'regiondo-list-product',
image: 'regiondo-list-product-image',
content: 'regiondo-list-product-content',
details: 'regiondo-list-product-details',
header: 'regiondo-list-product-header',
description: 'regiondo-list-product-description',
rating: 'regiondo-list-product-rating',
shortInfo: {
root: 'regiondo-list-product-short-info',
duration: 'regiondo-list-product-duration',
location: 'regiondo-list-product-location',
},
footer: 'regiondo-list-product-footer',
button: 'regiondo-list-product-button',
price: {
root: 'regiondo-list-product-price',
label: 'regiondo-list-product-price-label',
value: 'regiondo-list-product-price-value',
},
labels: {
soldOut: 'regiondo-list-product-label-sold-out',
saleEnded: 'regiondo-list-product-label-sold-sale-ended',
new: 'regiondo-list-product-label-new',
bestseller: 'regiondo-list-product-label-bestseller',
},
},
},
};