что такое динамическая страница wix
Как в конструкторе Wix создавать динамические страницы
Пошаговая инструкция для чайников по созданию
динамических страниц сайта-конструктора Wix в рамках рубрики
профессии Новой Эпохи нашего эзотерического сайта.
Содержание
В мае 2021 года в своей ленте facebook мне попался пост Назара Статкевича в его блоге о том, как он, будучи инвалидом I группы (ДЦП), смог открыть свой небольшой бизнес. Зайдя по ссылке на его только оформлявшийся сайт ELECTRONOM, я решила предложить ему свою помощь в его дальнейшей разработке.
В начале сентября лимит в 100 статических страниц нами был исчерпан, в то время как ассортимент магазина значительно расширился.
И я предложила Назару переделать всю выкладку на коллекции динамических страниц, взявшись разбираться с премудростями их настройки, поскольку динамические страницы помогают создавать пользователям сайты с неограниченным контентом.
Итак.
Любая страница любого сайта начинается с его URL.
Начинающие работать с конструктором Wix об этом забывают, поскольку на более ранних конструкторах кириллица автоматически переводилась в URL на латиницу (на Wix вы получите из кириллицы длиннющие десять строк цифр).
Создание коллекции динамических страниц Wix
Клацаем кнопку «Добавить на сайт» и ждём-с долгенько. 
Концевик URL динамической страницы
Постараемся не забыть, что слово cable станет промежуточным именем для всех позиций нашей таблицы новой коллекции, а самым последним словом будет стоять в URL слово (латиницей тоже), внесенное нами в столбец Title.
По умолчанию именно оно является отображаемым поисковиками в выборке заголовком вновь создаваемой страницы, что нас категорически не должно устраивать!
Итак! Мы придумываем удобные для нас и пользователей короткие, содержащие только латинские буквы, цифры и тире наименования, ставим их в столбец Title, после чего они автоматически вписываются в URL каждой страницы этой группы.
Задаваемые линки динамических страниц Wix
Лучше всего, чтобы это был именно тот ключевой запрос, по которому пользователь ищет информацию.
Или даже три связанных между собой запроса.
Для этого в самой таблице коллекции динамических страниц мы предусмотрительно создадим специальный столбец, назовём его Teg и впишем в него по каждой строке нужные нам три ключевика, разделив их между собой ровными вертикальными чёрточками.
Для Главной страницы сайта Назара Статкевича это три ключевика:
Купить качественные аксессуары для смартфонов | ELECTRONOM | Доставка по Украине
Теги заголовков динамических страниц Wix
Загрузка контента в таблицу динамической коллекции Wix
На этом SEO-настройка не закончена, поскольку нам кроме заголовка нужно дать краткое описание содержания каждой вновь создаваемой страницы. Лучше всего писать для этого уникальный свой, ниоткуда не копированный текст (иначе рейтинг в поисковой выборке будет сильно занижен и наш сайт на 70-х позициях никто никогда не найдёт).
SEO настройка динамических страниц Wix
В нашем случае всё было просто.
Я взяла уже готовый разработанный самим Назаром шаблон страницы товара с функционалами:
Добавила к ним для удобства навигации кнопки
«Предыдущая» [динамическая страница],
«Следующая», и кнопку все для возврата на страницу списка.
Кроме того я вывела в карточку и списка, и самого товара информацию о наличии товара (вверху) и автоматически обновляемую самим сайтом дату последних изменений информации по каждой строке всех коллекций (внизу под кнопкой перехода на соответствующую динамическую страницу коллекции).
В меню сайта все эти группы динамических страниц идут с пометками Title.
Для организации страницы списка (эти страницы имеют пометку All) я воспользовалась готовым пресетом самого Wix, немного переделав его под выбранный изначально самим Назаром дизайн.
Репитер динамического списка коллекции страниц Wix
Подключение каждого функционала к соответствующему столбцу каждой коллекции поначалу кажется великой недостижимой премудростью, но с каждой вновь создаваемой коллекцией становится всё более понятным и даже механически выполняемым действием.
Подключение динамических страниц к коллекциям данных Wix
Сложности с репитерами преодолимы
Неприятной неожиданностью для меня стало ограничение каждого репитера (повторителя на странице списка) всего 12 позициями, в то время как товарная группа может содержать намного больше артикулов.
Репитер динамического списка страниц Wix
В этом случае нужно ставить второй, третий и так далее точно такой же репитер, при этом подключать к ним придётся не изначальную коллекцию Cable, например, а коллекции Cable dataset, Cable dataset2 и так далее.
Настройка фильтров в коллекции данных wix
Мы с Назаром желаем всем успешного создания и настройки
динамических страниц на ваших сайтах в рамках конструктора Wix,
разработчикам которого передаём нашу благодарность
и восхищение их предусмотрительностью и заботой о потребностях пользователей!
WIX Code — уникальные возможности для конструктора сайтов: динамические данные + JavaScript
Сегодня хочу поговорить про WIX Code — очень крутую и перспективную штуку, которую запускает один всем известный веб-конструктор. Данная технология, по сути, привнесет в нишу абсолютно новый опыт и возможности веб-разработки, переманив еще больше вебмастеров на свою сторону. Если раньше платформа WIX была основным претендентом на то как сделать сайт максимально быстро и просто, то в будущем с ее помощью можно будет решать гораздо более серьезные универсальные задачи.
В основе нововведения лежит 2 ключевые фишки:
Эти две особенности приближают WIX к классическим CMS системам, сохраняя в нем плюсы конструктора.
Что дает WIX Code?
Следует отметить, что после внедрения этой технологии в систему, вам не обязательно нужно с ней работать. Если вы раньше делали простенькие визитки на WIX, создавали блоги, портфолио с помощью базовых инструментов и модулей — все это можете продолжать реализовывать и в дальнейшем. Не следует переживать о том, что сервисом будет пользоваться сложнее.
Данная технология — лишь дополнительная опция для разработчиков, которые хотят получить от конструктора чуть больше.
WIX Code позволяет:
В сети есть хорошее видео о запуске Beta версии WIX Code, где не просто рассматривают ее особенности, но и на практике показывают работу с динамическими данными и JavaScript. Это реально что-то новое.
Основные функции WIX Code
Если разбирать все опции, которые будут доступны в WIX Code после релиза, то там пока что имеется 5 основных фишек.
База данных (Database Collections)
В сервисе появится что-то вроде БД для хранения разных наборов информации: тексты, фото, телефоны, имена, числа и т.п. Пользователь сможет быстро их редактировать и выводить во фронтэнде в рамках выбранного макета.
В подобные списки можно, например, вносить инфу о заказчиках/работниках, квартирах для аренды или курортах в туристическом сайте и т.п.
Динамические страницы (Dynamic Pages)
Если вам раньше нужно было сделать раздел с описаниями своих товаров или услуг, то приходилось вручную физически создавать эти страницы. Не смотря на функцию копирования, процесс все равно достаточно хлопотный, я уже не говорю о редактировании данных.
С динамическим контентом работа упрощается — один раз настраиваете, а потом только меняете значения в БД.
С помощью новой функции можете легко организовать несколько категорий продукции, в которых каждый элемент будет иметь свой уникальный URL и содержание (как в обычных CMS).
Конструктор форм (User Input)
В принципе, текущая задача реализуется с помощью дополнительных приложений WIX из App Market. Однако теперь вы сможете не просто собирать разные данные от пользователей, но и хранить их в БД, а затем выводить в любом месте веб-проекта.
Создавайте формы заказов, бронирования билетов, опросники и т.п. Причем все реализуется без написания кода.
Интерактивность (Custom Interactions)
JavaScript позволит управлять поведением элементов страницы — добавлять эффекты при наведении, нажатиях, лайках. Например, в первом видео из статьи разработчик демонстрирует как реализовать задачу, когда после клика на иконку сердечка, увеличивается число лайков «+1». Либо сможете внедрить следующую фишку:
В WIX обещают, что для этого не нужны сверхмощные познания в JS. Думаю, в документации хорошо будут описаны все доступные опции.
Wix Code APIs
Пункт пригодится более продвинутым разработчикам. Он позволяет подключать и взаимодействовать с API сторонних приложений. Добавьте сюда еще поддержку JavaScript и работу с базой данных и вы получите весьма мощный «конструктор».
Плюс вот вам еще парочка опций, которые анонсированы в следующих релизах:
«Достаточно круто» — скажете вы, и будете правы!
С чего начать?
На момент написания этой статьи инструмент находится на стадии бета версии. Чтобы присоединиться к первым тестировщикам можете в разделе с описанием WIX Code в правом верхнем углу кликнуть по кнопке «Apply for Beta». Далее заполняете форму и отправляете запрос для доступа.
Что касается обучающих материалов — без помощи вы не останетесь. В разделе Resources имеется вся необходимая информация:
Этого должно хватить и начинающим юзерам, и тем более профи.
Итого. Мне кажется, что все, описанные выше, функции и направления станут определенным трендом в будущем развитии конструкторов сайтов, постепенно приближая их к стандартным CMS. Причем в качестве плюсов у данных сервисов сохраняются отсутствие забот с хостингом и устоявшийся набор элементов, работающих через Drag&Drop. С такими перспективами WIX и подобные ресурсы вполне можно будет рассматривать для создания крупных серьезных веб-проектов. С помощью интеграции сторонних приложений и JavaScript получится реализовывать весьма интересные задачи. Я, в принципе, приятно удивлен.
А что вы думаете про WIX Code? Как вам такой «поворот» в нише конструкторов сайтов?
Создание сайта с Wix Code: обзор
Произошло событие в мире сайтостроения, которое, на наш взгляд, заслуживает подробного обзора. Речь пойдет о конструкторе сайтов Wix и его новой разработке.
Не смотря на то, что конструкторы призваны максимально облегчить создание сайтов, они обычно оказываются мало интересны требовательным пользователям и тем более вебмастерам из-за отсутствия возможности гибкой настройки функциональности сайта. Wix решил устранить этот серьезный пробел, создав решение Wix Code, позволяющее легко программировать дополнительную функциональность сайта и модифицировать существующую.
Wix Code упрощает создание веб-приложений и надежных сайтов, не требуя наличия сервера, позволяя компаниям сократить время, необходимое им для настройки и поддержки сайтов, а разработчикам сосредоточиться на других процессах. Пользователь может создавать коллекции в базе данных и наполнять страницы разнообразным контентом, добавлять собственные формы и полностью управлять поведением сайта. Есть возможность использовать встроенный API, а также прикреплять любые сторонние API. Все эти возможности доступны в новых компонентах привычного визуального редактора. Вносимые изменения остаются совместимы с SEO (поисковой оптимизацией сайта). Систему можно развернуть в один клик мыши, благодаря встроенной базе данных, back-end JavaScript и IDE, размещенных в безопасном облаке Wix.
Wix Code значительно расширяет рынок, предлагая разработчикам и дизайнерам решение для создания веб-приложений, которые могут адаптироваться для любых потребностей бизнеса,
— сказал Авишай Абрахами, соучредитель и генеральный директор Wix.com.
С помощью Wix Code мы уже создали инфраструктуру и предоставляем платформу свободной и гибкой для пользователей, чтобы быстро создавать пользовательские решения, обычно связанные с настройкой и обслуживанием.
Прежний набор функций редактора всегда доступен по умолчанию, если пользователю нет необходимости в использовании новой функциональности. Если же есть желание попробовать, знайте, что большинство функций Wix Code не требуют технических знаний или кодирования. Непрофессионалы могут настраивать базу данных, компоненты пользовательского интерфейса, формы ввода и элементы управления с помощью технологии перетаскивания (drag&drop).
Давайте подробнее рассмотрим на конкретном примере преимущества, которые дает новая платформа.
Пример использования и особенности Wix Code
Предположим, вы владелец интернет-магазина и хотите отображать товары на разных страницах вашего сайта. Ранее было нужно вручную дублировать каждую страницу, делать копирование-вставку текста и фотографий, которые хотели включить. Теперь, с помощью Wix Code можно наполнять коллекцию в базе данных, которую также легко редактировать, как обычную электронную таблицу. В базу можно добавлять все товары, изображения к ним и любой другой сопутствующий контент. Затем, можно создать шаблоны страниц, которые будут адаптироваться к каждому товару из коллекции. Это называется «Динамическими страницами». Эта возможность очень экономит время и позволяет создавать более крупные и сложные сайты. Рассмотрим ниже ряд основных особенностей Wix Code:
База данных и коллекции
База данных вашего сайта состоит из коллекций, содержащих разнообразный контент страниц (например, информацию о продуктах), а также информацию о пользователях. Каждая коллекция может рассматриваться как таблица данных. Каждая строка в таблице является элементом в коллекции, и каждый элемент содержит поля, которые определяются столбцами вашей коллекции. Вы можете выбирать, как и где использовать эти данные на своем сайте, и контролировать, кто может добавлять, редактировать и просматривать его. Управление контентом не влияет на дизайн. Можно добавлять и редактировать весь текст и изображения в коллекциях базы данных, без влияния на внешний вид сайта.
Коллекция в базе данных.
Динамические страницы
Динамические страницы отличаются тем, что для них используется шаблон с единым стилем дизайна. Можно создавать сотни новых страниц с настраиваемым URL-адресом и уникальным контентом, но единым шаблоном. Например, для каждой страницы товаров интернет-магазина можно задать единый шаблон, и, редактируя этот шаблон, изменения автоматически применяются ко всем страницам товаров, без необходимости правки каждой из них.
Пользовательские формы ввода
Включить в сайт можно формы опросов, комментариев, отзывов, пользовательские анкеты и др. Любая форма может содержать различные элементы, такие как: радио-кнопки, флажки, выпадающие меню, текстовые элементы, кнопки загрузки, таблицы. Элементы обладают интерактивными функциями и различными эффектами, что значительно улучшает вид и повышает удобство использования.
Все собранные от форм данные будут автоматически сохранены в базу данных и использоваться затем в любом месте сайта.
Взаимодействие с пользователями
К различным элементам страницы можно добавлять код JavaScript, для настройки их поведения в ответ на действия пользователя. Создать отклик можно для всего, что делает посетитель сайта, например: клик по кнопке, наведение курсора мыши на какой-либо элемент и т.д.. Это легко сделать, даже если вы не являетесь разработчиком JavaScript.
В примере, на скриншоте ниже, показано, как скрыть и показать разные элементы в зависимости от того, как пользователь взаимодействует со страницей: 
Кликая по предметам, они появляются в рюкзаке. Скрытие предмета удаляет его отображение, но сохраняет пространство, в котором он располагался. Затем, если кликнуть на добавленный в рюкзак предмет, он вернется на прежнее место. Чуть ниже на представленном скриншоте видно, как здорово можно применить эту функцию к выбору расцветки представленного товара (в данном случае, рюкзака).
Внешние API, которые можно использовать на сайте.
Выводы
Данное обновление всей платформы оказалось также большим прорывом в сфере конструкторов сайтов. Теперь Wix вправе можно считать полноценной CMS (системой управления сайтом) с большими возможностями по расширению функциональности как для обычных пользователей, так и профессионалов различного профиля.
На момент написания статьи, новый продукт проходит бета-тестирование. Зарегистрируйтесь, чтобы попробовать его в деле.
Wix Code — новые возможности сервиса: БД, динамические страницы и Javascript
Один из самых крупных конструкторов сайтов Wix готовится запустить поистине уникальную для рынка функциональность — модуль Wix Code. Он позволит получить еще больше возможностей по редактированию веб-страниц и отображению информации на них. С его помощью создание сайтов онлайн приблизится к традиционным CMS и даст разработчику дополнительную свободу действий.
Подобное решение будет весьма заметным преимуществом перед многочисленными конкурентами. Но давайте более конкретно разберем что же содержится «под капотом» модуля.
Основные фишки Wix Code
На текущий момент известно о 5-ти анонсированных функциях, которые появятся сразу после релиза:
Отличительной особенностью данных трех пунктов есть то, что при работе с ними не нужны никакие навыки программирования. Более того, вы будете использовать все стандартные опции Wix с перетаскиванием / настройкой элементов, поэтому опыт HTML и CSS верстки также не обязателен!
Дополнительно в Wix Code имеется 2 новинки продвинутым разработчикам:
Преимущества Wix Code
Подобный модуль — это уже совершенно другой уровень в конструкторах сайтов! Еще лет 5 назад в некоторых из них прорывом считалась вставка стороннего HTML кода, а тут Javascript, динамические данные и т.п.
Какие же плюсы имеет Wix Code:
В общем, Wix Code — очень крутая штука и действительно похожа на «прорыв» в сфере конструкторов сайтов. Более того, уже анонсированы будущие интересные фишки: логическая связь между несколькими коллекциями данных и отображение их контента на одной странице, повторяющиеся макеты «списков» одинаковых элементов, импорт/экспорт, дополнительные пользовательские поля и еще меньше коддинга.
Как начать работать с Wix Code
Сейчас, насколько я понимаю, происходит бета тестирование перед финальным релизом. На странице, посвященной модулю, есть кнопка «Apply for Beta», где нужно заполнить специальную форму. Если вы программист, вебмастер или дизайнер и вам близка данная тема, можете принять участие в бете.
На этом же ресурсе найдете много другой информации по Wix Code. По каждой функции (Features) представлено краткое описание, полезные ссылки и все необходимое для изучения матчасти.
Кроме статей, туториалов и видеоматериалов есть даже примеры реализаций, что значительно упрощает процесс знакомства с модулем. Не думаю, что у среднестатистического вебмастера возникнут какие-то проблемы, хотя новичкам будет сложнее.
Другие новинки Wix
Пока работа над Wix Code кипит вовсю можно заценить другие фишки конструктора, которые были недавно внедрены. Из десятка функций я бы выделил следующие три.
Оптимальный вид страницы
Данная опция доступна только в мобильной версии сайта и позволяет улучшить ее в один клик. Чтобы это использовать нужно сменить отображение редактора на «мобильное», а затем кликнуть по соответствующей кнопке из левого меню:
Если результат вам совсем не понравился, в верхней панели есть кнопка отмены последних действий. Если же вы недовольны лишь некоторыми элементами, можете их перегруппировать и подправить. Кстати, для мобильников также была добавлена интересная 3D-прокрутка (называется Freeze Scroll).
История изменений
В той же верхней панели найдете кнопку «Сохранить», которая запомнит текущую версию проекта с последующей возможностью к ней вернуться. Во всплывающей подсказке имеется ссылка на всю историю сайта.
В целом, идея интересная, она позволит не переживать за последствия при редактировании веб-страницы. Более того, теоретически, с помощью версий вы, например, можете создать вариант для тестирования конверсии нового дизайна или внести «временные» правки (на период праздников) в основной шаблон.
Wix чат
В конструкторе и раньше существовали приложения с онлайн-консультантами (чат с клиентом), однако у многих из них функционал был платным. Теперь у вас появится альтернатива в виде Wix Chat.
Решение достаточно функциональное: отлично работает в мобильной версии, есть информация о пользователях, уведомления на смартфон, история сообщений, интеграция с контактной формой.
Итого. За несколько месяцев с момента прошлого обзора многие модули получили разного рода улучшения: Wix Blog, Bookings, Погода, Evenbrite и др. Но основная «новость дня» — это, конечно, анонс и бета тестирование инструмента для разработчиков Wix Code. Данная опция не только потеснит конкурентов, но и окажет влияние на рынок создания сайтов на CMS. Будет интересно.