Это руководство объясняет, как создать бесплатную панель отслеживания прогресса доставки для магазина Shopify с использованием фрагмента Liquid, CSS и JavaScript. Эта функция призвана мотивировать покупателей, визуально отображая их прогресс в достижении порога бесплатной доставки. Она гарантирует, что панель правильно отображается при первоначальной загрузке страницы с помощью Liquid и обновляется в реальном времени при добавлении, изменении или удалении товаров из корзины. Реализация также уделяет первостепенное внимание доступности для программ чтения с экрана и учитывает пользователей с предпочтениями по снижению движения.Первый шаг включает создание фрагмента Liquid, 'free-shipping-bar.liquid', который рассчитывает оставшуюся сумму и процент на основе общей суммы корзины и заданного порога. Затем этот фрагмент отображает начальное состояние панели и ее сообщение на сервере, предотвращая любую визуальную задержку. После этого добавляется пользовательский CSS для стилизации панели прогресса, включая плавный переход для анимации заполнения. Затем создается файл JavaScript, 'free-shipping-bar.js', для обработки обновлений в реальном времени.Этот код JavaScript извлекает текущую общую сумму корзины из '/cart.js' и соответствующим образом обновляет панель и сообщение. Он достигает этого, оборачивая нативную функцию браузера 'fetch', позволяя панели автоматически обновляться после любых запросов, изменяющих корзину. Руководство подчеркивает важность доступности, объясняя, как атрибуты 'role="progressbar"' и 'aria-valuenow' отображают прогресс для программ чтения с экрана, в то время как 'aria-live="polite"' изящно объявляет об изменениях.В нем также затрагивается производительность, отмечая, что анимация заполнения отключена для пользователей, предпочитающих сниженное движение. Руководство описывает несколько ограничений и соображений, таких как совместимость со старыми темами, которые могут использовать XHR вместо 'fetch', обработка нескольких валют и предположения о десятичных знаках валюты. Оно подчеркивает, что правило бесплатной доставки должно быть настроено отдельно в настройках доставки Shopify, чтобы соответствовать отображаемой цели панели.Наконец, рекомендуется выбрать соответствующий порог бесплатной доставки, который кажется достижимым для покупателей. Руководство завершается предложением провести тщательное тестирование в магазине разработки, чтобы убедиться, что панель правильно работает в различных сценариях, включая добавление, удаление и превышение порога. Оно предлагает Brix в качестве альтернативы для тех, кто предпочитает не поддерживать пользовательский код, предоставляя панель прогресса вознаграждений с несколькими уровнями среди других функций.