Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)
Ya que preparamos el escenario de bootstrapping en el artículo anterior, es el momento de profundizar en el código y comenzar a hacer cambios. Como es obvio, comenzaremos el proceso de edición desde la página principal.
En este primer artículo vamos a editar parcialmente la sección del encabezado. Editaremos los archivos de los contenedores predeterminados y el archivo header.phtml, y luego comenzaremos a editar los diferentes componentes del encabezado como la moneda, el selector del idioma, etc. Sin más preámbulos, empecemos a editar.
En primer lugar, habilitaremos las sugerencias de la plantilla desde el panel de administración, yendo a Sistema > Desarrollador > Depurar, y mientras lo haces nos aseguraremos de que el alcance de la configuración actual está establecido en el Sitio web principal. Al habilitar las sugerencias de la plantilla, sabremos cuál plantilla es la responsable de los estilos del encabezado. Así es como se verá la página principal cuando las sugerencias de la plantilla estén activadas.
Como puedes ver, el contenedor más externo en el que se incluyen todos los demás archivos proviene de frontend/rwd/default/template/page/1column.phtml, que es del tema RWD, ya que hemos heredado nuestro tema de este tema predeterminado. En lugar de editar este archivo directamente en el tema RWD, crearemos una carpeta similar en nuestro tema vstyle en esta ubicación: frontend/tutsplus/vstyle/template/page. Luego copiaremos estos archivos en esta carpeta y los editaremos allí. Por lo tanto, iremos al directorio frontend/rwd/default/template/page y copiaremos los siguientes archivos en esta carpeta recién creada 1column.phtml, 2column-left.phtml, 2column-right.phtml y 3column.phtml.
Si nos fijamos en el código del archivo 1-column.phtml, es algo así:
1 |
<!DOCTYPE html>
|
2 |
|
3 |
<!--[if lt IE 7 ]> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie6"> <![endif]--> |
4 |
<!--[if IE 7 ]> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie7"> <![endif]--> |
5 |
<!--[if IE 8 ]> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie8"> <![endif]--> |
6 |
<!--[if IE 9 ]> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie9"> <![endif]--> |
7 |
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js"> <!--<![endif]--> |
8 |
|
9 |
<head>
|
10 |
<?php echo $this->getChildHtml('head') ?> |
11 |
</head>
|
12 |
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>> |
13 |
<?php echo $this->getChildHtml('after_body_start') ?> |
14 |
<div class="wrapper"> |
15 |
<?php echo $this->getChildHtml('global_notices') ?> |
16 |
<div class="page"> |
17 |
<?php echo $this->getChildHtml('header') ?> |
18 |
<div class="main-container col1-layout"> |
19 |
<div class="main"> |
20 |
<?php echo $this->getChildHtml('breadcrumbs') ?> |
21 |
<div class="col-main"> |
22 |
<?php echo $this->getChildHtml('global_messages') ?> |
23 |
<?php echo $this->getChildHtml('content') ?> |
24 |
</div>
|
25 |
</div>
|
26 |
</div>
|
27 |
<?php echo $this->getChildHtml('footer_before') ?> |
28 |
<?php echo $this->getChildHtml('footer') ?> |
29 |
<?php echo $this->getChildHtml('global_cookie_notice') ?> |
30 |
<?php echo $this->getChildHtml('before_body_end') ?> |
31 |
</div>
|
32 |
</div>
|
33 |
<?php echo $this->getAbsoluteFooter() ?> |
34 |
</body>
|
35 |
</html>
|
Ahora tenemos que modificarlo para que coincida con nuestro archivo index.html, así que usaremos nuestras clases de cuerpo y de contenedores, y agregaremos algunos divs adicionales, el código editado se verá así:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
|
4 |
<head>
|
5 |
<?php echo $this->getChildHtml('head') ?> |
6 |
</head>
|
7 |
<body id="home" <?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>> |
8 |
<?php echo $this->getChildHtml('after_body_start') ?> |
9 |
|
10 |
<div class="wrapper"> |
11 |
<?php echo $this->getChildHtml('global_notices') ?> |
12 |
|
13 |
<?php echo $this->getChildHtml('header') ?> |
14 |
|
15 |
<div class="container_fullwidth"> |
16 |
<div class="container"> |
17 |
<?php echo $this->getChildHtml('global_messages') ?> |
18 |
<?php echo $this->getChildHtml('content') ?> |
19 |
</div>
|
20 |
</div>
|
21 |
<div class="clearfix"></div> |
22 |
<div class="footer"> |
23 |
<?php echo $this->getChildHtml('footer_before') ?> |
24 |
<?php echo $this->getChildHtml('footer') ?> |
25 |
<?php echo $this->getChildHtml('global_cookie_notice') ?> |
26 |
<?php echo $this->getChildHtml('before_body_end') ?> |
27 |
</div>
|
28 |
</div>
|
29 |
|
30 |
<?php echo $this->getAbsoluteFooter() ?> |
31 |
</body>
|
32 |
</html>
|
Del mismo modo, también vamos a editar los archivos 2column-left.phtml, 2column-right.phtml y 3column.phtml. Así es como se verá el código modificado 2-column-left.phtml:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
|
4 |
<head>
|
5 |
<?php echo $this->getChildHtml('head') ?> |
6 |
</head>
|
7 |
<body id="home" <?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>> |
8 |
<?php echo $this->getChildHtml('after_body_start') ?> |
9 |
|
10 |
<div class="wrapper"> |
11 |
<?php echo $this->getChildHtml('global_notices') ?> |
12 |
|
13 |
<?php echo $this->getChildHtml('header') ?> |
14 |
|
15 |
<div class="container_fullwidth"> |
16 |
<div class="container"> |
17 |
<div class="row"> |
18 |
<div class="col-md-3"> |
19 |
<?php echo $this->getChildHtml('left') ?> |
20 |
</div>
|
21 |
<div class="col-md-9"> |
22 |
<?php echo $this->getChildHtml('global_messages') ?> |
23 |
<?php echo $this->getChildHtml('content') ?> |
24 |
</div>
|
25 |
</div>
|
26 |
</div>
|
27 |
</div>
|
28 |
<div class="clearfix"></div> |
29 |
<div class="footer"> |
30 |
<?php echo $this->getChildHtml('footer_before') ?> |
31 |
<?php echo $this->getChildHtml('footer') ?> |
32 |
<?php echo $this->getChildHtml('global_cookie_notice') ?> |
33 |
<?php echo $this->getChildHtml('before_body_end') ?> |
34 |
</div>
|
35 |
</div>
|
36 |
|
37 |
<?php echo $this->getAbsoluteFooter() ?> |
38 |
</body>
|
39 |
</html>
|
Luego, el archivo 2columns-right.phtml se verá así después de la edición:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
|
4 |
<head>
|
5 |
<?php echo $this->getChildHtml('head') ?> |
6 |
</head>
|
7 |
<body id="home" <?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>> |
8 |
<?php echo $this->getChildHtml('after_body_start') ?> |
9 |
|
10 |
<div class="wrapper"> |
11 |
<?php echo $this->getChildHtml('global_notices') ?> |
12 |
|
13 |
<?php echo $this->getChildHtml('header') ?> |
14 |
|
15 |
<div class="container_fullwidth"> |
16 |
<div class="container"> |
17 |
<div class="row"> |
18 |
<div class="col-md-9"> |
19 |
<?php echo $this->getChildHtml('global_messages') ?> |
20 |
<?php echo $this->getChildHtml('content') ?> |
21 |
</div>
|
22 |
<div class="col-md-3"> |
23 |
<?php echo $this->getChildHtml('right') ?> |
24 |
</div>
|
25 |
</div>
|
26 |
</div>
|
27 |
</div>
|
28 |
<div class="clearfix"></div> |
29 |
<div class="footer"> |
30 |
<?php echo $this->getChildHtml('footer_before') ?> |
31 |
<?php echo $this->getChildHtml('footer') ?> |
32 |
<?php echo $this->getChildHtml('global_cookie_notice') ?> |
33 |
<?php echo $this->getChildHtml('before_body_end') ?> |
34 |
</div>
|
35 |
</div>
|
36 |
|
37 |
<?php echo $this->getAbsoluteFooter() ?> |
38 |
</body>
|
39 |
</html>
|
Por último, vamos a editar el archivo 3columns.phtml de la siguiente manera:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
|
4 |
<head>
|
5 |
<?php echo $this->getChildHtml('head') ?> |
6 |
</head>
|
7 |
<body id="home" <?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>> |
8 |
<?php echo $this->getChildHtml('after_body_start') ?> |
9 |
|
10 |
<div class="wrapper"> |
11 |
<?php echo $this->getChildHtml('global_notices') ?> |
12 |
|
13 |
<?php echo $this->getChildHtml('header') ?> |
14 |
|
15 |
<div class="container_fullwidth"> |
16 |
<div class="container"> |
17 |
<div class="row"> |
18 |
<div class="col-md-3"> |
19 |
<?php echo $this->getChildHtml('left') ?> |
20 |
</div>
|
21 |
<div class="col-md-6"> |
22 |
<?php echo $this->getChildHtml('global_messages') ?> |
23 |
<?php echo $this->getChildHtml('content') ?> |
24 |
</div>
|
25 |
<div class="col-md-3"> |
26 |
<?php echo $this->getChildHtml('right') ?> |
27 |
</div>
|
28 |
</div>
|
29 |
</div>
|
30 |
</div>
|
31 |
<div class="clearfix"></div> |
32 |
<div class="footer"> |
33 |
<?php echo $this->getChildHtml('footer_before') ?> |
34 |
<?php echo $this->getChildHtml('footer') ?> |
35 |
<?php echo $this->getChildHtml('global_cookie_notice') ?> |
36 |
<?php echo $this->getChildHtml('before_body_end') ?> |
37 |
</div>
|
38 |
</div>
|
39 |
|
40 |
<?php echo $this->getAbsoluteFooter() ?> |
41 |
</body>
|
42 |
</html>
|
Observa cuidadosamente los cambios que hemos realizado en estos archivos de la plantilla. Cuando lo compares con el archivo index.html de nuestro sitio web HTML, tendrá sentido para ti.
Así es como debe verse el sitio web después de editar estos archivos. No verás mucha diferencia, pero vamos en la dirección correcta.
A continuación vamos a editar el archivo header.phtml, ya que podemos ver que este es el archivo que tiene el contenido del contenedor de la sección del encabezado. Entonces, copiaremos el archivo frontend/rwd/default/template/page/html/header.phtml, lo moveremos a la carpeta frontend/tutsplus/vstyle/template/page/html y comenzaremos a editarlo. En este momento tu código se verá de esta forma:
1 |
<div class="header-language-background"> |
2 |
<div class="header-language-container"> |
3 |
<div class="store-language-container"> |
4 |
<?php echo $this->getChildHtml('store_language') ?> |
5 |
</div>
|
6 |
|
7 |
<?php echo $this->getChildHtml('currency_switcher') ?> |
8 |
|
9 |
<p class="welcome-msg"><?php echo $this->getChildHtml('welcome') ?> <?php echo $this->getAdditionalHtml() ?></p> |
10 |
</div>
|
11 |
</div>
|
12 |
|
13 |
<header id="header" class="page-header"> |
14 |
<div class="page-header-container"> |
15 |
<a class="logo" href="<?php echo $this->getUrl('') ?>"> |
16 |
<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="large" /> |
17 |
<img src="<?php echo $this->getLogoSrcSmall() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="small" /> |
18 |
</a>
|
19 |
|
20 |
<?php // In order for the language switcher to display next to logo on smaller viewports, it will be moved here. |
21 |
// See app.js for details ?>
|
22 |
<div class="store-language-container"></div> |
23 |
|
24 |
<!-- Skip Links --> |
25 |
|
26 |
<div class="skip-links"> |
27 |
<a href="#header-nav" class="skip-link skip-nav"> |
28 |
<span class="icon"></span> |
29 |
<span class="label"><?php echo $this->__('Menu'); ?></span> |
30 |
</a>
|
31 |
|
32 |
<a href="#header-search" class="skip-link skip-search"> |
33 |
<span class="icon"></span> |
34 |
<span class="label"><?php echo $this->__('Search'); ?></span> |
35 |
</a>
|
36 |
|
37 |
<div class="account-cart-wrapper"> |
38 |
<a href="<?php echo $this->helper('customer')->getAccountUrl(); ?>" data-target-element="#header-account" class="skip-link skip-account"> |
39 |
<span class="icon"></span> |
40 |
<span class="label"><?php echo $this->__('Account'); ?></span> |
41 |
</a>
|
42 |
|
43 |
<!-- Cart -->
|
44 |
|
45 |
<div class="header-minicart"> |
46 |
<?php echo $this->getChildHtml('minicart_head'); ?> |
47 |
</div>
|
48 |
</div>
|
49 |
|
50 |
|
51 |
</div>
|
52 |
|
53 |
<!-- Navigation -->
|
54 |
|
55 |
<div id="header-nav" class="skip-content"> |
56 |
<?php echo $this->getChildHtml('topMenu') ?> |
57 |
</div>
|
58 |
|
59 |
<!-- Search -->
|
60 |
|
61 |
<div id="header-search" class="skip-content"> |
62 |
<?php echo $this->getChildHtml('topSearch') ?> |
63 |
</div>
|
64 |
|
65 |
<!-- Account -->
|
66 |
|
67 |
<div id="header-account" class="skip-content"> |
68 |
<?php echo $this->getChildHtml('topLinks') ?> |
69 |
</div>
|
70 |
</div>
|
71 |
</header>
|
72 |
|
73 |
|
74 |
<?php echo $this->getChildHtml('topContainer'); ?> |
Lo compararemos con la sección del encabezado de nuestro HTML y comenzaremos a realizar estos cambios en él:
1 |
<div class="header"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="col-md-12 col-sm-10"> |
5 |
<div class="phoneNum pull-left"> |
6 |
<p>Call us now! 0800-123-456-78</p> |
7 |
</div>
|
8 |
<div class="header_top"> |
9 |
<div class="row"> |
10 |
<ul class="option_nav"> |
11 |
<li class="dropdown"><a href="checkout.html" class="log"><img src="images/language.jpg" alt=""></a> |
12 |
<ul class="subnav"> |
13 |
<li><a href="#">Eng</a></li> |
14 |
<li><a href="#">Vns</a></li> |
15 |
<li><a href="#">Fer</a></li> |
16 |
<li><a href="#">Gem</a></li> |
17 |
</ul>
|
18 |
</li>
|
19 |
<li class="dropdown"><a href="checkout.html" class="log"><img src="images/doller.jpg" alt=""></a> |
20 |
<ul class="subnav"> |
21 |
<li><a href="#">USD</a></li> |
22 |
<li><a href="#">UKD</a></li> |
23 |
<li><a href="#">FER</a></li> |
24 |
</ul>
|
25 |
</li>
|
26 |
</ul>
|
27 |
<ul class="usermenu"> |
28 |
<li><a href="checkout.html" class="log"><img src="images/user.jpg" alt=""></a></li> |
29 |
</ul>
|
30 |
<ul class="option"> |
31 |
<li class="option-cart"><a href="#" class="cart-icon">cart <!--<span class="cart_no">02</span>--></a> |
32 |
<ul class="option-cart-item"> |
33 |
<li>
|
34 |
<div class="cart-item"> |
35 |
<div class="image"><img src="images/products/thum/products-01.png" alt=""></div> |
36 |
<div class="item-description"> |
37 |
<p class="name">Lincoln chair</p> |
38 |
<p>Size: <span class="light-red">One size</span><br> |
39 |
Quantity: <span class="light-red">01</span></p> |
40 |
</div>
|
41 |
<div class="right"> |
42 |
<p class="price">$30.00</p> |
43 |
<a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div> |
44 |
</div>
|
45 |
</li>
|
46 |
<li>
|
47 |
<div class="cart-item"> |
48 |
<div class="image"><img src="images/products/thum/products-02.png" alt=""></div> |
49 |
<div class="item-description"> |
50 |
<p class="name">Lincoln chair</p> |
51 |
<p>Size: <span class="light-red">One size</span><br> |
52 |
Quantity: <span class="light-red">01</span></p> |
53 |
</div>
|
54 |
<div class="right"> |
55 |
<p class="price">$30.00</p> |
56 |
<a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div> |
57 |
</div>
|
58 |
</li>
|
59 |
<li><span class="total">Total <strong>$60.00</strong></span> |
60 |
<button class="checkout" onClick="location.href='checkout.html'">CheckOut</button> |
61 |
</li>
|
62 |
</ul>
|
63 |
</li>
|
64 |
</ul>
|
65 |
</div>
|
66 |
</div>
|
67 |
|
68 |
</div>
|
69 |
</div>
|
70 |
</div>
|
71 |
</div>
|
Insertaremos este HTML en el archivo header.phtml y reemplazaremos las secciones de diferencia con las etiquetas de la plantilla dinámica relevantes como el conmutador de divisas, el idioma de la tienda, el logotipo, el menú, la barra de búsqueda, etc. Así es como se verá el código después de las ediciones:
1 |
<div class="header"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="col-md-12 col-sm-10"> |
5 |
<div class="phoneNum pull-left"> |
6 |
<p><?php echo $this->getChildHtml('welcome') ?> <?php echo $this->getAdditionalHtml() ?></p> |
7 |
</div>
|
8 |
<div class="header_top"> |
9 |
<div class="row"> |
10 |
<ul class="option_nav"> |
11 |
<?php echo $this->getChildHtml('currency_switcher') ?> |
12 |
<?php echo $this->getChildHtml('store_language') ?> |
13 |
</ul>
|
14 |
<ul class="usermenu"> |
15 |
<li><a href="<?php echo Mage::getUrl('customer/account'); ?>" class="log"><img src="<?php echo $this->getSkinUrl('images/user.jpg'); ?>" alt=""></a></li> |
16 |
</ul>
|
17 |
<ul class="option"> |
18 |
<li class="option-cart"> |
19 |
<?php echo $this->getChildHtml('minicart_head'); ?> |
20 |
</li>
|
21 |
</ul>
|
22 |
</div>
|
23 |
</div>
|
24 |
|
25 |
</div>
|
26 |
</div>
|
27 |
</div>
|
28 |
</div>
|
29 |
|
30 |
<div class="logoContainer"> |
31 |
<div class="container"> |
32 |
<div class="row"> |
33 |
<div class="col-md-12 col-sm-2"> |
34 |
<div class="logoBox"> |
35 |
<a class="logo" href="<?php echo $this->getUrl('') ?>"> |
36 |
<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="large" /> |
37 |
<img src="<?php echo $this->getLogoSrcSmall() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="small" /> |
38 |
</a>
|
39 |
</div>
|
40 |
</div>
|
41 |
</div>
|
42 |
</div>
|
43 |
</div>
|
44 |
|
45 |
<div class="menu"> |
46 |
<div class="container"> |
47 |
<div class="row"> |
48 |
<div class="col-md-9 col-sm-10"> |
49 |
<div id="header-nav" class="skip-content"> |
50 |
<?php echo $this->getChildHtml('topMenu') ?> |
51 |
</div>
|
52 |
</div>
|
53 |
<div class="col-md-3 col-sm-2"> |
54 |
<div class="search"> |
55 |
<div id="header-search" class="skip-content"> |
56 |
<?php echo $this->getChildHtml('topSearch') ?> |
57 |
</div>
|
58 |
</div>
|
59 |
</div>
|
60 |
</div>
|
61 |
</div>
|
62 |
</div>
|
63 |
|
64 |
<?php echo $this->getChildHtml('topContainer'); ?> |
De esta forma se verá la sección del encabezado después de editar el archivo header.phtml:
Ahora, necesitamos modificar el código de las diferentes secciones que estamos usando, como el selector de idioma y moneda, el slider, el menú, la barra de búsqueda, etc. Para empezar, editaremos los selectores de moneda e idioma. Si habilitamos nuevamente las sugerencias de la plantilla, podemos ver que la sección del selector de idioma proviene del archivo base/default/template/page/switch/languages.phtml, por lo que copiaremos este archivo en nuestro tema en la misma ubicación, y comenzaremos a editarlo para que coincida con nuestro código HTML. El archivo languages.phtml original se ve así:
1 |
<?php if(count($this->getStores())>1): ?> |
2 |
<div class="form-language"> |
3 |
<label for="select-language"><?php echo $this->__('Your Language:') ?></label> |
4 |
<select id="select-language" title="<?php echo $this->__('Your Language') ?>" onchange="window.location.href=this.value"> |
5 |
<?php foreach ($this->getStores() as $_lang): ?> |
6 |
<?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?> |
7 |
<option value="<?php echo $_lang->getCurrentUrl() ?>"<?php echo $_selected ?>><?php echo $this->escapeHtml($_lang->getName()) ?></option> |
8 |
<?php endforeach; ?> |
9 |
</select>
|
10 |
</div>
|
11 |
<?php endif; ?> |
El código HTML original para el idioma y el selector de divisas tiene este aspecto:
1 |
<ul class="option_nav"> |
2 |
<li class="dropdown"><a href="checkout.html" class="log"><img src="images/language.jpg" alt=""></a> |
3 |
<ul class="subnav"> |
4 |
<li><a href="#">Eng</a></li> |
5 |
<li><a href="#">Vns</a></li> |
6 |
<li><a href="#">Fer</a></li> |
7 |
<li><a href="#">Gem</a></li> |
8 |
</ul>
|
9 |
</li>
|
10 |
<li class="dropdown"><a href="checkout.html" class="log"><img src="images/doller.jpg" alt=""></a> |
11 |
<ul class="subnav"> |
12 |
<li><a href="#">USD</a></li> |
13 |
<li><a href="#">UKD</a></li> |
14 |
<li><a href="#">FER</a></li> |
15 |
</ul>
|
16 |
</li>
|
17 |
</ul>
|
Después de modificar el archivo languages.phtml para que coincida con el HTML, lo verás así:
1 |
<?php if(count($this->getStores())>1): ?> |
2 |
<li class="dropdown"> |
3 |
<a href="#" class="log"><img src="<?php echo $this->getSkinUrl('images/doller.jpg'); ?>" alt=""></a> |
4 |
<ul class="subnav"> |
5 |
<?php foreach ($this->getStores() as $_lang): ?> |
6 |
<li>
|
7 |
<a href="<?php echo $_lang->getCurrentUrl() ?>"> |
8 |
<?php
|
9 |
$langName = $this->escapeHtml($_lang->getName()); |
10 |
$langName = substr("$langName", 0, 3); |
11 |
$langName = strtoupper($langName); |
12 |
echo $langName; |
13 |
?>
|
14 |
</a>
|
15 |
</li>
|
16 |
<?php endforeach; ?> |
17 |
</ul>
|
18 |
</li>
|
19 |
<?php endif; ?> |
Como puedes ver, por ahora el selector de divisas no aparece en nuestro sitio web. Primero tenemos que habilitar el selector de divisas desde el panel de administración. Vamos a Sistema > Configuración > General > Configuración de divisas, primero debes habilitar algunos idiomas y, luego desde Sistema > Administrar moneda > Tasas establecer tasas de cambio. Luego verás que el selector de divisas está habilitado en tu sitio web. Al habilitar nuevamente las sugerencias de la plantilla, podemos ver que su plantilla es rwd/default/template/directory/currency.phtml, y su código actual se verá así:
1 |
<?php if($this->getCurrencyCount()>1): ?> |
2 |
<div class="currency-switcher"> |
3 |
<label for="select-currency"><?php echo $this->__('Your Currency:') ?></label> |
4 |
<select id="select-currency" name="currency" title="<?php echo $this->__('Your Currency') ?>" onchange="setLocation(this.value)"> |
5 |
<?php foreach ($this->getCurrencies() as $_code => $_name): ?> |
6 |
<option value="<?php echo $this->getSwitchCurrencyUrl($_code) ?>"<?php if($_code==$this->getCurrentCurrencyCode()): ?> selected="selected"<?php endif; ?>> |
7 |
<?php echo $_name ?> - <?php echo $_code ?> |
8 |
</option>
|
9 |
<?php endforeach; ?> |
10 |
</select>
|
11 |
</div>
|
12 |
<?php endif; ?> |
Lo editaremos para que coincida con nuestro HTML, por lo que el código modificado tendrá el siguiente aspecto:
1 |
<?php if($this->getCurrencyCount()>1): ?> |
2 |
<li class="dropdown"> |
3 |
<a href="#" class="log"><img src="<?php echo $this->getSkinUrl('images/language.jpg'); ?>" alt=""></a> |
4 |
<ul class="subnav"> |
5 |
<?php foreach ($this->getCurrencies() as $_code => $_name): ?> |
6 |
<li>
|
7 |
<a href="<?php echo $this->getSwitchCurrencyUrl($_code) ?>"> |
8 |
<?php echo $_code ?> |
9 |
</a>
|
10 |
</li>
|
11 |
<?php endforeach; ?> |
12 |
</ul>
|
13 |
</li>
|
14 |
<?php endif; ?> |
Luego, editaremos nuestro mensaje de bienvenida para que coincida con nuestro diseño HTML. Para hacerlo tendremos que ir a Sistema> Configuración/General/Diseño/Encabezado/Texto de bienvenida. Después de editar esto, el encabezado se verá así:
Espero que puedas ver mucho progreso en el aspecto de tu página principal y hayas seguido los pasos correctamente. Ahora, como editamos parcialmente la sección del encabezado, continuaremos editándola en el próximo artículo, y también editaremos el slider principal en ese artículo.
¡Por favor, deja tu experiencia en la sección de los comentarios!
