respuesta rapida
360° en el catálogo 1C-Bitrix (no Bitrix24): publicar en Studio (nombre = artículo, Activo) → pegar widget.js en un área de inclusión (bitrix:main.include) o catalog.element → data-key + data-sku (AUTO si hay sku JSON-LD). Carga diferida y modal. Probar una URL de producto en vivo. Si el composite está activo, pruébelo así; no lo desactive como arreglo por defecto.
Las galerías de Bitrix pasan fotos fijas. Quien compra sigue sin poder girar el artículo. Puede añadir una rotación 360° fotografiada sin un módulo del Marketplace de Bitrix: alojar los fotogramas en Spinnify y pegar un script.
Esta guía es para fichas de catálogo 1C-Bitrix CMS (catalog.element). Bitrix24 es otro producto (CRM) y no es esta pila. El mismo fragmento widget.js funciona en la ficha de producto. No instala un módulo extra del Marketplace de Bitrix de Spinnify.
3 pasos de las fotos a la ficha Bitrix en vivo
El trabajo es el embed: un script en la ficha de producto y luego el enlace al artículo del catálogo.
1. Preparar en Spinnify Studio
Antes de abrir el admin de Bitrix:
- Crear una cuenta en Spinnify Studio.
- Crear un producto y subir una serie de fotos (24–36 fotogramas, 4:3 para fotos de PC).
- Importante: el nombre del producto en Studio debe coincidir con el artículo del catálogo (importan espacios y guiones; no importan mayúsculas).
- Dejar el producto Activo. Un producto oculto no muestra el botón.
2. Añadir código en Bitrix
Dos formas de pegar el mismo fragmento de Studio. Cópielo en Instalación del widget → Mostrar código.
Método A: área de inclusión (el más rápido para todo el catálogo). En la plantilla de ficha (catalog.element), añada un componente bitrix:main.include. Apúntelo a un archivo de inclusión (por ejemplo en /include/) que contenga el script, guarde. Use data-sku="AUTO" si la ficha ya imprime JSON-LD Product de Schema.org con sku.
Método B: catalog.element template.php (un pegado en la plantilla de ficha). Abra la plantilla de ficha, pegue el mismo fragmento y guarde. Use data-sku manual igual al artículo de ese producto si AUTO no está disponible. No lo pegue en catalog.section: el script se cargaría en los listados.
3. Configurar el enlace
El código se ve así: <script src="https://www.spinnify.io/widget.js" data-key="YOUR_WIDGET_KEY" data-sku="SKU_FROM_PANEL" defer></script>
- data-key: su clave de widget de Studio. No la cambie.
- data-sku: el artículo del catálogo, o AUTO para leer sku del JSON-LD, o URL si guardó la ruta de la página en Studio. En ofertas SKU, vincule el artículo de la oferta que ve quien compra.
Por qué sigue siendo rápido
Un script de terceros en 1C-Bitrix plantea dudas de PageSpeed porque el caché compuesto y catalog.element ya poseen el primer pintado. Spinnify deja el trabajo extra fuera de esa pintura: los fotogramas quedan en el CDN hasta que alguien pide girar. La galería Bitrix pinta primero; la capa 360 se abre después en un modal.
- Carga diferida: el navegador no pide el conjunto de fotogramas hasta que alguien hace clic.
- Aislamiento: el visor se abre en un modal y no sustituye la galería Bitrix en el primer pintado.
- CDN: los fotogramas van en WebP/AVIF redimensionado, no como archivos extra en el almacenamiento de Bitrix.
Lista: ¿no aparece el botón?
Si falta el botón 3D View, recorra esta lista en una URL de producto en vivo, no en la vista previa de Admin.
- ¿Está en una URL de producto en vivo? La vista previa del editor visual es un mal test para scripts de tienda.
- Sitio composite: pruebe la página publicada con composite activo. Si falta el botón, ponga el script fuera de un marco dinámico o vuelva a probar con ?ncc=1, luego corrija la ubicación. No desactive el composite en todo el sitio como arreglo por defecto.
- ¿Coinciden los nombres? El nombre en Studio y el artículo del catálogo deben coincidir (espacios y guiones incluidos).
- ¿El producto de Studio está Activo?
- ¿Copió data-key de su cuenta?
- Un script por página: no pegue el fragmento dos veces. Fuera de listados catalog.section.
- Ofertas SKU: vincule el artículo de la oferta visible, o el modo URL si cada oferta tiene su propia ruta.
¿Puedo personalizar el aspecto del botón?
Sí. El lanzador se diseña en Studio, no en el CSS del tema. Puede alinearlo con la tienda sin editar la plantilla del producto:
- Posición: derecha, izquierda o centro.
- Colores y etiqueta acordes al tema Bitrix.
- Formato: icono flotante redondo o pestaña fina.
Después Bitrix sigue sirviendo la galería. La capa 360° se abre cuando alguien la pide.
Grabar giros: cómo crear una vista 360. Otras tiendas HTML: Tilda Zero Block. giros 360 WooCommerce.
