亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

公告：魔扣目錄網(wǎng)為廣大站長(zhǎng)提供免費(fèi)收錄網(wǎng)站服務(wù)，提交前請(qǐng)做好本站友鏈：【 網(wǎng)站目錄：http://www.430618.com 】， 免友鏈快審服務(wù)（50元/站），

點(diǎn)擊這里在線咨詢客服
新站提交
  • 網(wǎng)站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會(huì)員：747

繼續(xù)探索：Magento主題開發(fā)之首頁(yè)設(shè)計(jì)，第三部分

發(fā)布時(shí)間：2024-03-09 00:26:22 作者：網(wǎng)友整理

現(xiàn)在我們已經(jīng)完全定制了前半部分
主頁(yè)，接下來我們需要修改主頁(yè)的內(nèi)容。如果我們看看我們的
HTML設(shè)計(jì)，首頁(yè)內(nèi)容部分只有一個(gè)標(biāo)題和最新的輪播
產(chǎn)品。有一個(gè) Magento 小部件，我們可以使用它來顯示最新的產(chǎn)品
主頁(yè)。實(shí)際上，如果我們查看當(dāng)前的主頁(yè)部分，它已經(jīng)有
其上啟用了最新的產(chǎn)品小部件，但我們需要修改它以匹配我們的
設(shè)計(jì)要求。

如果我們通過管理面板查看主頁(yè)內(nèi)容 > CMS > 頁(yè)面 > Madison
Island > 內(nèi)容，我們會(huì)看到只有一行PHP代碼
（除了一些樣式標(biāo)簽），即：

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

登錄后復(fù)制

所以，基本上所有的首頁(yè)內(nèi)容都來自于此
模板（這只是展示新產(chǎn)品的模板）。我們將復(fù)制這個(gè)
文件從 RWD 主題到我們的新主題，位于 catalog/product/widget/new/content/new_grid.phtml，
并開始編輯它，使其看起來像我們的 HTML 設(shè)計(jì)。如果我們看一下
該文件的當(dāng)前代碼是：

<?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; ?>

登錄后復(fù)制

當(dāng)我們查看本部分的 HTML 代碼時(shí)，它看起來
像這樣：

<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>

登錄后復(fù)制

因此，我們首先在此 HTML 中插入動(dòng)態(tài)標(biāo)簽。我的原因是
向您顯示該文件的當(dāng)前代碼，以便您可以找到所需的
該代碼中的動(dòng)態(tài)標(biāo)記，并將它們放入 HTML 中。

我們不必對(duì) div 結(jié)構(gòu)進(jìn)行任何更改，因此第一行
需要更改的是 h3 標(biāo)記：

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

登錄后復(fù)制

我們需要將 Hot 和 Products 的靜態(tài)文本替換為 Magento $this
標(biāo)簽，以便 Magento 稍后可以根據(jù)用戶偏好翻譯這些標(biāo)簽。
因此，這一行將變成這樣：

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

登錄后復(fù)制

下一行需要更改的是 image 標(biāo)記，我們需要在其中更改
relevant path of the image source. Currently it looks 像這樣：

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

登錄后復(fù)制

我們將其更改為：

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

登錄后復(fù)制

這里這個(gè)動(dòng)態(tài)標(biāo)簽將獲取產(chǎn)品的實(shí)際小圖像
236 x 357 像素大小。接下來，我們需要更改這個(gè) Add to Cart 鏈接：

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

登錄后復(fù)制

我們將其更改為：

<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>

登錄后復(fù)制

它有一個(gè)產(chǎn)品詳細(xì)信息頁(yè)面的動(dòng)態(tài) URL，并且僅顯示“添加到”
購(gòu)物車”（如果產(chǎn)品可用）。否則會(huì)顯示“缺貨”。最后，
我們將通過替換此行來更新產(chǎn)品價(jià)格和名稱：

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

登錄后復(fù)制

有了這個(gè)：

<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>

登錄后復(fù)制

這將使我們的單一產(chǎn)品視圖準(zhǔn)備就緒，但要迭代它
新產(chǎn)品，我們必須將 item div 包含在循環(huán)中，因此我們將添加這一行
在它的頂部：

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

登錄后復(fù)制

最后的這一行用于終止循環(huán)：

<?php endforeach; ?>

登錄后復(fù)制

So the full code for that file will become 像這樣：

<?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; ?>

登錄后復(fù)制

立即刷新您的主頁(yè)。它應(yīng)該有一個(gè)完美的工作和風(fēng)格
new products section, which would look 像這樣：

現(xiàn)在我們需要在完成主頁(yè)之前修改頁(yè)腳。如果
我們看看我們的 HTML 設(shè)計(jì)，頁(yè)腳有四個(gè)部分。第一個(gè)顯示“我們的
品牌，第二個(gè)顯示訂閱框和社交媒體鏈接，第三個(gè)
顯示一些 URL，第四個(gè)只是版權(quán)聲明。

第四部分已經(jīng)存在于我們的主題中，所以我們只需
必須修改內(nèi)容和樣式，但其他三個(gè)組件我們必須添加到主題中。

要添加組件，我們將創(chuàng)建一個(gè)新的
來自管理面板的靜態(tài)塊并將我們的內(nèi)容放在那里。那么，我們將前往
管理面板 > 靜態(tài)塊 > 添加新塊
阻止，并為我們的
品牌部分。我們將塊標(biāo)題更改為“我們的品牌”，設(shè)置
標(biāo)識(shí)符為“our_brands”，選擇“All Store Views”的商店視圖，然后輸入
內(nèi)容部分：

<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>

登錄后復(fù)制

如果你仔細(xì)觀察，它與我們?cè)?HTML 中的代碼相同
部分 – 我們剛剛更改了圖像的相對(duì)路徑，同時(shí)手動(dòng)
從所見即所得編輯器中上傳新圖像。保存塊，并且
開始為注冊(cè)部分創(chuàng)建另一個(gè)塊。

對(duì)于第二個(gè)塊，我們將使用“頁(yè)腳上方”的塊標(biāo)題。對(duì)于標(biāo)識(shí)符，我們將使用“above_footer”，對(duì)于內(nèi)容，我們將輸入以下代碼：

<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>

登錄后復(fù)制

現(xiàn)在我們必須以類似的方式創(chuàng)建鏈接塊。我們將創(chuàng)建一個(gè)
新塊的塊標(biāo)題為“頁(yè)腳鏈接”，標(biāo)識(shí)符為“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>

登錄后復(fù)制

所有這些鏈接現(xiàn)在都沒有鏈接，但您可以稍后修改它們。
圖像鏈接再次使用所見即所得的上傳功能動(dòng)態(tài)生成
編輯。所有其余代碼只是從 HTML 復(fù)制并粘貼。

也保存這個(gè)塊，然后查看主頁(yè)，但仍然看不到這些
三個(gè)街區(qū)出現(xiàn)。這是因?yàn)槟惚仨毭鞔_告訴 Magento
在哪里顯示這些新塊，我們可以從布局部分做到這一點(diǎn)。為了
為此，轉(zhuǎn)到 layout/local.xml 文件，并在 default 標(biāo)記結(jié)束之前添加這些行。

<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>

登錄后復(fù)制

這個(gè)
XML 代碼基本上是告訴 Magento 將這兩個(gè)新塊添加到 Magento 中
頁(yè)腳部分。最后，我們需要從頁(yè)腳 phtml 調(diào)用這些塊
文件。為此，我們將在此位置創(chuàng)建一個(gè)新的 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>

登錄后復(fù)制

這個(gè) is again just HTML code taken, where all the section codes are
替換為靜態(tài)塊的相關(guān)鏈接。版權(quán)部分是
替換為版權(quán)動(dòng)態(tài)標(biāo)簽。

現(xiàn)在檢查主頁(yè)，它現(xiàn)在應(yīng)該顯示這些新創(chuàng)建的靜態(tài)
Blocks, and should look 像這樣：

我們的主頁(yè)現(xiàn)已完成。唯一剩下的就是一些風(fēng)格修正，
我們將在下一篇文章中做到這一點(diǎn)。

以上就是繼續(xù)探索：Magento主題開發(fā)之首頁(yè)設(shè)計(jì)，第三部分的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！

分享到：
標(biāo)簽：主題 開發(fā) 探索 設(shè)計(jì) 首頁(yè)
用戶無頭像

網(wǎng)友整理

注冊(cè)時(shí)間：

網(wǎng)站：5 個(gè)   小程序：0 個(gè)  文章：12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會(huì)員

趕快注冊(cè)賬號(hào)，推廣您的網(wǎng)站吧！
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲，玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題，題庫(kù)，初中，高中，大學(xué)四六

運(yùn)動(dòng)步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動(dòng)步數(shù)，積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績(jī)?cè)u(píng)定2018-06-03

通用課目體育訓(xùn)練成績(jī)?cè)u(píng)定