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

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

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


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

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




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


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

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

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

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

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

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


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

В системе используется единый файл стилей по адресу: https://ecommtools.com/checkout.css
изображения внедрены в файл посредством base64 кодирования.

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

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



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

1 Если вы используете аналитику от Google и другие внешние сервисы, то комментарий
<!--ADD_JS_CODE -->
будет автоматически заменен на нужные Javascript коды.


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_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