Como mostrar las marcas en formato cuadrícula.

marcali · April 26, 2013

Hola.

Uso una plantilla que por defecto me muestra todos los productos y categoría en cuadrícula, menos el apartado "marcas que me lo muestra en listado:

http://www.marcabebe.es/fabricantes

¿Qué archivo tengo que modificar para que también se vea en formato cuadrícula como en el resto de la web?

Gracias adelantadas!!

nadie · April 26, 2013

Hola.

Mi web es www.marcabebe.es

Uso una plantilla que por defecto me muestra todos los productos y categoría en cuadrícula, menos el apartado "marcas que me lo muestra en listado:

http://www.marcabebe.es/fabricantes

¿Qué archivo tengo que modificar para que también se vea en formato cuadrícula como en el resto de la web?

Gracias adelantadas!!

Ejemplo para tu caso particular y plantilla que tienes.

En tu fichero:

http://www.marcabebe.es/themes/PRS030068/css/global.css

Busca esto:

ul#manufacturers_list li {
margin-bottom: 14px;
padding: 12px 8px;
border: 1px solid #DBEFF8;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius:3px;
}

y dejalo asi:

ul#manufacturers_list li {
margin-bottom: 14px;
padding: 12px 8px;
border: 1px solid #DBEFF8;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float: left;
width: 348px;
margin-left: 1px;
}

Es un ejemplo "basto" pero es para que tengas una idea.

"Como ves, hemos añadido un float:left y un width fijo"

marcali · April 26, 2013

gracias!

voy a probar y os digo como me ha ido!

nadie · April 26, 2013

gracias!

voy a probar y os digo como me ha ido!

Perfecto !

Un Saludo

nadie · April 26, 2013

El problema viene al darle el margen entre los LI para que quede bien cuadrado todo. Para ello podemos añadir esto en el manufacurer-list.tpl de la plantilla:

Justo despues de:
{if $nbManufacturers > 0}
Ponemos esto:
{assign var='nbItemsPerLine' value=3}
En este caso he puesto 3 elementos por línea, pero poned la cantidad que querais...

Reemplazamos el inicio de la etiqueta LI:
<li class="clearfix {if $smarty.foreach.manufacturers.first}first_item{elseif $smarty.foreach.manufacturers.last}last_item{else}item{/if}">
Por esta otra:
<li class="clearfix {if $smarty.foreach.manufacturers.first}first_item{elseif $smarty.foreach.manufacturers.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.manufacturers.last}last_item{else}item{/if}">
Ahora cada tres elementos tendremos el LI con la clase last_item_of_line y podemos ajustar el margen para las clases first_item, last_item_of_line, last_item e item

Saludos!

Cierto, toma en consideración y aplica lo que te ha dicho Statictic, para que la parte final, no se te vaya al "mundo infernal".

marcali · April 26, 2013

Hola, he hecho todo lo que has dicho pero ahora se ve así:

http://www.marcabebe.es/fabricantes

Yo quisiera que solo se viera el cuadradito con el logo y el botón "ver productos". ¿Es posible? Todo en formato cuadríocula.

marcali · April 26, 2013

Hola, no habñía visto el post de staticitic. ¿Tengo que combinar las dos cosas o hacer solo una de ellas?

nadie · April 26, 2013

Hola, he hecho todo lo que has dicho pero ahora se ve así:

http://www.marcabebe.es/fabricantes

Yo quisiera que solo se viera el cuadradito con el logo y el botón "ver productos". ¿Es posible? Todo en formato cuadríocula.

http://www.marcabebe.es/themes/PRS030068/manufacturer-list.tpl

<div class="left_side">
 <!-- logo -->
 <div class="logo">
 {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$manufacturer.id_manufacturer}" class="lnk_img">{/if}
  <img src="{$img_manu_dir}{$manufacturer.id_manufacturer}-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
 {if $manufacturer.nb_products > 0}</a>{/if}
 </div>
 <!-- name -->
 <h3>
  {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  {$manufacturer.name|truncate:60:'...'|escape:'htmlall':'UTF-8'}
  {if $manufacturer.nb_products > 0}</a>{/if}
 </h3>
 <p class="description rte">
 {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  {$manufacturer.description}
 {if $manufacturer.nb_products > 0}</a>{/if}
 <br />
 {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  <span>{if $manufacturer.nb_products == 1}{l s='%d product' sprintf=$manufacturer.nb_products|intval}{else}{l s='%d products' sprintf=$manufacturer.nb_products|intval}{/if}</span>
 {if $manufacturer.nb_products > 0}</a>{/if}
 </p>
</div>
<div class="right_side">
{if $manufacturer.nb_products > 0}
 <a class="button" href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{l s='view products'}</a>
{/if}
</div>

Por :

<div class="left_side">
 <!-- logo -->
 <div class="logo">
 {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$manufacturer.id_manufacturer}" class="lnk_img">{/if}
  <img src="{$img_manu_dir}{$manufacturer.id_manufacturer}-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
 {if $manufacturer.nb_products > 0}</a>{/if}
 </div>
 <!-- name -->
 <h3>
  {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  {$manufacturer.name|truncate:60:'...'|escape:'htmlall':'UTF-8'}
  {if $manufacturer.nb_products > 0}</a>{/if}
 </h3>
 <p class="description rte">
 {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  {$manufacturer.description}
 {if $manufacturer.nb_products > 0}</a>{/if}
 <br />
 {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  <span>{if $manufacturer.nb_products == 1}{l s='%d product' sprintf=$manufacturer.nb_products|intval}{else}{l s='%d products' sprintf=$manufacturer.nb_products|intval}{/if}</span>
 {if $manufacturer.nb_products > 0}</a>{/if}
 </p>
<div class="jack_london">
{if $manufacturer.nb_products > 0}
 <a class="button" href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{l s='view products'}</a>
{/if}
</div>  

</div>

nadie · April 26, 2013

Luego para ocultar el nombre de la marca, el numero de productos. y la descripcion

Esto:

<h3>
  {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  {$manufacturer.name|truncate:60:'...'|escape:'htmlall':'UTF-8'}
  {if $manufacturer.nb_products > 0}</a>{/if}
 </h3>

por esto:

{* <h3>
  {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  {$manufacturer.name|truncate:60:'...'|escape:'htmlall':'UTF-8'}
  {if $manufacturer.nb_products > 0}</a>{/if}
 </h3> *}

Y esto:

<p class="description rte">
 {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  {$manufacturer.description}
 {if $manufacturer.nb_products > 0}</a>{/if}
 <br />
 {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  <span>{if $manufacturer.nb_products == 1}{l s='%d product' sprintf=$manufacturer.nb_products|intval}{else}{l s='%d products' sprintf=$manufacturer.nb_products|intval}{/if}</span>
 {if $manufacturer.nb_products > 0}</a>{/if}
 </p>

por esto:

{* <p class="description rte">
 {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  {$manufacturer.description}
 {if $manufacturer.nb_products > 0}</a>{/if}
 <br />
 {if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
  <span>{if $manufacturer.nb_products == 1}{l s='%d product' sprintf=$manufacturer.nb_products|intval}{else}{l s='%d products' sprintf=$manufacturer.nb_products|intval}{/if}</span>
 {if $manufacturer.nb_products > 0}</a>{/if}
 </p> *}

marcali · April 26, 2013

borro

Edited April 26, 2013 by marcali (see edit history)

nadie · April 26, 2013

borro

De esto: http://www.prestashop.com/forums/index.php?/topic/242847-como-mostrar-las-marcas-en-formato-cuadricula/page__view__findpost__p__1201577 olvidate. (No hacer, maligno)

De esto: http://www.prestashop.com/forums/index.php?/topic/242847-como-mostrar-las-marcas-en-formato-cuadricula/page__view__findpost__p__1201583 no te olvides.

nadie · April 26, 2013

Luego esto:

ul#manufacturers_list li .left_side {
float: left;
width: 590px;
border-right: 1px solid #DBEFF8;
}

en el

http://www.marcabebe.es/themes/PRS030068/css/global.css

dejalo asi:

ul#manufacturers_list li .left_side {

}

Luego el:

ul#manufacturers_list li

que ahora mismo tienes el float left que te puse arriba y el width ve reduciendo el width hasta que te convenzas.

marcali · April 26, 2013

Luego esto:
ul#manufacturers_list li .left_side {
float: left;
width: 590px;
border-right: 1px solid #DBEFF8;
}
en el
http://www.marcabebe.es/themes/PRS030068/css/global.css
dejalo asi:
ul#manufacturers_list li .left_side {

}
Luego el:
ul#manufacturers_list li
que ahora mismo tienes el float left que te puse arriba y el width ve reduciendo el width hasta que te convenzas.

¿Quieres decir que lo deje como al principio?

nadie · April 26, 2013

¿Quieres decir que lo deje como al principio?

NO.

nadie · April 26, 2013

¿Quieres decir que lo deje como al principio?

NO.

Amplio la respuesta.

Me refiero que lo que he comentado en este mensaje: http://www.prestashop.com/forums/index.php?/topic/242847-como-mostrar-las-marcas-en-formato-cuadricula/page__view__findpost__p__1201577 no lo hagas.

nadie · April 26, 2013

Añado, "lo que te he dicho" es orientativo y a ojo.

Una vez lo dejes como te he ido comentado, menos lo que he "tachado".

Comentalo y continuamos.

marcali · April 26, 2013

Ejemplo para tu caso particular y plantilla que tienes.

En tu fichero:
http://www.marcabebe.es/themes/PRS030068/css/global.css
Busca esto:
ul#manufacturers_list li {
margin-bottom: 14px;
padding: 12px 8px;
border: 1px solid #DBEFF8;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius:3px;
}
y dejalo asi:
ul#manufacturers_list li {
margin-bottom: 14px;
padding: 12px 8px;
border: 1px solid #DBEFF8;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float: left;
width: 348px;
margin-left: 1px;
}
Es un ejemplo "basto" pero es para que tengas una idea.

"Como ves, hemos añadido un float:left y un width fijo"

Bueno, como soy bastante novata en esto, y lo único que se es a base de ensayo y error y de mucho observar, de momento solo he hecho este paso. Otro día intento hacer los otros cambios!!

ebigfoot · June 25, 2013

Hola, no se si te será de ayuda, pero en mi web http://cicloturisme.es, he incorporado un módulo que muestra los logotipos de un subconjunto de fabricantes / marcas en formato de 2 columnas.

El código del módulo blockmarquesimatge es:

archivo blockmarquesimatge.tpl

<div id="manufacturers_block_left" class="block blockmarquesimatge">
   <p class="title_block">{if $display_link_manufacturer}<a href="{$link->getPageLink('manufacturer')}" title="{l s='Manufacturers' mod='blockmarquesimatge'}">{/if}{l s='Manufacturers' mod='blockmarquesimatge'}{if $display_link_manufacturer}</a>{/if}</p>
   <div class="block_content">

   {if $manufacturers}
       {if $select_list}
           <ul class="bullet doble_columna">
           {foreach from=$manufacturers item=manufacturer name=manufacturer_list}
               {if strpos($select_list, $manufacturer.name) !== false}
                   <li class="item">
                       <a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{l s='More about' mod='blockmarquesimatge'} {$manufacturer.name}">
                           <img src="{$img_manu_dir}{$manufacturer.id_manufacturer}-{$mitype}_default.jpg" alt="{$manufacturer.name}"  />
                       </a>
                   </li>
               {/if}
           {/foreach}
           </ul>
       {/if}
   {else}
       <p>{l s='No manufacturer' mod='blockmarquesimatge'}</p>
   {/if}
   </div>
</div>
<p style="clear:both"></p>

archivo blockmarquesimatge.css

.blockmarquesimatge li {
   text-align:center
}
.blockmarquesimatge li a {
   display:block;
   padding:5px 5px 5px 5px;
   color:#333;
   background:none
}
.blockmarquesimatge ul.bullet li, .blockmarquesimatge li.bullet{
   background:none;
   padding:0
}

ul.doble_columna li {
   margin:0px 10px;
   padding:0px 10px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   float: left;
   width: 80px;
}

extracto del archivo blockmarquesimatge.php

 public function install() {
   Configuration::updateValue('MarquesImatge_DISPLAY_SELECT', "");
   Configuration::updateValue('MarquesImatge_IMAGE_SIZE', "small");
   return parent::install() && $this->registerHook('leftColumn') && $this->registerHook('header');
 }

 public function getContent() {
       $output = '<h2>'.$this->displayName.'</h2>';
       if (Tools::isSubmit('submitBlockMarquesImatges')) {
      	 $select_list = Tools::getValue('select_list');
      	 $mitype = Tools::getValue('number');
      	 Configuration::updateValue('MarquesImatge_DISPLAY_SELECT', implode(',',$select_list));
      	 Configuration::updateValue('MarquesImatge_IMAGE_SIZE', $mitype);
      	 if (isset($errors) && count($errors))
               $output .= $this->displayError(implode('<br />', $errors));
           else
               $output .= $this->displayConfirmation($this->l('Settings updated'));
       }
       return $output.$this->displayForm();
 }

 public function displayForm() {
     $llista = "";
     $manufacturers = Manufacturer::getManufacturers();
     foreach ($manufacturers as $marques) {
         $marca = htmlspecialchars(trim($marques['name']));
           $llista .= '<option value='.$marca.' '.((strpos(Configuration::get('MarquesImatge_DISPLAY_SELECT'), $marca, 0) !== false) ? 'selected="selected"' : '').'> '.$marca.' </option>';
       }

       $output = '
       <form action="'.Tools::safeOutput($_SERVER['REQUEST_URI']).'" method="post">
           <fieldset><legend><img src="'.$this->_path.'logo.gif" alt="" title="" />'.$this->l('Settings').'</legend>
          	 <label>'.$this->l('Selecciona les marques').'</label>
               <div class="margin-form">
                   <select name="select_list[]" style="padding:1px 0px 1px 5px; width:150px" size=11 multiple="multiple">'.$llista.'</select>
                   <p class="clear">'.$this->l('Prem Ctrl+click per seleccionar les marques').'</p>
          	 </div>
          	 <label>'.$this->l('Image type').'</label>
               <div class="margin-form">
                   <select name="number" style="width:90px">
                       <option value="small"'.((Configuration::get('MarquesImatge_IMAGE_SIZE') == "small") ? 'selected="selected"' : '').'>small </option>
                       <option value="medium"'.((Configuration::get('MarquesImatge_IMAGE_SIZE') == "medium") ? 'selected="selected"' : '').'>medium </option>
                   </select>
                   <p class="clear">'.$this->l('Size of the real image').'</p>
          	 </div>
          	 <center><input type="submit" name="submitBlockMarquesImatges" value="'.$this->l('Save').'" class="button" /></center>
           </fieldset>
       </form> ';
       return $output;
 }
}

Espero que os sirva. Míralo en http://cicloturisme.es

Como mostrar las marcas en formato cuadrícula.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites