Como Agregar Imágenes al tema de un proyecto personalizado en Magento 2

En esta ocasión hablemos de los Temas personalizados en Magento 2, en muchos casos los comerciantes cuando requieren personalizar aún más sus tienda en línea que no se apega a los Templates por defecto que trae Magento, tratan de buscar una mejor solución más adecuada a la marca de su negocio u empresa.

Cuando hablamos de un Tema personalizado en Magento 2, se debe tener en cuenta que se requiere de un equipo sólido de Diseño, Maquetado e integración hacia Magento con la finalizada de reutilizar todos los componentes nativos ampliando las capacidades de visualización de cada una de las secciones nativas para crear un producto más personalizados y adecuado para cada negocio.

Cuando un equipo de diseño trabaja en recrear todo el Look And Feel de la tienda en línea,  se enfoca completamente en armar las estructuras básicas en las tecnologías de diseño, para conseguir hacer un diseño digital conforme lo necesite el negocio sin importar la fuente de información, contenido, imágenes, colores y fuentes, pero si tiene una referencia específica o fuente de información para el diseño, una vez es aprobado el diseño por parte del comerciante con respecto a su agrado este debe ser llevado al proceso de Maquetación.

El equipo de Maquetación lo que realiza es tomar los bocetos o diseños creados por el área de Diseño y los trasforma a elementos de semántica nativa en HTML5, con CSS3 así como los elementos y componentes dinámicos para conseguir el efecto interactivo visual contra un punto de contacto real que tendrán los usuarios finales cuando interactúen con cada elemento de la tienda en línea, una vez se cuente con este Maquetado el equipo se encarga de proporcionar cada elemento al equipo de desarrollo de Magento quien se encargara de llevar esta semántica  a componentes nativos de Magento.

El equipo de desarrollo especialistas en integrar el Tema en Magento deben revisar cada componente, en este caso hablamos de páginas personalizadas que serán llevadas a Magento, se debe tomar en cuenta cada definición y recomendación que dictamina como integrar un elemento personalizado al flujo de Magento, ya sea personalizado una sección nativa o agregando una nueva página dentro de un flujo de compra en la tienda en línea.

Es en este momento en donde se reemplaza lo estático por lo dinámico hablando de elementos a reemplazar de las maquetas, serian todas las imágenes, Fuentes (Estilos de Letras), Fuentes (iconos), así como elementos de CSS y JavaScript.

En esta ocasión nos enfocaremos en las imágenes, como se deben reemplazar, y en donde se deben almacenar para conseguir que funciones de forma dinámica.

Agregando imágenes personalizadas a un Tema personalizado en Magento 2

Lo primero es que debemos saber que toda la semántica HTML5 debe estar en archivos .phtml, todos los estilos CSS3 deben estar en archivos LESS, los elementos de JavaScript ya sea en jQuery o JavaScript nativo deben estar en archivos separados mandados a llamar mediante requireJS, y finalmente las imágenes deben estar almacenadas en la ruta principal del Tema personalizado dentro de una carpeta llamada “images” este último aspecto no es definitivo cada desarrollador e integrador le puede nombrar como quiera lo recomendable es mantener una referencia adecuada.

Una vez que conocemos el nombre de la carpeta lo que debemos saber es en donde se localiza esta carpeta, la ruta es el mismo directorio donde se ha creado el Tema personalizado en este caso supongamos que hablamos de un tema llamado “colorido” del espacio de nombres “Marcgento”, sabiendo estos dos datos la ruta estaría construida de la siguiente forma app/design/frontend/Marcgento/colorido El tema es “colorido” y dentro se encontraría toda la estructura del Tema personalizado, la vista como debería mostrarse un tema personalizado en un proyecto de Magento es la siguiente:

Bien ahora, que ya se conoce cuál es la estructura, pasemos a un caso real, supongamos que tenemos un diseño de una página personalizada de la cuenta del cliente dentro de un .phtml llamado cuenta.phtml y tiene esta apariencia:

A nivel de contendió HTML tenemos lo siguiente:

<div class="row">
  <div class="col-12">
    <div class="card profile-header mb-2">
      <!-- profile cover photo -->
      <img class="card-img-top" src="https://www.marcgento.com/wp-content/uploads/2019/06/magento-2-background-margento-01.jpg" alt="User Profile Image">
      <!--/ profile cover photo -->

      <div class="position-relative">
        <!-- profile picture -->
        <div class="profile-img-container d-flex align-items-center">
          <div class="profile-img">
            <img src="https://www.marcgento.com/wp-content/uploads/2019/06/fondo01.jpg" class="rounded img-fluid" alt="Card image" style="width: 200px;">
          </div>
          <!-- profile title -->
          <div class="profile-title ml-3">
            <h2 class="text-white">Marcgento </h2>
            <p class="text-white">UI/UX Designer</p>
          </div>
        </div>
      </div>
      <!-- tabs pill -->
      <div class="profile-header-nav">
        <!-- navbar -->
        <nav class="navbar navbar-expand-md navbar-light justify-content-end justify-content-md-between w-100">
          <button class="btn btn-icon" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
              <line x1="21" y1="10" x2="3" y2="10"></line>
              <line x1="21" y1="6" x2="3" y2="6"></line>
              <line x1="21" y1="14" x2="3" y2="14"></line>
              <line x1="21" y1="18" x2="3" y2="18"></line>
            </svg>
          </button>
          <!-- collapse  -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="profile-tabs d-flex justify-content-between flex-wrap mt-1 mt-md-0">
              <ul class="nav nav-pills mb-0">
                  <!-- Foreach Elements -->
              </ul>
              <!-- edit button -->
              <button class="btn btn-primary waves-effect waves-float waves-light">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit d-block d-md-none"><path d="M11 4H4a2 2 0 0 0-2"></path><path d="M18.5"></path></svg>
                <span class="font-weight-bold d-none d-md-block">Edit</span>
              </button>
            </div>
          </div>
          <!--/ collapse  -->
        </nav>
        <!--/ navbar -->
      </div>
    </div>
  </div>
</div>

Revisando la línea 5 nos daremos cuenta que tenemos esta declaración:

Corresponde a la ruta definida por el equipo de maquetación, a la cual es necesario cambiar por una URL dinámica que, por un lado mediante un método de Magento estructure la ruta de la imagen que debería estar dentro del proyecto en Magento, y por otro lado saber en dónde almacenar esta imagen.

Vamos a revisar el primer punto y es mediante el método $this->getViewFileUrl($parametro) que se coloca dentro de un archivo de vista .PHTML, el parámetro representa el nombre físico de la imagen, para entenderlo de una forma más sencilla supongamos que si solo definiéramos el método de esta forma $this->getViewFileUrl(); estaríamos apuntando a la ruta app/design/frontend/Marcgento/colorido/web/ ahora si el parámetro es “images/magento-2-background-margento-01.jpg” esto quiere decir que la URL completa a la imagen seria: app/design/frontend/Marcgento/colorido/web/images/magento-2-background-margento-01.jpg, así que hasta este punto ya sabemos a dónde almacenar la imagen quedando de la siguiente forma:

El código final quedaría de la siguiente forma:

<div class="row">
  <div class="col-12">
    <div class="card profile-header mb-2">
      <!-- profile cover photo -->
      <img class="card-img-top" src="<?= $this->getViewFileUrl('images/magento-2-background-margento-01.jpg') ?>" alt="User Profile Image">
      <!--/ profile cover photo -->

      <div class="position-relative">
        <!-- profile picture -->
        <div class="profile-img-container d-flex align-items-center">
          <div class="profile-img">
            <img src="https://www.marcgento.com/wp-content/uploads/2019/06/fondo01.jpg" class="rounded img-fluid" alt="Card image" style="width: 200px;">
          </div>
          <!-- profile title -->
          <div class="profile-title ml-3">
            <h2 class="text-white">Marcgento </h2>
            <p class="text-white">UI/UX Designer</p>
          </div>
        </div>
      </div>
      <!-- tabs pill -->
      <div class="profile-header-nav">
        <!-- navbar -->
        <nav class="navbar navbar-expand-md navbar-light justify-content-end justify-content-md-between w-100">
          <button class="btn btn-icon" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
              <line x1="21" y1="10" x2="3" y2="10"></line>
              <line x1="21" y1="6" x2="3" y2="6"></line>
              <line x1="21" y1="14" x2="3" y2="14"></line>
              <line x1="21" y1="18" x2="3" y2="18"></line>
            </svg>
          </button>
          <!-- collapse  -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="profile-tabs d-flex justify-content-between flex-wrap mt-1 mt-md-0">
              <ul class="nav nav-pills mb-0">
                  <!-- Foreach Elements -->
              </ul>
              <!-- edit button -->
              <button class="btn btn-primary waves-effect waves-float waves-light">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit d-block d-md-none"><path d="M11 4H4a2 2 0 0 0-2"></path><path d="M18.5"></path></svg>
                <span class="font-weight-bold d-none d-md-block">Edit</span>
              </button>
            </div>
          </div>
          <!--/ collapse  -->
        </nav>
        <!--/ navbar -->
      </div>
    </div>
  </div>
</div>