How to change manufacturer list page 1.6 bootstrap pls help!

[unlimitedgrain]

Hi all,

 

I want to change the "all manufacturers" page.

I want to have a list with all brands/manufacturers with only the names, because we have hundreds of manufacturers.

I found a website (using prestashop) that shows all brands this way:

http://www.headict.nl/107-merken

 

They have 7 columns, we want 5 columns.

They show the first letter (0-9, A, B, etc), if that makes it complicated, this is not necessary as long as the sorting is alphabetically.

 

I think i have to change the manufacturer-list.tpl, but I don't know which code to replace with new code.

Does anyone know how to code this?

 

We have standard template bootstrap and prestashop version 1.6.0.11.

 

Thanks!!!

[vekia]

is your website online? if it is - please share url to your page.

[unlimitedgrain]

Hi Vekia,

 

Sorry the website is not online. We use the default theme in version 1.6.0.11 and did not make any changes.

If you need, I can attach the manufacturer-list.tpl here.

Please let me know, would be great if we can have a solution.

[unlimitedgrain]

Does anyone know how to get the layout we want for the "all manufacturers" page?

I have attached the list tpl file from our server.

ATTENTION: i had to rename the file extension to .txt because I cannot upload .tpl files

 

manufacturer-list.txtFetching info...

 

vekia Can you help me with this?

Edited February 4, 2015 by unlimitedgrain (see edit history)

[shacker]

if you dont want to shoe the manufacturer images, edit the global.css of your theme,

 

find

 

#manufacturers_list.list li .left-side, #suppliers_list.list li .left-side

 

and add

 

#manufacturers_list.list li .left-side, #suppliers_list.list li .left-side{display:none}

 

and in this line

 

#manufacturers_list.list li .right-side-content, #suppliers_list.list li .right-side-content

 

change min-height  to a less value

 

#manufacturers_list.list li .right-side-content, #suppliers_list.list li .right-side-content{min-height:10px}

[unlimitedgrain]

Thank you Shaker.

I have managed to get the image out, but this doesn't make the page like this: http://www.headict.nl/107-merken

I think this has to be changed in the list.tpl, but how and on which place?

[unlimitedgrain]

screen-manufacturer.pdfCan someone help me with the code below?

The result now is that I get a list with alphabet. What I need now is that there are 4 names on 1 row (if there are 4 or more manufacturers)

What do I need to change to get this?

 

First the manufacturer-list.tpl:

{capture name=path}{l s='Manufacturers:'}{/capture}

 

<h1 class="page-heading product-listing">

{l s='Brands'}

    {strip}

<span class="heading-counter">

{if $nbManufacturers == 0}{l s='There are no manufacturers.'}

{else}

{if $nbManufacturers == 1}

{l s='There is 1 brand'}

{else}

{l s='There are %d brands' sprintf=$nbManufacturers}

{/if}

{/if}

</span>

    {/strip}

</h1>

{if isset($errors) AND $errors}

{include file="$tpl_dir./errors.tpl"}

{else}

{if $nbManufacturers > 0}

    <div class="content_sortPagiBar">

        <div class="sortPagiBar clearfix">

{if isset($manufacturer) && $manufacturer.nb_products > 0}

<ul class="display hidden-xs">

<li class="display-title">

{l s='View:'}

</li>

<li id="grid">

<a rel="nofollow" href="#" title="{l s='Grid'}">

<i class="icon-th-large"></i>{l s='Grid'}

</a>

</li>

<li id="list">

<a rel="nofollow" href="#" title="{l s='List'}">

<i class="icon-th-list"></i>{l s='List'}

</a>

</li>

</ul>

{/if}

                {include file="./nbr-product-page.tpl"}

            </div>

        <div class="top-pagination-content clearfix bottom-line">

{include file="$tpl_dir./pagination.tpl"}

            </div>

        </div> <!-- .content_sortPagiBar --> 

 

        {assign var='nbItemsPerLine' value=3}

        {assign var='nbItemsPerLineTablet' value=2}

        {assign var='nbLi' value=$manufacturers|@count}

        {math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}

        {math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}

 

<ul id="manufacturers_list" class="clearfix">

{foreach from=$manufacturers item=manufacturer name=manufacturers}

            {if !isset($currentLetter)}

{$currentLetter = $manufacturer.name|substr:0:1}

<li class="alphabetical"><h3>{if in_array($currentLetter, array("0","1","2","3","4","5","6","7","8","9"))}0-9{else}{$manufacturer.name|substr:0:1}{/if}</h3></li>

{else if isset($currentLetter) && $currentLetter != $manufacturer.name|substr:0:1 && (string)($manufacturer.name|substr:0:1) != (string)((int)($manufacturer.name|substr:0:1))}

{$currentLetter = $manufacturer.name|substr:0:1}

<li class="alphabetical"><h3>{$manufacturer.name|substr:0:1}</h3></li>

{/if}

<li class="{if $smarty.foreach.manufacturers.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.manufacturers.iteration%$nbItemsPerLine == 1} first-in-line{/if} {if $smarty.foreach.manufacturers.iteration > ($smarty.foreach.manufacturers.total - $totModulo)}last-line{/if} {if $smarty.foreach.manufacturers.iteration%$nbItemsPerLineTablet == 0}last-item-of-tablet-line{elseif $smarty.foreach.manufacturers.iteration%$nbItemsPerLineTablet == 1}first-item-of-tablet-line{/if} {if $smarty.foreach.manufacturers.iteration > ($smarty.foreach.manufacturers.total - $totModuloTablet)}last-tablet-line{/if}{if $smarty.foreach.manufacturers.last} item-last{/if} col-xs-12">

<div class="mansup-container">

<div class="row"> 

 

<div class="left-side col-xs-12 col-sm-3">

<h4>

{if $manufacturer.nb_products > 0}

<a 

class="product-name" 

href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'html':'UTF-8'}">

{/if}

{$manufacturer.name|truncate:60:'...'|escape:'html':'UTF-8'}

{if $manufacturer.nb_products > 0}

</a>

{/if}

</h4>

 

               </div> <!-- .left-side -->

 

 

           </div>

       </div>

</li>

{/foreach}

</ul>

        <div class="content_sortPagiBar">

        <div class="bottom-pagination-content clearfix">

{include file="$tpl_dir./pagination.tpl" paginationId='bottom'}

            </div>

        </div> 

{/if}

{/if}

 

The global.css:

#manufacturers_list.list li .alphabetical,

#suppliers_list.list li .alphabetical {

  float: left;

  width: 24%;

   margin: 0.5%;

border-bottom: 1px solid #eee; }

#manufacturers_list li h4 {padding-bottom: 10px;font-weight:normal; color: #ccc}

#manufacturers_list li:hover {

border-bottom: 1px solid #990000

}

#manufacturers_list li a {color: #383838}

#manufacturers_list li :hover a {color:#990000}

 

#manufacturers_list li .alphabetical {

  width: 100%;

  clear:both;

  margin: 14px 0;

border-bottom: 2px solid #383838;

}

 

#manufacturers_list li a:hover {text-decoration: none;}

 

  @media (max-width: 767px) 

  {

  #manufacturers_list li .right_side {float:right;}

  

    #manufacturers_list.list li .alphabetical,

    #suppliers_list.list li .alphabetical {

      text-align: center; } }

#manufacturers_list.list li:first-child .alphabetical,

#suppliers_list.list li:first-child .alphabetical {

  border-top: 0; }

 

 #manufacturers_list.list li .left-side,

#suppliers_list.list li .left-side {

  text-align: center; }

#manufacturers_list.list li h3,

#suppliers_list.list li h3 {

  margin-top: -5px;

  padding-bottom: 8px; }

#manufacturers_list.list li .middle-side,

#suppliers_list.list li .middle-side {

  padding-left: 0; }

  @media (max-width: 767px) {

    #manufacturers_list.list li .middle-side,

    #suppliers_list.list li .middle-side {

      padding-right: 15px;

      padding-left: 15px; } }

#manufacturers_list.list li .right-side-content,

#suppliers_list.list li .right-side-content {

  border-left: 1px solid #d6d4d4;

  padding: 0 0 32px 31px;

  min-height: 108px; }

  @media (max-width: 767px) {

    #manufacturers_list.list li .right-side-content,

    #suppliers_list.list li .right-side-content {

      min-height: 1px;

      padding: 0;

      border: none; } }

  #manufacturers_list.list li .right-side-content .product-counter,

  #suppliers_list.list li .right-side-content .product-counter {

    position: relative;

    top: -6px;

    margin-bottom: 12px; }

    @media (max-width: 767px) {

      #manufacturers_list.list li .right-side-content .product-counter,

      #suppliers_list.list li .right-side-content .product-counter {

        top: 0; } 

        

        }

 

[shacker]

this super tutorial of nemos may help

 

http://nemops.com/alphabetical-prestashop-manufacturers/#.VNPIsJ2fsyo

[unlimitedgrain]

Thanks, but I used that. It is super but it is for 1.5 and all code is different for 1.6 :-(

[NemoPS]

The base code should work anyway, the process is the same, you only have to apply it to the other template. For 4 in a row, try adding float:left to each element, width set to 1/4th of the total, without margins to start with. It should work. Then if you need margins, you can try moving to a more complex scenario where you target the last row element in smarty

[unlimitedgrain]

Hi,

 

Thanks for your reply.

I have added float left, but maybe I need to add that on more lines?

In my post I have put my css file as it is now.

Can you let me know on which lines I have to add something as well?

 

Thanks again, much appreciated!!

[NemoPS]

How does it look at the moment? It will really be tough to help you properly without a real link in any case

[unlimitedgrain]

There is a pdf attached in the post with all code. that is a screen print on how it looks now.

It is like your screen before you edited the css.

This is the link to our test site where I changed the code: http://www.shopunlimitedgrain.com/index.php?controller=manufacturer

[unlimitedgrain]

We have it solved with a module for this.

We bought http://addons.prestashop.com/en/front-office-features-prestashop-modules/18692-manufacturers-menu-pro.html

It works perfect and the developer helped us to get it the way we want to have it. He reacted quick on questions we had, so we can recommend this module!!

[garyjj127]

Just for the record, I tried nemos code on my site, and it works perfectly with 1.6. I just copied and pasted the code (making sure I had a backup of manufacturer-list), and it works very well!

[vekia]

  On 2/7/2015 at 3:20 PM, unlimitedgrain said:

We have it solved with a module for this.

We bought http://addons.prestashop.com/en/front-office-features-prestashop-modules/18692-manufacturers-menu-pro.html

It works perfect and the developer helped us to get it the way we want to have it. He reacted quick on questions we had, so we can recommend this module!!

 

any chance to see how it looks like on your website?