Кнопка шаг назад. Создаем кнопку "вернуться назад". Скрипт на вспомогательной странице

    Добрый день, возник вопрос как перенести кнопку назад и поставить ее рядом с кнопкой далее при оформлении заказа.У меня сейчас это выглядит так.https://yadi.sk/i/_ZNvGrvEhqSk3Если перенести ее вниз то она перестает работать.код отвечающий за...

    Есть решение

    Приветствую, кто подскажет, как можно сделать кнопку назад, к примеру в корзине, чтобы человек мог вернуться на предедущую страницу?

    Воткнуть в шаблон где хотите кнопку, например, вот это

    +1

    Когда нажимаю кнопку назад на браузере у меня как будто слетают все стили пока не обновлю страницуТема default должно показывать как на скрине ниже)Подскажите в чем проблема

    Здравствуйте, сделал кнопку "Вернуться назад" в корзине, даже не кнопку, а просто ссылку с кодомВернуться назадТеперь при возвращении назад в корзине...

    Есть решение

    Добрый день!Столкнулся с такой проблемой: при добавлении товара в корзину и нажатии в браузере кнопки "назад", информация о товарах в корзине (в дополнительном блоке) не сохраняется, пока не обновишь страницу. Т.е. заходим на сайт, переходим...

    На сайте, который вы указали используется плагин для корзины.Как вариант с доработками, можно использовать отправку добавления товаров не на?html=1, а на?html=1&items=1 это в ответ даст полностью содержимое корзины.

    Добрый день.При каждом шаге во время оформления заказа указывается кнопка "Далее".В теме "Suprime" код кнопки я нашел: Есть решение

    Приветствую, будем рады помочь: [email protected]

    Mr. X

    Добрый день!Столкнулся с проблемой. На сайте имеется нетиповой дизайн и частично (большинство функций сохранены) исходный код - корзина покупателя реализована в виде всплывающего окна.Сайт принял в работу как есть - без документации, пояснений, связи с...

    Кто нибудь сталкивался, ужасно тормозит админка, особенно когда редактируешь товар или шаблон. Например в шаблоне надо вставить или заменить код выделяешь мышкой то место выделение происходит с опозданием, в ставка нового кода тоже с опозданием. В...

    +4

    Обратите внимание https://сайт/forum/386/predlozheniy...пункт номер два до сих пор не реализован, а вы попробуйте поредактировать списки с 500-1000 товаров проматывая подгружаемый список дальше проблема которая опять же связана с пунктом...

    Обновление Shop-Script 6.2.1

    Сегодня было выпущено обновление Shop Script 6.2.1. Что нового:1. Добавлена возможность отключения ленивой загрузки списков товаров в бекенде для включения постраничной навигации.В настройках магазина в разделе "Общие настройки" добавлена...

    Добрый день, возникла такая проблема - ошибка undefined в админ панели, не сохранят, пропало часть меню, при добавлении новых блоков в WYSIWYG выдает ошибку undefinedОбновление делать не стал так как много чего менял в пхпПодскажите пожалуйста, в чем...

    +19 Выполнено

    Необходимо сделать в админке сайта, вариант загрузки товаров в категориях по-странично, а не подгружающимся списком. У меня, например, 21.000 позиций и их надо редактировать (добавлять в различные категории и т.д.). Но если, например, виснет браузер...

    Здравствуйте!Столкнулся с такой проблемой при работе с системой WebAssyst Shop-Script:при заходе на сайт интернет-магазина вместо цифры 0 возле Корзины отображается сумма денег, при этом сама корзина пуста. При клике на ссылку "Корзина" так...

    Добрый день.На всех страницах магазина висит модуль который показывает на какую сумму товаров в корзине.Задача - показывать количество товаров в корзине.Шаблон дефолтный. В файле index.html вот так изменила код:{if $wa->shop} ...

    Добрый день. Как можно сделать так, чтобы пользователю выводилась информацию в фроненде о том, сколько товаров в данный момент у него лежит в корзине. То есть как сделать числовой счетчик возле корзины, который будет расти по мере увиличения...

    Вопрос такой: как сделать чтобы в окне корзины выводилось общее количество положенного в нее товара, и где можно прописать перед выводимой суммой собственно слово "сумма:" или фразу "товаров на сумму:" ?

    Есть решение

    У меня есть такой код:Вывести ссылку везде, кроме главной:{if $wa_url != $wa->currentUrl(0,1)}...{/if}А мне нужно не выводить ссылку на трёх страницах, это на главной, на /cart/ и на /checkout/Подскажите пожалуйста, что ещё нужно дописать в этот...

В этой статье мы рассмотрим, каким способом можно создать кнопку "Вернуться назад" в любом нужном для вас месте. Думаю из самого названия кнопки уже понятно, что будет происходить при нажатии на нее. Такую кнопку можно вставить как в категорию, так и в сам материал. Делается все достаточно просто.

Есть несколько вариантов, как можно добавить кнопку, но я лично использовал только один способ. А именно третий вариант из предложенных мною трех. Чуть далее расскажу, почему именно он.

Какие вообще есть у нас варианты:

  1. Отредактировать файлы шаблона Jooml-ы.
  2. Просто вставить код кнопки в нужное место.
  3. Создать модуль "HTML-код", вставить туда код кнопки, и потом выводить этот модуль в нужном месте.

Плюс в третьем варианте в том, что если надо будет отредактировать текст на кнопке или изменить/добавить класс стиля, то нужно будет всего поправить сам модуль, а не исправлять кнопку во всех местах, где она стоит.

Так вот, на одном из своих сайтах я и использовал третий вариант:

Был создан модуль «HTML-код» и туда с помощью расширения "Sourcerer", которое дает возможность добавлять любой код в материал, был вставлен код кнопки.

Мой рабочий код кнопки:

Вернуться назад

Текст немного украшен стрелкой, с помощью компонентов из bootstrap 3, а самой кнопке заданы стили через CSS.

Многие исследования юзабилити показывают, что пользователи (как новички, так и опытные), часто используют кнопку «вернуться назад» в браузере. К сожалению, разработчики интерфейсов и маркетологи редко задумываются, какие последствия это может иметь для юзабилити — учитывая современные модели веб-дизайна, которые используют приложения, анимацию, видео и прочее. Часто техническая структура таких макетов некорректно реагирует на функцию «вернуться назад», чем разрывает ментальный шаблон пользователей и ухудшает их опыт.

Последствия этого могут быть ужасны: во время экспериментов неадекватная реакция сайта на нажатие кнопки «назад» была причиной ухода многих пользователей, причем с бранью и нелестными отзывами. В большинстве случаев даже почтенные, седовласые испытуемые страшно выходили из себя.

Из этой статьи вы узнаете:

  • что ожидают пользователи от кнопки «вернуться назад»;
  • каковы 5 самых распространенных ошибок;
  • простое решение этих проблем.

Решение действительно очень простое, однако им часто пренебрегают даже самые крупные бренды. Исправим эту ошибку?

Ожидания пользователей

Коротко: пользователи ждут, что кнопка «вернуться назад» покажет им то, что они воспринимают как предыдущую страницу. Слово «воспринимают» очень важно, ведь между тем, что кажется предыдущей страницей, и тем, что является ей технически — колоссальная разница.

Возникает вопрос: что именно пользователи интерпретируют как новую страницу? В большинстве случаев, если страница существенно отличается визуально, но при этом концептуально связана с сайтом, то она воспринимается как новая. Поэтому очень важно отслеживать, как сайт обрабатывает различные интерактивные элементы: лайтбоксы, формы, фильтры и прочее.

Большая часть посетителей не разбирается в технических моментах, а полагается только на интуитивные представления о том, как должен работать ресурс. Поэтому при нажатии кнопки «назад» они ожидают страницу, на которой уже получили важный опыт, а получают страницу со слегка измененным интерфейсом.

Ниже приведены наиболее популярные интерактивные элементы и рекомендации по их использованию для максимального улучшения пользовательского опыта и юзабилити.

Цель внедрения наложений и лайтбоксов — показать пользователю элемент, который возникает поверх страницы. Поэтому пользователи воспринимают подобные элементы как новые страницы, и нажимают кнопку «назад», чтобы вернуться в исходное положение — но попадают совсем не туда, куда ожидали. Это особенно прискорбно, ведь использование лайтбоксов только умножает отрицательное восприятие web-страницы — большинство пользователей не любят эти элементы на сайтах интернет-магазинов.

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

Данный пример подчеркивает, что люди не вникают в технические аспекты при определении новой страницы, но используют только интуицию и сформировавшееся восприятие.

3. Форма регистрации/оплаты

Страница оплаты воспринимаются как новые страницы, и даже хуже — как многоступенчатый процесс, каждый этап которого можно отменить кнопкой «вернуться назад».

Подобный подход может принести проблемы, простой пример — человек хочет вернуться на шаг назад в заполнении формы, чтобы отредактировать введенную информацию. Нажатие кнопки «назад» возвращает его в корзину, и удаляет все (!) введенные данные. Раздражение и уход с сайта — закономерный эффект.

Технология AJAX может не оправдать ожидания пользователей: технически каждая страница AJAX находится под тем же URL, однако создается впечатление, что открываются новые страницы.

В контексте электронной коммерции у пользователей есть четкое восприятие того, что страница 3 и страница 4 — отдельные, и с четвертой к третьей можно перейти с помощью кнопки «назад».

Пользователи не готовы отказаться от кнопки «назад»

Учитывая, как широко применяется эта функция интернет-браузера, вопрос несоответствия ожиданий пользователя с видением разработчиков становится критическим — не стоит воспринимать его легкомысленно.

Особенно полюбилась кнопка «вернуться назад» пользователям мобильных приложений и сайтов. Как показало исследование мобильных версий сайтов, большинство пользователей использовало эту функцию на всех предложенных ресурсах. Причем использование кнопки не ограничивается откатом одной страницы — некоторые испытуемые нажимали ее до 15 (!) раз подряд.

Пользователи ПК тоже часто нажимают кнопку — но не так, как владельцы мобильных, ибо пользователям настольных компьютеров доступна удобная навигация по сайту.

Решение

Хорошая новость: HTML5 может предложить относительно простое решение проблемы, и называется оно HTML5 History API. Конкретнее — функция history.pushState() позволяет изменять URL без перезагрузки страницы. Соответственно сайт будет вести себя адекватно ожиданиям пользователя, нажавшего кнопку «вернуться назад».

Иногда на вебстраницах возникает необходимость временно перейти на какую-либо другую (назовем ее вспомогательной) страницу, а затем вернуться обратно и продолжить работу с ней. Например, это может быть – страница справки, регистрации.

При этом, очевидно, обратный адрес может быть самым разным. Как реализовать такой обратный переход на сайте? Чистых html/CSS здесь не хватит, необходимо будет использовать javascript.

Самое простое – это, например, использование такой строчки в скрипте на вспомогательной странице:

Метод history запоминает историю переходов на странице и, по сути, его использование аналогично использованию кнопок браузера «Вперед» и «Назад», только несколько более функционально. Это – наиболее простой и удобный способ, но, только при одном условии: если новая (вспомогательная) страница не будет открыта в новом окне. Ведь иначе вспомогательная страница будет открываться впервые (точнее, сеанс для нее будет первый, переходов на ней еще не было). А это означает, что переходить назад, по сути-то, некуда. Поэтому данный способ нельзя назвать универсальным. Он не сработает, если пользователь принудительно откроет страницу в новой вкладке или за него сделает это браузер – в соответствии с настройками. В таком случае и атрибут ссылки target=”_self” не поможет: с открытой вспомогательной страницы невозможно будет перейти обратно (если, конечно, не ввести URL исходной страницы в адресной строке браузера вручную).

Более универсальный способ

Для его реализации понадобятся скрипты как на исходной, так и на вспомогательной страницах. Идея может быть разной. Одна из них основана на том, что адрес (URL) исходной страницы сохраняется в адресной строке браузера в виде GET-запроса. Тем самым. вспомогательная страница, получая такой запрос, знает о его источнике. Основываясь на этом, появляется возможность перехода обратно, т.е. на ту страницу, с которой был совершен переход.

Схематически это можно представить следующим образом:

Скрипт на исходной странице

На странице, С КОТОРОЙ должен осуществляться переход, находится следующий скрипт, представляющий собой функцию – обработчик клика мыши (onclick):


Для того, чтобы функция в скрипте сработала, необходимо установить ее обработчик на какой-нибудь элемент одним из способов, например, так:

http://example.com " onclick="to_comment_rules(“http://example.com ”); return false">Нажмите, чтобы перейти на вспомогательную страницу

Обратите внимание, что атрибут href этой ссылки имеет соответствующий адрес, который указан в функции-обработчике события onclick. Это сделано для того, чтобы поисковые роботы понимали, на какую страницу будет происходить переход при нажатии на ссылку. Если это не нужно, тогда следует сделать пустой атрибут href, вида

Принцип работы этого скрипта заключается в том, что при вызове функции save_back(url) происходит открытие (вспомогательной) страницы, имеющей адрес url. Для этого определяется протокол страницы (например, http или https), а также остальная часть URL исходной вебстраницы, в том числе с, быть может, имеющимися данными GET-запроса (это то, что находится в URL после знака «?»). Полученные данные добавляются к URL открываемой страницы – и происходит переход на нее.

Скрипт на вспомогательной странице

На ней должен быть примерно такой скрипт:

Этот скрипт также будет запускаться при клике мышью на какой-нибудь элемент, на который установлен соответствующий обработчик:

Вернуться

Эта строка отменяет действие при клике мышью на ссылку по умолчанию. Дело в том, что по умолчанию происходит переход по ссылке. При этом переход будет происходить именно на тот адрес, который указан в атрибуте href. Этот адрес (в частности, на вспомогательной странице) может не содержать обратного адреса страницы, с которой был совершен переход (если переход на вспомогательную страницу возможен не с какой-либо одной определенной, а с нескольких исходных страниц).

Итак, скрипт на вспомогательной странице читает содержимое адресной строки и затем разбивает ее в массив по элементам «?». Обратим внимание, что в URL могут быть два таких символа. Первый появится, как уже было сказано, вследствие того, что к адресу вспомогательной страницы был добавлен адрес (за вычетом протокола) адрес исходной страницы. А второй мог присутствовать, как результат наличия параметров GET-запроса при загрузке исходной страницы. Иными словами, в адресной строке вспомогательной страницы может присутствовать один или два знака вопроса. Для перехода со вспомогательной страницы на исходную при клике на ссылку

Вернуться

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

Замечания

Кроме того, следует отметить, что в статье, по сути, речь идет не о возврате на исходную страницу, а о повторной ее загрузке. Это, конечно, лишь имитация возврата. В частности, данные, введенные на этой странице, ее настройки могут не сохраниться. Кроме того, в отличие от именно ВОЗВРАТА, при загрузке страницы она будет открыта с самого начала сайта (т.е. верхняя ее часть будет расположена вверху экрана). Тогда как «истинный» возврат назад возвращает (исходную) страницу именно в том месте, из которого был сделан переход. Поэтому попробуем скомбинировать оба способа.

Комбинированный способ

Итак, поставим задачу:

    если вспомогательная страница открывается в той же самой вкладке (окне), то пусть будет доступен метод history.back();

    а вот если вспомогательная страница открывается в новом окне, то должен работать обсуждавшийся выше метод (ибо при этом history.back() не сработает).

Скрипт на вспомогательной странице немного изменится (добавится упомянутая выше строчка):

Вначале пытаемся вернуться назад. Если получится – оставшаяся часть скрипта не сработает и произойдет возврат на исходную страницу в то же самое место, откуда был совершен переход. Если нет – тогда, как и ранее, из параметров GET-запроса извлекаем адрес исходной страницы и переходим на нее.

Заключение

Конечно, в этой статье показан лишь один из вариантов технологии «возвращения» НАЗАД - на исходную страницу. Для этой цели, помимо GET-запроса, можно было бы использовать и иные технологии, например локальное хранилище localStorage . Кроме того, для полной имитации возврата НАЗАД неплохо было бы через GET-запрос передавать и величину прокрутки исходной страницы - чтобы потом, даже при открытии вспомогательной страницы в новом окне - вернуться в то же самое место исходной страницы, откуда был ранее сделан переход.