Instalación del simulador para Magento.

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 magento, y hay varias opciones en dónde es posible colocar el simulador.

Unos de los posibles sitios dónde colocarlos es al final de los ficheros:

/app/design/frontend/$THEME_NAME/default/template/catalog/product/view/type/default.phtml
/app/design/frontend/base/default/template/catalog/product/view/tierprices.phtml

El código a añadir es el siguiente:

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

NOTA2: El código usa las clases e id’s del template para recoger el precio del producto, es posible que si usa un template personalizado se tengan que editar estas clases.

<span class='pmt-total' style='display:none'></span>
<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='pmt-total' data-pmt-expanded='no'>
</div>

<script>
<?php
$_product = $this->getProduct();
$_storeId = $_product->getStoreId();
$_store = $_product->getStore();
$_id = $_product->getId();
?>
jQuery(document).ready(function(){
  price = jQuery('#product-price-<?php echo $_id ?>').text().replace(/[^0-9]/g, '')/100;
  jQuery('.pmt-total').html(price);
  pmtClient.setPublicKey('public_key');
  pmtClient.simulator.load_jquery();
  window.old_price = jQuery('#product-price-<?php echo $_id ?>').text().replace(/[^0-9]/g, '')/100;
});

</script>

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

El resultado del código editando del template default.phtml:

simulador in product page

y editando tierprices.phtml:

simulador in product page

En el caso de que su tienda tiene productos con múltiples opciones y precios, se tiene que añadir 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 class='pmt-total' style='display:none'></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-total' data-pmt-expanded='no'>
</div>

<script>
<?php
$_product = $this->getProduct();
$_storeId = $_product->getStoreId();
$_store = $_product->getStore();
$_id = $_product->getId();
?>
jQuery(document).ready(function(){
  price = jQuery('#product-price-<?php echo $_id ?>').text().replace(/[^0-9]/g, '')/100;
  jQuery('.pmt-total').html(price);
  pmtClient.setPublicKey('public_key');
  pmtClient.simulator.load_jquery();
  window.old_price = jQuery('#product-price-<?php echo $_id ?>').text().replace(/[^0-9]/g, '')/100;
});

jQuery(function(){
  setInterval(update_the_simulator, 2000);
});

function update_the_simulator() {
  price = jQuery('#product-price-<?php echo $_id ?>').text().replace(/[^0-9]/g, '')/100;
  if ( window.old_price != price){
    window.old_price = price
    jQuery('.pmt-total').html(price);
    setTimeout(function(){
      pmtClient.simulator.updateSimulators();
    }, 1000);
  }
};
</script>

Página de checkout

El módulo de Magento 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 fichero app/design/frontend/base/default/template/pagantis/pagantis.phtml

y cambiar el código por la descripción que quieres que aparezca en la página de checkout.

Si estás usando one page checkout, el simulador puede no cargarse ya que se carga la sección de métodos de pago via ajax. Si es tu caso puedes añadir el código que soluciona este problema:

<script>
setTimeout(function(){
  if (jQuery('iframe[src*="https://cdn.pagamastarde"]').length > 0) {
      jQuery('iframe[src*="https://cdn.pagamastarde"]').remove();
  }
    pmtSimulator.simulatorApp.restartSimulatorsArray();
    pmtClient.setPublicKey("public_key");
    pmtClient.simulator.load_jquery();
  }, 4000);


  jQuery(document).ajaxComplete(function(){
  setTimeout(function(){
  if (jQuery('iframe[src*="https://cdn.pagamastarde"]').length > 0) {
    jQuery('iframe[src*="https://cdn.pagamastarde"]').remove();
  }
    pmtSimulator.simulatorApp.restartSimulatorsArray();
    pmtClient.setPublicKey("public_key");
    pmtClient.simulator.load_jquery();
  }, 2000);
  });
</script>