Модификация страниц оформления заказа

Вам доступна чрезвычайно мощная, но опасная функция полного изменения стиля и расположения всех элементов на страницах оформления заказа. Вы можете редактировать и создавать новый вид страниц полностью на свой вкус.

Это не распространенное изменение шапки и нижней части страниц, а полное изменение ВСЕХ элементов, расположения блоков и исходных блоков отображения информации.


То не будьте самонадеянны и ни в коем случае НЕ ПРОИЗВОДИТЕ НИКАКИХ НАСТРОЕК!
Изменением системных шаблонов оформления должны заниматься только профессионалы. Возможность изменения шаблонов даст максимальную гибкость в оформлении специалистам, но принесет большие проблемы новичкам. Крайне не советуем вам что либо модифицировать если вы не уверены в своих силах, гораздо проще нанять фрилансера.

При использовании пользовательских шаблонов оформления ваш аккаунт снимается с "гарантийного обслуживания" и все вопросы по работе страниц оформления вида "почему у меня не отображаются кнопки оплаты и не выбирается доставка" будут ИГНОРИРОВАТЬСЯ! Вы сами создали свои шаблоны и несете ответственность за исправную работу интерфейса оформления заказа. При возникновении ошибок или "странного поведения" страницы заказа, просто возьмите исходный системный код нужной страницы и строчка за строчкой меняйте системный код на свой, тем самым вы выявите место ошибки.




Основные принципы и автоисправление ошибок


1 Каждый шаблон это отдельная страница, построенная с соблюдением всех правил верстки HTML, поэтому она должна начинаться с хидера, где объявляется кодировка, подключаются стили и т.д., и заканчиваться футером с тегами </body></html>.

В случае отсутствия маркера автозамены для хидера - <HTMLHEADER> и маркера футера <HTMLFOOTER>, сохранение шаблона будет невозможным и система сообщит вам об этой ошибке.

Шаблоны <HTMLHEADER> и <HTMLFOOTER> вводятся в разделе "Настройки" - "Страница заказа", вкладка "Дополнительные и необязательные к заполнению шаблоны". В случае отсутствия вышеуказанных шаблонов будут автоматически использованы системные шаблоны по умолчанию, в которых так же прописан графический CSS стиль по умолчанию.

2 За css стили ваших страниц отвечает маркер <!-- USER_CSS_STYLES -->

3 Возможна частичная замена шаблонов, т.е только начальная "страница оформления", страница Upsell предложения, страница выбора доставки и т.д. При отсутствии нужного шаблона в файлах вашей конфигурации, будет использован стандартный системный код, поэтому необязательно создавать шаблоны для каждого этапа оформления.

Описание шаблонов


Тема оформления
Для переключения стиля страниц выберите "Пользовательскую" тему оформления. Вы можете переключаться между темами оформления в любой момент времени, ваши шаблоны останутся сохраненными в системе.

Файл изображений
В качестве отправной точки используйте исходное системное изображение:
https://ecommtools-690791.c.cdn77.org/images/checkout_ru.png

Если вас не устраивают графические элементы стандартной темы от EcommTools, или хотите их доработать, вы можете закачать свой файл графики в формате PNG через файл-менеджер в разделе "Инструменты" - "Мои файлы".

Совет: Возможно "облегчить" размер файла изображения, удалив неиспользуемые кнопки платежных систем.

Будьте внимательны и сохраняйте свой PNG файл с прозрачным фоном (transparency).

Вы не обязаны создавать новый файл изображений для своей темы оформления, вполне достаточно использовать готовый (системный) файл, указав в своем файле стилей ссылку на css sprite:
https://ecommtools-690791.c.cdn77.org/images/checkout_ru.png
или
https://ecommtools-690791.c.cdn77.org/images/checkout_en.png
в случае использования английской версии интерфейса.


Файл CSS стилей

В качестве отправной точки используйте исходный код системного файла:
http://static.ecommtools.com/checkout_ru.css

Если вы будете использовать свой личный файл изображений вместо системного, то замените ссылки вида:
background-image: url(https://ecommtools-690791.c.cdn77.org/images/checkout_ru.png);
на ссылку своего персонального sprite файла.



Общая информация для всех шаблонов

1 Если вы используете аналитику от Google, то комментарий
<!-- GOOGLE ANALYTICS CODE -->

будет автоматически заменен на полный JS код с вашим идентификатором Google Analytics и id текущей страницы.
Удалять этот маркер и заменять его исходным кодом крайне не рекомендуется.

2 КРАЙНЕ НЕ РЕКОМЕНДУЕТСЯ (ЗАПРЕЩАЕТСЯ) удалять специальные HTML комментарии типа <!-- ADD_JS_CODE -->,
а так же специальные блоки, отмеченные в начале и в конце одинаковыми комментариями:
//блок автоматического парсинга
//JS_RETYPE_EMAIL
...
//JS_RETYPE_EMAIL

и тому подобные, потому что эти блоки автоматически модифицируются системой и исходя из ваших настроек
будут или автоматически удалены, или заменены на нужный код. Удалив подобные блоки ваша страница "лишится гибкости"
и может выдавать не те результаты, которые вы ждете.

Так же, многие шаблоны используются системой для дальнейшей подстановки данных, например, блок:
<!-- ITEM_INFO_TEMPLATE -->
...
<!-- ITEM_INFO_TEMPLATE -->


является определяющим шаблоном и используется системой для вывода информации о товарах. Подобные специальные комментарии, они добавлены не просто так, а именно для генерации нужного содержимого.

3 Во всех шаблонах используются одинаковые HTML фрагменты, например:
<SYSTEM_DATA>
Системные параметры. Ни в коем случае не удалять маркер!
Маркер должен находится именно внутри передаваемой формы, т.е. перед закрывающим тегом </form>

<!-- STATUS_BAR -->...<!-- STATUS_BAR -->
Код индикатора этапов прохождения заказа.
Вы можете полностью менять конструкцию этого индикатора.
При изменении формата обязательно указывайте новую ширину в комментарии:
<!-- STATUS_BAR_WIDTH=650 -->

Переменная %STATUS_BAR_WIDTH% будет автоматически заменена на указанную вашу ширину.

Фрагменты вида:
<!-- STATUS_BAR_STEP_1 -->...<!-- STATUS_BAR_STEP_1 -->
<!-- STATUS_BAR_STEP_2 -->...<!-- STATUS_BAR_STEP_2 -->
<!-- STATUS_BAR_STEP_3 -->...<!-- STATUS_BAR_STEP_3 -->
автоматически удаляются в зависимости от типа заказа и содержат специальные маркеры автозамены:

<TAB_WIDTH> - Ширина ячейки исходя из общей ширины индикатора и числа этапов.
<TD_BACKGRND_1>...<TD_BACKGRND_5> - Стиль подсветки фона ячейки текущего этапа.
<TXTSTYLE_1>...<TXTSTYLE_5>- Стиль подсветки текста ячейки текущего этапа.

Вы можете менять как графические элементы индикатора, так и подписи к определенному этапу оформления.



Начальная страница оформления заказа

Исходный код шаблона: http://ecommtools.com/cgi-bin/templates.cgi?id=page1

<!-- ITEMS_FULL_INFO -->...<!-- ITEMS_FULL_INFO -->
Блок отображения информации о заказанных товарах.

<!-- ITEM_INFO_TEMPLATE -->...<!-- ITEM_INFO_TEMPLATE -->
Для отображения информации о товаре используется именно этот фрагмент.
Можете его изменить под свои нужны, но не удаляйте специальные двойные комментарии,
они используются для парсинга и автозамены. Используется системой для определения формата.

<!-- SELECTED_ITEM_PROPERTIES -->...<!-- SELECTED_ITEM_PROPERTIES -->
Автозамена на дополнительные свойства товара (если есть, иначе блок будет автоматически удален).

<!-- ITEM_QUANTITY_INFO -->..<!-- ITEM_QUANTITY_INFO -->
Автозамена на информацию о заказанном количестве товара (если есть, иначе блок будет автоматически удален).

<!-- ITEM_QUANTITY_FIELD -->... <!-- ITEM_QUANTITY_FIELD -->
Поле ввода желаемого количества (если товар поддерживает множественный заказ, иначе блок будет автоматически удален).

<!-- ITEM_PROPERTIES_LIST -->... <!-- ITEM_PROPERTIES_LIST -->
Выбор дополнительных свойств товара (если есть, иначе блок будет автоматически удален).

<!-- REMOVE_ITEM_BUTTON -->...<!-- REMOVE_ITEM_BUTTON -->
Кнопка "Убрать из заказа".

<!-- ITEMS_SEPARATOR -->...<!-- ITEMS_SEPARATOR -->
Разделитель блока товаров. Автоматически удаляется у последнего товара в списке или если заказан только один товар.

<!-- MIN_ORDER_ALERT -->...<!-- MIN_ORDER_ALERT -->
Сообщение, которое выводится если вы установили минимальную сумму заказа, но товаров в корзине недостаточно.
Блок автоматически удаляется из кода если требуемая сумма достигнута.

<!-- CUSTOMER_DATA -->...<!-- CUSTOMER_DATA -->
Форма ввода пользовательских данных. Так же не рекомендуется удалять двойные комментарии,
т.к. вся лишняя информация будет удалена системой автоматически!

<!-- FULL DETAILS -->...<!-- FULL DETAILS -->
Блок ввода полной информации о клиенте. Показывается исходя из свойств заказанных товаров и ваших установок отображения страницы заказа.

<!-- HIDDEN_DETAILS_SUBMIT_BUTTON -->...<!-- HIDDEN_DETAILS_SUBMIT_BUTTON -->
Блок сокрытия кнопки "Продолжить", автоматически удалится из кода, если вы не используете соответствующие настройки на странице заказа.

<!-- ADD_INFO -->...<!-- ADD_INFO -->
Вывод дополнительной информации на странице заказа (если есть, иначе блок будет автоматически удален).

<!-- GATEWAY_LIST_DETAILS -->...<!-- GATEWAY_LIST_DETAILS -->
Блок платежных методов (кнопок). Редактировать очень осторожно или же вообще лучше не трогать.

<!-- LEARN PAYMENT METHODS -->...<!-- LEARN PAYMENT METHODS -->
Текст подсказки для "тугодумов". Автоматически удаляется если доступен только один способ оплаты.

<!-- GATEWAY_BLOCK -->...<!-- GATEWAY_BLOCK -->
Блок парсинга для платежной кнопки. Используется системой для определения формата.

<!-- GATEWAY_INFO -->...<!-- GATEWAY_INFO -->
Внешний вид платежной кнопки - Название метода, описание.



Cтраница ввода подробных данных о клиенте

Исходный код шаблона: http://ecommtools.com/cgi-bin/templates.cgi?id=page2

Описание не требуется, т.к. используются все маркеры из шаблона "Начальная страница оформления заказа" и в самих комментариях кода вполне понятно за что ответственен определенный фрагмент.



Cтраница ввода подробных данных для юридических лиц

Исходный код шаблона: http://ecommtools.com/cgi-bin/templates.cgi?id=page3

Описание не требуется, т.к. используются все маркеры из шаблона "Начальная страница оформления заказа" и в самих комментариях кода вполне понятно за что ответственен определенный фрагмент.



Cтраница UPSELL предложений

Исходный код шаблона: http://ecommtools.com/cgi-bin/templates.cgi?id=page4

<!-- UPSELL_ITEM_BLOCK -->...<!-- UPSELL_ITEM_BLOCK -->
Шаблон для вывода UPSELL товаров. Используется системой для определения формата.

<!-- UPSELL_INFO_UP --> и <!-- UPSELL_INFO_BOTTOM -->
Вывод информации о товаре исходя из настроек (отображать вверху или внизу UPSELL предложения), ненужный маркер будет автоматически удален.

<PROCESS_FORM>
Системный маркер для парсинга. Не удалять!



Cтраница выбора типа почтовой доставки

Исходный код шаблона: http://ecommtools.com/cgi-bin/templates.cgi?id=page5

<!-- DISCOUNTS_INFO -->...<!-- DISCOUNTS_INFO -->
<!-- ADD_GATEWAY_PAYMENT_FEE -->... <!-- ADD_GATEWAY_PAYMENT_FEE -->
<!-- ADD_COST_INFO -->... <!-- ADD_COST_INFO -->
Информация о назначении блоков указана в самих блоках.
Если соответствующей информации в заказе нет (скидки, корректировка стоимости, надбавки и т.д.) блок будет автоматически удален.

<!-- COURIER_INFO_BLOCK -->... <!-- COURIER_INFO_BLOCK -->
Блок информации о методах доставки. Используется системой для определения формата.

<!-- COURIER_ADD_INFO -->... <!-- COURIER_ADD_INFO -->
Дополнительная информация о почтовом курьере (если есть, иначе блок будет автоматически удален).

<UPDATE_BUTTON>
Кнопка "Пересчитать" стоимость доставки при выборе другого курьера. Используется css стиль - "btn_sh_refresh".

<CONTINUE_BUTTON>
Кнопка "Продолжить оформление заказа". Используется css стиль - "btn_next".



Cтраница просмотра деталей и подтверждения заказа

Исходный код шаблона: http://ecommtools.com/cgi-bin/templates.cgi?id=page6

<!-- ITEMS_FULL_INFO -->...<!-- ITEMS_FULL_INFO -->
Блок отображения информации о заказанных товарах.

<!-- ITEM_INFO_TEMPLATE -->...<!-- ITEM_INFO_TEMPLATE -->
Для отображения информации о товаре используется именно этот фрагмент. Можете его изменить под свои нужны, но не удаляйте специальные двойные комментарии, они используются для парсинга. Используется системой для определения формата.

<!-- ORDER_COST_DETAILS -->...<!-- ORDER_COST_DETAILS -->
Блок подробной информации о заказе.

<!-- COMPANY_DETAILS -->...<!-- COMPANY_DETAILS -->
Информация о компании (при выборе метода "банковский платеж для юр.лиц").
При остальных методах оплаты блок будет автоматически удален.

<!-- SHIPPING_ADDRESS -->...<!-- SHIPPING_ADDRESS -->
Информация об адресе доставки.



Финальная страница с платежными реквизитами

И последняя страница, в структуре которой вы уже наверняка разберетесь.

Исходный код шаблона: http://ecommtools.com/cgi-bin/templates.cgi?id=page7

<!-- ITEMS_FULL_INFO -->...<!-- ITEMS_FULL_INFO -->
Блок отображения информации о заказанных товарах.

<!-- ITEM_INFO_TEMPLATE -->...<!-- ITEM_INFO_TEMPLATE -->
Для отображения информации о товаре используется именно этот фрагмент. Можете его изменить под свои нужны, но не удаляйте специальные двойные комментарии, они используются для парсинга. Используется системой для определения формата.

<!-- POSTSELL_ITEM_BLOCK -->...<!-- POSTSELL_ITEM_BLOCK -->
Шаблон для вывода информации о POSTSELL товарах. Используется системой для определения формата. Если подобных товаров нет, фрагмент автоматически удаляется.

<!-- ORDER_COST_DETAILS -->...<!-- ORDER_COST_DETAILS -->
Блок подробной информации о заказе.

<!-- PAYMENT_INFORMATION -->...<!-- PAYMENT_INFORMATION -->
Блок отображения ваших реквизитов для оплаты или кнопок оплаты электронных систем.

<!-- PAYMENT_NOTES -->...<!-- PAYMENT_NOTES -->
Дополнительная информация по выбранному платежному методу. Выводится если указана в свойствах платежной системы (раздел "Настройки" - Платежные системы" - "Дополнительный текст (в HTML формате), который будет показан на итоговой странице счета".

<NEW_BILL_FORM_DATA>
Подстановка системных данных для кнопки "Оформить заказ заново".



Страница сообщений об ошибке

Исходный код шаблона: http://ecommtools.com/cgi-bin/templates.cgi?id=page8

Шаблон используется для вывода сообщений об ошибках и уведомлений пользователю вроде "Пожалуйста, выберите метод доставки" и т.д. Сообщение подставляется вместо маркера <ERRROR_MESSAGE>.



Тестирование

Перед созданием своей темы рекомендуется пройти полный этап оформления заказа, используя стандартную тему оформления EcommTools и в режиме исходного кода внимательно изучить структуру генерируемых страниц, чтобы иметь представление какой маркер и какой блок за что отвечает.

Для проверки правильности своих шаблонов совершенно не обязательно сразу переключать основную тему оформления на вашем рабочем магазине.

1 Создайте специальный товар с идентификатором "user_css_test".
Вводите именно этот идентификатор, т.к. он "укажет" системе, что нужно использовать пользовательскую тему оформления.

2 Включите в товаре все возможные опции, а именно, - установите "физический" тип товара, подключите upsell и postsell товары.

3 Выключите все опции в разделе "Настройки" - "Страница заказа" - "Ускорение оформления заказа".

4 Введите свои коды шаблонов.

5 Создайте заказ с тестовым товаром и обязательно проверьте все этапы прохождения заказа:
- "Ваш заказ"
- "Выгодное предложение"
- "Варианты доставки"
- "Информация о клиенте"
- "Счет к оплате"

Когда вы полностью убедитесь в корректности отображения всех графических элементов и стилей, можете смело переключать основную тему оформления на "Пользовательскую".



Важная информация

При вставке PNG & CSS файлов используйте https:// ссылки, а не простые http://, т.к. процесс оформления заказа происходит через защищенное https соединение и многие браузеры блокируют контент, загружаемый по незащищенному протоколу.

Не используйте внешне подгружаемую графику, .js и .css файлы, т.к. они могут некорректно загружены или вообще заблокированы по той же причине - обычное незащищенное соединение. Допустимо подключать внешние файлы ТОЛЬКО ЕСЛИ ваш сервер поддерживает https соединение (вы должны иметь SSL сертификат, спросите об этом у хостера или у админа своего сервера).

Используйте как можно меньше дополнительных JS скриптов, которые грузят страницу и увеличивают вероятность некорректной работы всех элементов страницы.



Разработчикам и дизайнерам

Если вы создали действительно новую и красивую тему оформления страниц заказа, то можете получить приятное вознаграждение за ваши труды: денежное вознаграждение (обсуждается индивидуально) или бесплатный аккаунт сроком от 6 месяцев.

Под "действительно новой" подразумевается действительно новый стиль оформления, графических элементов и их расположения, а не вариации какой-либо темы в другой цветовой гамме.

Предложенная вами тема оформления передается в полное распоряжение EcommTools, но с обязательным упоминанием вас, как автора (информация о разработчике и ссылка на веб сайт), что может послужить дополнительным источником трафика и привлечением новых клиентов.

Email для связи: info@ecommtools.com
В сообщении укажите ссылку на вашу страницу заказа с созданной темой или скриншоты в jpg формате.



Вернуться к оглавлению руководства пользователя EcommTools