Como colocar 3 columnas productos destacados en home? - PS 1.7

[tecnoservicel]

Hola acudo a sus experiencias a ver si me pueden ayudar, cabe resaltar que soy muy nuevo en esto y aunque he aprendido algo me sepan explicar con palitos como corregirlo he buscado mucho y leido bastante pero no he podido corregir esa falla tengo prestashop 1.7.1.1 y como dejo en la imagen al activar en home la columna de la izquierda o la derecha las columnas de los productos destacados bajan de 4 a 2 y quisiera que bajasen de 4 a 3, lo hace bien si navego por decir en la categoria de todos los productos pero en el home no, como ven pude hacer responsive el slider y el banner porque no se veia en los moviles y ahora si pero lo de los productos destacados me mata, he visto varios tutoriales pero ninguno con prestashop 1.7.1.1 ya que la estructura es muy distinta a 1.6 

 

 

[Sergio Ruiz]

Hola acudo a sus experiencias a ver si me pueden ayudar, cabe resaltar que soy muy nuevo en esto y aunque he aprendido algo me sepan explicar con palitos como corregirlo he buscado mucho y leido bastante pero no he podido corregir esa falla tengo prestashop 1.7.1.1 y como dejo en la imagen al activar en home la columna de la izquierda o la derecha las columnas de los productos destacados bajan de 4 a 2 y quisiera que bajasen de 4 a 3, lo hace bien si navego por decir en la categoria de todos los productos pero en el home no, como ven pude hacer responsive el slider y el banner porque no se veia en los moviles y ahora si pero lo de los productos destacados me mata, he visto varios tutoriales pero ninguno con prestashop 1.7.1.1 ya que la estructura es muy distinta a 1.6

En la 1.6, podias cambiar el numero de listados editando el product-list y cambiando el grid y el valor de la variable number item, ahora parece que es un poco diferente.

 

Yo haciendo pruebas a ojo, si coloco la columna como tu dices derecha en la pagina principal, se me ocurre que reduzcas el recuadro de los productos destacados para que entre alguno mas.

 

 

He estado investigando, veo que el TPL del modulo de productos destacados que es:

 

/themes/classic/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl

He visto dentro del tpl, que hace una llamada al fichero:

 

catalog/_partials/miniatures/product.tpl 

Despues me he ido al fichero:

 

catalog/_partials/miniatures/product.tpl 

Y he visto que hace que contenia este contenido:

 

{**
 * 2007-2017 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <[email protected]>
 * @copyright 2007-2017 PrestaShop SA
 * @license   http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{block name='product_miniature_item'}
  <article class="product-miniature js-product-miniature" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}" itemscope itemtype="http://schema.org/Product">
    <div class="thumbnail-container">
      {block name='product_thumbnail'}
        <a href="{$product.url}" class="thumbnail product-thumbnail">
          <img
            src = "{$product.cover.bySize.home_default.url}"
            alt = "{$product.cover.legend}"
            data-full-size-image-url = "{$product.cover.large.url}"
          >
        </a>
      {/block}

      <div class="product-description">
        {block name='product_name'}
          <h1 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></h1>
        {/block}

        {block name='product_price_and_shipping'}
          {if $product.show_price}
            <div class="product-price-and-shipping">
              {if $product.has_discount}
                {hook h='displayProductPriceBlock' product=$product type="old_price"}

                <span class="regular-price">{$product.regular_price}</span>
                {if $product.discount_type === 'percentage'}
                  <span class="discount-percentage">{$product.discount_percentage}</span>
                {/if}
              {/if}

              {hook h='displayProductPriceBlock' product=$product type="before_price"}

              <span itemprop="price" class="price">{$product.price}</span>

              {hook h='displayProductPriceBlock' product=$product type='unit_price'}

            {hook h='displayProductPriceBlock' product=$product type='weight'}
          </div>
        {/if}
      {/block}

      {block name='product_reviews'}
        {hook h='displayProductListReviews' product=$product}
      {/block}
    </div>

    {block name='product_flags'}
      <ul class="product-flags">
        {foreach from=$product.flags item=flag}
          <li class="{$flag.type}">{$flag.label}</li>
        {/foreach}
      </ul>
    {/block}

    <div class="highlighted-informations{if !$product.main_variants} no-variants{/if} hidden-sm-down">
      {block name='quick_view'}
        <a class="quick-view" href="#" data-link-action="quickview">
          <i class="material-icons search"></i> {l s='Quick view' d='Shop.Theme.Actions'}
        </a>
      {/block}

      {block name='product_variants'}
        {if $product.main_variants}
          {include file='catalog/_partials/variant-links.tpl' variants=$product.main_variants}
        {/if}
      {/block}
    </div>

  </article>
{/block}

No he visto que exista una opción como en la 1.6 parecida a la de: (esto solo lo comento a modo curiosidad)

 

{if $page_name !='index' && $page_name !='product'}
{assign var='nbItemsPerLine' value=3}
{assign var='nbItemsPerLineTablet' value=2}
{assign var='nbItemsPerLineMobile' value=3}
{else}
{assign var='nbItemsPerLine' value=4}
{assign var='nbItemsPerLineTablet' value=3}
{assign var='nbItemsPerLineMobile' value=2}
{/if}

que podias decir cuantos querias mostrar por linea, independientemente de si estabas en la pagina principal o en los listados...

 

------------------

 

Por si te da por investigar en el tpl, la variable para saber si estas en la pagina principal en Prestashop 1.7 es:

{if $page.page_name == 'index'}

 

He visto en la 1.7 (1.7.1.0, esperemos que en futuras versiones este proceso pueda ser mas sencillo..)

 

Una opción es crear tu propio estilo en:

 

/themes/classic/assets/css/custom.css

Veo que por CSS, parece que tiene un width y height (en el theme.css)

 

Adjunto Captura

 

 

Prueba ver esos valores, recuerda que si modificas el CSS, y quieres solo aplicarlo a la pagina principal, crea tu CSS personalizado y recuerda solo aplicarlo a la pagina principal #index si solo quieres el cambio en la pagina principal.

[tecnoservicel]

gracias sergio voy a intentar a ver y lo participo, si he visto lo de 1.6 y es facil pero como comento en 1.7 ando perdido y descubriendo cosas nuevas, por a ver y te comento gracias mil!!

[kik-off]

Hola, si usas la plantilla Classic tendrás que editar el .css... buscate la clase .thumbnail-container y dale un ancho de 350px por ejemplo. Si solo quieres que sea en el index:

#index .product-miniature .thumbnail-container {
    width: 350px;
}

También tendrás que ajustar los estilos del contenido... y si quieres hacer la imagen mayor para que cope todo el ancho.

 

Pero date cuenta que tiene el ancho de 257px por el simple hecho de que la resolución mínima de pantalla es de 271px.

 

Un saludo