Shopify уиджетите не се показват след промяна на темата? Как да ги поправите

Уиджетите на Shopify приложения могат да изчезнат след смяна на темата, нейно обновяване или промяна в настройките на приложение. Продуктови ревюта, чат бутони, таблици с размери и други елементи може да спрат да се показват, въпреки че останалата част от магазина се зарежда нормално.

Първо проверете публикуваната тема, настройките за app embeds, добавените app blocks и шаблона на засегнатата страница. Ако всичко там изглежда правилно, преминете към диагностика на JavaScript грешки, външни ресурси и съвместимостта на приложението.

Липсващият уиджет невинаги означава, че самото приложение е повредено. Възможно е то да е инсталирано и да работи, но неговият елемент в магазина да е изключен, поставен в друг шаблон или възпрепятстван да се зареди.

Защо Shopify уиджетите изчезват след промени по темата

Shopify приложенията могат да се интегрират с темата на магазина чрез app blocks, app embeds или персонализиран код.

Тези методи работят по различен начин:

• App blocks добавят функционалност в конкретна секция или шаблон на страница. Примери са продуктовите ревюта, таблиците с размери и препоръките за продукти.
• App embeds добавят функционалност чрез настройките на темата. Примери са плаващи чат бутони и някои скриптове за проследяване или интеграции.
• Персонализиран код позволява на определени приложения да работят чрез скриптове или други промени, направени директно във файловете на темата.

Когато публикувате различна тема, може да се наложи повторно активиране или конфигуриране на интеграциите. Shopify изрично предупреждава, че приложенията, използвани в предишната тема, може да не са активни в новата.

Обновяването на съществуваща тема е различен процес. При стандартно обновяване Shopify обикновено пренася настройките, направени чрез редактора на темата, включително конфигурацията на app embeds и app extensions. Въпреки това несъвместими приложения, конфликти в персонализирания код или проблеми с настройките могат да доведат до изчезване на функционалности.

Други възможни причини са:

• Липсващ app block в съответния шаблон на страница.
• Изключена или скрита секция.
• JavaScript грешки, които пречат на инициализацията.
• Неуспешни заявки към външен доставчик на приложение.
• Правила за показване, които изключват определени продукти или посетители.
• Уиджети, които се зареждат едва след скролване или друго потребителско действие.

Започнете с проверка на настройките, преди да променяте кода на темата.

1. Проверете коя Shopify тема е публикувана

Преди да променяте настройките на приложенията, се уверете, че редактирате темата, която клиентите действително виждат.

В административния панел на Shopify:

• Отворете Online Store и преминете към списъка с темите.
• Намерете текущо публикуваната тема.
• Проверете дали наскоро е публикувана друга тема или е инсталирана обновена версия.
• Отворете засегнатата страница през публичния адрес на магазина.
• Сравнете поведението ѝ с предварителния преглед на съответната тема, ако е наличен.

Обикновените посетители виждат само публикуваната тема. Това, че даден уиджет работи в предварителния преглед на чернова, не доказва, че е активен в реалния магазин.

Проверете също дали проблемът засяга всички страници, или само определени продукти, колекции и шаблони.

Например, ако ревютата се показват на една продуктова страница, но липсват на друга, причината може да е в използваните шаблони, а не в инсталацията на приложението.

2. Проверете дали app embed е активиран

Изключеният app embed е една от първите настройки, които трябва да проверите, когато изчезне плаващ уиджет или друга функционалност, добавена от приложение.

Следвайте тези стъпки:

• В административния панел на Shopify отворете Online Store.
• Намерете темата, която искате да проверите, и изберете Edit theme.
• Отворете App embeds в редактора на темата.
• Намерете съответното инсталирано приложение.
• Проверете дали неговият app embed е включен.
• Ако трябва да е активен, включете го и натиснете Save.
• Прегледайте засегнатата страница и проверете публичния магазин, ако променяте публикуваната тема.

В зависимост от приложението може да е необходимо да проверите и неговите собствени настройки.

Важно: Shopify поддържа различни настройки на app embeds за отделните Markets. Ако уиджетът се показва в един регион, но липсва в друг, проверете избрания Market в редактора на темата, преди да променяте настройките по подразбиране.

Не всички приложения използват app embeds. Ако не намирате приложението в този списък, проверете дали то използва app block или друг метод за интеграция.

Официалните инструкции на Shopify са достъпни в Extend your theme with apps.

3. Възстановете липсващите app blocks в правилния шаблон

Ако са изчезнали продуктови ревюта, информация за размери или друг уиджет, който е част от съдържанието на страницата, проверете неговото разположение в редактора на темата.

App blocks се добавят към конкретни секции или шаблони. Инсталираното приложение не гарантира автоматично, че неговият блок присъства на всяка страница.

За да проверите:

• Отворете съответната тема в Shopify редактора.
• Преминете към засегнатия тип страница, например продуктова страница.
• Проверете кой шаблон използва страницата.
• Прегледайте секциите и блоковете в този шаблон.
• Потърсете очаквания app block и се уверете, че не е скрит.
• Ако липсва, използвайте Add block и потърсете приложението в Apps, когато секцията го поддържа.
• Ако е подходящо, използвайте Add section, за да добавите секция на приложението към шаблона.
• Запазете промените и тествайте засегнатата страница.

Някои секции и теми не поддържат всички видове app blocks. Съвместимостта зависи от архитектурата на темата и конкретното приложение.

Ако блокът не е наличен, проверете инструкциите за инсталиране и съвместимостта, преди да правите промени в кода.

Пример: Уиджетът за ревюта може да присъства в стандартния продуктов шаблон, но да липсва в алтернативен шаблон, използван за определена група продукти.

Коригирането само на стандартния шаблон няма да реши този проблем.

4. Проверете настройките и съвместимостта на приложението

Ако app embed или app block е конфигуриран правилно, но уиджетът продължава да липсва, проверете самото приложение.

Уверете се, че:

• Приложението все още е инсталирано и правилно конфигурирано.
• Съответният уиджет е активиран в настройките на приложението.
• Правилата му за показване включват засегнатите продукти, колекции или страници.
• Не се изисква допълнителна стъпка за настройване или активиране.
• Приложението поддържа текущо публикуваната тема.
• Скорошно обновяване на приложението не е променило изискванията за инсталация или настройка.

Някои приложения разчитат и на код, добавен към темата при предишна инсталация.

Ако наскоро сте обновили темата, проверете дали персонализираният код е пренесен успешно. При обновяване Shopify показва дали определени промени по кода не са могли да бъдат включени в новата версия.

Не копирайте стари скриптове директно в публикуваната тема, без да проверите актуалните инструкции на разработчика. Дублираният или остарял код може да създаде допълнителни проблеми.

Когато е възможно, тествайте промените в чернова или копие на темата, преди да ги публикувате.

5. Потърсете JavaScript грешки и проблеми с външните ресурси

Уиджетът може да е активиран правилно, но браузърът да не успява да го инициализира.

Отворете засегнатата страница и използвайте инструментите за разработчици на браузъра (Developer Tools).

Проверете Console

• Отворете панела Console.
• Презаредете страницата.
• Потърсете JavaScript грешки, свързани с липсващия уиджет или неговия доставчик.
• Проверете дали грешката се е появила след промяна на темата или приложението.
• Сравнете резултата със страница, на която уиджетът работи.

JavaScript грешката е диагностичен сигнал, но сама по себе си не доказва точната причина за проблема.

Проверете Network

Отворете Network, презаредете страницата и прегледайте заявките, свързани с приложението.

Потърсете:

• Неуспешни заявки за JavaScript или CSS файлове.
• HTTP грешки от доставчика на приложението.
• Заявки, блокирани от настройки за сигурност или разширения на браузъра.
• Ресурси, които не се зареждат или приключват неочаквано.
• Разлики между работещи и засегнати страници.

Ако очакваният външен скрипт изобщо не се заявява, възможно е интеграцията да не е активна или да не се добавя към конкретната страница.

Ако скриптът се зарежда, но уиджетът остава празен, причината може да е в инициализацията, настройките или данните, които връща приложението.

Не приемайте, че всяка неуспешна мрежова заявка е свързана с липсващия уиджет. Проверете дали ресурсът действително принадлежи към засегнатата функционалност.

6. Проверете отложеното зареждане, мобилната версия и Shopify Markets

Някои уиджети не се появяват веднага след първоначалното зареждане на страницата.

Например ревютата в долната част на продуктова страница може да се заредят едва когато посетителят скролне към тях.

Преди да приемете, че уиджетът липсва:

• Скролирайте до секцията, в която трябва да се появи.
• Изчакайте достатъчно време за зареждане на отложеното съдържание.
• Проверете дали се появява действителното съдържание, а не само празен контейнер.
• Повторете теста с мобилен размер на екрана.
• При необходимост сравнете обикновена и частна браузърна сесия.
• Проверете приложимите пазари, езици и правила за показване.

Някои уиджети зависят от съгласието за бисквитки, статуса на клиента, допустимостта на продукта или други условия, определени от приложението.

Бъдете внимателни при сравняване на региони и браузърни сесии. Различното поведение невинаги означава технически проблем.

Пример: Ако секцията за ревюта присъства, но не показва мнения, първо проверете дали съответният продукт действително има публикувани ревюта.

7. Проверете дали уиджетът отново работи правилно

След като приложите корекция, не се ограничавайте с проверка дали приложението се вижда в редактора на темата.

Тествайте действителното поведение, което клиентът очаква.

При уиджет за ревюта проверете дали мненията се появяват на продукт с публикувани ревюта.

При таблица с размери отворете съответния елемент и потвърдете, че съдържанието се показва.

При чат уиджет проверете дали бутонът отваря очаквания интерфейс, без да генерира свързани грешки.

Изпълнете следните проверки:

• Тествайте публикувания магазин, а не само предварителния преглед.
• Отворете нова браузърна сесия, за да не разчитате на кешираното състояние на страницата.
• Проверете поне една засегната страница и една сравнима работеща страница.
• Проверете съответните продуктови или други шаблони.
• Тествайте поведението на настолен компютър и мобилно устройство.
• Уверете се, че уиджетът показва реално съдържание или изпълнява предназначеното действие.
• Проверете отново за свързани грешки в Console и Network.

Ако проблемът остава, съберете адреса на засегнатата страница, версията на темата, името на приложението, браузърните грешки и стъпките за възпроизвеждане, преди да се свържете с разработчика на приложението или поддръжката на темата.

Наблюдавайте важните Shopify уиджети с GO4

Магазинът може да остане достъпен, докато важен уиджет от външно приложение не работи. Стандартните проверки за достъпност невинаги откриват подобни проблеми.

GO4 Monitoring предлага няколко допълващи се начина за диагностика и наблюдение.

Browser Lab може да отвори избрана страница в контролирана браузърна среда и да провери дали очакван DOM елемент съществува след зареждането на JavaScript.

За уиджет с отложено зареждане, например продуктови ревюта, можете да конфигурирате DOM проверка, да скролирате до секцията, да изчакате съдържанието и да проверите за елемент, който представлява действително ревю, а не само празен контейнер.

Изберете представителен продукт, за който се очаква да има видими ревюта. Стабилният и достатъчно конкретен CSS selector помага да се ограничат фалшивите предупреждения.

External Radar наблюдава външни ресурси на избрани страници от магазина. Той помага да откривате проблемни или бавни доставчици и да разследвате промени във външните зависимости, включително скриптове и уиджети от приложения.

Липсващият или неуспешно зареден външен ресурс е основание за проверка, но не е окончателно доказателство, че видимият уиджет не работи.

JS Agent, когато е инсталиран и конфигуриран, може да предоставя пасивни сигнали от реални браузърни посещения. При поддържаните планове Custom DOM проверките могат да оценяват дали очаквани елементи присъстват в съответните браузърни събития.

Тези сигнали зависят от реалния трафик, настройките за извадка и конфигурираните проверки. Те не заменят контролираните браузърни тестове.

За подробности по настройката вижте документацията на GO4.

Мониторингът помага за откриване на потенциални проблеми след промени в темата и приложенията, но не отстранява автоматично причината за тях.

Финален списък за проверка

Преди да приемете проблема за решен, потвърдете, че:

• Сте установили коя тема действително е публикувана.
• Необходимият app embed е активиран, когато се използва такъв.
• App block присъства в правилния шаблон на страницата.
• Настройките за показване в самото приложение са правилни.
• Няма останали свързани JavaScript грешки или проблеми със зареждането на ресурси.
• При необходимост сте проверили отложеното зареждане, мобилната версия и регионалното поведение.
• Уиджетът работи в публичния магазин, а не само в предварителния преглед.

Когато Shopify уиджет изчезне, започнете с настройките на темата и разположението на блоковете. След това проверете конфигурацията на приложението и поведението в браузъра.

Най-надеждното решение е това, което възстановява очакваното потребителско изживяване и позволява функционалността да бъде проверявана отново след бъдещи промени по магазина.