Нужно добавить две картинки на страницу чекаута, как на этой картинке:
Это оказалось не так просто, как казалось.
Для начала сделаем небольшой файл-шаблончик с нужными картинками. Это файл
Первая картинка загружается динамически, для чего используется Javascript.
Почему бы просто не добавить новый блок в checkout.xml? Для этого можно использовать встроенный блок
Это даже работает, и на первый взгляд мы имеем именно то что надо — справа появляются наши картинки из шаблона
Но на второй взгляд, когда нажать кнопку Continue что бы перейти к следующему шагу чекаута, правая часть страницы целиком перезагружается. html для правой страницы приходит в Ajax запросе. Этот html больше не содержит наших картинок.
Ладно, значит нужно поправить возвращаемый html, что бы он содержал наши картинки.
Для этого надо поправить
В общем в итоге выяснилось, что к блоку нужно добавить параметр
Да что же это? Теперь после кнопки Continue видно только одну картинку, которая загружается через тэг
В общем, попытка номер два тоже провалилась.
Ладно, если не получается показывать обе картинки модифицируя код правой части, возвращаемый с помощью Ajax запроса, попробуем сделать так, что бы шаблон оставался неизменным на протяжении всех шагов чекаута.
Javascript, работающий со страницей чекаута находится в файле
Т.е. он берёт первый элемент с классом
А вот где элемент с этим классом объявлен — файл
Не очень хорошо… Что бы мы ни поместили в правую часть страницы с помощью xml и
Выходит, единственный выход — сделать свой шаблон, основанный на
Итак, для начала создадим новый шаблон
Было:
Стало:
Далее модифицируем новый шаблон
Смысл такой. Создаём новый div-обёртку, которая будет содержать правую колонку. Мы не можем назначит ему класс
Затем добавляем внутрь этого дива-обёртки сначала исходную правую часть
Теперь оба дива могут иметь оригинальные классы
И ещё — что бы код
Вот, всего несколько часов работы и страничка чекаута содержит наш допольнительный шаблон. Всё в рамках приличия, ядрёные файлы не модифицированы, все изменения только в папке с пользовательской темой…
Это оказалось не так просто, как казалось.
Для начала сделаем небольшой файл-шаблончик с нужными картинками. Это файл
app/design/frontend/default/sunnyD/template/callouts/checkout.phtml
:<div class="box"> <script src="https://siteseal.thawte.com/cgi/server/thawte_seal_generator.exe"></script> </div> <div class="box"> <img src="<?php echo $this->getSkinUrl('images/free-shipping.gif') ?>" alt="<?php echo __('Free Shipping') ?>" /> </div>
Первая картинка загружается динамически, для чего используется Javascript.
Первая попытка
Почему бы просто не добавить новый блок в checkout.xml? Для этого можно использовать встроенный блок
core/template
. Он очень удобен для вывода простых шаблонов без логики, ему нужно передать всего один параметр — шаблон, который надо вывести. И, т.к. шаблон простого чекаута состоит из контента и правого блока (шаблон 2columns-right.phtml
), добавить наш новый блок к правой части страницы, как-то так:<code><checkout_onepage_index> ... <reference name="right"> ... <block type="core/template" name="images" template="callouts/checkout.phtml"/> ...
Это даже работает, и на первый взгляд мы имеем именно то что надо — справа появляются наши картинки из шаблона
checkout.phtml
.Но на второй взгляд, когда нажать кнопку Continue что бы перейти к следующему шагу чекаута, правая часть страницы целиком перезагружается. html для правой страницы приходит в Ajax запросе. Этот html больше не содержит наших картинок.
Вторая попытка
Ладно, значит нужно поправить возвращаемый html, что бы он содержал наши картинки.
Для этого надо поправить
checkout.xml
, секцию checkout_onepage_progress
. Нужно добавить наш блок, как мы это делали в секции checkout_onepage_index
. Но что это? Наших картинок всё-равно нет!В общем в итоге выяснилось, что к блоку нужно добавить параметр
output
и присвоить ему значение toHtml
:<checkout_onepage_progress> ... <block type="core/template" name="images" output="toHtml" template="callouts/checkout.phtml"/> ...
Да что же это? Теперь после кнопки Continue видно только одну картинку, которая загружается через тэг
img
. Второй картинки, загружаемой через Javascript, не видно. Более того, хотя js код пришёл в ответе от сервера, он пропал из DOM дерева. Какой-то фильтр?В общем, попытка номер два тоже провалилась.
Успех
Ладно, если не получается показывать обе картинки модифицируя код правой части, возвращаемый с помощью Ajax запроса, попробуем сделать так, что бы шаблон оставался неизменным на протяжении всех шагов чекаута.
Javascript, работающий со страницей чекаута находится в файле
opcheckout.js
. Похоже, что код, который обновляет правую часть страницы, выглядит так:... reloadProgressBlock: function(){ var updater = new Ajax.Updater($$('.col-right')[0], this.progressUrl, {method: 'get', onFailure: this.ajaxFailure.bind(this)}); }, ...
Т.е. он берёт первый элемент с классом
col-right
и устанавиливает ему новый html, полученный с сервера.А вот где элемент с этим классом объявлен — файл
template/page/2columns-right.phtml
:... <!-- start right --> <div class="col-right side-col"> <?php echo $this->getChildHtml('right') ?> </div> <!-- end right --> ...
Не очень хорошо… Что бы мы ни поместили в правую часть страницы с помощью xml и
reference name="right"
, либо прямо в данный шаблон, это всё будет внутри дива с классом col-right
и, в итоге, будет затёрто на последующих шагах чекаута.Выходит, единственный выход — сделать свой шаблон, основанный на
2columns-right.phtml
. А в этом шаблоне как-то поместить наш шаблон с картинками «вне» правой части, что бы он не затёрся новыми данными.Итак, для начала создадим новый шаблон
2columns-right-checkout.phtml
, и укажем в checkout.xml
что использовать нужно именно его.Было:
<checkout_onepage_index> ... <reference name="root"> <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
Стало:
<checkout_onepage_index> ... <reference name="root"> <action method="setTemplate"><template>page/2columns-right-checkout.phtml</template></action>
Далее модифицируем новый шаблон
2columns-right.checkout.phtml
в части вывода правой части:<!-- start right --> <div class="side-col" style="float: right;"> <div class="col-right side-col" <?php echo $this->getChildHtml('right') ?></div> <div class="col-right side-col"> <?php echo $this->getChildHtml('images') ?> </div> </div> <!-- end right -->
Смысл такой. Создаём новый div-обёртку, которая будет содержать правую колонку. Мы не можем назначит ему класс
col-right
, потому что тогда контент этого дива затрётся. Но мы можем оставить ему класс side-col
(который просто установливает ширину колонки, сейчас 195px). И добавляем свойство float: right
что бы наш див-обёртка распологался справа.Затем добавляем внутрь этого дива-обёртки сначала исходную правую часть
getChildHtml('right')
, затем наш шаблон с картинками getChildHtml('images')
.Теперь оба дива могут иметь оригинальные классы
side-col
и col-right
. При переходе между шагами будет обновляться содержимое первого блока с классом col-right
, а второй блок с нашими картинками останется нетронутым на протяжении всего чекаута. Что и требовалось.И ещё — что бы код
getChildHtml('images')
отработал и отобразил наш блок core/template
с шаблоном с картинками, нужно его добавить в checkout.xml
внутри reference name="root"
. И ещё добавить свойство as
, равное images
. Это images
и есть то имя, по которому getChildHtml()
найдёт наш блок. Получаем:<checkout_onepage_index> ... <reference name="root"> ... <block type="core/template" name="images" as="images" template="callouts/checkout.phtml"/> ...
Вот, всего несколько часов работы и страничка чекаута содержит наш допольнительный шаблон. Всё в рамках приличия, ядрёные файлы не модифицированы, все изменения только в папке с пользовательской темой…