Manufacturers in alphabetical list in PrestaShop 1.7

As we did for PrestaShop 1.5, let’s see how to turn the boring manufacturer list into an alphabetical, fancy one, for PrestaShop 1.7

Full Code to display manufacturers in an alphabetical list

 <div class="all-brands">
      
      <ul class="letter-select clearifx">
        <li><a href="#letter_0">#</a></li>
        <li><a href="#letter_A">A</a></li>
        <li><a href="#letter_B">B</a></li>
        <li><a href="#letter_C">C</a></li>
        <li><a href="#letter_D">D</a></li>
        <li><a href="#letter_E">E</a></li>
        <li><a href="#letter_F">F</a></li>
        <li><a href="#letter_G">G</a></li>
        <li><a href="#letter_H">H</a></li>
        <li><a href="#letter_I">I</a></li>
        <li><a href="#letter_J">J</a></li>
        <li><a href="#letter_K">K</a></li>
        <li><a href="#letter_L">L</a></li>
        <li><a href="#letter_M">M</a></li>
        <li><a href="#letter_N">N</a></li>
        <li><a href="#letter_O">O</a></li>
        <li><a href="#letter_P">P</a></li>
        <li><a href="#letter_Q">Q</a></li>
        <li><a href="#letter_R">R</a></li>
        <li><a href="#letter_S">S</a></li>
        <li><a href="#letter_T">T</a></li>
        <li><a href="#letter_U">U</a></li>
        <li><a href="#letter_V">V</a></li>
        <li><a href="#letter_W">W</a></li>
        <li><a href="#letter_X">X</a></li>
        <li><a href="#letter_Y">Y</a></li>
        <li><a href="#letter_Z">Z</a></li>        
      </ul>

  
      <div class="brands-by-letter">
          {$current_letter = '#'}
          {foreach from=$brands item=brand}
            {$first_letter = $brand.name|substr:0:1}
            {if $current_letter != $first_letter}
              {if !$first_letter|in_array:['0','1','2','3','4','5','6','7','8','9']}
                {$current_letter = $first_letter|upper}
                </div>
              </div>
              {/if}
              
              <div class="box-letter clearfix" id="letter_{if $current_letter == '#'}0{else}{$current_letter|upper}{/if}">
                <div class="box-title">{$current_letter|upper}</div>
                <div class="letter-content">
            {/if}
            <p>
              <a href="{$link->getManufacturerLink($brand.id_manufacturer)}">{$brand.name}</a>
            </p>
          {/foreach}
        </div>
        </div>
      </div>

    </div>


.all-brands .letter-select li {
	float:left;
}

.all-brands .letter-select a {
	padding: 11px;
	font-weight: bold;
	font-size: 14px;
	display:block;
}

.all-brands .box-letter .box-title {
	width: 100%;
	display:block;
	background: #ccc;
	font-weight: bold;
	height: 40px;
	line-height: 40px;
	padding-left: 10px
}

.all-brands .box-letter .letter-content {
	line-height: 32px;
	padding-left: 10px
}

.all-brands .box-letter p {
	margin-bottom: 0;
	float: left;
	width: 25%;
}

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: