Instalación del simulador para WooCommerce.

Página de producto

Recomendamos instalar el simulador en la página de producto para poder mostrar a sus clientes que los productos están fianciados.

Para poder añadir el simualdor, se tiene que editar el template de la página de producto de woocommerce. La ruta depende de si el tema que estás usando sobreescribe el template que proporciona el plugin de woocommerce o no.

En el caso de que el tema no sobreescriba los templates de woocommerce, los templates a editar se encuentran el la ruta /wp-content/plugins/woocommerce/templates/

En el caso de que tu tema sobreescriba el template, se tendrán que editar los templates de la ruta /wp-content/themes/$THEME_NAME/woocommerce/

El código a añadir es el siguiente y algunos de los posibles sitios dónde colocarlos son al final de los ficheros (dependiendo del tipo de tema):

/wp-content/plugins/woocommerce/templates/single-product/short-description.php
/wp-content/themes/$THEME_NAME/woocommerce/single-product/short-description.php

/wp-content/plugins/woocommerce/templates/single-product/share.php
/wp-content/themes/$THEME_NAME/woocommerce/single-product/share.php

NOTA: Recordad de actualizar la public_key con vuestra clave pública que podéis enctrar en el Backoffice.

...
...
<?php global $product; ?>

<script type='text/javascript'
  src='https://cdn.pagamastarde.com/pmt-js-client-sdk/3/js/client-sdk.min.js'>
</script>
<div>
  <div class='PmtSimulator' data-pmt-num-quota='4' data-pmt-max-ins='6'
  data-pmt-style='blue' data-pmt-type='2'
  data-pmt-discount='0'
  data-pmt-amount='<?php echo $product->price; ?>'
  data-pmt-expanded='no'>
  </div>
</div>

<script>
jQuery(document).ready(function(){
  pmtClient.setPublicKey('public_key');
  pmtClient.simulator.load_jquery();
});
</script>
<div>&nbsp;</div>

El resultado del código en el template de short-description.php es:

simulador in product page

y en el caso de share.php será:

simulador in product page

Se puede añadir el simulador en muchos de los templates de producto, muchos más sitios de los indicados. Si quires, nuestro equipo puede realizar la instalación del simulador por ti.

En el caso de que su tienda tenga productos con múltiples opciones y precios, se tiene que añadir el código que esuche los cambios y realize la acción de actualizar el simulador, aquí un código de ejemplo:

NOTA: este ejemplo usa las clases del template para recoger el importe del producto. Dependiendo del template, este código puede variar ligeramente, pero se puede usar de plantilla para construir una solución personalizada.

<span style='display: none' class='pmt-amt'></span>
<div class='PmtSimulator' data-pmt-num-quota='4'
data-pmt-max-ins='12' data-pmt-style='blue'
data-pmt-type='1' data-pmt-discount='0'
data-pmt-amount='pmt-amt' data-pmt-expanded='no' id='0'></div>

<script type ='text/javascript'>
    amount = jQuery('p.price').find('.amount').text().replace(/[^0-9]/g, '')/100;
    jQuery('.pmt-amt').html(amount);
    pmtClient.setPublicKey('public_key');
    pmtClient.simulator.init();
      jQuery( document ).ajaxComplete(function() {
          amount = jQuery(jQuery('span.price')[0]).text().replace(/[^0-9]/g, '')/100;
          if ((amount != '' && amount != jQuery('.pmt-amt').text()) ||
            jQuery('iframe[src*="https://cdn.pagamastarde.com/"]').size() <= 0) {
            jQuery('.pmt-amt').html(amount);
            jQuery('iframe[src*="https://cdn.pagamastarde.com/"]').each(function( index ) {
                jQuery( this ).remove()
            });
            pmtClient.simulator.restartSimulatorsArray();
            pmtClient.setPublicKey('public_key');
            pmtClient.simulator.init();
          }
      });
</script>

Si tenéis la caché de Wordpress activa, limpiad cache para que se puedan visualizar los cambios.

Página de checkout

El módulo de Woocommerce incluye por defecto un simulador en el checkout. No se tiene que hacer ningúna configuración para mostrarlo.

En caso de querer eliminarlo, se tiene que editar el plugin (via panel de control o ftp) y editar la linea:

$this->description=$financia;

por la descripción que quieras que aparezca del método de pago, por ejemplo:

$this->description= 'Paga a plazos!';