Как мы уже описали в предыдущей статье по начальной загрузке, сейчас самое время погрузиться в код и начать вносить изменения. Как очевидный выбор, мы начнем процесс редактирования с домашней страницы.
В этой первой статье мы будем частично редактировать заголовок раздела. Мы отредактируем файлы оболочки по умолчанию и файл header.phtml, а затем начнем редактировать различные компоненты заголовка, такие как валюта, селектор языка и т. Д. Итак, без лишних слов, мы начнем процесс редактирования.
Прежде всего, мы включим подсказки по шаблонам из панели администратора, перейдя в « Система»> «Разработчик»> «Отладка» , и при этом убедитесь, что в поле «Текущая конфигурация» задано значение « Основной веб-сайт». Включив подсказки шаблона, мы узнаем, какой шаблон отвечает за стили заголовка. Так будет выглядеть домашняя страница при включенных подсказках шаблона.
Здесь, как вы можете видеть, самая внешняя оболочка, в которую включены все остальные файлы, frontend/rwd/default/template/page/1column.phtml из frontend/rwd/default/template/page/1column.phtml , который является темой RWD, поскольку мы унаследовали нашу тему от этого значения по умолчанию тема. Вместо того, чтобы редактировать этот файл непосредственно в теме RWD, мы создадим похожую папку в нашей теме vstyle по следующему адресу: frontend/tutsplus/vstyle/template/page . Затем мы скопируем эти файлы в эту папку и отредактируем их там. Итак, мы перейдем в frontend/rwd/default/template/page и скопируем 1column.phtml , 2column-left.phtml , 2column-right.phtml и 3column.phtml в эту вновь созданную папку.
Если мы посмотрим на код 1-column.phtml , он выглядит так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<!—[if lt IE 7 ]> <html lang=»<?php echo $this->getLang(); ?>» id=»top» class=»no-js ie6″> <![endif]—>
<!—[if IE 7 ]> <html lang=»<?php echo $this->getLang(); ?>» id=»top» class=»no-js ie7″> <![endif]—>
<!—[if IE 8 ]> <html lang=»<?php echo $this->getLang(); ?>» id=»top» class=»no-js ie8″> <![endif]—>
<!—[if IE 9 ]> <html lang=»<?php echo $this->getLang(); ?>» id=»top» class=»no-js ie9″> <![endif]—>
<!—[if (gt IE 9)|!(IE)]><!—> <html lang=»<?php echo $this->getLang(); ?>» id=»top» class=»no-js»> <!—<![endif]—>
<head>
<?php echo $this->getChildHtml(‘head’) ?>
</head>
<body<?php echo $this->getBodyClass()?’
<?php echo $this->getChildHtml(‘after_body_start’) ?>
<div class=»wrapper»>
<?php echo $this->getChildHtml(‘global_notices’) ?>
<div class=»page»>
<?php echo $this->getChildHtml(‘header’) ?>
<div class=»main-container col1-layout»>
<div class=»main»>
<?php echo $this->getChildHtml(‘breadcrumbs’) ?>
<div class=»col-main»>
<?php echo $this->getChildHtml(‘global_messages’) ?>
<?php echo $this->getChildHtml(‘content’) ?>
</div>
</div>
</div>
<?php echo $this->getChildHtml(‘footer_before’) ?>
<?php echo $this->getChildHtml(‘footer’) ?>
<?php echo $this->getChildHtml(‘global_cookie_notice’) ?>
<?php echo $this->getChildHtml(‘before_body_end’) ?>
</div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
|
Теперь нам нужно изменить его, чтобы он соответствовал нашему файлу index.html, поэтому мы будем использовать наши классы body и container и добавим несколько дополнительных элементов div, и отредактированный код будет выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html>
<head>
<?php echo $this->getChildHtml(‘head’) ?>
</head>
<body id=»home» <?php echo $this->getBodyClass()?’
<?php echo $this->getChildHtml(‘after_body_start’) ?>
<div class=»wrapper»>
<?php echo $this->getChildHtml(‘global_notices’) ?>
<?php echo $this->getChildHtml(‘header’) ?>
<div class=»container_fullwidth»>
<div class=»container»>
<?php echo $this->getChildHtml(‘global_messages’) ?>
<?php echo $this->getChildHtml(‘content’) ?>
</div>
</div>
<div class=»clearfix»></div>
<div class=»footer»>
<?php echo $this->getChildHtml(‘footer_before’) ?>
<?php echo $this->getChildHtml(‘footer’) ?>
<?php echo $this->getChildHtml(‘global_cookie_notice’) ?>
<?php echo $this->getChildHtml(‘before_body_end’) ?>
</div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
|
Аналогичным образом мы также собираемся редактировать 2column-left.phtml , 2column-right.phtml и 3column.phtml . Вот как будет выглядеть измененный код для 2-column-left.phtml :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<?php echo $this->getChildHtml(‘head’) ?>
</head>
<body id=»home» <?php echo $this->getBodyClass()?’
<?php echo $this->getChildHtml(‘after_body_start’) ?>
<div class=»wrapper»>
<?php echo $this->getChildHtml(‘global_notices’) ?>
<?php echo $this->getChildHtml(‘header’) ?>
<div class=»container_fullwidth»>
<div class=»container»>
<div class=»row»>
<div class=»col-md-3″>
<?php echo $this->getChildHtml(‘left’) ?>
</div>
<div class=»col-md-9″>
<?php echo $this->getChildHtml(‘global_messages’) ?>
<?php echo $this->getChildHtml(‘content’) ?>
</div>
</div>
</div>
</div>
<div class=»clearfix»></div>
<div class=»footer»>
<?php echo $this->getChildHtml(‘footer_before’) ?>
<?php echo $this->getChildHtml(‘footer’) ?>
<?php echo $this->getChildHtml(‘global_cookie_notice’) ?>
<?php echo $this->getChildHtml(‘before_body_end’) ?>
</div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
|
Далее, 2columns-right.phtml будет выглядеть после редактирования:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<?php echo $this->getChildHtml(‘head’) ?>
</head>
<body id=»home» <?php echo $this->getBodyClass()?’
<?php echo $this->getChildHtml(‘after_body_start’) ?>
<div class=»wrapper»>
<?php echo $this->getChildHtml(‘global_notices’) ?>
<?php echo $this->getChildHtml(‘header’) ?>
<div class=»container_fullwidth»>
<div class=»container»>
<div class=»row»>
<div class=»col-md-9″>
<?php echo $this->getChildHtml(‘global_messages’) ?>
<?php echo $this->getChildHtml(‘content’) ?>
</div>
<div class=»col-md-3″>
<?php echo $this->getChildHtml(‘right’) ?>
</div>
</div>
</div>
</div>
<div class=»clearfix»></div>
<div class=»footer»>
<?php echo $this->getChildHtml(‘footer_before’) ?>
<?php echo $this->getChildHtml(‘footer’) ?>
<?php echo $this->getChildHtml(‘global_cookie_notice’) ?>
<?php echo $this->getChildHtml(‘before_body_end’) ?>
</div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
|
Наконец, мы собираемся отредактировать 3columns.phtml следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html>
<head>
<?php echo $this->getChildHtml(‘head’) ?>
</head>
<body id=»home» <?php echo $this->getBodyClass()?’
<?php echo $this->getChildHtml(‘after_body_start’) ?>
<div class=»wrapper»>
<?php echo $this->getChildHtml(‘global_notices’) ?>
<?php echo $this->getChildHtml(‘header’) ?>
<div class=»container_fullwidth»>
<div class=»container»>
<div class=»row»>
<div class=»col-md-3″>
<?php echo $this->getChildHtml(‘left’) ?>
</div>
<div class=»col-md-6″>
<?php echo $this->getChildHtml(‘global_messages’) ?>
<?php echo $this->getChildHtml(‘content’) ?>
</div>
<div class=»col-md-3″>
<?php echo $this->getChildHtml(‘right’) ?>
</div>
</div>
</div>
</div>
<div class=»clearfix»></div>
<div class=»footer»>
<?php echo $this->getChildHtml(‘footer_before’) ?>
<?php echo $this->getChildHtml(‘footer’) ?>
<?php echo $this->getChildHtml(‘global_cookie_notice’) ?>
<?php echo $this->getChildHtml(‘before_body_end’) ?>
</div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
|
Посмотрите внимательно на изменения, которые мы внесли в эти файлы шаблонов. Когда вы сравните его с файлом index.html нашего HTML-сайта, это будет иметь смысл для вас.
Так должен выглядеть сайт после редактирования этих файлов. Вы не увидите большой разницы, но мы движемся в правильном направлении.
Далее мы собираемся отредактировать файл header.phtml, так как мы видим, что это файл с содержимым оболочки раздела header. Поэтому мы скопируем frontend/rwd/default/template/page/html/header.phtml , переместим его в frontend/tutsplus/vstyle/template/page/html и начнем редактировать. В настоящее время его код будет выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<div class=»header-language-background»>
<div class=»header-language-container»>
<div class=»store-language-container»>
<?php echo $this->getChildHtml(‘store_language’) ?>
</div>
<?php echo $this->getChildHtml(‘currency_switcher’) ?>
<p class=»welcome-msg»><?php echo $this->getChildHtml(‘welcome’) ?> <?php echo $this->getAdditionalHtml() ?></p>
</div>
</div>
<header id=»header» class=»page-header»>
<div class=»page-header-container»>
<a class=»logo» href=»<?php echo $this->getUrl(») ?>»>
<img src=»<?php echo $this->getLogoSrc() ?>» alt=»<?php echo $this->getLogoAlt() ?>» class=»large» />
<img src=»<?php echo $this->getLogoSrcSmall() ?>» alt=»<?php echo $this->getLogoAlt() ?>» class=»small» />
</a>
<?php // In order for the language switcher to display next to logo on smaller viewports, it will be moved here.
// See app.js for details ?>
<div class=»store-language-container»></div>
<!— Skip Links —>
<div class=»skip-links»>
<a href=»#header-nav» class=»skip-link skip-nav»>
<span class=»icon»>
<span class=»label»><?php echo $this->__(‘Menu’);
</a>
<a href=»#header-search» class=»skip-link skip-search»>
<span class=»icon»>
<span class=»label»><?php echo $this->__(‘Search’);
</a>
<div class=»account-cart-wrapper»>
<a href=»<?php echo $this->helper(‘customer’)->getAccountUrl(); ?>» data-target-element=»#header-account» class=»skip-link skip-account»>
<span class=»icon»>
<span class=»label»><?php echo $this->__(‘Account’);
</a>
<!— Cart —>
<div class=»header-minicart»>
<?php echo $this->getChildHtml(‘minicart_head’);
</div>
</div>
</div>
<!— Navigation —>
<div id=»header-nav» class=»skip-content»>
<?php echo $this->getChildHtml(‘topMenu’) ?>
</div>
<!— Search —>
<div id=»header-search» class=»skip-content»>
<?php echo $this->getChildHtml(‘topSearch’) ?>
</div>
<!— Account —>
<div id=»header-account» class=»skip-content»>
<?php echo $this->getChildHtml(‘topLinks’) ?>
</div>
</div>
</header>
<?php echo $this->getChildHtml(‘topContainer’);
|
Мы сравним его с разделом заголовка нашего HTML и начнем вносить в него следующие изменения:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<div class=»header»>
<div class=»container»>
<div class=»row»>
<div class=»col-md-12 col-sm-10″>
<div class=»phoneNum pull-left»>
<p>Call us now!
</div>
<div class=»header_top»>
<div class=»row»>
<ul class=»option_nav»>
<li class=»dropdown»><a href=»checkout.html» class=»log»><img src=»images/language.jpg» alt=»»></a>
<ul class=»subnav»>
<li><a href=»#»>Eng</a></li>
<li><a href=»#»>Vns</a></li>
<li><a href=»#»>Fer</a></li>
<li><a href=»#»>Gem</a></li>
</ul>
</li>
<li class=»dropdown»><a href=»checkout.html» class=»log»><img src=»images/doller.jpg» alt=»»></a>
<ul class=»subnav»>
<li><a href=»#»>USD</a></li>
<li><a href=»#»>UKD</a></li>
<li><a href=»#»>FER</a></li>
</ul>
</li>
</ul>
<ul class=»usermenu»>
<li><a href=»checkout.html» class=»log»><img src=»images/user.jpg» alt=»»></a></li>
</ul>
<ul class=»option»>
<li class=»option-cart»><a href=»#» class=»cart-icon»>cart <!—<span class=»cart_no»>02
<ul class=»option-cart-item»>
<li>
<div class=»cart-item»>
<div class=»image»><img src=»images/products/thum/products-01.png» alt=»»></div>
<div class=»item-description»>
<p class=»name»>Lincoln chair</p>
<p>Size: <span class=»light-red»>One size
Quantity: <span class=»light-red»>01
</div>
<div class=»right»>
<p class=»price»>$30.00</p>
<a href=»#» class=»remove»><img src=»images/remove.png» alt=»remove»></a></div>
</div>
</li>
<li>
<div class=»cart-item»>
<div class=»image»><img src=»images/products/thum/products-02.png» alt=»»></div>
<div class=»item-description»>
<p class=»name»>Lincoln chair</p>
<p>Size: <span class=»light-red»>One size
Quantity: <span class=»light-red»>01
</div>
<div class=»right»>
<p class=»price»>$30.00</p>
<a href=»#» class=»remove»><img src=»images/remove.png» alt=»remove»></a></div>
</div>
</li>
<li><span class=»total»>Total <strong>$60.00</strong>
<button class=»checkout» onClick=»location.href=’checkout.html'»>CheckOut</button>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
|
Мы вставим этот HTML-код в файл header.phtml и заменим разделы различий соответствующими динамическими тегами шаблона, такими как переключатель валют, язык магазина, логотип, меню, панель поиска и т. Д. Вот как будет выглядеть код после этих изменений:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<div class=»header»>
<div class=»container»>
<div class=»row»>
<div class=»col-md-12 col-sm-10″>
<div class=»phoneNum pull-left»>
<p><?php echo $this->getChildHtml(‘welcome’) ?> <?php echo $this->getAdditionalHtml() ?></p>
</div>
<div class=»header_top»>
<div class=»row»>
<ul class=»option_nav»>
<?php echo $this->getChildHtml(‘currency_switcher’) ?>
<?php echo $this->getChildHtml(‘store_language’) ?>
</ul>
<ul class=»usermenu»>
<li><a href=»<?php echo Mage::getUrl(‘customer/account’); ?>» class=»log»><img src=»<?php echo $this->getSkinUrl(‘images/user.jpg’); ?>» alt=»»></a></li>
</ul>
<ul class=»option»>
<li class=»option-cart»>
<?php echo $this->getChildHtml(‘minicart_head’);
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=»logoContainer»>
<div class=»container»>
<div class=»row»>
<div class=»col-md-12 col-sm-2″>
<div class=»logoBox»>
<a class=»logo» href=»<?php echo $this->getUrl(») ?>»>
<img src=»<?php echo $this->getLogoSrc() ?>» alt=»<?php echo $this->getLogoAlt() ?>» class=»large» />
<img src=»<?php echo $this->getLogoSrcSmall() ?>» alt=»<?php echo $this->getLogoAlt() ?>» class=»small» />
</a>
</div>
</div>
</div>
</div>
</div>
<div class=»menu»>
<div class=»container»>
<div class=»row»>
<div class=»col-md-9 col-sm-10″>
<div id=»header-nav» class=»skip-content»>
<?php echo $this->getChildHtml(‘topMenu’) ?>
</div>
</div>
<div class=»col-md-3 col-sm-2″>
<div class=»search»>
<div id=»header-search» class=»skip-content»>
<?php echo $this->getChildHtml(‘topSearch’) ?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php echo $this->getChildHtml(‘topContainer’);
|
Вот так будет выглядеть раздел заголовка после редактирования файла header.phtml :
Теперь, как вы видите, нам нужно изменить код различных разделов, которые мы используем, таких как выбор языка и валюты, слайдер, меню, панель поиска и т. Д. Для начала мы отредактируем валюту и выбор языка. Если мы снова включим подсказки шаблона, мы увидим, что раздел выбора языка происходит из base/default/template/page/switch/languages.phtml , поэтому мы скопируем этот файл в нашу тему в том же месте и начнем редактирование это соответствует нашему HTML-коду. Исходный файл languages.phtml выглядит следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
|
<?php if(count($this->getStores())>1): ?>
<div class=»form-language»>
<label for=»select-language»><?php echo $this->__(‘Your Language:’) ?></label>
<select id=»select-language» title=»<?php echo $this->__(‘Your Language’) ?>» onchange=»window.location.href=this.value»>
<?php foreach ($this->getStores() as $_lang): ?>
<?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ?
<option value=»<?php echo $_lang->getCurrentUrl() ?>»<?php echo $_selected ?>><?php echo $this->escapeHtml($_lang->getName()) ?></option>
<?php endforeach;
</select>
</div>
<?php endif;
|
Исходный HTML-код для выбора языка и валюты выглядит следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<ul class=»option_nav»>
<li class=»dropdown»><a href=»checkout.html» class=»log»><img src=»images/language.jpg» alt=»»></a>
<ul class=»subnav»>
<li><a href=»#»>Eng</a></li>
<li><a href=»#»>Vns</a></li>
<li><a href=»#»>Fer</a></li>
<li><a href=»#»>Gem</a></li>
</ul>
</li>
<li class=»dropdown»><a href=»checkout.html» class=»log»><img src=»images/doller.jpg» alt=»»></a>
<ul class=»subnav»>
<li><a href=»#»>USD</a></li>
<li><a href=»#»>UKD</a></li>
<li><a href=»#»>FER</a></li>
</ul>
</li>
</ul>
|
После того, как мы изменим languages.phtml чтобы он соответствовал HTML, он будет выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<?php if(count($this->getStores())>1): ?>
<li class=»dropdown»>
<a href=»#» class=»log»><img src=»<?php echo $this->getSkinUrl(‘images/doller.jpg’); ?>» alt=»»></a>
<ul class=»subnav»>
<?php foreach ($this->getStores() as $_lang): ?>
<li>
<a href=»<?php echo $_lang->getCurrentUrl() ?>»>
<?php
$langName = $this->escapeHtml($_lang->getName());
$langName = substr(«$langName», 0, 3);
$langName = strtoupper($langName);
echo $langName;
?>
</a>
</li>
<?php endforeach;
</ul>
</li>
<?php endif;
|
Как вы можете видеть, на нашем веб-сайте пока не отображается селектор валют. Сначала нужно включить переключатель валют из админ-панели. В меню «Система»> «Конфигурация»> «Основные»> «Настройка валюты» необходимо сначала включить некоторые языки, а затем в меню «Система»> «Управление валютой»> «Курсы» установить курсы валют. Тогда вы увидите, что на вашем сайте включен селектор валют. Включив подсказки шаблона снова, мы можем видеть, что его шаблон — это rwd/default/template/directory/currency.phtml , и его текущий код будет выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<?php if($this->getCurrencyCount()>1): ?>
<div class=»currency-switcher»>
<label for=»select-currency»><?php echo $this->__(‘Your Currency:’) ?></label>
<select id=»select-currency» name=»currency» title=»<?php echo $this->__(‘Your Currency’) ?>» onchange=»setLocation(this.value)»>
<?php foreach ($this->getCurrencies() as $_code => $_name): ?>
<option value=»<?php echo $this->getSwitchCurrencyUrl($_code) ?>»<?php if($_code==$this->getCurrentCurrencyCode()): ?> selected=»selected»<?php endif;
<?php echo $_name ?> — <?php echo $_code ?>
</option>
<?php endforeach;
</select>
</div>
<?php endif;
|
Мы отредактируем его так, чтобы он соответствовал нашему HTML, поэтому измененный код будет выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<?php if($this->getCurrencyCount()>1): ?>
<li class=»dropdown»>
<a href=»#» class=»log»><img src=»<?php echo $this->getSkinUrl(‘images/language.jpg’); ?>» alt=»»></a>
<ul class=»subnav»>
<?php foreach ($this->getCurrencies() as $_code => $_name): ?>
<li>
<a href=»<?php echo $this->getSwitchCurrencyUrl($_code) ?>»>
<?php echo $_code ?>
</a>
</li>
<?php endforeach;
</ul>
</li>
<?php endif;
|
Далее мы отредактируем наше приветственное сообщение в соответствии с нашим дизайном HTML. Для этого нам нужно перейти в System> Configuration / General / Design / Header / Welcome Text . После редактирования заголовок будет выглядеть так:
Если вы выполнили все шаги правильно, я надеюсь, что вы увидите большой прогресс в виде вашей домашней страницы. Теперь, когда мы частично отредактировали раздел заголовка, мы продолжим редактирование раздела заголовка в следующей статье, а также отредактируем основной слайдер в этой статье.
Пожалуйста, объясните свой опыт в разделе комментариев!