Mover la columna izquierda debajo del contenido para móvil en Prestashop 1.7

Hace unos días estábamos haciendo una migración de Prestashop 1.6 a 1.7 (son un “infierno” pero hay que hacerlas). Mantuvimos el tema por defecto, creando -como siempre recomendamos- un tema hijo.

Cuando todo estaba casi acabado nos dimos cuenta que, en la versión móvil, el contenido de la columna izquierda aparecía por encima del contenido principal (slider y productos). Esto no es nada deseable, porque el contenido de la barra izquierda no es tan importante. Lo interesante es que, en móvil, aparezca primero el slider (usado para destacar ideas), los productos (lo más importante de la página) y luego las barras laterales.

Hoy os enseñamos cómo hacer que, en móvil, la barra lateral izquierda esté debajo del contenido.

Mover la barral lateral izquierda debajo del contenido en móvil en Prestashop 1.7.

Tenemos que modificar el siguiente fichero: \themes\classic\templates\layouts\layout-both-columns.tpl
Como siempre, no es nada recomendable modificar el fichero del tema directamente. Si lo hacemos así, en la siguiente actualización del tema, nos desaparecerán los cambios (la actualización sobreescribe los ficheros).

La manera de hacerlo es crear, en el tema hijo, la misma ruta y copiar el fichero. Después, hacer las modificaciones en el fichero del tema hijo. Estos CMS siempre hacen que prevalezca el contenido del tema hijo frente al del padre, y sólo actualizan el tema padre.

Así que copiamos el fichero en el tema hijo y lo modificamos. El fichero original dice (entre otras cosas) lo siguiente.

     <section id="wrapper">
        {hook h="displayWrapperTop"}
        <div class="container">
          {block name='breadcrumb'}
            {include file='_partials/breadcrumb.tpl'}
          {/block}

          {block name="left_column"}
            <div id="left-column" class="col-xs-12 col-sm-4 col-md-3">
              {if $page.page_name == 'product'}
                {hook h='displayLeftColumnProduct'}
              {else}
                {hook h="displayLeftColumn"}
              {/if}
            </div>
          {/block}
          
          {block name="content_wrapper"}
            <div id="content-wrapper" class="left-column right-column col-sm-4 col-md-6">
              {hook h="displayContentWrapperTop"}
              {block name="content"}
                <p>Hello world! This is HTML5 Boilerplate.</p>
              {/block}
              {hook h="displayContentWrapperBottom"}
            </div>
          {/block}
		  
		
          {block name="right_column"}
            <div id="right-column" class="col-xs-12 col-sm-4 col-md-3">
              {if $page.page_name == 'product'}
                {hook h='displayRightColumnProduct'}
              {else}
                {hook h="displayRightColumn"}
              {/if}
            </div>
          {/block}
        </div>
        {hook h="displayWrapperBottom"}
      </section>

Como veis, la columna izquierda (left_column) está encima del contenido (content_wrapper). Eso es lo que hay que cambiar.
Cortamos y pegamos la parte negrita y la ponemos debajo del content, os dejo cómo debería estar:

   <section id="wrapper">
        {hook h="displayWrapperTop"}
        <div class="container">
          {block name='breadcrumb'}
            {include file='_partials/breadcrumb.tpl'}
          {/block}
          
          {block name="content_wrapper"}
            <div id="content-wrapper" class="left-column right-column col-sm-4 col-md-6">
              {hook h="displayContentWrapperTop"}
              {block name="content"}
                <p>Hello world! This is HTML5 Boilerplate.</p>
              {/block}
              {hook h="displayContentWrapperBottom"}
            </div>
          {/block}
		  
		  {block name="left_column"}
            <div id="left-column" class="col-xs-12 col-sm-4 col-md-3">
              {if $page.page_name == 'product'}
                {hook h='displayLeftColumnProduct'}
              {else}
                {hook h="displayLeftColumn"}
              {/if}
            </div>
          {/block}

          {block name="right_column"}
            <div id="right-column" class="col-xs-12 col-sm-4 col-md-3">
              {if $page.page_name == 'product'}
                {hook h='displayRightColumnProduct'}
              {else}
                {hook h="displayRightColumn"}
              {/if}
            </div>
          {/block}
        </div>
        {hook h="displayWrapperBottom"}
      </section>

Ahora aparecerá el contenido primero en móvil. Parece que está todo resuelto PERO en la versión de escritorio aparece la barra izquierda a la derecha.

Para corregir eso vamos a poner en nuestro css (plugin o en el custom.css del tema hijo) lo siguiente:

#content-wrapper{float:right;}

Solucionado. Ya tenemos la barra izquierda a la izquierda en la versión de escritorio, y debajo del contenido en la versión móvil.