En este mini-tutorial de programación os enseñamos un pequeño truco para mejorar la visualización de los precios en los productos configurables de Magento.

En una tienda estándar Magento, los productos configurables se muestran con un precio base y uno o varios desplegables para seleccionar las opciones disponibles.

Una de las cosas que habitualmente llaman la atención a las personas que aterrizan en una tienda Magento por primera vez, es que los precios del desplegable se muestran como incrementos o decrementos del precio del producto. Lo podemos ver en la siguiente imagen.

Esta forma de mostrar los precios es heredada de cómo se introducen los precios en el administrador de Magento, ya que también se realiza indicando una diferencia positiva o negativa con respecto al precio base del producto.

Ahora bien, desde el punto de vista del cliente, normalmente es más conveniente mostrar precios totales directamente, en lugar de hacerle calcular el resultado.

Existen algunas extensiones que permiten hacer este tipo de modificaciones, pero como siempre, si el cambio es sencillo siempre solemos decir que es mejor evitarlas, ya que a menudo no solo realizan esta modificación, sino que suelen aportar otras funciones que no necesitamos y que lo único que añaden es carga a nuestro servidor.

En este caso, podemos modificar fácilmente el comportamiento, añadiendo unas líneas de código en el archivo js/varien/configurable.js

getOptionLabel: function(option, price) {

  // Precio corregido (solo sirve si es una única opción)
  var opciones = 0; 
  for (var key in this.config.attributes) {
    opciones++;
  }
  if (opciones == 1) {
    price = parseFloat(this.config.basePrice) + parseFloat(option.price);
  }
  var str = option.label;
  if(price){
      if (this.taxConfig.showBothPrices) {
          str+= ' ' + this.formatPrice(excl, false) + ' (' + this.formatPrice(price, false) + ' ' + this.taxConfig.inclTaxTitle + ')';
      } else {
          str+= ' ' + this.formatPrice(price, false);
      }
  }
  return str;
},

ATENCIÓN: Esta modificación es únicamente válida para productos con una única opción. Para más opciones, es necesario realizar algunas modificaciones más complejas, ya que el precio total depende no sólo del precio base sino también de otras opciones ya seleccionadas por el usuario.