Приложение My Shopify заменяет форму продукта - option_selection.js breaks: не может получить доступ к свойству parentNode

Question

Приложение My Shopify заменяет страницу «Форма заказа» / «Добавить в корзину» страниц продукта с собственной формой сортировки.Жидкая логика решает, отображать или нет весь элемент <form>.

Это прекрасно работает, но в некоторых темах (например, Jumpstart by Shopify) страница продукта полностью выдает ошибку, выдавая мне сообщение об ошибке: option_selection.js - can't access its "parentNode" property Я считаю, что это функция option_selection.js, где она ищетдля блока выбора / идентификатора варианта где-то на странице.

Конечно, этот блок идентификатора варианта / выбора не существует, поскольку он не отображается.

Как заменить дополнение вформа корзины при выполнении функций option_selection.js?

Обычно это не имеет большого значения, но команда обзора приложений Shopify создаст мне проблемы с этим, и, в частности, по теме Jumpstart, эта ошибка приводит к тому, что фотографии продукта не отображаются;ломая страницу полностью.

Есть идеи здесь?Очень ценится!

Answer 1

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

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

Для совместимости с option_selection.js вы будете искать, где вызывается new Shopify.OptionSelectors.Если ваш код установил переменную через Javascript, это может быть самая простая проверка.Пример встроенной установки, предполагающей, что ваш код создает функцию с именем MyAppNamespace.isProdHidden:

Оригинал:

new Shopify.OptionSelectors( ... 

Обновлено:

!(window.MyAppNamespace && MyAppNamespace.isProdHidden({{ product.id | json }}) ) && new Shopify.OptionSelectors( ...

Добавленный фрагмент кодаоценивается как false тогда и только тогда, когда ваше приложение загружено правильно, а ваша функция isProdHidden возвращает истинное значение.Этот сценарий может помешать запуску части new Shopify.OptionSelectors, поскольку мы используем && как своего рода операцию короткого замыкания / аварийного останова.

Если ваше приложение не загрузилось (или было удалено)из магазина без обновления ликвидного кода), или если MyAppNamespace.isProdHidden возвращает false, то добавленный блок кода оценивается как true, а new Shopify.OptionSelectors происходит как обычно.

эквивалентно переносу всего вызова new Shopify.OptionSelectors в оператор if с преимуществом установки, при котором стороне, устанавливающей ваше приложение, не нужно читать код темы, чтобы выяснить, где заканчивается вызов OptionSelectors.В большинстве тем код OptionSelectors разбит на несколько строк, и иногда разработчики тем объявляют свою функцию onVariantChange как встроенную анонимную функцию - ни одна из которых не является серьезным препятствием для опытных разработчиков, но является огромным осложнением для новичков и владельцев магазинов безэтот вид экспертизы.

Возможно, лучше всего сделать статус вашего приложения доступным через Javascript, если речь идет о совместимости с темами.У некоторых тем есть вызов OptionSelectors прямо на странице продукта, на который могут влиять динамические переменные Liquid, но многие вместо этого скрывают этот код в файле .js в папке активов.Тем не менее, другие темы вообще не используют код OptionSelectors Shopify и вместо этого запускают свои собственные функции, и, таким образом, ваше приложение может вмешиваться совершенно неожиданными способами или местами.Поэтому создание инструментов, облегчающих интеграцию вашего приложения с чужим кодом, - это одна из лучших вещей, которые вы можете сделать.

Вы также должны убедиться, что ваш код способен обрабатывать несколько продуктов, так какво многих магазинах есть быстрые магазины по всему сайту, которые могут загружать произвольные формы товаров.Убедившись, что вы сделали инструменты доступными, вы, ваша команда поддержки (если таковые имеются) и разработчики тем могут сделать необходимые обновления (почти!) Для любой произвольной темы.

Надеюсь, это поможет!