Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Following the same concept as the Siguiendo el mismo concepto de Inserte nuestro Newsletter Widget en cualquier página web (Copy), the el Product Widget is nothing but a simple code snippet which you can easily integrate into any website. With our flexible and responsive Product Widget, you can easily build a product catalog page with your own style on your own website. The latest product information presented inside the widget will be automatically fetched from the catalog of the corresponding SecuTix online sales platform. No more manual copy paste and maintenance of the product information are needed!

Note

Please note that this article only applies to SecuTix Gravity Product Widget V1 which is released within PizBernina V2.

no es más que un simple fragmento de código que puede insertar fácilmente en cualquier página web. Con nuestro Product Widget flexible y reactivo, podrá crear fácilmente una página de catálogo de productos con su propio estilo en su propia página web. La información de producto más reciente presentada en el widget se recuperará automáticamente del catálogo de la plataforma de venta en línea SecuTix correspondiente. ¡Ya no tendrá que copiar y pegar manualmente ni realizar más labores de mantenimiento de la información del producto! 

Note

Es importante que tenga en cuenta que este artículo solo se refiere al SecuTix Gravity Product Widget V1 que se publica dentro de PizBernina V2.

¿Cómo funciona?

Para usar un product widget, lo primero que tiene que hacer es insertar un fragmento de código en la página web de destino. Para ello, tiene que ponerse en contacto con su agencia web para que incruste el fragmento en el código HTML de su página web o insertarlo a través de Google Tag Manager. El fragmento de código primero llama al servicio back-end de SecuTix para recuperar las configuraciones necesarias (por ejemplo, el tema y las etiquetas) y la información de producto (por ejemplo, el nombre, la imagen, la fecha, los botones de acción admitidos, etc.) del catálogo de la plataforma de venta en línea correspondiente. Luego genera la interfaz de usuario del widget y presenta la información de producto basándose en la configuración. Al igual que el newsletter widget, el estilo y el tema del product widget son por defecto los mismos que los de la plataforma de venta en línea correspondiente. También puede anular los estilos a través del CSS personalizado.   

Ejemplo

A continuación tiene un ejemplo de una página de un catálogo de productos personalizada que se ha creado usando varios product widgets con varios parámetros de inicialización.

Image Added

Fragmento de código de muestra

How does it work?

To use a product widget, first you would need to integrate a code snippet into your target website. You may either contact your web agency to embed the snippet into your website's HTML code or integrate it via Google Tag Manager. The code snippet will first call SecuTix back-end service to fetch the necessary configurations (e.g. theme and labels) and product information (e.g. name, image, date, supported action buttons, etc.) from the catalog of the corresponding online sales platform. Then it will render the user interface of the widget and present the product information based on the configuration. Like the newsletter widget, the default style and theme of the product widget are the same as the ones from the corresponding online sales platform. You may also override the styles via custom CSS. 

Example

Below is an example of a custom product catalog page built using multiple product widgets with various initialization parameters.

Image Removed

Sample code snippet

Code Block
theme Eclipse
title Sample code
 
Parameters

Parámetros

  • Clave API - el testigo (o token) secreto generado en la pantalla de configuración de su punto de venta. Puede encontrar este parámetro en Canales de venta > Punto de venta > Características > pestaña Parámetros de Internet.

    Image Added

  • Nombre de equipo - el nombre de equipo de la URL del punto de venta para su plataforma de venta en línea

    Note

    Tenga en cuenta que el product widget recuperará las configuraciones (por ejemplo, la anulación de etiquetas y el tema) del correspondiente punto de venta.

  • Identificador del producto - el identificador del producto que quiere mostrar en el widget.

    Note

    Tenga en cuenta que el product widget recuperará la información de producto (por ejemplo, el nombre, la imagen, la fecha, los botones de acción admitidos, etc.) del correspondiente punto de venta.

  • Identificador de ocurrencia - (Opcional) el identificador de la función o del intervalo de tiempo que quiere mostrar en el widget. Cuando este parámetro está fijado, el product widget muestra la fecha y la hora iniciales de la ocurrencia correspondiente (es decir, la función o el intervalo de tiempo). Si no está fijado, solo mostrará un intervalo de fechas entre la primera y la última ocurrencia del producto correspondiente.
  • Relación de aspecto - (Opcional) la relación de aspecto de la imagen del producto que se muestra en el widget. Los valores admitidos son 
  • apiKey - the secret token generated in your point of sales configuration screen. You may find this parameter in the Sales Channels > Point of sales > Characteristics > Internet Parameters tab.

    Image Removed

  • hostname - the hostname of the point of sales URL for your online sales platform. 

    Note

    Please note that the product widget will fetch the configurations (e.g. theme and label overriding) from the corresponding point of sales.

  • productId - the Id of the product that you want to display inside the widget.

    Note

    Please note that the product widget will fetch the product information (e.g. name, image, date, supported action buttons, etc.) from the corresponding point of sales.

  • occurrenceId - (Optional) the Id of the performance or timeslot that you want to display inside the widget. When this parameter is set, the product widget will display the start date and time of the corresponding occurrence (i.e. performance or timeslot). If not set, it will just display a date range between the first occurrence and the last occurrence of the corresponding product.
  • aspectRatio - (Optional) the aspect ratio of the product image displayed inside the widget. Supported values are "VERTICAL","HORIZONTAL", "WIDEANCHO", "SQUARECUADRADO" and y "LANDSCAPEAPAISADO". The default value is El valor por defecto es "VERTICAL". 
  • showActions Mostrar acciones - (Optional) whether or not the product widget should display action buttons. The default value is "false". Supported action buttons are:
    • "Buy", if online sale is enabled for the corresponding product;
    • "Reserve", if online booking is enabled for the corresponding product;
    • "Option", if online quote is enabled for the corresponding product.
  • showText - (Optional) whether or not the product widget should display text. The default value is "true".
  • showImage - (Optional) whether or not the product widget should display product image. The default value is "false".
  • Opcional) si el product widget debe mostrar o no los botones de acción. El valor por defecto es "falso". Los botones de acción admitidos son:
    • "Comprar", si la venta en línea está habilitada para el producto correspondiente;
    • "Reservar", si la reserva en línea está habilitada para el producto correspondiente;
    • "Opción", si el presupuesto en línea está habilitado para el producto correspondiente.
  • Mostrar texto - (Opcional) si el product widget debe mostrar o no texto. El valor por defecto es "verdadero".
  • Mostrar imagen - (Opcional) si el product widget debe mostrar o no la imagen del producto. El valor por defecto es "falso".
  • Local - (Opcional) el código del idioma que define el idioma del product widget. Cuando no esté fijado, el widget usará por defecto el idioma de la institución principallocale - (Optional) the language code which defines the language of the product widget. When not set, the widget will use the main institution language by default.