Поиск характеристик товара
Напишите нам, если не нашли ответ в Справке. Вы можете приложить скриншоты или видео, чтобы ускорить помощь:
Написать в чат Написать в Telegram
Используйте этот пресет, если нужно проверить наличие определенного товара в интернет-магазине.
В пресете по умолчанию для создания интерфейса задания используется редактор HTML/JS/CSS. В этом разделе описано, как использовать Конструктор шаблонов для этой же цели. В разделе Интерфейс проекта выберите Конструктор шаблонов и вставьте код из примера в раздел Конфигурация.
В этом примере исполнителю нужно найти товар в заданном интернет-магазине и разместить ссылку на него в соответствующем текстовом поле. В случае отсутствия товара на интернет-площадке — активировать опцию Магазин не продает этот товар.
Интерфейс задания содержит:
- описание товара;
- текстовое поле для ввода ссылки;
- кнопку, которая открывает страницу интернет-магазина;
- чекбокс, который позволяет отметить, что товар отсутствует в магазине.
Обратите внимание, что в примере уже настроены горячие клавиши, внешний вид задания и валидация: исполнитель не сможет отправить задание, если не добавит ссылку на товар или не активирует опцию Магазин не продает этот товар.
Из каких компонентов состоит этот пример
- view.list — отображает данные списком;
- view.link — добавляет ссылку;
Показать код
{
"type": "view.link",
"url": {
"type": "data.input",
"path": "url"
},
"content": {
"type": "data.input",
"path": "name"
}
}
- view.action-button — добавляет кнопку, которая вызывает действие из свойства
action
;
В этом примере при нажатии кнопки вызовется компонент action.open-link, который открывает в браузере новую вкладку со страницей интернет-магазина, где нужно найти указанный товар.
Показать код
{
"type": "view.action-button",
"validation": {
"type": "condition.link-opened",
"url": {
"type": "data.input",
"path": "shop"
},
"hint": "Перейдите по ссылке"
},
"action": {
"type": "action.open-link",
"payload": {
"type": "data.input",
"path": "shop"
}
},
"label": "Перейти на сайт"
}
- field.text — добавляет поле для ввода текста;
Когда опция Магазин не продает этот товар неактивна, сочетание компонентов helper.if и condition.equals отображает поле ответа.
Показать код
{
"type": "helper.if",
"condition": {
"type": "condition.equals",
"data": {
"type": "data.output",
"path": "not_available"
},
"to": false
},
"then": {
"type": "view.list",
"items": [
{
"type": "field.text",
"label": "Страница товара",
"data": {
"type": "data.output",
"path": "link"
},
"placeholder": "https://",
"validation": {
"type": "condition.required"
}
}
]
}
}
- field.checkbox — добавляет чекбокс;
Показать код
{
"type": "field.checkbox",
"preserveFalse": true,
"label": "*Магазин не продает этот товар",
"data": {
"type": "data.output",
"path": "not_available"
}
}
- plugin.toloka — настраивает внешний вид задания;
Показать код
{
"type": "plugin.toloka",
"layout": {
"kind": "scroll",
"taskWidth": 500
}
}
- plugin.hotkeys — добавляет горячие клавиши.
Показать код
{
"type": "plugin.hotkeys",
"w": {
"type": "action.open-link",
"payload": {
"type": "data.input",
"path": "shop"
}
}
},
{
"type": "plugin.hotkeys",
"q": {
"type": "action.toggle",
"data": {
"type": "data.output",
"path": "not_available"
}
}
}
Добавить описание
Чтобы добавить описание к заданию, используйте компонент view.text.
Показать код
{
"type": "view.text",
"content": "Найдите товар в интернет-магазине и введите ссылку на страницу с этим товаром в текстовое поле."
}
Если нужен отформатированный текст, используйте компонент view.markdown. Обратите внимание, что компонент требует больших ресурсов и может создавать нагрузку на слабых устройствах исполнителей.
Показать код
{
"type": "view.markdown",
"content": "**Найдите товар в интернет-магазине и введите ссылку на страницу с этим товаром в текстовое поле.**"
}
Добавить оформление
Чтобы исполнители легче ориентировались в задании, выделите разные типы данных с помощью цветных блоков, используя компонент view.alert.
В этом примере текст задания выделен синим цветом.
Показать код
{
"type": "view.alert",
"theme": "info",
"content": {
"type": "view.text",
"content": "Найдите товар в интернет-магазине и введите ссылку на страницу с этим товаром в текстовое поле."
}
}
Добавить изображение
Чтобы помочь исполнителям лучше понять задание, добавьте к нему изображение с помощью компонента view.image.
Показать код
{
"type": "view.image",
"maxWidth": 350,
"url": {
"type": "data.input",
"path": "imagepath"
}
}
Добавить поле для ввода текста
Чтобы пользователи могли оставлять комментарии, добавьте поле для ввода многострочного текста с помощью компонента field.textarea.
Показать код
{
"type": "field.textarea",
"label": "Оставьте свой комментарий",
"hint": "Опишите, сколько времени потребовалось, чтобы найти продукт, сообщите, отличается ли фактическое название продукта от названия в запросе, расскажите, почему вы не нашли продукт и т. д.",
"placeholder": "Введите текст",
"data": {
"type": "data.output",
"path": "comment"
}
}