@gojiraf/floating-ecommerce-display-prod 1.7.1 → 1.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -49
- package/dist/gj-ctc-production.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,17 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Un producto de [GoJiraf](https://www.gojiraf.ai) para integrar un botón flotante de acceso al live de tu tienda en tu propia página. Para más información, visita [www.gojiraf.ai](https://www.gojiraf.ai).
|
|
4
4
|
|
|
5
|
-
## Analizar el bundle
|
|
6
|
-
|
|
7
|
-
Desde la raíz del repositorio, ejecuta `bun run --cwd apps/floating-ecommerce analyze`. Genera el build y el informe interactivo `apps/floating-ecommerce/dist/bundle-report.html`, que puedes abrir en el navegador. El analizador se activa solo con este comando.
|
|
8
|
-
|
|
9
5
|
## Cómo utilizarlo
|
|
10
6
|
|
|
11
7
|
Agrega este `<script>` al HTML de tu página, antes del cierre de `</body>`, y reemplaza `TU_STORE_ID` por el identificador de tu tienda en GoJiraf:
|
|
12
8
|
|
|
13
9
|
```html
|
|
14
10
|
<script
|
|
15
|
-
src="https://unpkg.com/@gojiraf/floating-ecommerce-display-prod
|
|
11
|
+
src="https://unpkg.com/@gojiraf/floating-ecommerce-display-prod"
|
|
16
12
|
storeId="TU_STORE_ID"
|
|
17
13
|
showLiveButton="true"
|
|
18
14
|
position="right"
|
|
@@ -24,60 +20,25 @@ Agrega este `<script>` al HTML de tu página, antes del cierre de `</body>`, y r
|
|
|
24
20
|
></script>
|
|
25
21
|
```
|
|
26
22
|
|
|
27
|
-
|
|
23
|
+
Puedes indicar el identificador de tu tienda con `storeId` o una URL de live directamente con `liveUrl`. `openNewTab` permite abrir el live en otra pestaña. No necesitas agregar un contenedor ni una hoja de estilos: el script los incorpora automáticamente.
|
|
28
24
|
|
|
29
25
|
## Parámetros del script tag
|
|
30
26
|
|
|
31
27
|
| Atributo | Para qué sirve | Valor predeterminado |
|
|
32
28
|
| --- | --- | --- |
|
|
33
|
-
| `src` | URL del script de GoJiraf que carga el widget.
|
|
29
|
+
| `src` | URL del script de GoJiraf que carga el widget. Usa `https://unpkg.com/@gojiraf/floating-ecommerce-display-prod`. La URL `https://unpkg.com/@gojiraf/floating-ecommerce-display-prod/dist/gj-ctc-production.js` se conserva como legacy. | Debes incluirlo. |
|
|
34
30
|
| `storeId` | Identificador de la tienda cuyo live quieres mostrar. Se utiliza cuando no hay un `liveUrl` válido. | Sin valor; requiere `liveUrl` para mostrar el widget. |
|
|
35
|
-
| `liveUrl` | URL absoluta HTTP o HTTPS del live. Tiene prioridad sobre `storeId
|
|
36
|
-
| `showLiveButton` | `"true"` permite mostrar el widget si
|
|
31
|
+
| `liveUrl` | URL absoluta HTTP o HTTPS del live. Tiene prioridad sobre `storeId`. Abre el live automáticamente, salvo con `openNewTab="true"`. Si la URL es inválida, se utiliza `storeId`, si existe. | Sin valor. |
|
|
32
|
+
| `showLiveButton` | `"true"` permite mostrar el widget si está habilitado para la tienda; `"false"` lo oculta. | `"true"` |
|
|
37
33
|
| `position` | Ubica el widget en la esquina inferior izquierda (`"left"`) o derecha (`"right"`). | `"right"` |
|
|
38
34
|
| `openNewTab` | `"true"` abre el live en una nueva pestaña al hacer clic; `"false"` lo abre en un iframe dentro de tu página. | `"false"` |
|
|
39
|
-
| `testing` | Sin valor (`testing`) o con `"true"`
|
|
40
|
-
| `autoPlayIframe` | Se conserva por compatibilidad.
|
|
35
|
+
| `testing` | Sin valor (`testing`) o con `"true"` activa la atribución de pruebas del live. Con `"false"` o ausente conserva la atribución habitual. | `"false"` |
|
|
36
|
+
| `autoPlayIframe` | Se conserva por compatibilidad. La configuración de la tienda determina la apertura inicial. Con `liveUrl`, el live abre automáticamente; `openNewTab="true"` siempre espera al clic. | `"false"` |
|
|
41
37
|
| `marginBottom` | Agrega un desplazamiento vertical al botón desde la parte inferior de la página, en píxeles. Escribe solo el número, por ejemplo `"55"`, sin `px`. Se aplica cuando el iframe está cerrado o minimizado. | `"0"` |
|
|
42
|
-
| `size` | Porcentaje del tamaño del
|
|
38
|
+
| `size` | Porcentaje del tamaño del live, por ejemplo `"80"`. En mobile se aplica al ancho y alto disponibles; en desktop conserva la proporción 9:16. Los valores mayores que 100 se limitan a 100; los valores inválidos o no positivos usan el tamaño predeterminado. | Mobile: todo el espacio disponible. Desktop: tamaño adaptable al espacio disponible, en proporción 9:16. |
|
|
43
39
|
| `allowClose` | `"true"` agrega una cruz para ocultar el botón mientras el iframe está cerrado o minimizado; `"false"` la oculta. | `"false"` |
|
|
44
40
|
| `draggable` | `"true"` permite arrastrar el botón con mouse, lápiz o touch cuando el iframe está cerrado o minimizado. Al abrirlo vuelve a su posición inicial; al minimizarlo recupera la posición elegida. Arrastrar no activa el botón. | `"false"` |
|
|
45
|
-
| `autoDisconnectTimeout` | Tiempo en milisegundos que el
|
|
41
|
+
| `autoDisconnectTimeout` | Tiempo en milisegundos que el live permanece minimizado antes de desconectarse. Restaurarlo antes de que venza cancela el plazo; después, otro clic vuelve a cargarlo. Acepta valores entre 0 y 2147483647; los valores inválidos usan el predeterminado. | `"30000"` (30 segundos). |
|
|
46
42
|
| `theme` | Define los colores del botón y sus íconos: `"sunset"` (naranja), `"sunsetOutlined"` (blanco con borde naranja), `"noir"` (negro) o `"noirOutlined"` (blanco con borde negro). `"outlined"` es un alias de `"sunsetOutlined"`. Los valores desconocidos usan `"outlined"`. | `"outlined"` |
|
|
47
43
|
|
|
48
|
-
Salvo `testing`, que también se activa sin valor, los atributos booleanos deben llevar el texto `"true"` o `"false"`; no basta con incluir el atributo sin valor.
|
|
49
|
-
|
|
50
|
-
Para configurar el objeto `AppProps` directamente en `main.tsx`, usa los mismos nombres de esta tabla. En TypeScript los booleanos se escriben como `true` o `false`, sin comillas; `size` conserva su valor de texto, por ejemplo `size: "80"`.
|
|
51
|
-
|
|
52
|
-
Para las URLs generadas a partir de `storeId`, si `localStorage` contiene la clave `natura&co/lastLocation` con un objeto JSON cuyo campo `value` incluye una ruta `/consultoria/IDENTIFICADOR`, el widget agrega `consultoria=IDENTIFICADOR` a la URL del live, tanto en el iframe como al abrir una nueva pestaña. La URL también incluye `utm_source` y `utm_medium` con el dominio de la página que contiene el widget, y `utm_content` con el identificador de consultoría. Si el dato no existe, es inválido o el almacenamiento está bloqueado, `utm_content` usa el mismo dominio y no se agrega `consultoria`.
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
## Configuración de la tienda por API
|
|
56
|
-
|
|
57
|
-
Cuando no hay un `liveUrl` válido, el script consulta `GET {VITE_STORES_URL}/stores/{storeId}` y lee `storeConfigurations.features.script`:
|
|
58
|
-
|
|
59
|
-
| Campo de API | Comportamiento |
|
|
60
|
-
| --- | --- |
|
|
61
|
-
| `live` | Solo `true` habilita el widget. `showLiveButton="false"` siempre lo oculta. |
|
|
62
|
-
| `countdown` | `true` espera al clic; `false` abre el iframe al recibir la configuración, incluso si el script indica `autoPlayIframe="false"`. Un campo ausente se interpreta como `false`, igual que en la integración anterior. `openNewTab="true"` evita la apertura automática. |
|
|
63
|
-
|
|
64
|
-
Mientras carga la configuración, si la consulta falla o si falta `live=true`, el widget permanece oculto. La solicitud se cancela después de 15 segundos o al desmontar el widget. No se consulta VideoCommerce ni se envían métricas. Los ajustes de apariencia, posición, arrastre y timeout siguen configurándose con los atributos del script.
|
|
65
|
-
|
|
66
|
-
Las URLs se configuran al compilar mediante `VITE_LIVE_URL` y `VITE_STORES_URL`, sin dominios de respaldo en el código. Para desarrollo local, configura ambas en `.env`; [`.env.example`](.env.example) contiene una referencia de staging. En GitHub, define ambas variables en los entornos `staging` y `production`. El workflow selecciona el entorno según la rama o el tag y detiene la publicación si falta alguna variable.
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
## Controles desde el live embebido
|
|
70
|
-
|
|
71
|
-
La URL del iframe incluye `iframe=true` para que la aplicación del live muestre sus controles. Mientras está abierto no hay un botón externo de minimizar. El live puede enviar mensajes al contenedor con `window.parent.postMessage({ type: "gojiraf-minimize" }, ORIGEN_DE_LA_TIENDA)` o con `type: "gojiraf-close"`:
|
|
72
|
-
|
|
73
|
-
- `gojiraf-minimize` oculta el iframe, muestra el botón para restaurarlo e inicia el timeout de desconexión. Repetir el mensaje no lo vuelve a abrir ni reinicia el plazo.
|
|
74
|
-
- `gojiraf-close` descarga el iframe y deja el botón para abrirlo nuevamente.
|
|
75
|
-
|
|
76
|
-
Solo se aceptan mensajes del origen configurado para el live y de la ventana del iframe actual. La apertura en nueva pestaña no agrega `iframe=true` y no recibe estos controles.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
## Datos del carrito
|
|
80
|
-
|
|
81
|
-
Si `localStorage` contiene `orderform` con un `id` de carrito y un objeto `shipping.selectedAddress`, la URL del live incluye `orderFormId` y `shippingAddress` (la dirección serializada como JSON y codificada como parámetro de URL). Se aplica a URLs de tienda y `liveUrl` directas, tanto en iframe como en nueva pestaña. Para la nueva pestaña, los datos se leen al hacer clic.
|
|
82
|
-
|
|
83
|
-
Si falta cualquiera de los dos datos, el JSON es inválido o el almacenamiento no se puede leer, no se agregan esos parámetros y el live se abre normalmente.
|
|
44
|
+
Salvo `testing`, que también se activa sin valor, los atributos booleanos deben llevar el texto `"true"` o `"false"`; no basta con incluir el atributo sin valor.
|