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:

  • http://www.quintalweb.com.br Michel Conrado Diz

    Could you try to use ReactJS with prestashop’s environment? Module and Themes.
    Best Regards

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