Retour à la page précédente joomla 3. Comment faire un bouton retour sur une page web

Dans ce didacticiel vidéo, nous examinerons 3 options sur la façon de créer un bouton RETOUR pour naviguer sur le site vers les pages précédentes dans l'ordre inverse. Le bouton RETOUR est également nécessaire lorsque des liens provenant de plusieurs pages du site (A1, A2... An) mènent à la même page (B), et à partir de cette page (B) vous devez revenir à la page précédente (An) du site à partir duquel vous êtes arrivé à la page (B).

Regardez le nouveau tutoriel vidéo :

Le code du bouton « retour » pour le placement sur le site :

Bouton retour. Pourquoi est-ce?

Dans ce tutoriel vidéo, nous allons faire un bouton pour revenir aux pages précédentes du site en Programme Adobe Muse. Ce bouton reviendra au même chemin que nous avons suivi sur le site.

Bouton retour. projet pour la leçon.

Pour faire cette leçon, j'ai préparé un petit projet, ou plutôt on ne peut pas l'appeler petit, ici il se compose de , pages de premier niveau, pages de premier niveau, et aussi pour la page "page-2" il y en a plusieurs plus de pages enfants. Et pour changer, j'ai créé deux modèles. Le premier modèle appliqué aux trois premières pages. Et le deuxième modèle appliqué à tous les autres.

Commençons. Le bouton Retour - nous le ferons dans "Modèle C" pour qu'il apparaisse immédiatement sur les pages auxquelles ce modèle est appliqué. Je vais dans l'édition de ce modèle, et c'est là que nous allons insérer notre bouton de retour.

Bouton retour. 3 façons.

Nous pouvons insérer le bouton Retour de trois manières. j'ai fichier spécial, que j'ai déjà préparé dans un cahier. Et il y a trois façons, trois codes, à l'aide desquels nous pourrons insérer un tel bouton sur le site.

Bouton retour. Méthode numéro 1 - texte brut.

La première option est juste du texte. Le bouton sera sous forme de texte. Je copie ce code :

Et collez-le dans le modèle. Cela ressemble à ceci. Nous avons juste du texte et il est surligné en blanc. Je vais le poster ici. Afin de comprendre comment tout cela fonctionne, nous appuyons sur ctrl+alt+E pour afficher l'intégralité du site avec toutes ses pages dans le navigateur. Voici à quoi ressemble la page principale du site. On peut surfer sur le menu, sélectionner des pages. Ici, nous avons des menus déroulants. Et, par exemple, à partir de la page principale, nous sommes immédiatement allés à la page "page-3". Et ici, nous avons un bouton de retour.

Ce bouton est actif, mais lorsque vous passez le curseur de la souris dessus, une main avec un doigt n'apparaît pas. Nous pouvons cliquer sur ce bouton en toute sécurité et nous serons renvoyés à la page principale. De la même manière, on peut cliquer sur la page « page-3 », puis aller sur la page « page-4 » et cliquer sur le bouton « Retour », cela nous amènera à la page « page-3 », et si nous cliquons à nouveau sur le bouton "Retour" », puis cela nous amène à la page principale. C'est ainsi que fonctionne le bouton de retour.

Mais ce bouton peut difficilement être appelé un bouton, car il s'agit simplement d'une telle inscription, surlignée en blanc. Si nous voulons l'éditer dans Muse, nous ne pouvons que modifier la taille du texte, par exemple, je mettrai "36" ici pour que vous puissiez mieux le voir. Je ne pense pas qu'on puisse changer la couleur du texte. Maintenant je vais essayer le rouge. J'ai choisi le rouge, mais cela n'a en rien affecté notre inscription, nous ne pouvons donc pas changer la couleur. Nous pouvons changer la taille. Essayons de le mettre en gras et de le centrer. Tout ce que nous pouvons faire, c'est ce genre de montage. Si nous voulons remplir ce bloc, par exemple, le rendre orange, notre texte sera toujours surligné en blanc et, en principe, il n'a pas l'air très joli.

Bouton retour. Méthode numéro 2 - Lien texte.

Nous allons maintenant le copier. J'appuie sur ctrl+C et je vais au programme et j'appuie sur ctrl+V pour coller sur le site. Il ressemble à ce lien. Le lien est bleu. Maintenant, elle n'est pas très visible. Faisons aussi la 36ème police, pour l'agrandir et la voir de plus près. Ici, nous avons juste un lien bleu. Si nous appuyons maintenant sur ctrl + alt + E, nous verrons que lorsqu'il est visualisé, il ressemble à ce lien bleu normal. Allons-y encore quelques fois pour voir, appuyez sur un, deux, revenez en arrière. La vue de ce lien est normale, comme un lien normal.

Nous pouvons lui appliquer des styles de lien dans Adobe Muse. Il existe des styles de lien dans la section "Liens hypertexte", sélectionnez "Modifier les styles de lien". J'ai déjà une version préparée. Maintenant, j'ai déjà une version préparée. Vous pouvez voir que le style lui a été appliqué. Dans l'état standard et au survol de la souris, la couleur est bleue et dans l'état actif, elle est rouge. Vous l'avez vu en regardant. Le deuxième style que j'ai créé est simplement tous les états noirs. Nous pouvons appliquer ce style à ce bouton. Par exemple, je vais sélectionner et appliquer ce style personnalisé à ce bouton. Et vous verrez que notre inscription est devenue noire.

Ici, nous pouvons également faire le remplissage, par exemple, je vais lui donner la même couleur orange. Ici, vous pouvez déjà modifier le texte. Mettons-le au milieu, mettez-le en gras. Et, en principe, cette option ressemble déjà plus à un bouton. Il n'y a plus une telle sélection blanche et, en principe, l'option est déjà tout à fait appropriée. Pendant la navigation (ctrl+alt+E) allons à la page "page-3", à la page "page-4" et re-cliquons. Ce bouton fonctionne exactement de la même manière que le premier bouton, sauf qu'il a plus d'options pour modifier le design.

Bouton retour. Méthode numéro 3 - bouton - image.

Et la troisième option est de savoir comment placer le bouton - ce bouton sera une image pour nous. Je copie ce code :

Je vais dans Muse, cliquez sur "Coller". Et cette troisième option que nous avons est une image. Pour que nous ayons une sorte d'image ici, nous devons télécharger un fichier image sur Internet ou le créer nous-mêmes. Nous ajoutons une image via la fonction "Fichier" du programme, sélectionnez "Ajouter des fichiers à transférer". J'ai déjà téléchargé quelques photos sur Internet. Nous pouvons choisir n'importe lequel. Sélectionnons celui-ci avec le bouton de retour. Maintenant, si nous regardons dans la section "Ressources", nous avons ajouté le bouton "back2.png" - "Transférer". Nous avons ce fichier à transférer.< a href = "#" onclick = "history.back();retourner faux ;"> < img src = "assets/back2.png" alt = "Dos" / > < / a >

Tout, cliquez sur "OK". Nous ne verrons aucun changement dans Muse lui-même. Nous ne verrons tous les changements que lors de la visualisation du site dans un navigateur. Appuyez à nouveau sur ctrl + alt + E pour afficher le site dans le navigateur et essayez de surfer sur nos pages.

Bouton retour. Voir résultat.

Passons à la page, par exemple, "page 2-1", maintenant allez à la page "page-2", maintenant allez à la page "page 3", puis à la page "page-4". Et maintenant, si nous appuyons sur le bouton de retour, nous reviendrons séquentiellement dans l'ordre inverse pour page d'accueil placer. Nous appuyons sur "Retour", nous passons à la page "page-3", à la page "page-2". Et ici nous n'avons plus de bouton. Si nous le placions dans le modèle appliqué à la page "page-2", nous aurions également un bouton "Retour" ici. Comme nous ne l'avons pas, nous devons accéder à la page principale uniquement en cliquant sur le bouton "Accueil" dans le menu. Allons, par exemple, à la page "page 2-2-2", puis allons à la page "page 2-2-1", puis aux pages "page-3" et "page-4". Et maintenant dans l'ordre inverse : page "page-3", page "page 2-2-1", page "page 2-2-2" et à la page principale.

Bien sûr, vous ne pouvez pas placer ce bouton sur votre site, mais utilisez les flèches habituelles du navigateur. Mais si vous voulez qu'un tel bouton soit sur votre site, vous pouvez le faire de ces manières .. Et le lien vers l'article sera sous cette vidéo. C'est tout. Dmitry Shapovalov était avec vous. Aimez cette vidéo, abonnez-vous à la chaîne, écrivez des commentaires ci-dessous, et je vous dis au revoir jusqu'aux prochains tutoriels vidéo.

Dans cet article, nous verrons comment vous pouvez créer un bouton "Retour" à n'importe quel endroit dont vous avez besoin. Je pense que d'après le nom même du bouton, il est déjà clair ce qui se passera lorsque vous cliquerez dessus. Un tel bouton peut être inséré à la fois dans la catégorie et dans le matériau lui-même. Tout se fait tout simplement.

Il existe plusieurs options pour ajouter un bouton, mais personnellement, je n'ai utilisé qu'une seule méthode. A savoir, la troisième option des trois proposées par moi. Un peu plus loin je vous dirai pourquoi.

Quelles options avons-nous:

1. Modifier les fichiers de modèle Jooml.
2. Collez simplement le code du bouton au bon endroit.
3. Créez un module "Code HTML", collez-y le code du bouton, puis affichez ce module au bon endroit.

L'avantage de la troisième option est que si vous devez modifier le texte sur le bouton ou modifier / ajouter une classe de style, vous n'aurez qu'à réparer le module lui-même et non à réparer le bouton à tous les endroits où il se trouve.

Alors, sur un de mes sites, j'ai utilisé la troisième option :

Le module "HTML-code" a été créé et le code du bouton y a été inséré à l'aide de l'extension "Sourcerer", qui permet d'ajouter n'importe quel code au matériel.

Mon code de bouton de travail:

Le texte est légèrement décoré d'une flèche, en utilisant des composants de bootstrap 3, et le bouton lui-même est stylisé via CSS.

De nombreuses études d'utilisabilité montrent que les utilisateurs (à la fois novices et expérimentés) utilisent souvent le bouton "retour" dans le navigateur. Malheureusement, les développeurs frontaux et les spécialistes du marketing pensent rarement à l'impact que cela pourrait avoir sur la convivialité étant donné les modèles de conception Web actuels qui utilisent des applications, des animations, des vidéos, etc. Souvent la structure technique de ces mises en page ne répond pas correctement à la fonction "retour en arrière", qui casse le gabarit mental des utilisateurs et dégrade leur expérience.

Les conséquences peuvent être désastreuses : lors des expérimentations, la réponse inadéquate du site à l'appui sur le bouton "retour" a provoqué le départ de nombreux utilisateurs, ainsi que des abus et des critiques peu flatteuses. Dans la plupart des cas, même les vénérables sujets aux cheveux gris perdent terriblement leur sang-froid.

De cet article, vous apprendrez:

• ce que les utilisateurs attendent du bouton de retour ;
• quelles sont les 5 erreurs les plus courantes ;
• solution simple à ces problèmes.

La solution est vraiment très simple, mais elle est souvent délaissée même par les plus grandes marques. Pouvons-nous corriger ce bogue ?

Les attentes des utilisateurs

En bref : les utilisateurs s'attendent à ce que le bouton "Revenir en arrière" leur montre ce qu'ils perçoivent comme étant la page précédente. Le mot "percevoir" est très important, car il y a une énorme différence entre ce qui semble être la page précédente et ce qui en est techniquement.

La question se pose : qu'est-ce que les utilisateurs interprètent exactement comme une nouvelle page ? Dans la plupart des cas, si une page est significativement différente visuellement, mais conceptuellement liée au site, elle est alors perçue comme nouvelle. Par conséquent, il est très important de surveiller la manière dont le site gère les différents éléments interactifs : lightboxes, formulaires, filtres, etc.

La plupart des visiteurs ne comprennent pas les aspects techniques, mais se fient uniquement à des idées intuitives sur le fonctionnement de la ressource. Par conséquent, lorsqu'ils cliquent sur le bouton de retour, ils s'attendent à une page où ils ont déjà acquis une expérience importante, mais ils obtiennent une page avec une interface légèrement modifiée.

Vous trouverez ci-dessous les éléments interactifs les plus populaires et des recommandations sur la façon de les utiliser pour optimiser l'expérience utilisateur et la convivialité.

Le but de la mise en œuvre des superpositions et des lightboxes est de montrer à l'utilisateur un élément qui apparaît en haut de la page. Par conséquent, les utilisateurs perçoivent ces éléments comme de nouvelles pages et appuient sur le bouton "retour" pour revenir à leur position d'origine - mais ils n'arrivent pas du tout là où ils s'y attendaient. Ceci est particulièrement regrettable, car l'utilisation de lightboxes ne fait qu'augmenter la perception négative de la page Web - la plupart des utilisateurs n'aiment pas ces éléments sur les sites d'achat en ligne.

L'utilisation de filtres transforme souvent la page et donne à la personne une nouvelle expérience. Par conséquent, la page après tri est perçue comme nouvelle, même si rien n'y a été chargé. En effet, après chaque interaction du visiteur avec la page de la boutique en ligne, une nouvelle sortie de résultats est obtenue.

Cet exemple montre que les gens ne se penchent pas sur les aspects techniques lorsqu'ils déterminent nouvelle page, mais n'utilisez que l'intuition et la perception formée.

3. Formulaire d'inscription / paiement

Les pages de paiement sont traitées comme de nouvelles pages, et pire encore - comme un processus en plusieurs étapes, dont chaque étape peut être annulée avec le bouton "retour".

Cette approche peut apporter des problèmes, un exemple simple - une personne veut revenir en arrière en remplissant un formulaire afin de modifier les informations saisies. Appuyer sur le bouton "retour" le renvoie à la corbeille et supprime toutes (!) Les données saisies. L'irritation et la sortie du site sont un effet naturel.

La technologie AJAX peut ne pas répondre aux attentes des utilisateurs : techniquement, chaque page AJAX est sous la même URL, mais il semble que de nouvelles pages s'ouvrent.

Dans le contexte du commerce électronique, les utilisateurs ont une perception claire que la page 3 et la page 4 sont séparées, et la page quatre peut être naviguée vers la troisième à l'aide du bouton de retour.

Les utilisateurs ne sont pas prêts à abandonner le bouton de retour

Compte tenu de l'ampleur de l'utilisation de cette fonctionnalité du navigateur Internet, la question de l'inadéquation des attentes des utilisateurs avec la vision des développeurs devient critique et ne doit pas être prise à la légère.

Les utilisateurs ont particulièrement apprécié le bouton "Revenir en arrière" Applications mobiles et chantiers. Comme l'étude l'a montré versions mobiles sites, la majorité des utilisateurs ont utilisé cette fonctionnalité sur toutes les ressources proposées. De plus, l'utilisation du bouton ne se limite pas à la restauration d'une page - certains sujets l'ont appuyé jusqu'à 15 (!) fois de suite.

Les utilisateurs de PC appuient également souvent sur le bouton - mais pas de la même manière que les utilisateurs mobiles, car les utilisateurs ordinateurs de bureau Une navigation facile sur le site est disponible.

Décision

La bonne nouvelle est que HTML5 a une solution relativement simple au problème, et cela s'appelle l'API HTML5 History. Plus précisément, la fonction history.pushState() permet de changer l'URL sans recharger la page. En conséquence, le site se comportera de manière adéquate aux attentes de l'utilisateur qui a cliqué sur le bouton "retour".

Bonjour, la question s'est posée de savoir comment déplacer le bouton vers l'arrière et le placer à côté du bouton suivant lors de la commande. Maintenant, cela ressemble à ceci pour moi. https://yadi.sk/i/_ZNvGrvEhqSk3 Si vous le déplacez vers le bas , il ne fonctionne plus...

Il existe une solution

Salutations, qui peut me dire comment faire un bouton de retour, par exemple, dans le panier, pour qu'une personne puisse revenir à la page précédente ?

Insérez un bouton dans le modèle où vous voulez, par exemple, ceci

+1

Lorsque j'appuie sur le bouton de retour du navigateur, tous les styles semblent s'envoler jusqu'à ce que j'actualise la page. Le thème par défaut devrait s'afficher comme dans la capture d'écran ci-dessous) Dites-moi quel est le problème

Bonjour, j'ai fait un bouton "Retourner" dans le panier, même pas un bouton, mais juste un lien avec un code revenir Maintenant, quand tu retournes dans le chariot...

Il existe une solution

J'ai rencontré un tel problème: lors de l'ajout d'un produit au panier et de l'appui sur le bouton "retour" du navigateur, les informations sur les produits du panier (dans le bloc supplémentaire) ne sont pas enregistrées tant que vous n'avez pas actualisé la page. Celles. on va sur le site, on va...

Le site que vous avez spécifié utilise un plugin pour le panier. En option avec des améliorations, vous pouvez utiliser l'envoi de l'ajout de marchandises non pas à ?html=1, mais à ?html=1&items=1, cela donnera le contenu complet du panier en réponse.

Bonjour. A chaque étape de la commande, le bouton "Suivant" est indiqué. Dans la rubrique "Suprême", j'ai trouvé le code du bouton : Il existe une solution

Bonjour, nous sommes heureux de vous aider : [courriel protégé]

M. X

Bonjour ! J'ai rencontré un problème. Le site a une conception non standard et partiellement (la plupart des fonctions sont conservées) le code source - le panier est implémenté comme une fenêtre pop-up.Le site a été accepté dans le travail tel quel - sans documentation, explications, connexion avec. ..

Quelqu'un a-t-il rencontré, le panneau d'administration est terriblement lent, surtout lorsque vous modifiez un produit ou un modèle. Par exemple, dans un modèle, vous devez insérer ou remplacer le code, vous le sélectionnez avec la souris, puis la sélection est tardive, et l'insertion du nouveau code est également tardive. À...

+4

Faites attention https://site/forum/386/predlozheniy...le point numéro deux n'a pas encore été implémenté, et vous essayez de modifier les listes avec 500-1000 produits en faisant défiler la liste chargeable plus loin, le problème est à nouveau lié à le point...

Mise à jour Shop-Script 6.2.1

La mise à jour Shop Script 6.2.1 a été publiée aujourd'hui. Quoi de neuf :1. Ajout de la possibilité de désactiver le chargement paresseux des listes de produits dans le backend pour activer la pagination. Dans les paramètres du magasin dans la section "Paramètres généraux",...

Bonjour, il y avait un tel problème - une erreur indéfinie dans le panneau d'administration, ils ne sauvegarderont pas, une partie du menu a disparu, lors de l'ajout de nouveaux blocs dans WYSIWYG, cela donne une erreur indéfinie.

+19 Fait

Il est nécessaire de faire dans le panneau d'administration du site, la possibilité de charger les biens dans les catégories page par page, et non par liste chargée. Par exemple, j'ai 21 000 positions et elles doivent être modifiées (ajoutées à différentes catégories, etc.). Mais si, par exemple, le navigateur se bloque...

Bonjour J'ai rencontré un tel problème lorsque je travaillais avec le système WebAssyst Shop-Script: lors de l'entrée sur le site Web d'une boutique en ligne, au lieu du chiffre 0, le montant d'argent s'affiche à côté du panier, alors que le panier lui-même est vide. Lorsque vous cliquez sur le lien "Panier"...

Bonjour. Sur toutes les pages du magasin, un module indique la quantité de marchandises dans le panier. La tâche consiste à afficher le nombre de marchandises dans le panier. Le modèle est par défaut. Dans le fichier index.html, j'ai changé le code comme ceci : (if $wa->shop)...

Bon après-midi. Comment puis-je faire en sorte que l'utilisateur reçoive des informations sur le nombre de marchandises qu'il a actuellement dans le panier. Autrement dit, comment faire un compteur numérique près du panier, qui grandira à mesure qu'il augmentera ...

La question est la suivante : comment faire en sorte que la fenêtre du panier affiche le montant total des marchandises qui y sont placées, et où puis-je prescrire le mot « montant : » ou la phrase « marchandises pour le montant : » avant le montant affiché ?

Il existe une solution

J'ai ce code : Afficher le lien partout sauf le principal :(if $wa_url != $wa->currentUrl(0,1))...(/if) Et je n'ai pas besoin d'afficher le lien sur trois pages, c'est sur le principal, sur /cart/ et sur /checkout/ S'il vous plaît dites-moi ce qu'il faut ajouter à cela...