Рубрики
Uncategorized

Создайте поле автозаполнения местоположения для Statamic V3

ОБНОВЛЕНИЕ: Версию этого дополнения с открытым исходным кодом можно найти здесь: https://github.com/mattrothenberg/l … С пометкой php, учебник, vue.

ОБНОВЛЕНИЕ : Версию этого дополнения с открытым исходным кодом можно найти здесь: ОБНОВЛЕНИЕ

Если вы в чем-то похожи на меня, вы были в восторге, услышав об открытой бета-версии Statamic V3.

Открытое бета-тестирование Statamic 3 началось! 🎉 Документы: https://t.co/D3MupV0ssH Репо: https://t.co/JFDKodjvqH Огромное спасибо нашим 100 альфа-тестерам, мы не можем вместить их всех в твит, но вы знаете, кто вы есть. Очень рад видеть, к чему приведет нас этот следующий этап. 😊

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

Имейте в виду, что Statamic V3 все еще находится в стадии бета-тестирования, что означает, что API и документация могут быть изменены (изменены).

Допущения и предпосылки

  • У вас есть свежая установка Statamic V3 , готовая к игре.
  • У вас есть Yarn или NPM, установленные по всему миру.
  • Вы готовы дать мне отзыв о том, насколько хорош/плох этот урок 😅

Цель

Как вы можете судить по фотографии на обложке статьи, мы пытаемся создать новый необычный тип поля, который автоматически заполняет адрес пользователя при вводе. Недавно мне пришлось реализовать аналогичный тип поля для веб-сайта CMS Craft, который функционирует как каталог для местных производителей оборудования. Используя эту информацию в базе данных сайта, мы можем создавать всевозможные интересные вещи на интерфейсе (которые выходят за рамки этого урока, но заслуживают упоминания).

  • Интерактивная карта, показывающая расположение различных предприятий

  • Поисковая система, в которой пользователи могут найти производителей, ближайших к их почтовому индексу

Мне было весело создавать этот пользовательский тип поля автозаполнения местоположения для @statamic . Получат ли люди пользу от короткого поста в блоге и/или скринкаста, проходящего через процесс разработки? Получат ли люди пользу от короткого поста в блоге и/или скринкаста, проходящего через процесс разработки?

приступая к работе

Если вы еще не запустили yarn или npm install в корневом каталоге вашего проекта, сейчас самое подходящее время для этого. Мы собираемся использовать сценарии разработки Statamic (а именно yarn watch ) при создании нашего пользовательского типа поля.

Чтобы добавить пользовательский Javascript в панель управления нашего сайта, нам необходимо выполнить действия, описанные в документах Statamic

В AppServiceProvider , расположенном в app/Providers/AppServiceProvider.php , нам нужно добавить следующие заклинания.

use Statamic\Statamic;

class AppServiceProvider
{
    public function boot
    {
        Statamic::script('app', 'cp.js');
    }
}

Затем из командной строки давайте создадим вышеупомянутый cp.js файл.

echo "console.log('sup')" > resources/js/cp.js

И, наконец, давайте скажем Webpack Mix – механизму Laravel для компиляции наших ресурсов CSS/JS – скомпилировать этот файл. Добавьте следующую строку в свой webpack.mix.js .

mix.js("resources/js/cp.js", "public/vendor/app/js");

Мы готовы идти. Бегать смотреть пряжу , откройте свой браузер и перейдите на панель управления, и вы увидите sup , зарегистрированный в консоли вашего браузера.

Настраиваемые типы полей

К счастью для нас, Statamic позволяет очень легко добавлять пользовательские типы полей на ваш сайт. В вашем терминале выполните следующую команду.

$ php please make:fieldtype location

Если все пойдет хорошо, вы должны увидеть следующий вывод.

Fieldtype created successfully.
Your fieldtype class awaits at: app/Fieldtypes/Location.php
Your fieldtype vue component awaits at: resources/js/components/fieldtypes/Location.vue

Сейчас самое подходящее время, как и любое другое, для создания Схема , в которой используется этот пользовательский местоположение тип поля. Имейте в виду, что в своем текущем состоянии тип поля будет полностью непригоден для использования. Правда, ненадолго..

Наша команда make:fieldtype сгенерировала для нас два файла – один файл PHP и один файл Vue. Файл PHP действует как своего рода “контроллер” для нашего компонента Vue, выполняя любую бизнес-логику/преобразование данных, необходимое для обеспечения того, чтобы наш компонент Vue имел данные, необходимые для его презентационных задач. В частности, этот PHP-файл предоставляет несколько функций, которыми мы можем воспользоваться

  • публичная функция blank() {} – Каким должно быть пустое/значение по умолчанию в нашем поле?
  • предварительная обработка общедоступной функции() {} – Как мы должны преобразовать данные, которые находятся внутри нашей записи до того, как они попадут в компонент Vue?
  • процесс публичной функции() {} – Как мы должны преобразовывать данные, которые наш компонент Vue выдает после нажатия пользователем кнопки “Сохранить и опубликовать”?

С другой стороны, в нашем компоненте Vue есть несколько интересных шаблонов для рассмотрения.

Обратите внимание, что по умолчанию наш компонент отображает следующий компонент (предоставленный нам Statamic) и “смешивает” что-то, называемое Типом поля .

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

Лично я не большой поклонник микширования по той простой причине, что зависимости нашего компонента – значение и обновление – полностью неявны . Вам просто “нужно знать”, что именно FieldType смешивается с нашим компонентом Location.vue , чтобы эффективно его использовать. Я призываю разработчиков Statamic рассмотреть что-то вроде компонента более высокого порядка/ ограниченные слоты , чтобы сделать это “смешивание” поведения, специфичного для Statamic, более явным.

Прошу прощения за боковую панель, давайте вернемся к работе.

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

😱 О-о-о! У нас есть пустое место, где должно быть наше пользовательское поле!

Это связано с тем, что, несмотря на создание нашего пользовательского типа поля, мы никогда не регистрировались это такое что наша панель управления может ее использовать. Внутри cp.js , давайте продолжим и импортируем ваш компонент Vue и зарегистрируем его соответствующим образом.

import Location from "./components/fieldtypes/Location";

Statamic.booting(() => {
  // NOTE: We need to add `-fieldtype` to the end of our
  // component's name in order for the CP to recognize it.
  Statamic.$components.register("location-fieldtype", Location);
});

И вот оно у вас есть. У нас есть простой, но настраиваемый компонент для указания нашего значения местоположение .

Запустите yarn watch со своего терминала, чтобы запустить сервер разработки и приготовиться к следующим шагам!

Автозаполнение адреса

Там нет недостатка в замечательных сервисах автозаполнения геолокации/адреса. Мой личный фаворит – Algolia Places , в первую очередь потому, что у них есть щедрый бесплатный уровень и потрясающая библиотека Javascript для превращения простого старого ввода HTML5 в модный виджет автозаполнения.

Подпишитесь на бесплатную учетную запись и обеспечьте себе Идентификатор ПРИЛОЖЕНИЯ и API_KEY . Они тебе понадобятся через секунду.

Как упоминалось ранее, Algolia предлагает замечательную библиотеку Javascript для “превращения любого ввода в автозаполнение адреса”, places.js . Давайте продолжим и добавим его в наш проект.

yarn add places.js

В нашем компоненте Location.vue давайте продолжим и приведем places.js в смесь. Перво-наперво давайте заменим компонент текстовый ввод на простой ввод .

Затем в теге сценария вашего компонента давайте импортируем places.js и используйте его в смонтированном крючке жизненного цикла (кстати, обычная процедура для использования сторонней библиотеки Javascript внутри компонента Vue). Обязательно используйте свой Идентификатор ПРИЛОЖЕНИЯ и API_KEY из вашей учетной записи Algolia.

Сохраните внесенные изменения, вернитесь в панель управления и возьмите свое новое автозаполнение для тест-драйва 😎 .

.

Но подождите, есть одна серьезная проблема. Когда мы нажимаем “Сохранить и опубликовать”, а затем обновляем, ввод имеет пустое значение? Как это могло быть, спросите вы? Ну, мы забыли здесь самую важную часть – сохранение автоматически заполненного адреса в нашей базе данных.

Давайте подключимся к событию изменение в нашем экземпляре places.js , привязывая событие к методу нашего компонента Vue, называемому handleAddressSelect .

mounted () {
  // below plugin initialization
  placesInstance.on("change", this.handleAddressSelect);
},
methods: {
  handleAddressSelect(e) {
    this.update(e);
  }
}

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

Ах да, я люблю город [Объект объект] …

Хотите верьте, хотите нет, но на самом деле это хорошо то, что мы видим. Это говорит нам о том, что наш сервер сохранил правильные данные – в данном случае сериализованную версию объекта грубого местоположения, который places.js выплевывает .

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

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

computed: {
  inputValue() {
    // If we've got a value, let's take `suggestion.value` off it.
    return this.value ? this.value.suggestion.value : "";
  }
}

Вернитесь в свой браузер, обновите страницу и запустите ее. Сейчас все должно выглядеть хорошо. Наши входные данные должны быть предварительно заполнены строкой (вместо “Объект объекта”) и последующими обновлениями, такими как сохранение правильных данных в серверной части.

Пользовательские Представления Индексов

Пожалуйста, не убивайте меня, но у нас действительно есть еще одна проблема. Вернитесь к представлению индекса коллекции и полюбуйтесь огромным массивом данных, которые отображаются в столбце Местоположение .

По умолчанию Statamic попытается отобразить содержимое наших сериализованных данных о местоположении в этой таблице. Но это определенно не то, чего мы хотим.

К счастью для нас, Statamic предоставляет нам два способа настройки представления наших данных о местоположении в представлении индекса коллекции.

“Простой” способ

Помните, как я говорил вам, что PHP-файл, который мы создали при запуске make:fieldtype , содержит множество функций, которые мы могли бы использовать для преобразования наших данных о местоположении? Ну, я забыл упомянуть, что одна из этих функций называется Индекс предварительной обработки и мы можем использовать его, чтобы соответствующим образом изменить представление наших данных о местоположении в индексных представлениях.

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

public function preProcessIndex($value)
{
    return $value ? $value['suggestion']['value'] : 'No location specified.';
}

🍻 Поздравляем вас с созданием вашего самого первого пользовательского типа поля!

“Более сложный” способ

Допустим, вы хотели добавить немного пикантности в представление индекса. Простой текст – это итак 2018 год.

К счастью для нас, Statamic предлагает API на основе Vue для настройки представления представлений индекса нашей коллекции.

В ресурсы/js/компоненты/типы полей давайте добавим компонент с именем LocationIndex.vue и добавим к нему следующий код.

Обратите внимание, что мы смешиваемся в Тип поля индекса , который предоставляет нам объект значение , который мы можем использовать в нашем шаблоне Vue. Это действительно наши неуклюжие сериализованные данные о местоположении, поэтому мы можем удалить предложение.значение как мы сделали выше, а также другие данные, такие как долгота и широта и т.д.

Одна из удивительных особенностей Statamic – и я, честно говоря, не уверен, случайно это или намеренно – заключается в том, что он использует TailwindCSS для оформления панели управления. Это означает, что мы можем использовать классы Tailwind в наших пользовательских компонентах панели управления Vue, как показано выше. Здесь мы показываем название адреса в соответствии с маленькой стрелкой, которая при нажатии выводит пользователей на карту местоположения OpenStreetMap. В противном случае мы показываем вспомогательный текст, чтобы пользователи знали, что местоположение не выбрано.

И вот оно у вас есть! Мы создали необычный виджет автозаполнения, который помогает пользователям вводить данные о местоположении, и мы изучили, как настроить отображение этих данных в бэкэнде.

Поверьте мне, здесь мы только поцарапали поверхность – отсюда открывается множество интересных возможностей для исследования, и я надеюсь, что этот пост придаст вам уверенности, необходимой для того, чтобы отправиться в путешествие по пользовательскому типу поля!

Пожалуйста, свяжитесь с нами в твиттере @mattrothenberg, если вы обнаружите какие-либо опечатки или проблемы, или если у вас есть вопросы!

Сердце

Оригинал: “https://dev.to/mattrothenberg/build-a-location-autocomplete-field-for-statamic-v3-49cp”

Читайте ещё по теме: