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.

Deja un comentario

Resumen de nuestra Pol铆tica de Privacidad

  • Responsable:聽SmythSys IT Consulting SLNE.
  • Finalidad:聽Gestionar y moderar los comentarios.
  • Legitimaci贸n:聽Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios:聽Tus datos se alojan en los servidores de OVH.
  • Derechos:聽Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la direcci贸n del responsable (en nuestra pol铆tica de privacidad).

Time limit is exhausted. Please reload CAPTCHA.