Spanish (Español) translation by Elías Nicolás (you can also view the original English article)
En el tutorial anterior de esta serie, empezamos a modificar la sección de encabezado de la página principal. En este tutorial, comenzaremos donde lo dejamos con la mejora de la sección de encabezado, y luego crearemos el nuevo bloque deslizante de CMS y lo llamaremos de nuestros archivos de plantilla. Como tenemos mucho que cubrir en este artículo, vamos a empezar sin más demora.
Como hemos fijado parcialmente el encabezado superior, lo único que necesita fijar allí es la sección superior del carro. Para personalizar el carro del encabezado, primero trataremos de averiguar qué archivos de plantilla son responsables de representar esa parte. Para analizar esto, primero vamos a añadir algunos productos al carro, para que podamos investigarlo completamente.
A
medida que habilitamos las sugerencias de la plantilla, podemos ver que
el contenedor externo del carro de encabezado proviene de este archivo
de plantilla: frontend/rwd/default/template/checkout/cart/minicart.phtml. Luego, al hacer clic, la parte expandida se
procesa a través de este archivo: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Por último, cada
elemento del carro se procesa a través de este archivo: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.
Vamos a importar todos estos archivos en nuestro tema recién creado, y luego comenzar a modificarlos.
Comencemos el proceso de modificación con el archivo minicart.phtml más externo. Éste es el código actual de este archivo:
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>
|
Ahora antes de comenzar cualquier modificación en él, vamos a comprobar el código de nuestra sección del carro del jefe en nuestro archivo original del HTML. El código se ve así:
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>
|
Por lo tanto, empezaremos a modificar el código de archivo PHP para que sea similar a nuestro código HTML. Sólo usaremos una etiqueta de ancla aquí para envolver el icono del carrito y después mostraremos el contenido del minicart. Por lo tanto, nuestro código se verá así:
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');?> |
Aquí
hemos reemplazado el envoltorio externo del carrito superior, pero
ahora necesitamos editar el contenedor de la sección desplegable. Como ya hemos visto, ese envoltorio viene de frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Vamos a comprobar
el código actual de este archivo:
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>
|
Cuando lo comparamos con nuestra plantilla HTML, hay un par de cosas que debemos hacer. En
primer lugar, dentro de la div minicart-wrapper, vamos a empezar a
implementar nuestro ul, y para cada elemento vamos iterar bajo la
etiqueta li. Al final, mostraremos el total del carrito o indicar que no
hay elementos en el carro. Nuestro código final para este archivo se
verá así:
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>
|
Ahora la parte final que queda es el estilo del artículo de la lista de carros en sí. Como
ya hemos descubierto, el archivo responsable de esa parte es: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.
El código actual de este archivo parece bastante largo y difícil de entender, pero no se deje intimidar. No necesitamos editar todo esto, porque la parte principal del código de archivo es simplemente calcular el precio correcto y otras opciones de producto. Una vez más, revisaremos nuestro código HTML, lo pondremos en este archivo y empezaremos a reemplazar el texto estático por valores dinámicos. Este es el código para cada artículo del carro en nuestro 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>
|
Vamos a reemplazar la etiqueta img con esta:
1 |
<img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->escapeHtml($this->getProductName()) ?>"> |
A continuación, sustituiremos el nombre por el código dinámico:
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; ?> |
Para mostrar las opciones del producto, utilizaremos este código dinámico:
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; ?> |
Entonces determinaremos y mostraremos la cantidad usando este código:
1 |
<?php echo $this->__('Qty:'); ?> <span class="light-red"><?php echo $this->getQty()?></span> |
Para el cálculo del precio, ingresaremos este código en el lugar del precio estático:
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 ?> |
Y como último paso, reemplazaremos el href para eliminar la URL con ésta:
1 |
<?php echo $this->getAjaxDeleteUrl() ?> |
He encontrado todo este código de la actual default.phtml. Usted
no tiene que averiguar toda la lógica y el código por su cuenta, pero
si usted mira de cerca se puede encontrar en el archivo que está
tratando de modificar.
Por lo tanto, el código final de nuestro archivo default.phtml tiene este aspecto:
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> |
Ahora, si guarda todos estos archivos y vuelve a cargar la página principal, debería ver algo como esto:
Tenemos algunos problemas con los estilos, pero la representación del HTML está bastante cerca de nuestro diseño requerido del HTML. Ahora que hemos completado la sección de cabecera superior, la siguiente es la sección de logotipo. Por suerte no hay mucho que hacer allí, excepto la parte de estilo (para hacer el centro del logotipo alineado) que vamos a hacer en el artículo de estilo. Nuestros elementos de menú también parecen muy cerca de lo que esperamos, por lo que sólo tendrá que modificar la barra de búsqueda, y luego el control deslizante principal.
Para
modificar nuestra barra de búsqueda, activemos las sugerencias de la
plantilla y veamos qué parte es responsable de procesar este código:
frontend/rwd/default/template/catalogsearch/form.mini.phtml.
Actualmente, este archivo se ve así:
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>
|
Por lo tanto, utilizaremos las divs externas del HTML y reemplazaremos el contenido interno por el contenido dinámico. Nuestro nuevo archivo form.mini.phtml se verá así:
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>
|
En la última parte de este artículo, editaremos el deslizador principal. Para eso, crearemos un nuevo bloque estático, yendo a CMS > Static Blocks> Add New Block. Nombraremos este Bloque 'Deslizante de la página de inicio', e insertaremos el identificador como 'home-slider', así es como el código será capaz de encontrar este bloque.
Ahora ingresaremos el código del deslizador desde tu 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> |
Tenga
en cuenta que hemos reemplazado el origen de la imagen en relación con
el directorio de skin usando la etiqueta skin_url de esta manera:
1 |
<img src="{{skin url='images/slider-image-01.png'}}" alt=""> |
Ahora
vamos a añadir estas líneas en el archivo header.phtml que creamos en
el último artículo, justo encima de la última línea <?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; ?> |
El último paso es quitar el control deslizante actual. Para ello, vaya a CMS-Pages > Madison Island, y desde la sección Content, quite todo el código hasta el inicio de la sección de estilo.
Guarde todo y vuelva a cargar la página de inicio, y ahora debe ver que todo viene muy bien. Algunos estilos están desactivados, pero trataremos de eso en un tutorial de estilo independiente. Por ahora sólo tenemos que cuidar la sección de contenido de la página de inicio, donde mostraremos un carrusel de productos más reciente, y luego personalizaremos el pie de página. Vamos a hacer todo esto en el próximo tutorial, ¡así que estate atento a ello!
