使用Magento布局

时间:2012-03-01 17:05:42

标签: xml magento layout themes

最近,我开始与Magento 1.6.1合作,为我在当地的一家电子商务公司担任新职位。我以前有过经验,但主要是使用Wordpress。

虽然我“知道”Magento并且可以围绕它如何运作,但当然仍有障碍。幸运的是,我有一个足够好的老板,让我在代码中弄脏手,并且每天都学到越来越多。

最近,布局一直是我的新障碍。问题是我在代码中工作,这些代码是由其他人或其他人修改代码完成的。我不是第一个网站管理员...

我在移动“bottom.phtml”块时遇到困难,因此它会在“media.phtml”下面呈现(产品图像/缩略图渲染的位置)。代码如下:

    <catalog_product_view translate="label">
    <label>Catalog Product View (Any)</label>
    <!-- Mage_Catalog -->
    <reference name="root">
        <action method="setTemplate"><template>page/1column.phtml</template></action>
    </reference>
    <reference name="head">
        <action method="addJs"><script>varien/product.js</script></action>

        <action method="addJs"><script>virtualpaginate.js</script></action>

        <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>

    </reference>
    <reference name="content">
        <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
            <!--
            <action method="addReviewSummaryTemplate"><type>default</type><template>review/helper/summary.phtml</template></action>
            <action method="addReviewSummaryTemplate"><type>short</type><template>review/helper/summary_short.phtml</template></action>
            <action method="addReviewSummaryTemplate"><type>...</type><template>...</template></action>
            -->
            <block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
            <block type="core/text_list" name="alert.urls" as="alert_urls" translate="label">
                <label>Alert Urls</label>
            </block>

            <action method="setTierPriceTemplate"><template>catalog/product/view/tierprices.phtml</template></action>
            <block type="catalog/product_list_related" name="catalog.product.related" as="related" template="catalog/product/list/related.phtml"/>
            <block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml">
                <action method="setColumnCount"><columns>4</columns></action>
                <action method="setItemLimit"><type>upsell</type><limit>4</limit></action>
            </block>

            <block type="catalog/product_view_additional" name="product.info.additional" as="product_additional_data" />
            <block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml"/>
            <block type="catalog/product_view_attributes" name="product.attributes" as="additional" template="catalog/product/view/attributes.phtml"/>
            <block type="catalog/product_view" name="product.info.addto" as="addto" template="catalog/product/view/addto.phtml"/>
            <block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml"/>

            <block type="catalog/product_view" name="product.info.options.wrapper" as="product_options_wrapper" template="catalog/product/view/options/wrapper.phtml" translate="label">
                <label>Info Column Options Wrapper</label>
                <block type="core/template" name="options_js" template="catalog/product/view/options/js.phtml"/>
                <block type="catalog/product_view_options" name="product.info.options" as="product_options" template="catalog/product/view/options.phtml">
                    <action method="addOptionRenderer"><type>text</type><block>catalog/product_view_options_type_text</block><template>catalog/product/view/options/type/text.phtml</template></action>
                    <action method="addOptionRenderer"><type>file</type><block>catalog/product_view_options_type_file</block><template>catalog/product/view/options/type/file.phtml</template></action>
                    <action method="addOptionRenderer"><type>select</type><block>catalog/product_view_options_type_select</block><template>catalog/product/view/options/type/select.phtml</template></action>
                    <action method="addOptionRenderer"><type>date</type><block>catalog/product_view_options_type_date</block><template>catalog/product/view/options/type/date.phtml</template></action>
            </block>
                    <block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/>
                </block>
            <block type="catalog/product_view" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="catalog/product/view/options/wrapper/bottom.phtml" translate="label">
                <label>Bottom Block Options Wrapper</label>
                <action method="insert"><block>product.tierprices</block></action>
                <block type="catalog/product_view" name="product.clone_prices" as="prices" template="catalog/product/view/price_clone.phtml"/>
                <action method="append"><block>product.info.addtocart</block></action>
            </block>

            <block type="core/template_facade" name="product.info.container1" as="container1">
                <action method="setDataByKey"><key>alias_in_layout</key><value>container1</value></action>
                <action method="setDataByKeyFromRegistry"><key>options_container</key><key_in_registry>product</key_in_registry></action>
                <action method="append"><block>product.info.options.wrapper</block></action>
                <action method="append"><block>product.info.options.wrapper.bottom</block></action>
            </block>
            <block type="core/template_facade" name="product.info.container2" as="container2">
                <action method="setDataByKey"><key>alias_in_layout</key><value>container2</value></action>
                <action method="setDataByKeyFromRegistry"><key>options_container</key><key_in_registry>product</key_in_registry></action>
                <action method="append"><block>product.info.options.wrapper</block></action>
                <action method="append"><block>product.info.options.wrapper.bottom</block></action>
            </block>
            <action method="unsetCallChild"><child>container1</child><call>ifEquals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action>
            <action method="unsetCallChild"><child>container2</child><call>ifEquals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action>
        </block>
    </reference>
    <reference name="right">
        <block type="catalog/product_list_related" name="catalog.product.related" before="-" template="catalog/product/list/related.phtml"/>
    </reference>
</catalog_product_view>

现在,正如我所说,我正在学习Magento,在某种程度上学习,并且凭借我的Wordpress主题知识,它绝对给了我一个优势。但是,试图解码这已经证明是一个艰难的障碍。也许我正在分析它,但是,我无法在这里解决一些问题:1)它是如何知道浮动“media.phtml”左边的产品选项和“bottom.phtml”的对? 2)我怎样才能将“bottom.phtml”从选项中分离出来,这样我就可以将它移到“media.phtml”(产品图片)下面,然后开始设计样式呢?

我喜欢Magento,但男人是一个很难接受的人。

感谢任何可以放弃任何光明或提供可靠资源的人!我找到的所有教程,资源都很棒但是处理全新的安装,所以没有那么多的代码。有了这个,我正在挖掘其他人工作的代码并且说实话......对于我所知道的一切来说,这可能真的很糟糕!

再次感谢!

1 个答案:

答案 0 :(得分:5)

XML部分主要是使某些块可用于模板文件的使用。 (当然,每个规则都有例外,在core/text_list块或模板调用$this->getChildHtml('')的情况下,XML的顺序生效了

看看template/catalog/product/view.phtml,你会看到很多HTML位和行......

<?php echo $this->getChildHtml('media') ?>

......这就是块的定位方式。现在bottom.phtml使用product_options_wrapper_bottom,但该块未直接使用,它会附加到container1container2块,这些块的输出如下:

<?php if ($_product->isSaleable() && $this->hasOptions()):?>
    <?php echo $this->getChildChildHtml('container1', '', true, true) ?>
<?php endif;?>

您需要做的就是编辑catalog/product/view.phtml,使该位低于页面。当然,不要直接编辑基本模板,而是将该文件复制到网站主题中的等效路径。

产品视图页面可能是默认Magento安装中最复杂的,它是开始你的位置的好地方。也许更好的起点是Alan Storm的No Frills Magento Layout。我可能不会是唯一推荐它的人。