SH - Integración Visual (Legacy)

Añadir widgets en la página de producto

1. Desactivar los componentes promocionales en la aplicación On-Site Messaging App
2. Acceder a la pestaña Tienda Online →  Temas en la barra de menú lateral.

3. En el apartado Tema activo escoger la opción Editar código:
   
   
   
   

4. Añadir al final del fichero Templates → product.liquid el siguiente código sustituyendo USUARIO y CLAVE-ASSETS por los parámetros facilitados.
   
   Nota: Si tu ficha de producto no trabaja con product.liquid, revisa en product-template.liquid o en product-description-bottom-template.liquid, dentro del apartado Sections del tema; si tampoco trabaja en esas plantillas, buscaremos en el fichero Sections.

   Widgets

   <script>
     sequraConfigParams = {
       merchant:'USUARIO',  //Sustituir el valor USUARIO
       assetKey:'CLAVE-ASSETS',//Sustituir el valor CLAVE-ASSETS
       locale: Shopify.locale,
       price_src: '*[itemprop=price],#productPrice', //Si no funciona con este valor, sustituir por el selector css del precio 
       widgets:[
         //Si no se quiere alguno de los widgets podría eliminar
         //Widget Recibe primero...
         {
           product: 'i1', //Código de producto para Recibe primero...
           dest_sel: '#AddToCartForm'//Selector css del lugar donde se quiera colocar el widget
         },
   	  //FIN Widget Recibe primero...	
         //Widget Fracciona tu pago
         {
           product: 'pp3', //Código de producto para Fracciona tu pago
           dest_sel: '.product-single__prices'//Selector css del lugar donde se quiera colocar el widget
         },
   	  //FIN Widget Fracciona tu pago
       ]
     };
     (function(){
       var script = document.createElement("script");
       script.src = "https://s3-eu-west-1.amazonaws.com/shop-assets.sequrapi.com/base/js/sequrapayment_v2.js";
       script.async = true;
       document.getElementsByTagName("head")[0].appendChild(script);
     })()
   </script>

5. En caso de que el comercio vaya a vender en otros idiomas/paises como FR, PT o IT el código quedaría:
   Widgets

       <script>
         if(['es','pt','fr','it'].includes(Shopify.locale)){
           sequraConfigParams = {
             locale: Shopify.locale,
             price_src: '.price-item.price-item--regular,*[itemprop=price],#productPrice', //Si no funciona con este valor, sustituir por el selector css del precio 
             widgets:[
               //Si no se quiere alguno de los widgets podría eliminar
               //Widget Recibe primero...
               {
                 product: 'i1', //Código de producto para Recibe primero...
                 dest_sel: '#AddToCartForm'//Selector css del lugar donde se quiera colocar el widget
               },
             //FIN Widget Recibe primero...	
               //Widget Fracciona tu pago
               {
                 product: 'pp3', //Código de producto para Fracciona tu pago
                 dest_sel: '.product__tax'//Selector css del lugar donde se quiera colocar el widget
               },
             //FIN Widget Fracciona tu pago
             ]
           };
           //Asignar merchant y assetsKey del pais 
           switch (Shopify.locale){
             case 'fr':
               sequraConfigParams.merchant = 'USUARIO_fr';  //Sustituir el valor USUARIO
               sequraConfigParams.assetKey = 'CLAVE-ASSETS_fr';//Sustituir el valor CLAVE-ASSETS
             break;
             case 'it':
               sequraConfigParams.merchant = 'USUARIO_it';  //Sustituir el valor USUARIO
               sequraConfigParams.assetKey = 'CLAVE-ASSETS_it';//Sustituir el valor CLAVE-ASSETS
             break;
             case 'pt':
               sequraConfigParams.merchant = 'USUARIO_pt';  //Sustituir el valor USUARIO
               sequraConfigParams.assetKey = 'CLAVE-ASSETS_pt'; //Sustituir el valor CLAVE-ASSETS
             default:
               sequraConfigParams.merchant = 'USUARIO';  //Sustituir el valor USUARIO
               sequraConfigParams.assetKey = 'CLAVE-ASSETS';//Sustituir el valor CLAVE-ASSETS
           }
           (function(){
             var script = document.createElement("script");
             script.src = "https://s3-eu-west-1.amazonaws.com/shop-assets.sequrapi.com/base/js/sequrapayment_v2.js";
             script.async = true;
             document.getElementsByTagName("head")[0].appendChild(script);
           })()
         }
       </script>

Paso anterior | Paso siguiente