Jump to content

Cambiar a la columna izquierda la descripción de producto


Recommended Posts

Hola,

Soy novato en Prestashop y estoy empezando a crear una tienda. Los productos que vendo requieren de poner bastantes atributos para su elección, lo que me baja mucho la descripción del producto y queda un poco antiestético. Me gustaría saber cómo cambiar este bloque a la parte izquierda justo debajo de las fotos miniaturas del producto, de esta forma la estructura estará más compensada.

Por otro lado, aprovecho la ocasión para preguntaros también si puedo eliminar los detalles de proucto, ya que no lo necesito. He estado viendo algunos tutoriales que he puesto en práctica pero no me han funcionado.

Uso la versión 1.7.6.4 con el theme classic (el que viene por defecto).

Si me hacéis el favor de resolverme estas dos cuestiones os lo agradecería mucho.

Link to comment
Share on other sites

El theme classic estructura la página de producto con dos columnas. Ambas se identifican con la clase "col-md-6". En el primer div encuentras las imágenes, y en el segundo el resto de información del producto.

Si quieres eliminar por completo la parte de las características de producto y dejar tan solo la descripción larga en la columna izquierda, localiza este código en tu product.tpl:

  {block name='product_tabs'}
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  {if $product.description}
                    <li class="nav-item">
                       <a
                         class="nav-link{if $product.description} active{/if}"
                         data-toggle="tab"
                         href="#description"
                         role="tab"
                         aria-controls="description"
                         {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
                    </li>
                  {/if}
                  <li class="nav-item">
                    .........................

Ese es el código que determina dónde aparecen las pestañas "Descripción" y "Detalles del producto". Corta TODO el bloque ({block name='product_tabs'} .... {/block}) y pégalo dentro del contenedor "col-md-6". El que NO está identificado con la clase "product-data-right". Debes pegarlo al final del bloque para que aparezca debajo de la galería de imágenes. Estílalo con css a tu gusto para conseguir la separación y el efecto que desees. Con esto conseguirás que tanto Descripción como Detalles de producto se muestren bajo las imágenes de la columna izquierda. 

Ahora, para eliminar del template detalles del producto, localiza este código y BÓRRALO

   <li class="nav-item">
                    <a
                      class="nav-link{if !$product.description} active{/if}"
                      data-toggle="tab"
                      href="#product-details"
                      role="tab"
                      aria-controls="product-details"
                      {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                  </li>

A continuación debes localizar el contenedor de product details. Busca este código:

{block name='product_details'}
	{include file='catalog/_partials/product-details.tpl'}
{/block}

Y bórralo. Tienes que entender qué hace cada parte del código. El elemento <li class="nav-item"> contiene un enlace con el texto "Product Details" o "Detalles del producto" con un escuchador de evento. Cuando se pulsa, el contenedor de la descripción se oculta (display:none) y el contenedor de las características se muestra (display:block o inline)

 

  • Thanks 1
Link to comment
Share on other sites

On 3/27/2020 at 11:13 AM, Luis C said:

El theme classic estructura la página de producto con dos columnas. Ambas se identifican con la clase "col-md-6". En el primer div encuentras las imágenes, y en el segundo el resto de información del producto.

Si quieres eliminar por completo la parte de las características de producto y dejar tan solo la descripción larga en la columna izquierda, localiza este código en tu product.tpl:


  {block name='product_tabs'}
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  {if $product.description}
                    <li class="nav-item">
                       <a
                         class="nav-link{if $product.description} active{/if}"
                         data-toggle="tab"
                         href="#description"
                         role="tab"
                         aria-controls="description"
                         {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
                    </li>
                  {/if}
                  <li class="nav-item">
                    .........................

Ese es el código que determina dónde aparecen las pestañas "Descripción" y "Detalles del producto". Corta TODO el bloque ({block name='product_tabs'} .... {/block}) y pégalo dentro del contenedor "col-md-6". El que NO está identificado con la clase "product-data-right". Debes pegarlo al final del bloque para que aparezca debajo de la galería de imágenes. Estílalo con css a tu gusto para conseguir la separación y el efecto que desees. Con esto conseguirás que tanto Descripción como Detalles de producto se muestren bajo las imágenes de la columna izquierda. 

Ahora, para eliminar del template detalles del producto, localiza este código y BÓRRALO


   <li class="nav-item">
                    <a
                      class="nav-link{if !$product.description} active{/if}"
                      data-toggle="tab"
                      href="#product-details"
                      role="tab"
                      aria-controls="product-details"
                      {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                  </li>

A continuación debes localizar el contenedor de product details. Busca este código:


{block name='product_details'}
	{include file='catalog/_partials/product-details.tpl'}
{/block}

Y bórralo. Tienes que entender qué hace cada parte del código. El elemento <li class="nav-item"> contiene un enlace con el texto "Product Details" o "Detalles del producto" con un escuchador de evento. Cuando se pulsa, el contenedor de la descripción se oculta (display:none) y el contenedor de las características se muestra (display:block o inline)

 

Luis C

¡Muchísimas gracias! Todo explicado a la perfección y siguiendo tus pasos funcionando correctamente como yo lo quería! Te lo agradezco mucho.

Quería preguntarte una última cosilla si me lo permites:

Los productos que vendo se venden por cantidades concretas, es decir, sólo puedes comprar 100, 250, 500, 1.000 uds, etc. La única forma que se me ha ocurrido hasta ahora es poner un atributo para elegir cantidades y luego en la casilla de la cantidad real que seleccionen 1 para comprar las unidades elegidas. Pero no me convence mucho, ya que el cliente puede preguntarse que por qué tiene que elegir otra vez la cantidad si ya la ha elegido y además escogiendo solo un "1". He estado viendo las opciones de configuración pero no veo cómo poder solucionar ésto. ¿Tú lo sabrías?

Gracias!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...