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

最新推荐文章于 2024-08-09 11:14:11 发布

cunjie3951

最新推荐文章于 2024-08-09 11:14:11 发布

阅读量140

点赞数

文章标签： python java web html 数据可视化

在本系列的上一教程中，我们开始修改主页的标题部分。在本教程中，我们将从改进标题部分开始，然后创建新的滑块CMS块并从模板文件中调用它。由于本文涉及很多内容，因此让我们开始时不要再拖延。

由于我们已部分固定顶部割台，因此唯一需要修复的是顶部购物车部分。要自定义标题购物车，首先，我们将尝试找出哪些模板文件负责渲染该零件。为了对此进行分析，我们首先将一些产品添加到购物车中，以便我们进行全面调查。

启用模板提示后，我们可以看到标题购物车的外部容器来自以下模板文件： frontend/rwd/default/template/checkout/cart/minicart.phtml 。然后单击，扩展的部分通过此文件呈现： frontend/rwd/default/template/checkout/cart/minicart/items.phtml 。最后，每个购物车商品均通过以下文件呈现： frontend/rwd/default/template/checkout/cart/minicart/default.phtml 。

我们将所有这些文件导入到我们新创建的主题中，然后开始对其进行修改。

让我们从最外面的minicart.phtml文件开始修改过程。这是该文件的当前代码：

<?php
    $_cartQty = $this->getSummaryCount();
    if(empty($_cartQty)) {
        $_cartQty = 0;
    }
?>

<a href="<?php echo $this->helper('checkout/cart')->getCartUrl(); ?>" data-target-element="#header-cart" class="skip-link skip-cart <?php if($_cartQty <= 0): ?> no-count<?php endif; ?>">
    <span class="icon"></span>
    <span class="label"><?php echo $this->__('Cart'); ?></span>
    <span class="count"><?php echo $_cartQty; ?></span>
</a>

<div id="header-cart" class="block block-cart skip-content">
    <?php echo $this->getChildHtml('minicart_content');?>
</div>

现在，在开始对其进行任何修改之前，让我们检查原始HTML文件中标头购物车部分的代码。那里的代码看起来像这样：

<ul class="option">
                  <li class="option-cart"><a href="#" class="cart-icon">cart <!--<span class="cart_no">02</span>--></a>
                <ul class="option-cart-item">
                  <li>
                    <div class="cart-item">
                      <div class="image"><img src="images/products/thum/products-01.png" alt=""></div>
                      <div class="item-description">
                        <p class="name">Lincoln chair</p>
                        <p>Size: <span class="light-red">One size</span><br>
                          Quantity: <span class="light-red">01</span></p>
                      </div>
                      <div class="right">
                        <p class="price">$30.00</p>
                        <a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div>
                    </div>
                  </li>
                  <li>
                    <div class="cart-item">
                      <div class="image"><img src="images/products/thum/products-02.png" alt=""></div>
                      <div class="item-description">
                        <p class="name">Lincoln chair</p>
                        <p>Size: <span class="light-red">One size</span><br>
                          Quantity: <span class="light-red">01</span></p>
                      </div>
                      <div class="right">
                        <p class="price">$30.00</p>
                        <a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div>
                    </div>
                  </li>
                  <li><span class="total">Total <strong>$60.00</strong></span>
                    <button class="checkout" onClick="location.href='checkout.html'">CheckOut</button>
                  </li>
                </ul>
              </li>
            </ul>

因此，我们将开始修改PHP文件代码以使其类似于我们HTML代码。我们将仅在此处使用锚标记来包装购物车图标，然后显示微型购物车内容。因此，我们的代码将如下所示：

<a href="<?php echo $this->helper('checkout/cart')->getCartUrl(); ?>" class="cart-icon">cart <!--<span class="cart_no">02</span>--></a>
<?php echo $this->getChildHtml('minicart_content');?>

在这里，我们替换了顶部购物车的最外面的包装器，但是现在我们需要编辑下拉部分包装器。如我们所见，该包装器来自frontend/rwd/default/template/checkout/cart/minicart/items.phtml 。让我们检查该文件的当前代码：

<?php
$_cartQty = $this->getSummaryCount();
if(empty($_cartQty)) {
    $_cartQty = 0;
}
?>
<div id="minicart-error-message" class="minicart-message"></div>
<div id="minicart-success-message" class="minicart-message"></div>

<div class="minicart-wrapper">

    <p class="block-subtitle">
        <?php echo $this->__('Recently added item(s)') ?>
        <a class="close skip-link-close" href="#" title="<?php echo $this->__('Close'); ?>">&times;</a>
    </p>

    <?php $_items = $this->getRecentItems() ?>
    <?php $countItems = count($_items); ?>
    <?php if($countItems): ?>
        <div>
            <ul id="cart-sidebar" class="mini-products-list">
                <?php foreach($_items as $_item): ?>
                    <?php echo $this->getItemHtml($_item) ?>
                <?php endforeach; ?>
            </ul>
        </div>
        <script type="text/javascript">
            truncateOptions();
            decorateList('cart-sidebar', 'none-recursive');
            $j('document').ready(function() {
                var minicartOptions  = {
                    formKey:           "<?php echo $this->getFormKey();?>"
                }
                var Mini = new Minicart(minicartOptions);
                Mini.init();
            });
        </script>

        <div id="minicart-widgets">
            <?php echo $this->getChildHtml('cart_promotion') ?>
        </div>
        <div class="block-content">
            <p class="subtotal">
                <?php if ($this->canApplyMsrp()): ?>
                    <span class="map-cart-sidebar-total"><?php echo $this->__('ORDER TOTAL WILL BE DISPLAYED BEFORE YOU SUBMIT THE ORDER'); ?></span>
                <?php else: ?>
                    <span class="label"><?php echo $this->__('Cart Subtotal:') ?></span> <?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?>
                    <?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
                        <br />(<?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
                    <?php endif; ?>
                <?php endif; ?>
            </p>
        </div>


        <div class="minicart-actions">
            <?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
                <ul class="checkout-types minicart">
                    <?php echo $this->getChildHtml('extra_actions') ?>
                    <li>
                        <a title="<?php echo $this->__('Checkout') ?>" class="button checkout-button" href="<?php echo $this->getCheckoutUrl() ?>">
                            <?php echo $this->__('Checkout') ?>
                        </a>
                    </li>
                </ul>
            <?php endif ?>
            <a class="cart-link" href="<?php echo $this->getUrl('checkout/cart'); ?>">
                <?php echo $this->__('View Shopping Cart'); ?>
            </a>
        </div>

    <?php else: ?>
        <p class="empty"><?php echo $this->__('You have no items in your shopping cart.') ?></p>

    <?php endif ?>
</div>

当我们将其与HTML模板进行比较时，我们需要做几件事。首先，在minicart-wrapper div ，我们将开始实现ul ，对于每个项目，我们将在li标记下进行迭代。最后，我们将显示购物车总数，或表明购物车中没有商品。该文件的最终代码如下所示：

<?php
$_cartQty = $this->getSummaryCount();
if(empty($_cartQty)) {
    $_cartQty = 0;
}
?>
<div id="minicart-error-message" class="minicart-message"></div>
<div id="minicart-success-message" class="minicart-message"></div>

<?php $_items = $this->getRecentItems() ?>
<?php $countItems = count($_items); ?>

<div class="minicart-wrapper">
    <ul class="option-cart-item">
        <?php if($countItems): ?>
            <?php foreach($_items as $_item): ?>
                <?php echo $this->getItemHtml($_item) ?>
            <?php endforeach; ?>
            <li>
                <span class="total">
                    <?php if ($this->canApplyMsrp()): ?>
                        <span class="map-cart-sidebar-total"><?php echo $this->__('ORDER TOTAL WILL BE DISPLAYED BEFORE YOU SUBMIT THE ORDER'); ?></span>
                    <?php else: ?>
                        <?php echo $this->__('Cart Subtotal:') ?> <strong></strong><?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?>
                        <?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
                            <br />(<?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
                        <?php endif; ?>
                    <?php endif; ?>
                </span>
                <button class="checkout" onClick="location.href='<?php echo $this->getCheckoutUrl() ?>'">CheckOut</button>
            </li>
        <?php else: ?>
            <p class="empty"><?php echo $this->__('You have no items in your shopping cart.') ?></p>
        <?php endif ?>
    </ul>
</div>

现在剩下的最后一部分是样式购物车列表项本身。正如我们已经知道的那样，负责该部分的文件是： frontend/rwd/default/template/checkout/cart/minicart/default.phtml 。

该文件的当前代码看起来很长，很难理解，但是不要被吓到。我们不需要编辑所有这些内容，因为文件代码的主要部分只是计算正确的价格和其他产品选项。再次，我们将检查我们HTML代码，将其放入此文件中，然后开始用动态值替换静态文本。这是我们HTML中每个购物车商品的代码：

<li>
                    <div class="cart-item">
                      <div class="image"><img src="images/products/thum/products-01.png" alt=""></div>
                      <div class="item-description">
                        <p class="name">Lincoln chair</p>
                        <p>Size: <span class="light-red">One size</span><br>
                          Quantity: <span class="light-red">01</span></p>
                      </div>
                      <div class="right">
                        <p class="price">$30.00</p>
                        <a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div>
                    </div>
                  </li>

我们将用这个标签替换img标签：

<img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->escapeHtml($this->getProductName()) ?>">

接下来，我们将名称替换为动态代码：

<?php if ($this->hasProductUrl()): ?><a href="<?php echo $this->getProductUrl() ?>"><?php endif; ?><?php echo $this->escapeHtml($this->getProductName()) ?><?php if ($this->hasProductUrl()): ?></a><?php endif; ?>

要显示产品选项，我们将使用以下动态代码：

<?php if ($_options = $this->getOptionList()):?>
                    <?php foreach ($_options as $_option) : ?>
                        <?php echo $this->escapeHtml($_option['label']) ?>:
                        <span class="light-red">
                        <?php if (is_array($_option['value'])): ?>
                            <?php echo nl2br(implode("\n", $_option['value'])) ?>
                        <?php else: ?>
                            <?php echo $_option['value'] ?>
                        <?php endif; ?>
                    </span>
                    <?php endforeach; ?><br>
                <?php endif; ?>

然后，我们将使用以下代码确定并显示数量：

<?php echo $this->__('Qty:'); ?> <span class="light-red"><?php echo $this->getQty()?></span>

为了进行价格计算，我们将在静态价格的位置输入以下代码：

<?php if ($canApplyMsrp): ?>

                    <span class="map-cart-sidebar-item"><?php echo $this->__('See price before order confirmation.'); ?></span>

                <?php else: ?>

                    <?php if ($this->helper('tax')->displayCartPriceExclTax() || $this->helper('tax')->displayCartBothPrices()): ?>
                        <?php if ($this->helper('tax')->displayCartBothPrices()): ?>
                            <?php echo $this->__('Excl. Tax'); ?>:
                        <?php endif; ?>
                        <?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?>
                            <?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?>
                        <?php else: ?>
                            <?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()) ?>
                        <?php endif; ?>
                        <?php if (Mage::helper('weee')->getApplied($_item)): ?>
                            <br />
                            <?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?>
                                <small>
                                    <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                        <span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span>
                                    <?php endforeach; ?>
                                </small>
                            <?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
                                <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                    <span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span><br />
                                <?php endforeach; ?>
                            <?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?>
                                <small>
                                    <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                        <span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br />
                                    <?php endforeach; ?>
                                </small>
                            <?php endif; ?>
                            <?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
                                <span class="nobr"><?php echo Mage::helper('weee')->__('Total'); ?>:<br /> <?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?></span>
                            <?php endif; ?>
                        <?php endif; ?>
                    <?php endif; ?>



                    <?php if ($this->helper('tax')->displayCartPriceInclTax() || $this->helper('tax')->displayCartBothPrices()): ?>
                        <?php $_incl = $this->helper('checkout')->getPriceInclTax($_item); ?>
                        <?php if ($this->helper('tax')->displayCartBothPrices()): ?>
                            <br /><?php echo $this->__('Incl. Tax'); ?>:
                        <?php endif; ?>
                        <?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?>
                            <?php echo $this->helper('checkout')->formatPrice($_incl + Mage::helper('weee')->getWeeeTaxInclTax($_item)); ?>
                        <?php else: ?>
                            <?php echo $this->helper('checkout')->formatPrice($_incl-$_item->getWeeeTaxDisposition()) ?>
                        <?php endif; ?>
                        <?php if (Mage::helper('weee')->getApplied($_item)): ?>
                            <br />
                            <?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?>
                                <small>
                                    <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                        <span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span><br />
                                    <?php endforeach; ?>
                                </small>
                            <?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
                                <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                    <span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span>
                                <?php endforeach; ?>
                            <?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?>
                                <small>
                                    <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                        <span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br />
                                    <?php endforeach; ?>
                                </small>
                            <?php endif; ?>
                            <?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
                                <span class="nobr"><?php echo Mage::helper('weee')->__('Total incl. tax'); ?>:<br /> <?php echo $this->helper('checkout')->formatPrice($_incl + Mage::helper('weee')->getWeeeTaxInclTax($_item)); ?></span>
                            <?php endif; ?>
                        <?php endif; ?>
                    <?php endif; ?>

                <?php endif; //Can apply MSRP ?>

最后一步，我们将替换href来删除该URL：

<?php echo $this->getAjaxDeleteUrl() ?>

我已经从实际的default.phtml找到了所有这些代码。您不必自己弄清楚所有逻辑和代码，但是如果仔细查看，您可以在要修改的文件中找到它。

因此，我们的default.phtml文件的最终代码如下所示：

<?php
    $_item = $this->getItem();
    $isVisibleProduct = $_item->getProduct()->isVisibleInSiteVisibility();
    $canApplyMsrp = Mage::helper('catalog')->canApplyMsrp($_item->getProduct(), Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type::TYPE_BEFORE_ORDER_CONFIRM);
?>
<li>
    <div class="cart-item">
        <div class="image"><img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->escapeHtml($this->getProductName()) ?>"></div>
        <div class="item-description">
            <p class="name"><?php if ($this->hasProductUrl()): ?><a href="<?php echo $this->getProductUrl() ?>"><?php endif; ?><?php echo $this->escapeHtml($this->getProductName()) ?><?php if ($this->hasProductUrl()): ?></a><?php endif; ?></p>
            <p>
                <?php if ($_options = $this->getOptionList()):?>
                    <?php foreach ($_options as $_option) : ?>
                        <?php echo $this->escapeHtml($_option['label']) ?>:
                        <span class="light-red">
                        <?php if (is_array($_option['value'])): ?>
                            <?php echo nl2br(implode("\n", $_option['value'])) ?>
                        <?php else: ?>
                            <?php echo $_option['value'] ?>
                        <?php endif; ?>
                    </span>
                    <?php endforeach; ?><br>
                <?php endif; ?>
                <?php echo $this->__('Qty:'); ?> <span class="light-red"><?php echo $this->getQty()?></span>
            </p>
        </div>
        <div class="right">
            <p class="price">
                <?php if ($canApplyMsrp): ?>

                    <span class="map-cart-sidebar-item"><?php echo $this->__('See price before order confirmation.'); ?></span>

                <?php else: ?>

                    <?php if ($this->helper('tax')->displayCartPriceExclTax() || $this->helper('tax')->displayCartBothPrices()): ?>
                        <?php if ($this->helper('tax')->displayCartBothPrices()): ?>
                            <?php echo $this->__('Excl. Tax'); ?>:
                        <?php endif; ?>
                        <?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?>
                            <?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?>
                        <?php else: ?>
                            <?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()) ?>
                        <?php endif; ?>
                        <?php if (Mage::helper('weee')->getApplied($_item)): ?>
                            <br />
                            <?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?>
                                <small>
                                    <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                        <span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span>
                                    <?php endforeach; ?>
                                </small>
                            <?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
                                <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                    <span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span><br />
                                <?php endforeach; ?>
                            <?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?>
                                <small>
                                    <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                        <span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br />
                                    <?php endforeach; ?>
                                </small>
                            <?php endif; ?>
                            <?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
                                <span class="nobr"><?php echo Mage::helper('weee')->__('Total'); ?>:<br /> <?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?></span>
                            <?php endif; ?>
                        <?php endif; ?>
                    <?php endif; ?>



                    <?php if ($this->helper('tax')->displayCartPriceInclTax() || $this->helper('tax')->displayCartBothPrices()): ?>
                        <?php $_incl = $this->helper('checkout')->getPriceInclTax($_item); ?>
                        <?php if ($this->helper('tax')->displayCartBothPrices()): ?>
                            <br /><?php echo $this->__('Incl. Tax'); ?>:
                        <?php endif; ?>
                        <?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?>
                            <?php echo $this->helper('checkout')->formatPrice($_incl + Mage::helper('weee')->getWeeeTaxInclTax($_item)); ?>
                        <?php else: ?>
                            <?php echo $this->helper('checkout')->formatPrice($_incl-$_item->getWeeeTaxDisposition()) ?>
                        <?php endif; ?>
                        <?php if (Mage::helper('weee')->getApplied($_item)): ?>
                            <br />
                            <?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?>
                                <small>
                                    <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                        <span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span><br />
                                    <?php endforeach; ?>
                                </small>
                            <?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
                                <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                    <span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span>
                                <?php endforeach; ?>
                            <?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?>
                                <small>
                                    <?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
                                        <span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br />
                                    <?php endforeach; ?>
                                </small>
                            <?php endif; ?>
                            <?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
                                <span class="nobr"><?php echo Mage::helper('weee')->__('Total incl. tax'); ?>:<br /> <?php echo $this->helper('checkout')->formatPrice($_incl + Mage::helper('weee')->getWeeeTaxInclTax($_item)); ?></span>
                            <?php endif; ?>
                        <?php endif; ?>
                    <?php endif; ?>

                <?php endif; //Can apply MSRP ?>
            </p>
            <a href="<?php echo $this->getAjaxDeleteUrl() ?>" class="remove"><img src="<?php echo $this->getSkinUrl('images/remove.png'); ?>" alt="remove"></a></div>
    </div>
</li>

现在，如果您保存所有这些文件并重新加载主页，您应该会看到类似以下内容：

我们的样式有一些问题，但是HTML渲染与我们所需HTML设计非常接近。现在我们已经完成了顶部的标题部分，接下来是徽标部分。幸运的是，除了我们将在样式文章中进行的样式部分（使徽标中心对齐）之外，这里没有其他事情要做。我们的菜单项似乎也很接近我们的预期，因此我们只需要修改搜索栏，然后修改主滑块即可。

要修改我们的搜索栏，让我们打开模板提示，然后看看哪个部分负责呈现此代码： frontend/rwd/default/template/catalogsearch/form.mini.phtml 。

当前，该文件如下所示：

<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
    <div class="input-box">
        <label for="search"><?php echo $this->__('Search:') ?></label>
        <input id="search" type="search" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" class="input-text required-entry" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" placeholder="<?php echo $this->__('Search entire store here...') ?>" />
        <button type="submit" title="<?php echo $this->__('Search') ?>" class="button search-button"><span><span><?php echo $this->__('Search') ?></span></span></button>
    </div>

    <div id="search_autocomplete" class="search-autocomplete"></div>
    <script type="text/javascript">
    //<![CDATA[
        var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
        searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
    //]]>
    </script>
</form>
If we look at the HTML of the search bar in our HTML design file, it looks like this:
<div class="col-md-3 col-sm-2">
            <div class="search">
            	<input type="text" value="Searching here...">
                <button type="button"></button>
            </div>
        </div>

因此，我们将使用HTML的外部div，并将内部内容替换为动态内容。我们新的form.mini.phtml文件将如下所示：

<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
    <div class="searchContainer">
        <input id="search" type="search" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" class="input-text required-entry" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" placeholder="<?php echo $this->__('Search here...') ?>">
        <button type="submit" class="button search-button"></button>
    </div>
    <div id="search_autocomplete" class="search-autocomplete"></div>
    <script type="text/javascript">
        //<![CDATA[
        var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
        searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
        //]]>
    </script>
</form>

在本文的最后一部分，我们将编辑主滑块。为此，我们将转到CMS> Static Blocks> Add New Block来创建一个新的静态块。我们将这个块命名为“ Homepage Slider” ，并将标识符插入为“ home-slider”，这就是代码将如何找到该块的方式。

现在，我们将从HTML输入滑块代码。

<div align="center" class="shadowImg"><img src="{{skin url='images/menuShdow.png'}}" alt=""></div>
    <div class="clearfix"></div>
    <div class="hom-slider">
        <div class="container">
            <div id="sequence">
                <div class="sequence-prev"><i class="fa fa-angle-left"></i></div>
                <div class="sequence-next"><i class="fa fa-angle-right"></i></div>
                <ul class="sequence-canvas">
                    <li class="animate-in">
                        <div class="flat-image formBottom delay200" data-bottom="true"><img src="{{skin url='images/slider-image-02.png'}}" alt=""></div>
                        <div class=" formLeft delay300 text-center bannerText" >
                            <h1>Ray of light</h1>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <a href="#" class="more">Shop Now</a>
                        </div>
                    </li>
                    <li class="animate-in">
                        <div class=" formLeft delay300 text-center bannerText float-right secondSlideText" >
                            <h1>Ray of light</h1>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <a href="#" class="more">Shop Now</a>
                        </div>
                        <div class="flat-image formBottom delay200 secondSlideImg" data-bottom="true"><img src="{{skin url='images/slider-image-01.png'}}" alt=""></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>

请注意，我们已使用skin_url标记相对于皮肤目录替换了图像源，如下所示：

<img src="{{skin url='images/slider-image-01.png'}}" alt="">

现在，将这些行添加到上一篇文章中创建的header.phtml文件中，在最后一行的上方。 <?php echo $this->getChildHtml('topContainer'); ?> <?php echo $this->getChildHtml('topContainer'); ?> 。

<?php if($this->getIsHomePage()): ?>
    <?php echo $this->getLayout()
        ->createBlock('csms/block')
        ->setBlockId('home-slider')->toHtml(); ?>
<?php  endif; ?>

最后一步是删除当前滑块。为此，请转至CMS页>麦迪逊岛 ，然后从“ 内容”部分中删除样式部分开始之前的所有代码。

保存所有内容并重新加载主页，现在您应该会看到一切顺利。有些样式已关闭，但我们将在单独的样式教程中进行处理。现在，我们只需要关注主页的内容部分，我们将在其中显示最新的产品轮播，然后自定义页脚。我们将在下一个教程中完成所有这些操作，请继续关注！

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

cunjie3951

关注

0
点赞
踩
0

收藏

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

在本系列的上一教程中，我们开始修改主页的标题部分。在本教程中，我们将从改进标题部分开始，然后创建新的滑块CMS块并从模板文件中调用它。由于本文涉及很多内容，因此让我们开始时不要再拖延。由于我们已部分固定顶部割台，因此唯一需要修复的是顶部购物车部分。要自定义标题购物车，首先，我们将尝试找出哪些模板文件负责渲染该零件。为了对此进行分析，我们首先将一些产品添加到购物车中，以便我们进行全...
复制链接

扫一扫