Как создать кнопку назад в редакторе Wix?

Как создать кнопку назад в редакторе Wix?

Очень часто нам необходимо в самом редакторе Wix создать кнопку назад. Например, для возврата со страницы поста на страницу со списком постов.Также кнопка назад будет крайне удобна при создании интернет магазина, для возврата со страницы товара на страницу каталога.


Вот пример того, как работает созданная нами кнопка "Назад". >>>


Редактор Wix не имеет ограничений в своих возможностях, а мы вам рассказываем об этих возможностях. Итак, вот как создать кнопку назад в редакторе Wix:


1. Создайте элемент, который будет отображать возврат. Например иконку, текст или что-то ещё. При нажатии на этот элемент посетитель и будет возвращаться назад. Благородя простоте редактора Wix, вы можете настроить этот элемент как угодно, в плане дизайна.


2. Включите инструменты разработчика. Вот инструкция как это сделать.


3. Добавьте два блока текста, и назовите их в панели свойств: tbPath; tbPathPrev соответственно. Эти блоки текста можно заполнить чем угодно, например одной буквой. Далее их обязательно нужно перенести в футер или хедер сайта и сделать бесцветными.


Эти два блока текста должны показываться на всех страницах. Но чтобы не создавать проблем посетителям, в настройках свойств этих блоков, мы выбираем пункт "Скрыть при загрузке". Таким образом, формально эти блоки есть. Но никто их не увидит. И они никак не повлияют на загрузку и отображение сайта.


Эти блоки текста нужны для запоминания посещений пользователя. По сути именно благодаря этим блокам, наша кнопка "Назад" и будет работать.

4. Теперь мы открываем поле ввода кода и в разделе ввода для глобального сайта вставляем следующий код:

import wixLocation from 'wix-location';

$w.onReady(function () {
   let path = wixLocation.path[0];     
   let prevPath = $w("#tbPath").text;
    $w("#tbPathPrev").text = prevPath;  
    $w("#tbPath").text = path;
});

5. Отлично, теперь возвращаемся к нашей кнопке и добавляем функцию onClick. Сразу после создания функции мы удаляем:

(event)

И вставляем этот код:

export function vectorImageGoBack_click(event, $w) {
  let prevPage = "/" + $w('#tbPathPrev').text;
  wixLocation.to(prevPage);
}

И добавляем этот код сверху предыдущего кода

import wixLocation from 'wix-location';

Вот как это должно выглядеть:

Вот и все, теперь можно перейти в режим предпросмотра и оценить проделанную работу.


Если у вас возникли какие либо проблемы или сложности при создании кнопки "Назад", задавайте их в комментариях к этой статье.


Просмотров: 15

Другие статьи Студии ИВА:

Название статьи 

Как определить целевую аудиторию

Название статьи 

Что такое динамическая страница в wix?

Исследование: Как цвета влияют на продажи в интернете?

Что такое ретаргетинг Вконтакте и как его настроить в Wix.

Editor X, что, зачем и когда?

Вот почему ваш сайт го##о | аудит сайта | чек лист советов

Как создать красивый одностраничный сайт

Чат бот для сайта. Увеличение продаж. Повышение эффективности.

Как создать социальную сеть в редакторе Wix?

Как разослать Email рассылку бесплатно и не попасть в спам?

 
Студия ИВА

Другое

В течении 14 дней, после покупки любой услуги на сайте Студии ИВА, вы можете отказаться от покупки и получить возврат денежных средств. Без дополнительных объяснений!

Мы разрешаем копировать любую информацию с нашего сайта (кроме премиум раздела). Только не забывайте при копировании указывать ссылку на Студию ИВА!

ООО «Очень Быстрые Люди»
ОГРН 1187746862907
ИНН 9723066190
КПП 772301001

Мы используем cookies, чтобы сайт был лучше. 

Узнать больше >>