Структурированное ТЗ ниже

Сайт - solanin.vision

Пояснение :

Виджет в iframe менять его дизайн мы не можем. Но при этом он выбивается из общего дизайна страницы оформления заказа, поэтому мы берем из раздела Payments элементы и весь дизайн и переносим на страницу order go, этими элементами мы перекрываем не функциональную часть этого виджета ( Все до кнопок PayPal и оплата картой ) через css. Так же для того что бы страница оплаты не отличалась и все выглядело целостно, мы берем весь дизайн раздела payment и тоже переносим на страницу order go. Цель - покупатель не должен заметить что он уже покинул страницу оформления заказа и на самом деле находиться на другой странице. Далее мне нужно поменять дизайн кнопок, поэтому мы берем картинки других кнопок и размещаем поверх кнопок в iframe использую свойства css и js код мы делаем так, что бы картинки пропускали клики и клик пользователя проходил через эти картинки на кнопку, при этом они должны исчезнуть сразу после клика ( Для этого и нужен js ). При этом когда пользователь нажимает на оплату картой так как внутри iframe меняется дизайн наше перекрытие также должно подстроиться под это. Как и какими элементами перекрыть виджет можно увидеть на видео или на psd файле. Надеюсь вы поняли что я хочу сделать


1. Нужно полностью убрать страницу payment и сделать так что бы заказ считался завершенным поле этапа shipping

2. Из payment вытянуть раздел billing address и переместить его в shipping

3. Перенести и все блоки и хедер (Кроме биллинга ) из payment на страницу order-go

4. При правильном заполнении адреса доставки там появляется платежный виджет и нужно будет через css и позиционирование перекрыть часть виджета блоками из страницы payment что бы он был перекрыт до кнопки PayPal и карты. В приложу пример как +/- это должно выглядеть.

5. Далее я скину новые картинки для кнопок и нужно будет закрыть этими картинками кнопки. И сделать так что бы картинки пропускали клики и сделать скрипт что бы они пропадали при нем же.

6. При нажатии на кнопку оплата картой виджет меняет свой размер, поэтому блоки которые перекрывают лишнюю информацию должны будут тоже изменяться (Часть может пропасть, часть сдвинуться) это возможно уже походу работы только понять будет. Все это можно привязать к клику по той картинке-копке которую мы сделали в предыдущем пункте.

7. Так же в заменить картинкой кнопку pay при оплате картой.

8. Теперь к основному checkout. Стрелочку в низ в блоке show order summary нужно изменить с синего на черный

9. Проверить шрифт. Т.к. у меня нет уверенности что в данный момент там стоит мой шрифт.

Я попробую сделать визуализацию как это все должно выглядеть примерно.