() translation by (you can also view the original English article)
В предыдущем уроке из этой серии мы начали изменять раздел заголовка домашней страницы. В этом уроке мы начнем с улучшения раздела заголовка, а затем создадим новый блок 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. Это текущий код этого файла:
1 |
<?php
|
2 |
$_cartQty = $this->getSummaryCount(); |
3 |
if(empty($_cartQty)) { |
4 |
$_cartQty = 0; |
5 |
}
|
6 |
?>
|
7 |
|
8 |
<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; ?>"> |
9 |
<span class="icon"></span> |
10 |
<span class="label"><?php echo $this->__('Cart'); ?></span> |
11 |
<span class="count"><?php echo $_cartQty; ?></span> |
12 |
</a>
|
13 |
|
14 |
<div id="header-cart" class="block block-cart skip-content"> |
15 |
<?php echo $this->getChildHtml('minicart_content');?> |
16 |
</div>
|
Теперь, прежде чем мы начнем какие-либо изменения в нем, давайте проверим код нашего раздела корзины заголовка в нашем оригинальном HTML-файле. Код там выглядит так:
1 |
<ul class="option"> |
2 |
<li class="option-cart"><a href="#" class="cart-icon">cart <!--<span class="cart_no">02</span>--></a> |
3 |
<ul class="option-cart-item"> |
4 |
<li>
|
5 |
<div class="cart-item"> |
6 |
<div class="image"><img src="images/products/thum/products-01.png" alt=""></div> |
7 |
<div class="item-description"> |
8 |
<p class="name">Lincoln chair</p> |
9 |
<p>Size: <span class="light-red">One size</span><br> |
10 |
Quantity: <span class="light-red">01</span></p> |
11 |
</div>
|
12 |
<div class="right"> |
13 |
<p class="price">$30.00</p> |
14 |
<a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div> |
15 |
</div>
|
16 |
</li>
|
17 |
<li>
|
18 |
<div class="cart-item"> |
19 |
<div class="image"><img src="images/products/thum/products-02.png" alt=""></div> |
20 |
<div class="item-description"> |
21 |
<p class="name">Lincoln chair</p> |
22 |
<p>Size: <span class="light-red">One size</span><br> |
23 |
Quantity: <span class="light-red">01</span></p> |
24 |
</div>
|
25 |
<div class="right"> |
26 |
<p class="price">$30.00</p> |
27 |
<a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div> |
28 |
</div>
|
29 |
</li>
|
30 |
<li><span class="total">Total <strong>$60.00</strong></span> |
31 |
<button class="checkout" onClick="location.href='checkout.html'">CheckOut</button> |
32 |
</li>
|
33 |
</ul>
|
34 |
</li>
|
35 |
</ul>
|
Итак, мы начнем изменять код файла PHP, чтобы сделать его похожим на наш код HTML. Мы просто воспользуемся здесь тегом привязки, чтобы обернуть значок корзины, и после этого мы покажем содержимое миникарты. Следовательно, наш код будет выглядеть так:
1 |
<a href="<?php echo $this->helper('checkout/cart')->getCartUrl(); ?>" class="cart-icon">cart <!--<span class="cart_no">02</span>--></a> |
2 |
<?php echo $this->getChildHtml('minicart_content');?> |
Здесь мы заменили крайнюю обертку верхней корзины, но теперь нам нужно отредактировать обертку раскрывающегося раздела. Как мы уже видели, эта оболочка происходит из frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Давайте проверим фрагмент этого файла:
1 |
<?php
|
2 |
$_cartQty = $this->getSummaryCount(); |
3 |
if(empty($_cartQty)) { |
4 |
$_cartQty = 0; |
5 |
}
|
6 |
?>
|
7 |
<div id="minicart-error-message" class="minicart-message"></div> |
8 |
<div id="minicart-success-message" class="minicart-message"></div> |
9 |
|
10 |
<div class="minicart-wrapper"> |
11 |
|
12 |
<p class="block-subtitle"> |
13 |
<?php echo $this->__('Recently added item(s)') ?> |
14 |
<a class="close skip-link-close" href="#" title="<?php echo $this->__('Close'); ?>">×</a> |
15 |
</p>
|
16 |
|
17 |
<?php $_items = $this->getRecentItems() ?> |
18 |
<?php $countItems = count($_items); ?> |
19 |
<?php if($countItems): ?> |
20 |
<div>
|
21 |
<ul id="cart-sidebar" class="mini-products-list"> |
22 |
<?php foreach($_items as $_item): ?> |
23 |
<?php echo $this->getItemHtml($_item) ?> |
24 |
<?php endforeach; ?> |
25 |
</ul>
|
26 |
</div>
|
27 |
<script type="text/javascript"> |
28 |
truncateOptions(); |
29 |
decorateList('cart-sidebar', 'none-recursive'); |
30 |
$j('document').ready(function() { |
31 |
var minicartOptions = { |
32 |
formKey: "<?php echo $this->getFormKey();?>" |
33 |
}
|
34 |
var Mini = new Minicart(minicartOptions); |
35 |
Mini.init(); |
36 |
});
|
37 |
</script>
|
38 |
|
39 |
<div id="minicart-widgets"> |
40 |
<?php echo $this->getChildHtml('cart_promotion') ?> |
41 |
</div>
|
42 |
<div class="block-content"> |
43 |
<p class="subtotal"> |
44 |
<?php if ($this->canApplyMsrp()): ?> |
45 |
<span class="map-cart-sidebar-total"><?php echo $this->__('ORDER TOTAL WILL BE DISPLAYED BEFORE YOU SUBMIT THE ORDER'); ?></span> |
46 |
<?php else: ?> |
47 |
<span class="label"><?php echo $this->__('Cart Subtotal:') ?></span> <?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?> |
48 |
<?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?> |
49 |
<br />(<?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?> <?php echo Mage::helper('tax')->getIncExcText(true) ?>) |
50 |
<?php endif; ?> |
51 |
<?php endif; ?> |
52 |
</p>
|
53 |
</div>
|
54 |
|
55 |
|
56 |
<div class="minicart-actions"> |
57 |
<?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?> |
58 |
<ul class="checkout-types minicart"> |
59 |
<?php echo $this->getChildHtml('extra_actions') ?> |
60 |
<li>
|
61 |
<a title="<?php echo $this->__('Checkout') ?>" class="button checkout-button" href="<?php echo $this->getCheckoutUrl() ?>"> |
62 |
<?php echo $this->__('Checkout') ?> |
63 |
</a>
|
64 |
</li>
|
65 |
</ul>
|
66 |
<?php endif ?> |
67 |
<a class="cart-link" href="<?php echo $this->getUrl('checkout/cart'); ?>"> |
68 |
<?php echo $this->__('View Shopping Cart'); ?> |
69 |
</a>
|
70 |
</div>
|
71 |
|
72 |
<?php else: ?> |
73 |
<p class="empty"><?php echo $this->__('You have no items in your shopping cart.') ?></p> |
74 |
|
75 |
<?php endif ?> |
76 |
</div>
|
Когда мы сравниваем его с нашим HTML-шаблоном, нам необходимо сделать несколько вещей. Прежде всего, внутри div миникарты мы начнем реализовывать нашу ul, и для каждого элемента мы будем выполнять итерацию под тегом li. В конце мы покажем общую сумму корзины или укажем, что в корзине нет товаров. Наш окончательный код для этого файла будет выглядеть так:
1 |
<?php
|
2 |
$_cartQty = $this->getSummaryCount(); |
3 |
if(empty($_cartQty)) { |
4 |
$_cartQty = 0; |
5 |
}
|
6 |
?>
|
7 |
<div id="minicart-error-message" class="minicart-message"></div> |
8 |
<div id="minicart-success-message" class="minicart-message"></div> |
9 |
|
10 |
<?php $_items = $this->getRecentItems() ?> |
11 |
<?php $countItems = count($_items); ?> |
12 |
|
13 |
<div class="minicart-wrapper"> |
14 |
<ul class="option-cart-item"> |
15 |
<?php if($countItems): ?> |
16 |
<?php foreach($_items as $_item): ?> |
17 |
<?php echo $this->getItemHtml($_item) ?> |
18 |
<?php endforeach; ?> |
19 |
<li>
|
20 |
<span class="total"> |
21 |
<?php if ($this->canApplyMsrp()): ?> |
22 |
<span class="map-cart-sidebar-total"><?php echo $this->__('ORDER TOTAL WILL BE DISPLAYED BEFORE YOU SUBMIT THE ORDER'); ?></span> |
23 |
<?php else: ?> |
24 |
<?php echo $this->__('Cart Subtotal:') ?> <strong></strong><?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?> |
25 |
<?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?> |
26 |
<br />(<?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?> <?php echo Mage::helper('tax')->getIncExcText(true) ?>) |
27 |
<?php endif; ?> |
28 |
<?php endif; ?> |
29 |
</span>
|
30 |
<button class="checkout" onClick="location.href='<?php echo $this->getCheckoutUrl() ?>'">CheckOut</button> |
31 |
</li>
|
32 |
<?php else: ?> |
33 |
<p class="empty"><?php echo $this->__('You have no items in your shopping cart.') ?></p> |
34 |
<?php endif ?> |
35 |
</ul>
|
36 |
</div>
|
Теперь последняя оставшаяся часть - это стилизация самого элемента списка корзины. Как мы уже выяснили, файл, отвечающий за эту часть: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.
Код этого файла выглядит довольно длинным и трудным для понимания, но не пугайтесь. Нам не нужно редактировать все это, потому что основная часть кода - это расчет правильной цены и других вариантов продукта. Опять же, мы проверим наш HTML-код, поместим его в этот файл и начнем заменять статический текст динамическими значениями. Это код для каждого элемента корзины в нашем HTML:
1 |
<li>
|
2 |
<div class="cart-item"> |
3 |
<div class="image"><img src="images/products/thum/products-01.png" alt=""></div> |
4 |
<div class="item-description"> |
5 |
<p class="name">Lincoln chair</p> |
6 |
<p>Size: <span class="light-red">One size</span><br> |
7 |
Quantity: <span class="light-red">01</span></p> |
8 |
</div>
|
9 |
<div class="right"> |
10 |
<p class="price">$30.00</p> |
11 |
<a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div> |
12 |
</div>
|
13 |
</li>
|
Мы заменим тег img следующим:
1 |
<img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->escapeHtml($this->getProductName()) ?>"> |
Далее мы заменим имя на динамический код:
1 |
<?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; ?> |
Чтобы отобразить параметры продукта, мы будем использовать этот динамический код:
1 |
<?php if ($_options = $this->getOptionList()):?> |
2 |
<?php foreach ($_options as $_option) : ?> |
3 |
<?php echo $this->escapeHtml($_option['label']) ?>: |
4 |
<span class="light-red"> |
5 |
<?php if (is_array($_option['value'])): ?> |
6 |
<?php echo nl2br(implode("\n", $_option['value'])) ?> |
7 |
<?php else: ?> |
8 |
<?php echo $_option['value'] ?> |
9 |
<?php endif; ?> |
10 |
</span>
|
11 |
<?php endforeach; ?><br> |
12 |
<?php endif; ?> |
Затем мы определим и покажем количество, используя этот код:
1 |
<?php echo $this->__('Qty:'); ?> <span class="light-red"><?php echo $this->getQty()?></span> |
Для расчета цены мы введем этот код вместо статической цены:
1 |
<?php if ($canApplyMsrp): ?> |
2 |
|
3 |
<span class="map-cart-sidebar-item"><?php echo $this->__('See price before order confirmation.'); ?></span> |
4 |
|
5 |
<?php else: ?> |
6 |
|
7 |
<?php if ($this->helper('tax')->displayCartPriceExclTax() || $this->helper('tax')->displayCartBothPrices()): ?> |
8 |
<?php if ($this->helper('tax')->displayCartBothPrices()): ?> |
9 |
<?php echo $this->__('Excl. Tax'); ?>: |
10 |
<?php endif; ?> |
11 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?> |
12 |
<?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?> |
13 |
<?php else: ?> |
14 |
<?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()) ?> |
15 |
<?php endif; ?> |
16 |
<?php if (Mage::helper('weee')->getApplied($_item)): ?> |
17 |
<br /> |
18 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?> |
19 |
<small>
|
20 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
21 |
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span> |
22 |
<?php endforeach; ?> |
23 |
</small>
|
24 |
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?> |
25 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
26 |
<span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span><br /> |
27 |
<?php endforeach; ?> |
28 |
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?> |
29 |
<small>
|
30 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
31 |
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br /> |
32 |
<?php endforeach; ?> |
33 |
</small>
|
34 |
<?php endif; ?> |
35 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?> |
36 |
<span class="nobr"><?php echo Mage::helper('weee')->__('Total'); ?>:<br /> <?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?></span> |
37 |
<?php endif; ?> |
38 |
<?php endif; ?> |
39 |
<?php endif; ?> |
40 |
|
41 |
|
42 |
|
43 |
<?php if ($this->helper('tax')->displayCartPriceInclTax() || $this->helper('tax')->displayCartBothPrices()): ?> |
44 |
<?php $_incl = $this->helper('checkout')->getPriceInclTax($_item); ?> |
45 |
<?php if ($this->helper('tax')->displayCartBothPrices()): ?> |
46 |
<br /><?php echo $this->__('Incl. Tax'); ?>: |
47 |
<?php endif; ?> |
48 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?> |
49 |
<?php echo $this->helper('checkout')->formatPrice($_incl + Mage::helper('weee')->getWeeeTaxInclTax($_item)); ?> |
50 |
<?php else: ?> |
51 |
<?php echo $this->helper('checkout')->formatPrice($_incl-$_item->getWeeeTaxDisposition()) ?> |
52 |
<?php endif; ?> |
53 |
<?php if (Mage::helper('weee')->getApplied($_item)): ?> |
54 |
<br /> |
55 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?> |
56 |
<small>
|
57 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
58 |
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span><br /> |
59 |
<?php endforeach; ?> |
60 |
</small>
|
61 |
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?> |
62 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
63 |
<span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span> |
64 |
<?php endforeach; ?> |
65 |
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?> |
66 |
<small>
|
67 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
68 |
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br /> |
69 |
<?php endforeach; ?> |
70 |
</small>
|
71 |
<?php endif; ?> |
72 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?> |
73 |
<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> |
74 |
<?php endif; ?> |
75 |
<?php endif; ?> |
76 |
<?php endif; ?> |
77 |
|
78 |
<?php endif; //Can apply MSRP ?> |
И в качестве последнего шага мы заменим href для удаления URL следующим:
1 |
<?php echo $this->getAjaxDeleteUrl() ?> |
Я нашел весь этот код из фактического default.phtml. Вам не нужно разбираться со всей логикой и кодом самостоятельно, но если вы присмотритесь, вы сможете найти его в файле, который вы пытаетесь изменить.
Итак, окончательный код нашего файла default.phtml выглядит так:
1 |
<?php
|
2 |
$_item = $this->getItem(); |
3 |
$isVisibleProduct = $_item->getProduct()->isVisibleInSiteVisibility(); |
4 |
$canApplyMsrp = Mage::helper('catalog')->canApplyMsrp($_item->getProduct(), Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type::TYPE_BEFORE_ORDER_CONFIRM); |
5 |
?>
|
6 |
<li>
|
7 |
<div class="cart-item"> |
8 |
<div class="image"><img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->escapeHtml($this->getProductName()) ?>"></div> |
9 |
<div class="item-description"> |
10 |
<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> |
11 |
<p>
|
12 |
<?php if ($_options = $this->getOptionList()):?> |
13 |
<?php foreach ($_options as $_option) : ?> |
14 |
<?php echo $this->escapeHtml($_option['label']) ?>: |
15 |
<span class="light-red"> |
16 |
<?php if (is_array($_option['value'])): ?> |
17 |
<?php echo nl2br(implode("\n", $_option['value'])) ?> |
18 |
<?php else: ?> |
19 |
<?php echo $_option['value'] ?> |
20 |
<?php endif; ?> |
21 |
</span>
|
22 |
<?php endforeach; ?><br> |
23 |
<?php endif; ?> |
24 |
<?php echo $this->__('Qty:'); ?> <span class="light-red"><?php echo $this->getQty()?></span> |
25 |
</p>
|
26 |
</div>
|
27 |
<div class="right"> |
28 |
<p class="price"> |
29 |
<?php if ($canApplyMsrp): ?> |
30 |
|
31 |
<span class="map-cart-sidebar-item"><?php echo $this->__('See price before order confirmation.'); ?></span> |
32 |
|
33 |
<?php else: ?> |
34 |
|
35 |
<?php if ($this->helper('tax')->displayCartPriceExclTax() || $this->helper('tax')->displayCartBothPrices()): ?> |
36 |
<?php if ($this->helper('tax')->displayCartBothPrices()): ?> |
37 |
<?php echo $this->__('Excl. Tax'); ?>: |
38 |
<?php endif; ?> |
39 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?> |
40 |
<?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?> |
41 |
<?php else: ?> |
42 |
<?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()) ?> |
43 |
<?php endif; ?> |
44 |
<?php if (Mage::helper('weee')->getApplied($_item)): ?> |
45 |
<br /> |
46 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?> |
47 |
<small>
|
48 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
49 |
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span> |
50 |
<?php endforeach; ?> |
51 |
</small>
|
52 |
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?> |
53 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
54 |
<span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span><br /> |
55 |
<?php endforeach; ?> |
56 |
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?> |
57 |
<small>
|
58 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
59 |
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br /> |
60 |
<?php endforeach; ?> |
61 |
</small>
|
62 |
<?php endif; ?> |
63 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?> |
64 |
<span class="nobr"><?php echo Mage::helper('weee')->__('Total'); ?>:<br /> <?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?></span> |
65 |
<?php endif; ?> |
66 |
<?php endif; ?> |
67 |
<?php endif; ?> |
68 |
|
69 |
|
70 |
|
71 |
<?php if ($this->helper('tax')->displayCartPriceInclTax() || $this->helper('tax')->displayCartBothPrices()): ?> |
72 |
<?php $_incl = $this->helper('checkout')->getPriceInclTax($_item); ?> |
73 |
<?php if ($this->helper('tax')->displayCartBothPrices()): ?> |
74 |
<br /><?php echo $this->__('Incl. Tax'); ?>: |
75 |
<?php endif; ?> |
76 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?> |
77 |
<?php echo $this->helper('checkout')->formatPrice($_incl + Mage::helper('weee')->getWeeeTaxInclTax($_item)); ?> |
78 |
<?php else: ?> |
79 |
<?php echo $this->helper('checkout')->formatPrice($_incl-$_item->getWeeeTaxDisposition()) ?> |
80 |
<?php endif; ?> |
81 |
<?php if (Mage::helper('weee')->getApplied($_item)): ?> |
82 |
<br /> |
83 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?> |
84 |
<small>
|
85 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
86 |
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span><br /> |
87 |
<?php endforeach; ?> |
88 |
</small>
|
89 |
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?> |
90 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
91 |
<span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span> |
92 |
<?php endforeach; ?> |
93 |
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?> |
94 |
<small>
|
95 |
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?> |
96 |
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br /> |
97 |
<?php endforeach; ?> |
98 |
</small>
|
99 |
<?php endif; ?> |
100 |
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?> |
101 |
<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> |
102 |
<?php endif; ?> |
103 |
<?php endif; ?> |
104 |
<?php endif; ?> |
105 |
|
106 |
<?php endif; //Can apply MSRP ?> |
107 |
</p> |
108 |
<a href="<?php echo $this->getAjaxDeleteUrl() ?>" class="remove"><img src="<?php echo $this->getSkinUrl('images/remove.png'); ?>" alt="remove"></a></div> |
109 |
</div> |
110 |
</li> |
Теперь, если вы сохраните все эти файлы и перезагрузите домашнюю страницу, вы должны увидеть что-то вроде этого:
У нас есть некоторые проблемы со стилями, но рендеринг HTML довольно близок к нашему необходимому дизайну HTML. Теперь, когда мы завершили верхний раздел заголовка, следующий раздел - логотип. К счастью, в этом нет ничего особенного, кроме стилизации (чтобы выровнять логотип по центру), которую мы сделаем в статье о стилизации. Наши пункты меню также кажутся довольно близкими к тому, что мы ожидаем, поэтому нам просто нужно изменить строку поиска и основной слайдер.
Чтобы изменить нашу панель поиска, давайте включим подсказки шаблона и посмотрим, какая часть отвечает за отображение этого кода: frontend/rwd/default/template/catalogsearch/form.mini.phtml.
В настоящее время этот файл выглядит так:
1 |
<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get"> |
2 |
<div class="input-box"> |
3 |
<label for="search"><?php echo $this->__('Search:') ?></label> |
4 |
<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...') ?>" /> |
5 |
<button type="submit" title="<?php echo $this->__('Search') ?>" class="button search-button"><span><span><?php echo $this->__('Search') ?></span></span></button> |
6 |
</div>
|
7 |
|
8 |
<div id="search_autocomplete" class="search-autocomplete"></div> |
9 |
<script type="text/javascript"> |
10 |
//<![CDATA[ |
11 |
var searchForm = new Varien.searchForm('search_mini_form', 'search', ''); |
12 |
searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete'); |
13 |
//]]>
|
14 |
</script>
|
15 |
</form>
|
16 |
If we look at the HTML of the search bar in our HTML design file, it looks like this: |
17 |
<div class="col-md-3 col-sm-2"> |
18 |
<div class="search"> |
19 |
<input type="text" value="Searching here..."> |
20 |
<button type="button"></button> |
21 |
</div>
|
22 |
</div>
|
Итак, мы будем использовать внешние элементы HTML и заменять внутреннее содержимое динамическим содержимым. Наш новый файл form.mini.phtml будет выглядеть так:
1 |
<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get"> |
2 |
<div class="searchContainer"> |
3 |
<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...') ?>"> |
4 |
<button type="submit" class="button search-button"></button> |
5 |
</div>
|
6 |
<div id="search_autocomplete" class="search-autocomplete"></div> |
7 |
<script type="text/javascript"> |
8 |
//<![CDATA[ |
9 |
var searchForm = new Varien.searchForm('search_mini_form', 'search', ''); |
10 |
searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete'); |
11 |
//]]>
|
12 |
</script>
|
13 |
</form>
|
В последней части этой статьи мы отредактируем основной слайдер. Для этого мы создадим новый статический блок, перейдя в CMS > Static Blocks > Add New Block. Мы назовем этот блок "Слайдер домашней страницы", и мы добавим идентификатор как "домашний слайдер" - так код сможет найти этот блок.
Теперь мы введем код слайдера из нашего HTML.
1 |
<div align="center" class="shadowImg"><img src="{{skin url='images/menuShdow.png'}}" alt=""></div> |
2 |
<div class="clearfix"></div> |
3 |
<div class="hom-slider"> |
4 |
<div class="container"> |
5 |
<div id="sequence"> |
6 |
<div class="sequence-prev"><i class="fa fa-angle-left"></i></div> |
7 |
<div class="sequence-next"><i class="fa fa-angle-right"></i></div> |
8 |
<ul class="sequence-canvas"> |
9 |
<li class="animate-in"> |
10 |
<div class="flat-image formBottom delay200" data-bottom="true"><img src="{{skin url='images/slider-image-02.png'}}" alt=""></div> |
11 |
<div class=" formLeft delay300 text-center bannerText" > |
12 |
<h1>Ray of light</h1> |
13 |
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> |
14 |
<a href="#" class="more">Shop Now</a> |
15 |
</div>
|
16 |
</li>
|
17 |
<li class="animate-in"> |
18 |
<div class=" formLeft delay300 text-center bannerText float-right secondSlideText" > |
19 |
<h1>Ray of light</h1> |
20 |
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> |
21 |
<a href="#" class="more">Shop Now</a> |
22 |
</div>
|
23 |
<div class="flat-image formBottom delay200 secondSlideImg" data-bottom="true"><img src="{{skin url='images/slider-image-01.png'}}" alt=""></div> |
24 |
</li>
|
25 |
</ul>
|
26 |
</div>
|
27 |
</div>
|
28 |
</div>
|
29 |
<div class="clearfix"></div> |
Обратите внимание, что мы заменили источник изображения относительно каталога скина с помощью тега skin_url следующим образом:
1 |
<img src="{{skin url='images/slider-image-01.png'}}" alt=""> |
Теперь мы добавим эти строки в файл header.phtml, который мы создали в прошлой статье, чуть выше последней строки <?php echo $this->getChildHtml('topContainer'); ?>.
1 |
<?php if($this->getIsHomePage()): ?> |
2 |
<?php echo $this->getLayout() |
3 |
->createBlock('csms/block') |
4 |
->setBlockId('home-slider')->toHtml(); ?> |
5 |
<?php endif; ?> |
Последний шаг - удалить текущий слайдер. Для этого перейдите на CMS-Pages> Madison Island и из раздела Content удалите весь код до начала раздела style.
Сохраните все и перезагрузите домашнюю страницу, и теперь вы должны увидеть, что все идет очень хорошо. Некоторые стили отключены, но об этом мы поговорим в отдельном руководстве по стилю. На данный момент нам просто нужно позаботиться о разделе содержимого домашней страницы, где мы покажем карусель новейших продуктов, а затем настроим нижний колонтитул. Мы сделаем все это в следующем уроке, так что следите за обновлениями!
