Magento主题开发：系列大结局

当我最初计划本系列时，它打算成为15个系列的文章，其中我们计划开发主题的所有页面，包括购物车，结帐页面，登录/注册页面和用户帐户页面。

但是在写了前10篇文章之后，我意识到我们已经详细解释了在Magento主题页面中进行更改所需的所有步骤，而编辑其他页面仅是我们已经解释过的步骤的重复之前。

因此，我将在本文中结束本系列文章，在该文章中，我们将从上一篇文章中所留下的内容中完成产品页面的定稿，并为您提供有关如何使用本系列文章中所学技术的一些技巧。自己编辑其余页面。

因此，让我们恢复产品详细信息页面的自定义。 当前是这样的：

如果将其与已有HTML设计进行比较，则外观应为：

为了使其看起来像我们HTML设计，我们需要在产品标题，价格和可用性部分中进行一些字体更改。 另外，在“添加到购物车”部分中，我们需要更改背景颜色和边框。 除此之外，我们需要对边距和填充进行一些更改。 我们将通过在theme.css文件中添加以下几行来做到这一点：

/***** Product Details Page ***********/
.more-views{margin-top:10px;}
.product-image-thumbs {text-align: center;}
.more-views .product-image-thumbs  a:hover {
    border-color: #b39a64;
}
.more-views .product-image-thumbs a {
    float: left;
    padding: 3px;
    border: 1px solid #cccccc;
}

.products-details{font-family: Georgia, sans-serif;}
.products-description .name {
    font-family: Georgia, sans-serif;
    font-size: 30px;
}
.availability.in-stock {
    font-size: 11px;
}
.products-details .products-description .price{width:50%;font-size: 25px;
    color: #b39a64;
    font-weight: 500;}

.products-description .product-options{
    border: none;
    padding-left: 30px;
}
.product-view .products-description .product-options .swatch-attr label{
    font-size: 11px;
    font-family: inherit;
    font-weight: normal;
}

.products-description .product-options-bottom{
    border:none;
    background: none;
    padding-left:30px;
    font-size: 12px;
    padding: 17px 0 0px 0;
    border-top: 1px solid #ccc;
    margin: 10px 30px 0 30px;
}
.product-view .product-options-bottom .add-to-cart-buttons .button {
    background: #b39a64;
    color: #fff;
}
.product-view .products-description .add-to-cart{
    margin-bottom: 21px;
}

该代码应该看起来很不言自明。 进行这些更改之后，页面应如下所示：

现在，我们非常接近HTML设计要求。 但是，如果我们查看产品页面的标​​签部分，尽管看起来不错，但它与我们HTML设计要求不符。 当前是这样的：

为了使其与我们HTML设计相匹配，我们将在我们的theme.css文件中添加以下CSS行：

/***** Tabs Section ***********/
.product-view .product-collateral .toggle-tabs {
    border: none;
    background: none;
}
.product-view .product-collateral .toggle-tabs li.current {
}
.product-view .product-collateral .toggle-tabs li {
    float: left;
    border: 1px solid #ececec;
}
.product-view  .product-collateral > dl > dd {
    padding: 0 15px 15px 0px;
    border:none;

}
.product-view .product-collateral .toggle-tabs li.current > span {
    background-color: #eee;
    color:#b39a64;;
}

我们更改了标签标题的背景颜色和当前标签的颜色。 这些的填充和边框也被编辑。 现在应该是这样：

现在看起来非常接近。 该页面应该看起来不错，除了一件小事：选项卡部分和相关产品之间的边距太大，并且破坏了整个页面的外观。

这是因为为.tab-box类定义了min-height属性。 我们将使用以下快速代码对其进行修复：

/***** Fixing Margin Bottom Problem ***********/
.product-view .tab-box{
    min-height: initial;
}

现在已解决问题：

现在，我们的整个产品详细信息页面已经准备就绪，并且非常接近我们HTML设计要求。 到此，我们完成了电子商务网站上最重要的三个页面：主页，产品列表页面和产品详细信息页面。

正如我在本文开头提到的那样，我将在这里总结本系列文章，向您提供一些技巧，以帮助您使用本系列中学到的技能来自定义主题的其他页面。

让我们看一下购物车页面。 当前看起来像这样：

但是，如果我们看一下HTML设计，它应该看起来像这样：

现在要对其进行自定义，我们将使用相同的步骤来打开模板提示，并确定负责渲染此页面的模板文件，然后对这些文件进行更改：

在这里，您可以看到页面的整体布局来自/template/checkout/cart.phtml文件。 我们需要对其进行编辑以将组件放置在正确的位置。 我们将拥有HTML代码放入HTML文件中，然后开始用动态代码替换该代码。

同样，我们可以看到产品行是从template / checkout / cart / item / default.phtml文件呈现的。 我们也需要编辑该文件。 除此之外，我认为我们不需要对phtml文件进行任何其他更改，因为我们可以通过CSS轻松完成其余工作。

现在，让我们检查结帐页面。 当前看起来像这样：

但是，根据我们HTML，它应如下所示：

让我们再次重复相同的过程，找出我们需要在此处更改的phtml文件。 在那里，您可以看到主要布局来自/template/checkout/onepage.phtml。 该文件将填充进度条：template / checkout / onepage / progress.phtml。

我们可以通过将代码与我们HTML文件进行比较来对这两个文件进行更改。 在这两个文件中进行更改后，您可以通过CSS进行其余更改。 我认为您无需为此页面更改任何其他phtml文件。

在此让我重申，您不应更改默认主题。 您应该始终在新主题中复制要编辑的phtml文件，并仅在此处进行编辑。

转到登录页面，当前如下所示：

在这里，我们将再次重复所有相同的步骤，并从启用模板提示开始：

在这里您可以看到需要编辑的主文件为：template \ persistent / customer / form / login.phtml。 您可以从此文件更改页面的大多数布局。 对于样式更改，可以通过CSS进行。

同样，我们可以看到如何编辑“注册”页面。 首先，我们将启用模板提示：

从模板提示中，我们可以看到signup部分的整体布局来自template / persistent / customer / form / register.phtml。 您可以通过编辑此文件来更改它。

如果您到目前为止一直在关注，那么您应该应该完全了解所有步骤。 您可以按照此处了解的相同步骤继续并编辑用户帐户页面。

您现在可以正式祝贺自己：可以称自己为Magento主题开发人员，因为您实际上已经开发了Magento主题，并且已经学习了该主题所需的所有基本方法和过程。

在撰写本系列文章时，我付出了巨大的努力，以使其易于理解。 希望本系列对您来说是一次很好的学习经历！

请在评论部分中提供有关该系列的反馈，并继续返回Tuts +来查看其他有用的文章。 并且不要忘记查看可用的扩展来扩展Magento的工作。

有很好的学习经验！

翻译自: https://code.tutsplus.com/articles/magento-theme-development-series-finale--cms-25007