Instalación del simulador para Prestashop.

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, situado a la ruta: /themes/$THEME_NAME/product.tpl dónde $THEME_NAME es el nombre del tema que tenéis activado.

El código a añadir es el siguiente y una posible posición es justo encima de la linea <!– Out of stock hook –>, pero se puede colocar en la posición que deseéis.

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

<!-- include Paga+Tarde lib if not included-->
<script type='text/javascript'
src='https://cdn.pagamastarde.com/pmt-js-client-sdk/3/js/client-sdk.min.js'>
</script>

<!-- set the simulator block -->
<div class='PmtSimulator' data-pmt-num-quota='4'
data-pmt-max-ins='12' data-pmt-style='blue' data-pmt-type='2'
data-pmt-discount='0' data-pmt-amount='{$productPrice}' data-pmt-expanded='no'>
</div>

<!-- script to enable the simulator -->
<script>
(function(){
  pmtClient.setPublicKey('public_key');
  pmtClient.simulator.load_jquery();
 })()
</script>
<div>&nbsp;</div>
<!-- end of Paga+Tarde code -->

<!-- Out of stock hook -->
...
...

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

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: las clases usadas tanto para recoger el precio como para recoger el cambio de precio pueden diferir dependiendo del template que se esté usando.

<!-- include Paga+Tarde lib if not included-->
<script type='text/javascript'
src='https://cdn.pagamastarde.com/pmt-js-client-sdk/3/js/client-sdk.min.js'>
</script>

<!-- set the price block with initial price -->
<span style='display:none' class='pmt-amt'>{$productPrice}</span>

<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='pmt-amt' data-pmt-expanded='no'>
</div>

<!-- script to enable the simulator -->
<script>
//load the initial simulator
pmtClient.setPublicKey('public_key');
pmtClient.simulator.load_jquery();

// regenerate simulator when the price is updated
$('.box-info-product').change(function(){
  // we wait one second after the change to grab the updated price as the price switch have a delay
  setTimeout(function(){
    // remove the current simulator
    $('iframe[src*="https://cdn.pagamastarde"]').remove();
    // allow simulator regeneration
    pmtSimulator.simulatorApp.restartSimulatorsArray();
    // set the new price
    amount = $('.our_price_display').text().replace(/[^0-9]/g, '')/100;
    $('.pmt-amt').html(amount);
    // generate simulator
    pmtClient.setPublicKey('public_key');
    pmtClient.simulator.init();
  }, 1000);
});
</script>
<div>&nbsp;</div>

<!-- Out of stock hook -->
...
...

Si quieres, nuestro equipo puede realizar la instalación del simulador por ti.

El resultado del código es:

simulador in product page

Página de checkout

El módulo de prestashop permite añadir el simulador a la página de checkout via configuración del módulo en la página de administración.

Para activar el simulador en el checkout, solo tienes que acceder al panel de prestashop > modulos > configurar Paga+Tarde y configurar la opción de Incluir simulador a Verdadero.

Así se visualiza el checout con y sin el simulador:

simulador in checkout page