В Фреймер-чате спросили интересный вопрос про то, как в рамках одного фреймер-проекта показывать альтернативные ветки сценариев для удалённых АБ-тестов. Имя сценария можно передавать в URL через хэш — текстовую часть вместе с символом #.
Таким образом, ссылка framer.cloud/wdjop/index.html#A будет вести на сценарий А с синими экранами, а framer.cloud/wdjop/index.html#B - на B с зелёными.
Это позволяет не разделять проект на два и не шерить две независимые ссылки для каждого сценария, а красиво решить проблему, меняя только хэш в ссылке.
Конечно, в рамках одного проекта можно сделать разводящий экран с кнопками перехода на нужный сценарий. Но его увидит респондент. Мы не хотим зависеть от него и хотим свести подготовку к минимуму.
Ключевые моменты
1. Доступ к значению хэша можно получить через свойство
window.location.hash2. Фреймер отображает прототипы в облаке внутри айфрейма. Страница-обёртка показывает блок с описанием прототипа и кнопкой Open In Framer. Это значит, что если присобачить хэш к ссылке, полученной от облака, ничего не получится. Страница с прототипом не получит хэш страницы-обёртки. Основатель Фреймера Кун Бок подсказал, что нужно дописать к ссылке /index.html, чтобы страница прототипа открывалась без обёртки. И тогда уже добавлять хэш.
3. Чтобы объединить экраны в сценарий, используем FlowComponent. Итого, имеем два флоу-компонента: flowA и flowB. В зависимости от значения хэша, ифом выбираем нужный.
4. Чтобы отобразить нужный сценарий, используем метод placeBefore() и при помощи него вытягиваем флоу наверх, как карту в колоде.
—
#для_профи #инструменты #Фреймер