Czech (Čeština) translation by Tereza Foretová (you can also view the original English article)
V předchozím kurzu v této sérii jsme začali, úprava sekce záhlaví z domovské stránky. V tomto kurzu začneme, kde jsme přestali sekce se zlepšením záhlaví a potom vytvoříme nový jezdec CMS bloku a ji volat z našich souborů šablon. Máme hodně pokrýt v tomto článku, začněme bez dalšího odkladu.
Jak jsme částečně pevné záhlaví nahoře, jediná věc, která potřebuje nápravu tam je sekce horní košík. Chcete-li upravit záhlaví vozík, nejprve zkusíme zjistit soubory šablon, které jsou zodpovědné za vykreslování části. Chcete-li analyzovat to, tak nejprve přidat některé produkty do košíku, tak, že abychom mohli plně prozkoumat.
Jak jsme povolit odkazy na šablony, můžeme vidět, že záhlaví vozík vnější kontejner přichází z tohoto souboru šablony: frontend/rwd/default/template/checkout/cart/minicart.phtml. A pak na tlačítko, rozšířenou část je vykreslen pomocí tohoto souboru: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Konečně, každý košík položka je vykreslena prostřednictvím tohoto souboru: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.
Importovat všechny tyto soubory do naší nově vytvořené téma a pak začít jejich úprav.
Začněme procesu modifikace s vnější minicart.phtml souboru. To je aktuální kód tohoto souboru:
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>
|
Teď dříve, než začneme všechny změny v něm, zkontrolujte kód naší sekce záhlaví vozík v našem původním souboru HTML. Existuje kód vypadá takto:
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>
|
Tak začneme úpravou souboru PHP kód aby se podobně jako naše HTML kódu. Používáme značku ukotvení bude jen zabalit ikonu košíku a poté vám ukážeme, minicart obsah. Proto náš kód bude vypadat takto:
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');?> |
Zde jsme nahradili vnější obal vrchní košík, ale nyní musíme upravit rozevírací část obálky. Jak jsme již viděli, že obálka přichází z frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Pojďme zkontrolovat aktuální kód tohoto souboru:
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>
|
Když porovnáváme jej na našich HTML šablonu, existuje několik věcí, které musíme udělat. Za prvé uvnitř div minicart obálky, můžeme vám začít provádět naši ul, a u každé položky jsme bude iterovat pod značku li. Na konci můžeme vám Zobrazit košík celkem nebo označuje, že neexistují žádné položky v košíku. Naše konečné kód pro tento soubor bude vypadat takto:
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>
|
Nyní je závěrečná část, která je ponechána styl samotné položky seznamu košíku. Jak jsme již přišel, je zodpovědný za tuto část soubor: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.
Aktuální kód tohoto souboru vypadá jako docela dlouhé a těžko pochopitelné, ale nenechte se zastrašit. Nepotřebujeme k úpravám, protože hlavní část souboru kódu je jen výpočet správnou cenu a dalších možnosti produktů. Opět dáme zkontrolovat náš kód HTML, je v tomto souboru a začít statický text nahraďte dynamické hodnoty. Toto je kód pro každou položku vozík v našem 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>
|
Nahradíme img tag s tímhle:
1 |
<img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->escapeHtml($this->getProductName()) ?>"> |
Dále budeme nahradit název s dynamickým kódem:
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; ?> |
Chcete-li zobrazit možnosti produktu, budeme používat tento dynamický kód:
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; ?> |
Pak zjistit a zobrazit množství pomocí tohoto kódu:
1 |
<?php echo $this->__('Qty:'); ?> <span class="light-red"><?php echo $this->getQty()?></span> |
Pro výpočet ceny zadáme tento kód namísto statické cena:
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 ?> |
A jako poslední krok, nahradíme href pro odebrání adresy URL s tímhle:
1 |
<?php echo $this->getAjaxDeleteUrl() ?> |
Našel jsem tento kód ze skutečné default.phtml. Není nutné zjistit všechny logiku a kód sami, ale pokud se podíváte pozorně, najdete ji v souboru, který chcete upravit.
Takže konečný kód naší default.phtml souboru vypadá takto:
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> |
Teď je-li tyto soubory uložit a znovu načíst domovskou stránku, měli byste vidět něco takového:
Máme nějaké problémy s styly, ale vykreslování HTML je docela blízko naší požadované HTML návrhu. Teď, když jsme dokončili sekci záhlaví nahoře, další je logo sekce. Naštěstí není nic moc co tam s výjimkou části styling (aby zarovnání na střed loga), uděláme v článku styling. Naše položky nabídky také zdá se, že dost blízko na to co jsme očekávali, takže budeme muset upravit panel Hledat a pak hlavní jezdce.
Chcete-li změnit náš vyhledávací panel, pojďme zapnout odkazy na šablony a zjistit, která část je zodpovědný za vykreslování tento kód: frontend/rwd/default/template/catalogsearch/form.mini.phtml.
V současnosti tento soubor vypadá takto:
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>
|
Tak můžeme použít vnější DIV HTML a nahradit vnitřní obsah s dynamickým obsahem. Náš nový form.mini.phtml soubor bude vypadat takto:
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>
|
V poslední části tohoto článku budeme upravovat hlavní jezdce. Za to, že vytvoříme nový statický blok, tím, že půjdete do CMS video statické bloky video přidat nový blok. Bude se jmenovat tento blok "Homepage jezdec" a my vám vložit identifikátor jako "home jezdec" — to je, jak bude schopen najít tento blok kódu.
Teď bude vstoupíme jezdce kód z našich 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> |
Všimněte si, že jsme nahradili zdroj bitové kopie v adresáři kůže pomocí skin_url značky jako je tento:
1 |
<img src="{{skin url='images/slider-image-01.png'}}" alt=""> |
Teď budeme přidávat tyto řádky v souboru header.phtml, jsme vytvořili v posledním článku, přímo nad posledním řádku <? php echo $this-> getChildHtml('topContainer');? video.
1 |
<?php if($this->getIsHomePage()): ?> |
2 |
<?php echo $this->getLayout() |
3 |
->createBlock('csms/block') |
4 |
->setBlockId('home-slider')->toHtml(); ?> |
5 |
<?php endif; ?> |
Posledním krokem je odstranit současné jezdce. Chcete-li to, jít na stránky, CMS video Madison ostrov a z obsahu sekce, odeberte veškerý kód až do zahájení části styl.
Vše uložit a znovu načíst domovskou stránku a nyní měli vidět to všem daří velmi dobře. Některé styly jsou vypnuté, ale poradíme si s tím v kurzu odlišným vzhledem. Prozatím se jen musíme postarat o části obsah domovské stránky, kde vám ukážeme nejnovější produkty kolotoč, a pak můžeme upravit zápatí. Uděláme to vše v dalším kurzu, takže stay tuned pro to!
