Magento主题开发：类别页面，第2部分

在上一篇有关类别页面的文章中，我们编辑了工具栏，网格和列表布局。 在有关自定义类别页面的第二篇文章中，我们将自定义边栏并进行一些CSS修复。

首先，我们将在边栏中添加一些组件，以便我们可以对它们进行样式设置。 在这里，出于演示的目的，我们将只添加一个或两个组件并对其进行修改。 这将使您充分了解如何修改其他侧边栏组件。

现在，我们仅将“比较产品”和侧栏横幅添加到侧栏。 我们将从local.xml代码中完成此操作。 如果您还记得本系列的第一篇文章，则可以在主题文件的布局文件夹中找到local.xml文件。

我们将在左侧添加引用，然后使用以下代码在边栏中添加横幅并比较产品模块：

<reference name="left">
    <block type="catalog/navigation" name="left_categories_nav" before="-" template="catalog/navigation/left.phtml"/>
    <block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
        <action method="setImgSrc"><src>images/banner-small-01.png</src></action>
        <action method="setImgAlt" translate="alt" module="catalog"><alt>Our customer service is available 24/7. Call us at (555) 555-0123.</alt></action>
        <action method="setLinkUrl"><url>checkout/cart</url></action>
    </block>
    <block type="catalog/product_compare_sidebar" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/>
</reference>

将其用作参考代码-您可以使用相同的步骤添加更多模块或横幅。

如果我们看一下HTML设计，我们会注意到所有组件的设计都很好，尤其是标题部分，其中包含多种颜色。

尽管我们目前的设计还算不错，尽管我们可以通过CSS修改设计，但是我们需要修改HTML以在标题中添加不同颜色的类。

要修改HTML，我们首先要启用模板提示，然后找出负责它的文件为\ template \ catalog / product / compare / sidebar.phtml。

现在，我们将打开该sidebar.phtml文件，并将其与HTML代码进行比较。

侧边栏的设计HTML代码如下所示：

<div class="product-tag leftbar">
    <h3 class="title">Products <strong>Tags</strong></h3>
    <ul>
      <li><a href="#">Lincoln us</a></li>
      <li><a href="#">SDress for Girl</a></li>
      <li><a href="#">Corner</a></li>
      <li><a href="#">Window</a></li>
      <li><a href="#">PG</a></li>
      <li><a href="#">Oscar</a></li>
      <li><a href="#">Bath room</a></li>
      <li><a href="#">PSD</a></li>
    </ul>
</div>

我们可以看到标题具有带有title类的h3标签，并且标题部分周围具有strong标签，颜色不同。

为此，我们将用以下代码替换block-title div ：

<h3 class="title"><?php echo $this->__('Compare ') ?><strong><?php echo $this->__('Products') ?>
    <?php if($_helper->getItemCount() > 0): ?>
        <small><?php echo $this->__('(%d)', $_helper->getItemCount()) ?></small>
    <?php endif; ?>
</strong></h3>

刷新页面，它现在看起来应该非常接近我们HTML设计。 您可以通过类似的方式添加其他侧边栏组件并设置其样式。

现在我们已经完成了phtml文件的编辑，让我们开始修复CSS样式。

我们将从顶部开始修复样式。 需要我们注意的第一个组件是页面标题。 正如我们所看到的，它是相当不完善的，并且不符合我们HTML要求。

我们将这些行添加到新CSS文件中以设置标题样式。

.page-title h1{

    font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
    float: left;
    position: relative;
    width: 100%;
    margin-bottom: 15px;
    font-size: 24px;
    color: #2f2f2f;
    font-weight: 300;
    padding-bottom: 5px;
    text-align: center;
    background: url(../images/hadingBg.jpg) no-repeat center;
    line-height: 3;

}

.col-md-9 .toolbar{
    float: none;
	border:none;
	background-color: transparent;
	padding-left: 0;
}

在这里，我们为它提供了很好的文本字体，行高，文本对齐方式，背景图像等。此外，我们使背景透明且没有边框。 现在看起来应该像这样：

接下来，我们需要修改工具栏部分。 为此，我们将这些样式添加到CSS文件中：

.toolbar .sorter > .view-mode{float: left;}

.toolbar .sorter > .view-mode .grid {
    background-image: url(../images/grid-icon.png);
    width: 25px;
    height: 25px;
    background-position: 0px 0px;
}
.toolbar .sorter > .view-mode .list {
    background-image: url(../images/list-icon.png);
    width: 25px;
    height: 25px;
    background-position: 0px 0px;
}
.toolbar .sorter select{font-size:12px;}

在这里，我们仅指定了一些背景图像，宽度，高度等，并且将完成大部分操作。 该页面应如下所示：

现在，让我们开始在网格视图中编辑产品部分。 该页面现在看起来像这样：

我们只需要进行一些宽度和悬停样式的调整即可。 价格颜色也需要改变。 我们将通过添加以下CSS行来完成所有操作：

.category-products .products-grid--max-4-col > li {width:30%;}
.category-products .products-grid--max-4-col > li .view-eighth:hover .mask {top:170px;}
.item .price-box .price, .price{color:black;}

现在，网格部分应如下所示：

在最后一部分中，我们需要以列表模式修复产品部分。 当前看起来很混乱，但是不用担心，几行CSS可以正确设置所有内容。

为了使它看起来不错，我们将使用以下CSS样式：

.item .product-list-description .price-box .price{float: left;
    font-size: 28px;
    color: #b39a64;
    margin-right: 10px;}
.products-list .products .thumbnail{border: medium none;
    float: left;
    margin: 0;
    padding: 10px;
    position: relative;
    width: 18%;
    height: auto;}
.products-list .products{min-height: 100px;}

.products-list .products:hover {
    background: #fff;
    border-color: #b39a64;
    -webkit-box-shadow: 0 0 5px 1px #d3d3d3;
    box-shadow: 0 0 5px 1px #d3d3d3;
}
.products-list .products {
    border: 1px solid #e1e1e1;
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: 15px;
    margin-top: 15px;
    min-height: 150px;
}
.products .button {
    background: #b39a64;
    color: #fff;
}
.button:hover, button:hover {
    border: 1px solid #b39a64;
}

在这里，我们设置了产品图片的宽度，将价格浮动到右边，给了整个部分一个很好的背景，边框和悬停效果，并稍微修改了按钮。 该页面应如下所示：

完成所有这些之后，您的目录页面应该看起来不错，并且接近我们HTML设计要求。 您可能需要其他一些CSS微调，但除此之外，您已经准备就绪。

在本系列的下一篇文章中，我们将开始编辑产品详细信息页面。

请不要在评论部分留下您的建议和反馈。 我们将期待它。

翻译自: https://code.tutsplus.com/articles/magento-theme-development-category-page-part-2--cms-24989