Одним из любимцев семьи Palatinate Tech является Your Golf Travel; веб-сайт, который специализируется на отдыхе в гольф в Великобритании и во всем мире. Мы стремимся обновлять цены и всю актуальную информацию, необходимую пользователям для принятия решения о том, куда отправиться в отпуск.
Одной из проблем, с которыми мы недавно столкнулись, было количество пакетов, которые не загружались динамически, а вместо этого были жестко закодированы (жестко закодированы!) на десятках страниц сайта. Эти жестко закодированные пакеты включали информацию о ценах, основе доски и количестве отзывов о месте проведения в пакете.
Для некоторых наших целевых страниц контент доставляется через внутреннюю административную систему, в которой сотрудники по продукту и маркетингу тратят время на написание контента. Большинство страниц сайта имеют структурированные макеты, использующие один и тот же шаблон, но все еще есть некоторые целевые страницы, которые без определенных шаблонов и просто используйте HTML, написанный в системе администратора.
Страница выше, например, является нашей страницей все включено-гольф-праздники, на которой есть информация о пакетах все включено, которые мы продаем. Еще несколько месяцев назад внутренним сотрудникам приходилось вручную заходить во внутреннюю административную систему и жестко кодировать весь HTML-код, необходимый для размещения этих пакетов на сайте.
Это очень неэффективная и разочаровывающая вещь. Это не только отнимает много времени, но и опасно. Цены на пакеты, хранящиеся в нашей базе данных, меняются с регулярной частотой, и если наши внутренние сотрудники кодируют пакеты таким образом, с жестко закодированной информацией о ценах, вы можете себе представить разочарование пользователей, когда они запрашивают пакет с устаревшей ценой!
Мы поняли, что эти пакеты должны загружаться динамически, после рендеринга и загружаться прямо из базы данных. Нет больше неприятных ужасов жесткого кодирования HTML.
Мы решили создать API, который будет обслуживать пакеты для нашего приложения React на внешнем интерфейсе. Мы дали нашему внутреннему персоналу конкретные инструкции о том, что они больше не должны жестко кодировать эти пакеты, а вместо этого использовать волшебный короткий код, который будет динамически генерировать для них пакет.
‹span class="package-box" data-slug="cornelia-diamond-resort"›
Вот и все. От более чем 30 строк отвратительного HTML до одного простого тега span. Теперь самый дешевый пакет для Cornelia Diamond Resort будет загружаться на страницу, на которой они размещают этот тег.
Как React помог нам в этом?
Сначала мы создали компонент PackageGenerator, экземпляр которого мы создали в файле static_pages.js. Эта функция ниже будет работать на любой странице, которая обслуживается через нашу внутреннюю систему администрирования, и в строке 2 вы можете видеть, что она получает все элементы, которые имеют класс «package-box», по сути захватывая все волшебные теги, которые есть у наших внутренних сотрудников. размещается в теле страницы.
Затем мы использовали прекрасный метод жизненного цикла React, componentDidMount, чтобы убедиться, что при отображении страницы и создании экземпляра компонента мы делаем вызовы API для получения пакетов, указанных в атрибуте данных в теге span.
Если магический тег содержит определенный идентификатор пакета в атрибуте данных, он извлечет этот конкретный пакет из бэкэнда. Если он просто содержит слаг в атрибуте данных, он вернет самый дешевый пакет для этого конкретного места.
После выполнения вызовов API мы вызываем this.setState, который вызывает функцию рендеринга React, которая затем создает экземпляр нового компонента Package внутри страницы.
К счастью, этот компонент уже существовал для нас в то время, поскольку мы динамически загружали пакеты на наших страницах поиска на сайте, поэтому мы могли эффективно повторно использовать компонент, который использовался где-то еще. Это так прекрасно и эффективно, что я мог плакать.
Результатом стало более эффективное использование времени сотрудников, обновленный веб-сайт без устаревшей информации о ценах и довольные пользователи, которые жили долго и счастливо. Было приятно работать с React над решением этой конкретной бизнес-задачи.
Мы постоянно стремимся улучшить наши внутренние системы и создать более устойчивую инфраструктуру. Если вы заинтересованы в решении этих задач вместе с нами, свяжитесь с нами, мы нанимаем!
