Вчера мы создали наш первый сервис, используя фреймворк Services, и, сколько бы радости мы ни получали от отцовских шуток, которые он возвращал, во всем этом было что-то гораздо менее забавное: оно было статичным 😱. У нас был один URL-адрес, по которому мы звонили, и это так. Ни путей, ни заголовков по запросу, ни параметров запроса - ничего. Что ж, сегодня мы собираемся все это изменить! Мы собираемся создать идеальный виджет отцовских шуток, который позволит вам не только отображать случайную отцовскую шутку (как мы это делали вчера), но и искать отцовскую шутку по определенному запросу 🤓

В поисках идеальной отцовской шутки

Icanhazdadjoke.com позволяет нам искать отцовскую шутку, используя конечную точку поиска: https://icanhazdadjoke.com/search и параметр запроса: term для поискового запроса. Давайте расширим сущность Services Framework, которую мы создали вчера, чтобы иметь возможность обрабатывать новый /Magic-Search маршрут.

  1. Откройте Magic.js контроллер, который мы создали вчера, в вашей среде IDE.
  2. Под функцией дескриптора Show добавьте следующую функцию:

Давайте рассмотрим, что у нас есть:

Строка 3: задает magicSearch в качестве шаблона, который будет отображать контроллер (мы создадим его в следующем разделе).

Строка 4: получает параметр запроса term из объекта querystring объекта req. Этот объект querystring содержит все параметры запроса, переданные контроллеру SFRA, и к каждому параметру запроса можно получить доступ, указав его имя.

Строка 6: метод getURL() возвращает URL-адрес, указанный в учетных данных объекта Services Framework. Мы можем использовать результат этого метода, чтобы добавить любой путь, который мы желаем для службы, и в нашем случае путь search.

Строка 7: в этой строке представлены два новых метода: setURL() и addParam():

* setURL() используется для установки URL-адреса для вызова службы, заменяя статический URL-адрес, определенный в учетных данных объекта Services Framework. Если объект не использует никаких учетных данных, setURL() определит URL-адрес, который будет вызывать служба.

* addParams() используется для добавления параметров к сервисному вызову. Если ваша служба использует метод GET, параметры будут добавлены как параметры запроса. Если ваша служба использует метод _18 _ / _ 19_, параметры будут добавлены как параметры тела.

В нашей реализации мы используем setURL(), чтобы установить вызов службы для URL-адреса, который мы создали в строке 6, и addParams(), чтобы добавить параметр term, необходимый для конечной точки поиска icanhazdadjoke.com.

Наконец, мы используем метод call объекта service для фактического вызова службы icanhazdadjoke.com и сохранения результата с переменной svcResult.

Строки 8–11: если вызов службы был успешным, свойство svcResult object будет содержать ответ JSON от службы. Этот ответ JSON содержит свойство results, которое содержит массив объектов-шуток. Мы сохраним results в новом свойстве нашего properties объекта с именем jokes, а поисковый запрос - в новое свойство с именем term.

Строка 13: вызывает метод рендеринга объекта res, передавая ему объект properties, который мы создали в строке 2. Этот объект позже можно использовать в шаблоне ISML при его рендеринге.

Строка 14: вызывает метод next(), переданный в качестве аргумента функции, которая вызывает следующее промежуточное ПО в цепочке.

Рендеринг смеха

Теперь, когда у нас за плечами новый обработчик маршрута, давайте создадим шаблон ISML, который он будет отображать:

  1. cd в папку templates/default нашего картриджа и создайте новый файл с именемmagicSearch.isml.
  2. Добавьте в новый шаблон следующее:

В большей части кода в этом шаблоне нет ничего нового, поэтому давайте сосредоточимся на самом интересном - цикле шуток:

Строки 14–17: эти строки вводят элемент isloop. Этот элемент позволяет нам перебирать массив элементов, подобно другим итераторам JavaScript, таким как forEach. Здесь мы просматриваем коллекцию шуток объекта pdict (вернитесь и прочтите вчерашний пост, если вы не помните, что такое pdict), называя каждую итерацию как jokeObject (поскольку он содержит объект joke, аналогичный тому, который мы видели вчера. ) и добавьте его свойство шутки как элемент li в неупорядоченный список (элемент ul) на странице.

Дикий 🌈

Чтобы протестировать наш новый маршрут и шаблон, нам нужно загрузить картридж обратно в SFCC. Об этом позаботится наша любимая команда npm run uploadCartridge в корне папки с картриджами.

Чтобы проверить наш поисковый маршрут, используйте его базовый URL (должно быть что-то вроде https: //‹ имя экземпляра ›.demandware.net / on / Demandware.store / Sites-RefArch-Site / default / Magic-Search) и добавьте параметр запроса с именем term со значением, которое вы хотите найти. Конечный результат выглядит так: https: //‹ имя экземпляра ›.demandware.net / on / demandware.store / Sites-RefArch-Site / default / Magic-Search? Term =‹ поисковый запрос ›.

Если все прошло хорошо, вы должны получить страницу, подобную этой:

На этом мы завершаем наше развлечение. Конечно, есть и другие свойства, которые вы можете использовать со своей службой, например .addHeader(name, value), чтобы добавить заголовок к запросу, или setRequestMethod(method), чтобы изменить метод HTTP (например ,POST или PUT), или даже использовать метод setOutFile(file), чтобы установить выходной файл для хранения ответ службы, однако, мы отложим работу с ними на потом.

Завтра нас повеселит очень важный аспект работы с картриджами - События (а именно событие onRequest).

Как всегда, жду ваших комментариев здесь или в Твиттере 😎