Поиск характеристик товара

Напишите нам, если не нашли ответ в Справке. Вы можете приложить скриншоты или видео, чтобы ускорить помощь:

Написать в чат  Написать в 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"
        }
      }
    ]
  }
}
Показать код
{
  "type": "field.checkbox",
  "preserveFalse": true,
  "label": "*Магазин не продает этот товар",
  "data": {
    "type": "data.output",
    "path": "not_available"
  }
}
  • plugin.toloka — настраивает внешний вид задания;
Показать код
{
  "type": "plugin.toloka",
  "layout": {
    "kind": "scroll",
    "taskWidth": 500
  }
}
Показать код
{
  "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"
  }
}

Написать в службу поддержки