Форум

Oleg0 · #1 (**permalink**) 07.08.2021, 19:44

Всем привет!
Нужно помощь плохо разбирающемуся в скриптах.
Надеюсь, получится объяснить понятно.
Пытаюсь встроить вот эту штуку в корзину сайта https://docs.ozon.ru/logistics/delivery/widget/

Клиент выбирает пункт выдачи заказа и нажимает на кнопку "Забрать здесь". В этот момент генерируется такой код:
{"id":19068791345000,"type":"Пункт выдачи","address":"Россия, г. Москва, ш. Сколковское, д. 32","fittingClothesAvailable":true,"fittingShoesAv ailable":false}
Из которого мой скрипт берёт адрес пункта и вставляет его в поле с id=edit-panes-webform-nid3005-0--ozon - с этим мой скрипт справляется отлично (строка $('#edit-panes-webform-nid3005-0--ozon').val([person.address, person.id])

Одновременно с этим я хочу, чтобы в блок <div id="div_ozon" class="div_ozone"> добавился класс close_ozon (строка $('#div_ozon').toggleClass('close_ozon')

- и вот этот код почему-то не срабатывает.

Подскажите, пожалуйста, что нужно исправить? Сначала я думал, что это из-за того, что загрузка виджета идёт в iframe, но ведь первая часть моего кода срабатывает отлично.

Вот весь код.

<div id="div_ozon" class="div_ozone">
<div class="close"></div>
<iframe title="Ozon widget" style="width: 100%; height: 100%; min-height: 450px; min-width: 320px; border: none; overflow: hidden" src="https://rocket.ozon.ru/lk/widget?token=.......%3D%3D&hidepostamat=true">Браузер не поддерживает iframe</iframe>
</div>

<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
    // Важно не слушать чужие события
    if (event.origin !== "https://rocket.ozon.ru")
     return;
    console.log(event.data);
	var person = JSON.parse(event.data);
	$('#edit-panes-webform-nid3005-0--ozon').val([person.address, person.id]);
$('#div_ozon').toggleClass('close_ozon');
};

</script>

od0201 · #2 (**permalink**) 07.08.2021, 23:28

toggleClass это jquery, а в "весь код" я не вижу его подключение
а если без jquery, попробуйте на чистом js
document.querySelector('#div_ozon').classList.add( 'close_ozon')

<body>
  <div id="div_ozon" class="div_ozone">
    <div class="close"></div>
    <iframe title="Ozon widget" style="width: 100%; height: 100%; min-height: 450px; min-width: 320px; border: none; overflow: hidden" src="https://rocket.ozon.ru/lk/widget?token=.......%3D%3D&hidepostamat=true">Браузер не поддерживает iframe</iframe>
    </div>
</body>
<script>
  setTimeout(()=> {document.querySelector('#div_ozon').classList.add('close_ozon')}, 2000)
</script>

в по поводу кнопки в фреме, то это зависит тот же домен и протокол у фрема, если да, то пробуйте нажимать через iframe.contentWindow.document
иначе работать доступ закрыт

Oleg0 · #3 (**permalink**) 08.08.2021, 07:53

Сообщение от od0201

в по поводу кнопки в фреме, то это зависит тот же домен и протокол у фрема, если да, то пробуйте iframe.contentWindow.document.querySelector('#div_ ozon').classList.add('close_ozon')
иначе работать доступ закрыт

На моём сайте iframe грузится с https://rocket.ozon.ru/lk/widget. Значит, нажатие кнопки я никак не смогу использовать?

Я просто думал, что раз при нажатии кнопки у меня заполняется поле "#edit-panes-webform-nid3005-0--ozon", то и класс при нажатии тоже сможет подставиться.

А можно тогда как-то сделать, чтобы если заполнилось поле "#edit-panes-webform-nid3005-0--ozon", то добавляем в #div_ozon класс close_ozon?

od0201 · #4 (**permalink**) 08.08.2021, 10:32

Если верить документации, то при разных источниках доступ закрыт. У меня тоже не получилось.

Проблема в том что в представленом вами коде нет ни кнопки ни поля "#edit-panes-webform-nid3005-0--ozon". Можно только догадываться. Кнопка и поле находится в фреме и там обрабатывается данное событие, а так как #div_ozon находится вне фрема, а это значит что разные источники, значит никак

Oleg0 · #5 (**permalink**) 08.08.2021, 11:50

Вот у меня и появилась идея. Моё поле же заполняется при нажатии кнопки. Можно как то к этому событию прикрутить добавление класса? Мол если поле заполнилось, значит добавить класс.
У меня поле вот такое заполняется:

<input type="text" maxlength="128" name="panes[webform_nid3005][0][_ozon]" id="edit-panes-webform-nid3005-0--ozon" size="60" value="" readonly="readonly" class="form-text">

Оно на моём сайте.
Кнопка загружается в ifame, вот пример https://docs.ozon.ru/logistics/delivery/widget/

Oleg0 · #6 (**permalink**) 08.08.2021, 13:15

Вроде получилось что-то похожее на нужное.

<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
    // Важно не слушать чужие события
    if (event.origin !== "https://rocket.ozon.ru")
     return;
    console.log(event.data);
	var person = JSON.parse(event.data);
	$('#edit-panes-webform-nid3005-0--ozon').val([person.address, person.id]);

if (person.type == "Пункт выдачи")

document.querySelector('#div_ozon').classList.add('close_ozon');

};


</script>

Теперь и поле заполняется и класс вставляется (класс, кстати, закрывает окошко, в котором открывалась карта).

Форум

Справочник

Discord чат

Курсы javascript