Это наша услуга:

Закажите создание сайта, любой сложности

Мы имеем большой опыт и быстро выполняем работу. Со Студией ИВА создать профессиональный сайт ещё проще.

Комментировать статью >>

Как создать кнопку назад в редакторе 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';


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

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


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

 

Комментарии:

Комментариев к статье пока нет, будьте первыми!

Оставить комментарий:

 

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

Стоит ли доверять PageSpeed Insights?

Настройка переадресации

Как защитить контент от копирования?

Другое

Студия ИВА вернет деньги если вам не понравится качество оказанных услуг, вне зависимости от причин и срока!

При копировании материалов с сайта пожалуйста указывайте ссылку на Iva-Studio.ru

Наш сайт тоже создан в редакторе Wix

Iva@iva-studio.ru

Работаем онлайн, круглосуточно и без выходных.

Безопасная оплата с Яндекс Кассой