Fast Tags | Configuración Fast Tags

💡 Fast Tags es una potente función disponible para Shopify y WooCommerce que mejora tu tienda online. Las Fast Tags ayuda a impulsar la conversión de tu sitio web mostrando la velocidad de tu servicio de entrega, infundiendo confianza en tus clientes. 💨

¿No sabe qué es Fast Tags ? Descubra la función

Aprende a desbloquear esta valiosa función en este artículo.

1.Elija su método de visualización Fast Tags

Bigblue ofrece dos maneras de mostrar los Fast Tags en su tienda:

Colocación automática

La colocación automática no requiere experiencia en desarrollo web: active Fast Tags con un solo clic directamente en los ajustes de Bigblue. El distintivo se coloca automáticamente antes del botón "Añadir al carrito" en las páginas de productos.

Colocación manual

La colocación manual permite a los usuarios con experiencia en desarrollo web ajustar la ubicación de Fast Tag, colocándola en cualquier lugar de la página del producto que deseen.

La colocación manual le permite mostrar los Fast Tags libremente en su tienda, ofreciendo una personalización adicional:

• Elija entre 2 tipos de insignias (sólo Shopify)
  • Insignia de producto: Ofrecer una promesa de entrega para un producto específico.
  • Insignia del carrito: Ofrecer una promesa de entrega basada en todos los productos del carrito.

• Personaliza la visualización de las insignias según tus preferencias
  • En Shopify, puedes mostrar las insignias de Fast Tags en tus páginas exactamente como quieras, permitiéndote tener una disposición única para cada página.
  • En WooCommerce, los Fast Tags se pueden mostrar en las páginas de productos, en las listas de productos y en el carrito.

⚠️ Para colocar Fast Tags manualmente, Bigblue recomienda que los comerciantes obtengan ayuda de un desarrollador, o que tenga experiencia en la edición de la plantilla de su tienda.

• En Shopify
• En WooCommerce

2.Activar Fast Tags en Bigblue

• Para activar Fast Tags, primero, vaya a la aplicación Bigblue y visite los ajustes de integración de su tienda
• En los ajustes de Fast Tags , haga clic en "Editar".

• A continuación, en la página de configuración Fast Tags , seleccione el método de visualización que prefiera

• Haga clic en "Guardar y activar".

3.Implemente su método de exposición Fast Tag en su tienda

• Shopify
• WooCommerce

En Shopify

Colocación automática en las páginas de productos

Una vez que haya seleccionado la opción "Colocar la insignia automáticamente en las páginas de productos" en la página de configuración Fast Tags , ¡ya está todo listo! Fast Tags se mostrará ahora encima del botón "Añadir al carrito" en todas sus páginas de productos de la siguiente manera:

Colocación manual mediante edición de código y personalización de temas

Para añadir manualmente el Fast Tag en Shopify, por favor edite el Tema de su Tienda Online. Tienes que seguir dos pasos:

• Edite el código de su tema para definir el bloque Bigblue Fast Tag .
• Personaliza tu tema para Inyectar este bloque donde quieras mostrar un Fast Tag.

Producto Fast Tag - Edite el código de su tema

Para añadir un bloque Bigblue Fast Tag a sus Plantillas de temas de productos, vaya a Tienda en línea > Temas, haga clic en los puntos y en Editar código

En su página de producto .líquido archivo, - denominado principal-producto.liquido o cualquier otra cosa, probablemente similar, - añada los siguientes trozos de código:

1. En el {%- for block in section.blocks -%} añada lo siguiente tipo.bloque caso:

{%- when 'bigblue_fast_tag' -%}
  <bigblue
    data-component="fast-tag-product"
    data-product="{{ product.id }}"
    data-variant="{{ product.selected_or_first_available_variant.id }}"
  ></bigblue>

2. En virtud de la {% schema %} defina el bloque fast tag para sus páginas de productos:

{
  "type": "bigblue_fast_tag",
  "name": "Bigblue Fast Tag",
  "settings": []
},

3. Guardar los cambios

Producto Fast Tag - Personalice su tema

Para añadir bloques Bigblue Fast Tag , vaya a Tienda en línea > Temas, haga clic en Personalizar

1. Seleccione la Plantilla de Tema de Producto que desea modificar

   

   
   

2. A la izquierda, en la parte Producto (información), haga clic en Añadir bloque y elija Bigblue Fast Tag

   

   
   
3. Arrástrelo y suéltelo donde desee que aparezca Fast Tag

4. Guarde los cambios y vaya a la página de su producto: ¡debería ver un Fast Tag!

   

   🎉 Has inyectado correctamente el Fast Tag en las páginas de Productos.

Fast Tag ¿no aparece inmediatamente? Tanto Shopify como Bigblue disponen de sistemas de caché para garantizar la inyección más rápida de fast tag . Para conseguir un rendimiento óptimo, estas cachés pueden necesitar tiempo para expirar, normalmente después de esperar hasta 10 minutos. Sin embargo, en la mayoría de los casos, 5 minutos son suficientes. Si el problema persiste y sigues sin ver Fast Tag después de 10 minutos, sigue nuestra guía de solución de problemas.

Carrito Fast Tag - Edite el código de su tema

Cart Theme suelen ser objeto de personalizaciones más específicas, es frecuente tener sólo unas pocas secciones definidas en el código, que no admiten la adición de bloques personalizados. Por lo tanto, le animamos a que se ponga en contacto con el equipo de desarrollo de su tema para identificar las opciones adecuadas. .líquido archivo para actualizar en el código del tema, algo así como cart_main.liquid o pagina_carrito.liquid (no exclusivo).

En ese archivo, puede añadir el siguiente código donde desee que aparezca Bigblue Fast Tag :

<bigblue data-component="fast-tag-cart"> </bigblue>

En WooCommerce

Colocación automática en las páginas de productos

Para utilizar este método, instale o actualice el plugin Bigblue WooCommerce. Una vez activada la colocación automática, no se requiere ninguna acción adicional. El Fast Tags debe aparecer en las páginas de productos de su sitio después de unos segundos.

El tag inyectado se actualiza automáticamente cuando se selecciona una variación de producto diferente.

Colocación manual en las páginas de productos

Para añadir manualmente Fast Tags a tu tienda, debes editar los archivos PHP que generan las páginas de su sitio. En los casos más comunes, están disponibles en  /var/www/html/wp-content/plugins/woocommerce/templates  .

• Para mostrar un Fast Tag en WooCommerce, añada el siguiente fragmento de código en el código HTML, sustituyendo YOUR_PRODUCT_ID por un ID de producto, y YOUR_VARIATION_ID, si existe, por un ID de variación:

<bigblue data-component="fast-tag-product" data-product="YOUR_PRODUCT_ID" data-variant="YOUR_VARIATION_ID"></bigblue>

• Dependiendo de cómo planees inyectar este snippet, puedes beneficiarte de los globales de WooCommerce para inferir automáticamente el ID del producto y el ID de la variante de la página del producto. Por ejemplo, al editar short-description.php para inyectar una insignia en un producto con o sin variantes:

<div class="woocommerce-product-details__short-description">
    <?php echo $short_description; ?>
    <?php 
    $product = wc_get_product();
    if ($product) {
        if ( $product->is_type( 'variable' ) ) {
            $childrens = $product->get_children();
            if ($childrens) {
                $defaultvariation = "";
                foreach ($childrens as $productChild) {
                    $defaultvariation = wc_get_product($productChild)->get_variation_id();
                }
                echo "<bigblue data-component=\"fast-tag-product\" data-product=\"".$product->get_id()."\" data-variant=\"".$defaultvariation."\"></bigblue>";
            }
            wc_enqueue_js("
                $( 'form.variations_form' ).on('show_variation', function(_, data){
                    var updatedVariation = data.variation_id.toString()
                    if( updatedVariation != \"\" ) {
                        var tags = document.body.querySelectorAll('bigblue[data-component=\"fast-tag-product\"]')
                        if (tags !== undefined){
                            for (var i=0; i < tags.length; i++) {
                                if (tags[i].getAttribute(\"data-product\") === \"".$product->get_id()."\") {
                                    tags[i].setAttribute(\"data-variant\", updatedVariation);
                                }
                            }
                        }
                    }
                });
            ");
         } else {
            echo "<bigblue data-component=\"fast-tag-product\" data-product=\"".$product->get_id()."\"></bigblue>";
         }
    }
    ?>
</div>

• Pónte en contacto con tu administrador para obtener más detalles.