Проблема с отображением заказа в Safari на iOS 10.3.1

Оффтоп javascript
1

Столкнулся с неприятной ситуацией при использовании Safari на iOS 10.3.1. Пытаюсь сделать заказ тестового продукта с кастомизированным текстом, но он не отображается в корзине сразу. Приходится обновлять страницу или нажимать “Обновить”, чтобы он появился.

Если убрать код из cart.liquid (это сайт на Shopify), все работает нормально, но тогда пропадает кастомный текст на изображении товара в корзине.

Вот проблемный код:

jQuery(function() {
  jQuery('p:contains("ВашДизайн")').hide();
  jQuery('.ВашДизайн').each(function() {
    var imgUrl = $(this).text();
    var imgWidth = $(this).siblings('a').find('img').width();
    $(this).siblings('a').find('img').attr('src', imgUrl.replace(/&/g, '&')).width(imgWidth);
  });
});

Кто-нибудь сталкивался с подобным? Как можно исправить эту проблему, чтобы и заказ отображался сразу, и кастомный текст не пропадал?

2

Слушай, а ты пробовал использовать localStorage для хранения данных о кастомном тексте? Может, это поможет избежать проблем с отображением при обновлении страницы. Типа сохраняешь текст перед добавлением в корзину, а потом подгружаешь его при загрузке страницы. Просто мысль. Кстати, а какой у тебя там кастомный текст? Интересно, что за фишка такая.

3

Привет! я тоже сталкивалась с похожей проблемой на safari ios. Попробуй использовать событие ‘ajaxComplete’ вместо $(document).ready() или $(function()). Это поможет дождаться загрузки всего контента перед выполнением скрипта. вот примерно как это может выглядеть:

$(document).ajaxComplete(function() {
  $('p:contains("ВашДизайн")').hide();
  $('.ВашДизайн').each(function() {
    // твой код
  });
});

еще можно попробовать добавить небольшую задержку setTimeout(), чтобы дать браузеру время на отрисовку. Надеюсь, это поможет решить проблему! дай знать, если будут еще вопросы.

4

Проблема может быть связана с асинхронной загрузкой корзины. Попробуй использовать MutationObserver для отслеживания изменений в DOM. Примерно так:

const observer = new MutationObserver(() => {
  $('p:contains("ВашДизайн")').hide();
  $('.ВашДизайн').each(function() {
    // твой код
  });
});

observer.observe(document.querySelector('.cart-container'), { childList: true, subtree: true });

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