Slovak (Slovenčina) translation by Tereza Foretová (you can also view the original English article)
V predchádzajúcich tutoriál v tejto sérii, sme začali, úprava časti hlavičke domovskú stránku. V tomto tutoriále, začneme, kde sme prestali so zlepšením časti hlavičke, a potom vytvoríme nový jazdec CMS blokovať a volanie z nášho súbory šablón. Ako máme veľa na pokrytie v tomto článku, začnime bez ďalšieho odkladu.
Ako máme čiastočne pevnú hornej časti stránky, jediné, ktoré potrebuje stanovením tam je sekcia horný košík. Ak chcete prispôsobiť hlavičky košík, najprv pokúsime zistiť šablóny súborov, ktoré sú zodpovedné za vykresľovanie časť. Analyzovať to, poďme najprv pridať niektoré produkty do košíka, tak, aby sme ho mohli plne prešetriť.
Ako sme umožnili šablóny tipy, môžeme vidieť, že hlavička košíka vonkajšou nádobou pochádza tento súbor šablóny: frontend/rwd/default/template/checkout/cart/minicart.phtml. A potom na tlačidlo, rozšírená časť vykresľuje cez tento súbor: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Napokon, každá položka košík vykresľuje cez tento súbor: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.
Importovať všetky tieto súbory do našej novo vytvorené tému a potom začať modifikuje.
Začnime súbore najvzdialenejších minicart.phtml zmene procesu. Toto je aktuálny kód tohto súboru:
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>
|
Teraz skôr, ako začneme akékoľvek zmeny v tom, Poďme skontrolovať kód sekcii Hlavička košíka v našej pôvodný súbor HTML. Kód tam vyzerá 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že začneme úpravou kód PHP súbor aby bolo podobné ako HTML kód. Budeme len používať značku kotvou wrap ikonu košíka a potom ukážeme minicart obsahu. Preto náš kód bude vyzerať 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');?> |
Tu sme nahradili najvzdialenejších wrapper horný košík, ale teraz musíme upraviť drop-dole časti obalu. Ako sme už videli, že obal je z frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Poďme skontrolovať aktuálny kód tohto súboru:
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>
|
Keď to porovnáme naše šablóny HTML, existuje pár vecí, ktoré musíme urobiť. Po prvé, vnútri minicart-wrapper div, začneme realizáciu našich ul a pre každú položku My budem opakovať podľa li značku. Na konci, ukážeme košíka celkové, alebo naznačujú, že neexistujú žiadne položky v košíku. Náš konečný kód pre tento súbor bude vyzerať 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>
|
Teraz v záverečnej časti, ktorá je ponechaná je štýl položky zoznamu košík, sám. Ako sme už vymyslel, je zodpovedná za tú časť súboru: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.
Aktuálny kód tohto súboru vyzerá pomerne dlhé a ťažké pochopiť, ale nenechajte sa zastrašiť. Nebudeme musieť upraviť toto všetko, pretože Hlavná časť súboru kód len počíta za správnu cenu a ďalšie možnosti produktu. Opäť budeme kontrolovať náš HTML kód, ju v tomto súbore, a začne nahradzovať statický text s dynamické hodnoty. To je kód pre každú položku košík v našich 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>
|
My budem nahradiť img tag:
1 |
<img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->escapeHtml($this->getProductName()) ?>"> |
Názov budem nahradiť ďalej dynamický kód:
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; ?> |
Zobrazte možnosti produktov, použijeme 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; ?> |
Potom budeme zistiť a zobraziť množstvo pomocou tohto kódu:
1 |
<?php echo $this->__('Qty:'); ?> <span class="light-red"><?php echo $this->getQty()?></span> |
Pre cenová kalkulácia, my uvidíme zadajte tento kód namiesto statickej 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 ako posledný krok vám vymeníme href odstrániť URL s tymto:
1 |
<?php echo $this->getAjaxDeleteUrl() ?> |
Našiel som tento kód od skutočného default.phtml. Nemusíte zistiť logiku a kód na vlastnú päsť, ale ak sa pozriete pozorne môžete nájsť v súbore, ktorý sa pokúšate upraviť.
Takže, hotového kódu náš default.phtml súbor vyzerá 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> |
Teraz, ak všetky tieto súbory uložiť a načítať domovskú stránku, mali by ste vidieť niečo takéto:
Máme nejaké problémy so štýlmi, ale HTML rendering je dosť blízko našich konštrukčných HTML. Teraz, keď sme dokončili top hlavičky, ďalšie je v časti logo. Našťastie nie je nič moc robiť tam, okrem časti styling (aby logo centrovaný) ktoré budeme robiť v článku styling. Naše menu položky tiež zrejme dosť blízko na to, čo očakávame, takže sme jednoducho potrebné zmeniť vyhľadávací panel a hlavné jazdca.
Upraviť náš vyhľadávací panel, poďme zapnúť šablóny tipy, a vidieť, ktorá časť je zodpovedné za vykresľovanie tento kód: frontend/rwd/default/template/catalogsearch/form.mini.phtml.
V súčasnosti tento súbor vyzerá 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že, budeme používať vonkajšie divs HTML, a nahradiť vnútorný obsah s dynamickým obsahom. Náš nový súbor form.mini.phtml bude vyzerať 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 poslednej časti tohto článku, sme upraviť hlavný jazdca. Za to, že vytvoríme nový statický blok, prechodom na CMS > statické bloky > pridajte nový blok. My budem názov tohto bloku "Domovskú stránku jazdec" a budete vložíme identifikátor ako "home-jazdec"-to je, ako budú môcť nájsť tento blok kódu.
Teraz my uvidíme zadajte kód jazdec z nášho 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šimnite si, že sme nahradili zdrojového obrazu k adresßru pokožky pomocou skin_url tag takhle:
1 |
<img src="{{skin url='images/slider-image-01.png'}}" alt=""> |
Teraz budeme pridávať tieto riadky v súbore header.phtml sme vytvorili v poslednom článku, tesne nad poslednom riadku <? 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; ?> |
Posledný krok je odstrániť súčasné jazdca. To urobiť, prejdite na CMS-stránky > Madison Island, a z časti obsahu, odstráňte celý kód až do začiatku časti štýl.
Uložiť všetko a reload na domovskej stránke, a teraz ste mali vidieť všetky prichádza spolu veľmi dobre. Niektoré štýly sú vypnuté, ale budeme zaoberať ktoré v samostatných styling tutorial. Teraz musíme sa postarať o sekcii obsah domovskej stránky, kde vám ukážeme najnovšie produkty kolotoč a potom prispôsobíme päty. Budeme robiť to v budúcom tutoriále, takže zostaňte naladení na to!
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Sign up
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.
