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%;
}