在默认 Prestashop 模板上将子类别显示为简单列表答案

【问题标题】：Showing subcategories as simple list on default Prestashop template在默认 Prestashop 模板上将子类别显示为简单列表
【发布时间】：2016-06-21 20:19:17
【问题描述】：

请看下面的截图

如您所见，我正在尝试更改默认子类别视图，以便看起来像默认 Prestashop 模板上的简单列表。任何人都可以帮我解决这个问题，我被困在这个问题上，不能再进一步了。

提前非常感谢您和最诚挚的问候。阿迪

【问题讨论】：

所以您想从网格视图转到列表视图对吧？这可能需要一些时间，因为您必须使用 blocklayered 模块进行编写，因为其中涉及到很多 javascript。
嗨，我在此期间找到了解决方案，这里是 elinke，我希望它可以帮助某人prestashop.com/forums/topic/…
我建议您在描述链接中的内容时发布自己的答案，然后接受它。

标签： prestashop

【解决方案1】：

这很简单。只需注释掉您不需要的类别部分。例如，将themes/default-bootstrap/category.tpl的第73-99行更改为：

        {if isset($subcategories)}
        {if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) }
        <!-- Subcategories -->
        <div id="subcategories">
{*          <p class="subcategory-heading">{l s='Subcategories'}</p>*}
            <ul class="clearfix">
            {foreach from=$subcategories item=subcategory}
                <li>
{*                  <div class="subcategory-image">
                        <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
                        {if $subcategory.id_image}
                            <img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                        {else}
                            <img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-medium_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                        {/if}
                    </a>
                    </div>
*}                  <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{*{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}*}{$subcategory.name|escape:'html':'UTF-8'}</a></h5>
{*                  {if $subcategory.description}
                        <div class="cat_desc">{$subcategory.description}</div>
                    {/if}
*}              </li>
            {/foreach}
            </ul>
        </div>
        {/if}
        {/if}

然后你在themes/default-bootstrap/css/category.css 中注释掉你不想要的样式，并添加一些样式来设置它的样式，就像在你的截图中一样。例如，将子类别样式替换为以下内容：

#subcategories {
  border-top: 1px solid #d6d4d4;
  padding: 15px 0 0px 0; }
  #subcategories p.subcategory-heading {
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0; }
/*  #subcategories ul {
    margin: 0 0 0 -20px; }
*/    #subcategories ul li {
/*      float: left;
      width: 145px;
      margin: 0 0 13px 33px;
      text-align: center;
      height: 202px;*/
      background: #d6d6d6;
      width: 100%;
      text-align: center; }
     #subcategories ul li h5 { 
        margin: 3px 0; }
     #subcategories ul li .subcategory-image {
        padding: 0 0 8px 0; }
        #subcategories ul li .subcategory-image a {
          display: block;
          padding: 9px;
          border: 1px solid #d6d4d4; }
          #subcategories ul li .subcategory-image a img {
            max-width: 100%;
            vertical-align: top; }
      #subcategories ul li .subcategory-name {
        font: /*600 18px/22px*/ bold 14px "Open Sans", sans-serif;
        color: /*#555454*/ #000;
        text-transform: uppercase; }
        #subcategories ul li .subcategory-name:hover {
          color: #515151; }
      #subcategories ul li .cat_desc {
        display: none; }
      #subcategories ul li:hover .subcategory-image a {
        border: 5px solid #333;
        padding: 5px; }

【讨论】：