继续探索：Magento主题开发之首页设计，第三部分

WBOY

发布时间：2023-09-15 18:17:08

1105人浏览过

来源于php中文网

原创

现在我们已经完全定制了前半部分主页，接下来我们需要修改主页的内容。如果我们看看我们的 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 设计。如果我们看一下该文件的当前代码是：

getProductCollection()) && $_products->getSize()): ?>

    
        __('New Products') ?>
    
    
        getPagerHtml() ?>
        getColumnCount(); ?>
        
        
            getItems() as $_product): ?>
                
                    
                    
                        helper('catalog/image')->init($_product, 'small_image')->resize(85) ?>" alt="stripTags($_product->getName(), null, true) ?>" />
                    
                    
                        helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name') ?>
                        getPriceHtml($_product, true, '-widget-new-grid') ?>
                        getReviewsSummaryHtml($_product, 'short') ?>
                        
                            isSaleable()): ?>
                                
                            
                                __('Out of stock') ?>
                            
                            
                                helper('wishlist')->isAllow()) : ?>
                                    __('Add to Wishlist') ?>
                                
                                getAddToCompareUrl($_product)): ?>
                                    | __('Add to Compare') ?>

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


    
        Hot Products
        
    	
            
                
                    
                        
                            
                            
                                Add to Cart
                            
                            Iphone 5s Gold 32 Gb 2013
                            $451.00

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

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

Hot Products

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

__('New') ?>__(' Products') ?>

下一行需要更改的是 image 标记，我们需要在其中更改 relevant path of the image source. Currently it looks 像这样：

我们将其更改为：

helper('catalog/image')->init($_product, 'small_image')->resize(236, 357) ?>"/>

这里这个动态标签将获取产品的实际小图像 236 x 357 像素大小。接下来，我们需要更改这个 Add to Cart 链接：

Add to Cart

我们将其更改为：


    isSaleable()): ?>
        __('Add to Cart') ?>
    
        __('Out of stock') ?>

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

Iphone 5s Gold 32 Gb 2013
$451.00

有了这个：

helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name') ?>
getPriceHtml($_product, true, '-widget-new-grid') ?>

这将使我们的单一产品视图准备就绪，但要迭代它新产品，我们必须将 item div 包含在循环中，因此我们将添加这一行在它的顶部：

getItems() as $_product): ?>

最后的这一行用于终止循环：

So the full code for that file will become 像这样：

getProductCollection()) && $_products->getSize()): ?>
    
        
            __('New') ?>__(' Products') ?>
            
            
                getItems() as $_product): ?>
                    
                        
                            
                                
                                        

                                    
                                        
                                            isSaleable()): ?>
                                                __('Add to Cart') ?>
                                            
                                                __('Out of stock') ?>
                                            
                                        
                                    
                                        helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name') ?>
                                        getPriceHtml($_product, true, '-widget-new-grid') ?>

立即刷新您的主页。它应该有一个完美的工作和风格 new products section, which would look 像这样：

继续探索：Magento主题开发之首页设计，第三部分

第四部分已经存在于我们的主题中，所以我们只需必须修改内容和样式，但其他三个组件我们必须添加到主题中。

要添加组件，我们将创建一个新的来自管理面板的静态块并将我们的内容放在那里。那么，我们将前往 管理面板 > 静态块 > 添加新块阻止，并为我们的品牌部分。我们将块标题更改为“我们的品牌”，设置标识符为“our_brands”，选择“All Store Views”的商店视图，然后输入内容部分：

Our  Brands
    zuojiankuohaophpcnyoujiankuohaophpcn

如果你仔细观察，它与我们在 HTML 中的代码相同部分 - 我们刚刚更改了图像的相对路径，同时手动从所见即所得编辑器中上传新图像。保存块，并且开始为注册部分创建另一个块。

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

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


    Customer Support
    
        FAQ
        Payment Option
        Booking Tips
        Infomation
    


    Customer Support
    
        FAQ
        Payment Option
        Booking Tips
        Infomation
    


    Customer Support
    
        FAQ
        Payment Option
        Booking Tips
        Infomation
    


    Contact Info
    Anwar ul Haq , California

							
								
								
									琅琅配音
									全能AI配音神器
								
								下载 
							
						
    Call Us : (123) 398 5063
    Call Us : (123) 398 5063
    Email : abs@tutsplus

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

也保存这个块，然后查看主页，但仍然看不到这些三个街区出现。这是因为你必须明确告诉 Magento 在哪里显示这些新块，我们可以从布局部分做到这一点。为了为此，转到 layout/local.xml 文件，并在 default 标记结束之前添加这些行。


    
        footer_links
        
    
        above_footer
    
    
        our_brands

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

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


    
        
            getChildHtml("our_brands") ?>
        
    
    
    
        
            
                
                    getChildHtml("above_footer") ?>
                
            
        
        
            
                
                    getChildHtml("footer_links_sm") ?>
                    getChildHtml() ?>
                
            
        
        
            
                
                    
                        getCopyright() ?>