Первый шаг: Измените файл макета

В вашем lotusbreath/onestepcheckout.xml файлы, замените*<lotusbreath_onestepcheckout_index_index> дескриптор на <checkout_cart_index>.

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

Измените <block type="lotusbreath_onestepcheckout/onepage" name="checkout.onepage" as="checkout.onepage"> на <block type="lotusbreath_onestepcheckout/onepage" name="checkout.onepage" as="checkout.onepage" after="-">. Атрибуты after не нужны, но я думаю, что лучше, чтобы код оформления заказа был после блокировки корзины.

Теперь у нас есть страница оформления заказа в корзине в один шаг, вот так:

* Примечание: Если вы хотите сохранить одноэтапную проверку страница (/onestepcheckout/индекс), не заменяйте <lotusbreath_onestepcheckout_index_index>, а сделайте копию и измените скопированный дескриптор.

Второй шаг: Создайте модальный/диалог

Теперь нам нужно использовать библиотеку javascript для создания диалогового/модального окна. В "OneStepCheckout от lotusbreath" используется jQuery, поэтому для этого есть много вариантов. html-элемент, привлекающий внимание, - это <div class="lt-checkoutpage layout-2col " id="checkoutSteps">. Все элементы оформления заказа находятся внутри #checkoutSteps. Вероятно, этот идентификатор используется в качестве ссылки в JavaScript OneStepCheckout. Положите его в модальный.

Чтобы добавить пользовательскую библиотеку Js, используйте действие внутри <reference name="head"/>:

<action method="addItem">
    <type>skin_js</type>
    <name>path_in_my_theme/to/MY_JS_LIB_FILE.js</name>
</action>

Чтобы заставить модальный/диалог работать, возможно, вам потребуется некоторое (или много) изменение css.

Я провел простой тест с пользовательскими CSS и JS:

Третий шаг: Исправьте ошибки Css и Ajax

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

Четвертый шаг: Заменить призыв к действию (кнопки) для оформления заказа.

Наконец, необходимо просто изменить призыв к действию на проверку, удалив ссылки на исходную страницу и используя javascript для отображения диалогового/модального окна. Вы можете использовать атрибуты onclick для элементов или использовать метод jQuery "щелчок" в теге скрипта или файле js, например:

jQuery('.my-element-class').click(function(){
    //Code to display my dialog/modal
});