Magento主题开发：主页，第3部分

最新推荐文章于 2024-08-11 20:00:32 发布

cunjie3951

最新推荐文章于 2024-08-11 20:00:32 发布

阅读量217

点赞数

文章标签： java html git web js ViewUI

现在我们已经完全定制了主页的前半部分，接下来需要修改主页的内容。如果我们看一下HTML设计，则主页内容部分只有一个标题和最新产品的轮播。我们可以使用Magento小部件在首页上显示最新产品。实际上，如果我们查看当前的主页部分，它已经启用了最新的产品小部件，但是我们需要对其进行修改以符合我们的设计要求。

如果我们通过转到管理面板> CMS>页面> Madison Island>内容来查看主页的内容，我们将看到只有一行PHP代码（除了一些样式标签），即：

{{widget type="catalog/product_widget_new" display_type="new_products" products_count="5" template="catalog/product/widget/new/content/new_grid.phtml"}}

因此，基本上所有首页内容都来自此模板（这只是显示新产品的模板）。我们将从RWD主题将此文件复制到catalog/product/widget/new/content/new_grid.phtml的新主题，并开始对其进行编辑以使其看起来像我们HTML设计。如果我们查看此文件的当前代码，则为：

<?php if (($_products = $this->getProductCollection()) && $_products->getSize()): ?>
<div class="widget widget-new-products">
    <div class="widget-title">
        <h2><?php echo $this->__('New Products') ?></h2>
    </div>
    <div class="widget-products">
        <?php echo $this->getPagerHtml() ?>
        <?php $_columnCount = $this->getColumnCount(); ?>
        <?php $i=0; ?>
        <ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">
            <?php foreach ($_products->getItems() as $_product): ?>
                <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                    <?php $_imgSize = 210; ?>
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(85) ?>" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                    </a>
                    <div class="product-info">
                        <h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>)"><?php echo $this->helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name') ?></a></h3>
                        <?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?>
                        <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                        <div class="actions">
                            <?php if ($_product->isSaleable()): ?>
                                <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                            <?php else: ?>
                                <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                            <?php endif; ?>
                            <ul class="add-to-links">
                                <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                    <li><a href="<?php echo $this->getAddToWishlistUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                                <?php endif; ?>
                                <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                    <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                                <?php endif; ?>
                            </ul>
                        </div>
                    </div>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
</div>
<?php endif; ?>

当我们查看此部分HTML代码时，它看起来像这样：

<div class="container_fullwidth">
    <div class="container">
        <h3 class="title"><strong>Hot</strong> Products</h3>
        <div class="clearfix"></div>
    	<div id="owl-demo" class="owl-carousel">
            <div class="item">
                <div class="products">
                    <div class="main">
                        <div class="view view-eighth">
                            <img src="images/products/small/products-02.jpg" />
                            <div class="mask">
                                <a href="#" class="info">Add to Cart</a>
                            </div>
                            <div class="productname">Iphone 5s Gold 32 Gb 2013</div>
                            <h4 class="price">$451.00</h4>
                        </div>
                    </div>
                </div>
            </div>
</div>

因此，我们将从在此HTML中插入动态标签开始。我向您显示此文件的当前代码的原因是，您可以从该代码中找到所需的动态标记，并将其放入HTML中。

我们不必对div结构进行任何更改，因此需要更改的第一行是h3标签：

<h3 class="title"><strong>Hot</strong> Products</h3>

我们需要用Magento $this标签替换Hot和Products的静态文本，以便Magento以后可以根据用户的喜好翻译它们。因此，这一行将变成这样：

<h3 class="title"><strong><?php echo $this->__('New') ?></strong><?php echo $this->__(' Products') ?></h3>

下一行需要更改的是image标签，我们需要在其中更改图像源的相关路径。当前看起来像这样：

<img src="images/products/small/products-02.jpg" />

我们将其更改为：

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(236, 357) ?>"/>

在这里，此动态标签将获得236 x 357 px尺寸的产品的实际小图像。接下来，我们需要更改此“ Add to Cart链接：

<a href="#" class="info">Add to Cart</a>

我们将其更改为：

<a href="<?php echo $_product->getProductUrl() ?>" class="info">
    <?php if ($_product->isSaleable()): ?>
        <?php echo $this->__('Add to Cart') ?>
    <?php else: ?>
        <?php echo $this->__('Out of stock') ?>
    <?php endif; ?>
</a>

它具有产品详细信息页面的动态URL，并且仅在产品可用时显示“添加到购物车”。否则会显示“缺货”。最后，我们将通过替换以下行来更新产品价格和名称：

<div class="productname">Iphone 5s Gold 32 Gb 2013</div>
<h4 class="price">$451.00</h4>

有了这个：

<div class="productname"><?php echo $this->helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name') ?></div>
<h4 class="price"><?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?></h4>

这将准备好我们的单个产品视图，但是要在所有新产品上进行迭代，我们必须将项目div封闭在一个循环中，因此我们将在其顶部添加以下行：

<?php foreach ($_products->getItems() as $_product): ?>

并且在它的末尾的这一行终止循环：

<?php endforeach; ?>

因此，该文件的完整代码将如下所示：

<?php if (($_products = $this->getProductCollection()) && $_products->getSize()): ?>
    <div class="container_fullwidth">
        <div class="container">
            <h3 class="title"><strong><?php echo $this->__('New') ?></strong><?php echo $this->__(' Products') ?></h3>
            <div class="clearfix"></div>
            <div id="owl-demo" class="owl-carousel">
                <?php foreach ($_products->getItems() as $_product): ?>
                    <div class="item">
                        <div class="products">
                            <div class="main">
                                <div class="view view-eighth">
                                        <img
                                            src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(236, 357) ?>"/>

                                    <div class="mask">
                                        <a href="<?php echo $_product->getProductUrl() ?>" class="info">
                                            <?php if ($_product->isSaleable()): ?>
                                                <?php echo $this->__('Add to Cart') ?>
                                            <?php else: ?>
                                                <?php echo $this->__('Out of stock') ?>
                                            <?php endif; ?>
                                        </a>
                                    </div>
                                        <div class="productname"><?php echo $this->helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name') ?></div>
                                        <h4 class="price"><?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?></h4>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
<?php endif; ?>

立即刷新您的主页。它应该有一个工作正常且样式新颖的新产品部分，如下所示：

主题中已经出现了第四部分，因此我们只需要修改内容和样式，但是必须在主题中添加其他三个组件。

要添加组件，我们将在管理面板中创建一个新的Static Block并将其内容放入其中。因此，我们将转到“ 管理面板”>“静态块”>“添加新块” ，然后为“ 我们的品牌”部分添加一个新块。我们将块标题更改为“我们的品牌”，将标识符设置为“ our_brands”，选择“所有商店视图”的商店视图，然后将其放入内容部分：

<h3 class="title"><strong>Our </strong> Brands</h3>
    <div class="control"><a id="prev_brand" class="prev" href="#">&lt;</a><a id="next_brand" class="next" href="#">&gt;</a></div>
    <ul id="braldLogo">
        <li>
            <ul class="brand_item">
                <li><a href="#">
                        <div class="brand-logo"><img src="{{media url="wysiwyg/myuploads/envato.png"}}" alt="" /></div>
                    </a></li>
                <li><a href="#">
                        <div class="brand-logo"><img src="{{media url="wysiwyg/myuploads/themeforest.png"}}" alt="" /></div>
                    </a></li>
                <li><a href="#">
                        <div class="brand-logo"><img src="{{media url="wysiwyg/myuploads/photodune.png"}}" alt="" /></div>
                    </a></li>
                <li><a href="#">
                        <div class="brand-logo"><img src="{{media url="wysiwyg/myuploads/activeden.png"}}" alt="" /></div>
                    </a></li>
                <li><a href="#">
                        <div class="brand-logo"><img src="{{media url="wysiwyg/myuploads/envato.png"}}" alt="" /></div>
                    </a></li>
            </ul>
        </li>
        <li>
            <ul class="brand_item">
                <li><a href="#">
                        <div class="brand-logo"><img src="{{media url="wysiwyg/myuploads/envato.png"}}" alt="" /></div>
                    </a></li>
                <li><a href="#">
                        <div class="brand-logo"><img src="{{media url="wysiwyg/myuploads/themeforest.png"}}" alt="" /></div>
                    </a></li>
                <li><a href="#">
                        <div class="brand-logo"><img src="{{media url="wysiwyg/myuploads/photodune.png"}}" alt="" /></div>
                    </a></li>
                <li><a href="#">
                        <div class="brand-logo"><img src="{{media url="wysiwyg/myuploads/activeden.png"}}" alt="" /></div>
                    </a></li>
                <li><a href="#">
                        <div class="brand-logo"><img src="{{media url="wysiwyg/myuploads/envato.png"}}" alt="" /></div>
                    </a></li>
            </ul>
        </li>
    </ul>

如果仔细观察，它与本节HTML相同的代码-我们刚刚更改了图像的相对路径，同时从WYSIWYG编辑器中手动上传了新图像。保存该块，然后开始为注册部分创建另一个块。

对于第二个块，我们将使用“ Above Footer”的块标题。对于标识符，我们将使用“ above_footer”，对于内容，我们将输入以下代码：

<div class="col-md-5">
    <form class="newsletter">
        <input type="text" name="" placeholder="Type your email....">
        <input type="submit" value="SignUp" class="button">
    </form>
</div>
<div class="col-md-6">
    <ul class="social-icon">
        <li><a href="#" class="linkedin"></a></li>
        <li><a href="#" class="google-plus"></a></li>
        <li><a href="#" class="twitter"></a></li>
        <li><a href="#" class="facebook"></a></li>
    </ul>
</div>

现在，我们必须以类似方式创建链接块。我们将创建一个新块，其块标题为“ Footer Links”，标识符为“ footer_links”，并将此代码放在其中：

<div class="col-md-3 col-sm-6">
    <h4 class="title">Customer<strong> Support</strong></h4>
    <ul class="support">
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Payment Option</a></li>
        <li><a href="#">Booking Tips</a></li>
        <li><a href="#">Infomation</a></li>
    </ul>
</div>
<div class="col-md-3 col-sm-6">
    <h4 class="title">Customer<strong> Support</strong></h4>
    <ul class="support">
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Payment Option</a></li>
        <li><a href="#">Booking Tips</a></li>
        <li><a href="#">Infomation</a></li>
    </ul>
</div>
<div class="col-md-3 col-sm-6">
    <h4 class="title">Customer<strong> Support</strong></h4>
    <ul class="support">
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Payment Option</a></li>
        <li><a href="#">Booking Tips</a></li>
        <li><a href="#">Infomation</a></li>
    </ul>
</div>
<div class="col-md-3 col-sm-6">
    <h4 class="title">Contact <strong>Info</strong></h4>
    <p><span><img src="{{media url="wysiwyg/myuploads/placeIcon.jpg"}}" alt="" /></span>Anwar ul Haq , California</p>
    <p><span><img src="{{media url="wysiwyg/myuploads/phoneIcon.jpg"}}" alt="" /></span>Call Us : (123) 398 5063</p>
    <p><span><img src="{{media url="wysiwyg/myuploads/mobileIcon.jpg"}}" alt="" /></span>Call Us : (123) 398 5063</p>
    <p><span><img src="{{media url="wysiwyg/myuploads/mailIcon.jpg"}}" alt="" /></span>Email : abs@tutsplus</p>
</div>

所有这些链接现在都无处链接，但是您可以稍后对其进行修改。使用所见即所得编辑器的上载功能再次动态生成图像链接。其余所有代码都只是从HTML复制并粘贴。

也保存此块，并检查主页，但是仍然看不到这三个块。这是因为您必须明确告诉Magento在哪里显示这些新块，并且我们可以在布局部分中进行操作。为此，请转到layout/local.xml文件，并在关闭default标记之前添加这些行。

<reference name="footer">
    <block type="cms/block" name="footer_links ">
        <action method="setBlockId"><block_id>footer_links</block_id></action>
    </block>    
    <block type="cms/block" name="above_footer">
        <action method="setBlockId"><block_id>above_footer</block_id></action>
    </block>
    <block type="cms/block" name="our_brands">
        <action method="setBlockId"><block_id>our_brands</block_id></action>
    </block>
</reference>

该XML代码基本上是告诉Magento将这两个新块添加到Magento页脚部分中。最后，我们需要从页脚phtml文件中调用这些块。为此，我们将在以下位置创建一个新的footer.phtml文件： template/page/html/footer.phtml 。

将此代码添加到footer.phtml文件中：

<div class="container_fullwidth">
    <div class="container">
        <div class="our-brand">
            <?php echo $this->getChildHtml("our_brands") ?>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="footer">
        <div class="copyright-info">
            <div class="container">
                <div class="row">
                    <?php echo $this->getChildHtml("above_footer") ?>
                </div>
            </div>
        </div>
        <div class="footer-info">
            <div class="container">
                <div class="row">
                    <?php echo $this->getChildHtml("footer_links_sm") ?>
                    <?php // echo $this->getChildHtml() ?>
                </div>
            </div>
        </div>
        <div class="copyright-info">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <p><?php echo $this->getCopyright() ?></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

同样，这只是采用HTML代码，其中所有节代码都被替换为指向静态块的相关链接。版权部分将替换为版权动态标签。

现在检查主页，它现在应该显示这些新创建的静态块，并且应如下所示：

我们的主页现已完成。剩下的唯一内容是样式修复，我们将在下一篇文章中进行。

翻译自: https://code.tutsplus.com/articles/magento-theme-development-home-page-part-3--cms-24718

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Magento主题开发：主页，第3部分

现在我们已经完全定制了主页的前半部分，接下来需要修改主页的内容。如果我们看一下HTML设计，则主页内容部分只有一个标题和最新产品的轮播。我们可以使用Magento小部件在首页上显示最新产品。实际上，如果我们查看当前的主页部分，它已经启用了最新的产品小部件，但是我们需要对其进行修改以符合我们的设计要求。如果我们通过转到管理面板> CMS>页面> Madison Is...
复制链接

扫一扫