magento 模板--左边栏

最新推荐文章于 2018-06-27 22:32:00 发布

转载最新推荐文章于 2018-06-27 22:32:00 发布 · 493 阅读

magento 专栏收录该内容

26 篇文章

订阅专栏

本文深入探讨了电子商务网站布局的三个关键区域：左、中、右栏，并详细介绍了如何通过定制页面模板、定义标签、调整样式以及设置个性化内容来优化网站布局。包括设置左、中、右栏的具体步骤，如定义布局结构、调整样式、实现响应式设计以及如何通过不同的模块和模板来丰富网站内容。同时，文章还展示了如何通过自定义样式、模块和模板来增强用户体验，提高网站的吸引力和功能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

边栏：左边栏，右边栏

page.xml 定义：

--------------------------------

   <block type="core/text_list" name="left" as="left" translate="label">

                <label>Left Column</label>

            </block>


..................................................
 <block type="core/text_list" name="content" as="content" translate="label">
                <label>Main Content Area</label>
            </block>
....................................................................................................
     <block type="core/text_list" name="right" as="right" translate="label">
                <label>Right Column</label>
            </block>
=====================================================

主页样式：1column.phtml，2columns-right.phtml，2columns-left.phtml，3columns.phtml，empty.phtml，popup.phtml，print.phtml 里定义

------------------------------------------

<div class="main-container col3-layout">
            <div class="main">
                <?php echo $this->getChildHtml('breadcrumbs') ?>
                <div class="col-wrapper">
                    <div class="col-main">
                        <?php echo $this->getChildHtml('global_messages') ?>
                        <?php echo $this->getChildHtml('content') ?>
                    </div>
                    <div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>
                </div>
                <div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>
            </div>
        </div>

-------------------------------------------------

 

 在catalog.xml 里重新定义left,right

左边栏的banner

----------------------------------------------------------

 <reference name="left">

            <block type="core/template" name="left.permanent.callout"template="callouts/left_col.phtml">

                <action method="setImgSrc"><src>images/media/col_left_callout.jpg</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>

        </reference>

====================================================

left_col.phtml 的内容：

----------------------------------------------

<div class="block block-banner">

    <div class="block-content">

        <?php if(strtolower(substr($this->getLinkUrl(),0,4))==='http'): ?>

            <a href="<?php echo $this->getLinkUrl() ?>" title="<?php echo $this->__($this->getImgAlt()) ?>">

        <?php elseif($this->getLinkUrl()): ?>

            <a href="<?php echo $this->getUrl($this->getLinkUrl()) ?>" title="<?php echo $this->__($this->getImgAlt()) ?>">

        <?php endif; ?>

            <img src="<?php echo $this->getSkinUrl($this->getImgSrc()) ?>"<?php if(!$this->getLinkUrl()): ?> title="<?php echo $this->__($this->getImgAlt()) ?>"<?php endif; ?> alt="<?php echo $this->__($this->getImgAlt()) ?>" />

        <?php if($this->getLinkUrl()): ?>

        </a>

        <?php endif ?>

    </div>

</div>

=============================================================

getLinkUrl() 获得<action method="setLinkUrl"><url>的值，如果值是完整的URL，输出

不完整， getUrl() 获得网站的地址，和<action method="setLinkUrl"><url>的值连在一起。

getImgAlt() 获得<action method="setImgAlt" translate="alt" module="catalog"><alt>的值

getSkinUrl 获得模板skin的完整路径

getImgSrc() 获得<action method="setImgSrc"><src> 的值

左边栏的tag

在tag.xml里重新定义左边栏：

-----------------------------------------------------

    <default>
        <!-- Mage_Tag -->
        <reference name="left">
            <block type="tag/popular" name="tags_popular" template="tag/popular.phtml"/>
        </reference>

    </default>

=====================================================

模板tag/popular.phtml

---------------------------------

<div class="block block-tags">
    <div class="block-title">
        <strong><span><?php echo $this->__('Popular Tags'); ?></span></strong>
    </div>
    <div class="block-content">
        <ul class="tags-list">
            <?php foreach ($this->getTags() as $_tag): ?>
                <li><a href="<?php echo $_tag->getTaggedProductsUrl() ?>" style="font-size:<?php echo $_tag->getRatio()*70+75 ?>%;"><?php echo $this->htmlEscape($_tag->getName()) ?></a></li>
            <?php endforeach; ?>
        </ul>
        <div class="actions">
            <a href="<?php echo $this->getUrl('tag/list') ?>"><?php echo $this->__('View All Tags') ?></a>
        </div>
    </div>
</div>

=================================================

getTags()  猜想是从数据库里调用。

 

左边栏的newsletter

newsletter.xml 重新定义left

------------------------------------------------------

    <default>

        <!-- Mage_Newsletter -->
        <reference name="left">
            <block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribe.phtml"/>
        </reference>

    </default>

====================================================