Skip to main content

Payment Method Icons

Lista de iconos de métodos de pago que se muestra en el footer del sitio. Cada entrada define el logotipo a mostrar y el texto alternativo para accesibilidad. El orden del array determina el orden visual de los iconos.

Vista previa​

Sin imagen disponible aún. Añade una captura en ./img/payment-method-icons.jpg y descomenta la línea siguiente.

Comportamiento​

  • Los iconos se renderizan en el mismo orden en que aparecen en el array icons.
  • El campo name se usa como texto alternativo (alt) de la imagen.
  • Si un método de pago no está disponible en un mercado, basta con eliminar su entrada del array.

Configuración​

El JSON se introduce en el cuerpo del content asset en Business Manager → Content Assets.

{
  "icons": [
    {
      "name": "Klarna",
      "image": "images/icons/klarna.svg?$staticlink$"
    },
    {
      "name": "Visa",
      "image": "images/icons/visa.svg?$staticlink$"
    },
    {
      "name": "Mastercard",
      "image": "images/icons/mastercard.svg?$staticlink$"
    },
    {
      "name": "Amex",
      "image": "images/icons/amex.svg?$staticlink$"
    },
    {
      "name": "Paypal",
      "image": "images/icons/paypal.svg?$staticlink$"
    },
    {
      "name": "Carte Bancaire",
      "image": "images/icons/carte-bancaire.svg?$staticlink$"
    },
    {
      "name": "Apple Pay",
      "image": "images/icons/apple-pay.svg?$staticlink$"
    },
    {
      "name": "SSL Secured",
      "image": "images/icons/ssl.png?$staticlink$"
    }
  ]
}

Propiedades​

PropiedadTipoObligatorioDescripción
iconsarraySíListado de iconos de métodos de pago. El orden del array define el orden visual.
icons[].namestringSíNombre del método de pago. Se usa como atributo alt de la imagen.
icons[].imagestringSíRuta del icono. Debe terminar en ?$staticlink$.

Notas y consejos​

Fichero de plantilla

components/footer/payment-method-icons.isml

Imágenes: recuerda ?$staticlink$

Todas las rutas deben terminar en ?$staticlink$ para que SFCC resuelva correctamente la URL estática del cartucho:

"image": "images/icons/visa.svg?$staticlink$"
Adaptar por mercado

Este content asset puede tener una versión distinta por site (ES, FR, UK…). Para mercados sin Klarna o Apple Pay, simplemente elimina la entrada correspondiente del array icons.