Question

请看下面的截图

正如您所看到的，我正在尝试更改默认子类别视图，以便在默认的Prestashop模板上看起来像简单列表。任何人都可以帮助我，我坚持这一点，不能再进一步。

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

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

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

1 个答案: