Une ancre est un système permettant de rediriger sur une partie spécifique du site au sein d'une même page. Notre site comporte des ancres pour scroller automatiquement vers :
- Une suggestion de la semaine
- Une catégorie
- Une sous-catégorie
- Une suggestion de produit
- Un produit
Cas particulier pour rediriger vers la catégorie globale suggestion, il suffit d'utiliser "#suggestions" dans tous les cas.
Le fonctionnement pour l'usage de ces ancres est le même pour tous ces éléments. Il faut que vous trouviez l'ancre dans le code source du site. Pour cela vous pouvez faire :
- Clic droit sur un des élément mentionné ci-dessus dans le listing des produits
- Clic sur "inspecter" (sur edge), d'autre navigateur peuvent le nommer différemment mais se sera dans le même style.
- Vous allez voir du code apparaitre en bas.
- Trouver la structure suivante <a class="anchor" id="monancrepersonnalise"></a>, vous la trouverez proche du code affiché.
- Copier coller le contenu de "id" (monancrepersonnalise dans notre cas)
- Créer votre lien avec votre ancre de la forme : https://commande.lemoulin.fr/#monancrepersonnalise
(Il faut ajouter un # à votre ancre)
Exemple de cas concret, j'obtiens dans le code source : <a class="anchor" id="p-eau-de-source-gazeuse"></a>
Alors mon ancre sera https://commande.lemoulin.fr/#p-eau-de-source-gazeuse -> le site scrollera vers mon produit eau de source gazeuse.
Pré-requis :
Il faut que les noms des catégories / suggestions de la semaine / salade soient identiques entre les deux établissements. Dans le cas contraire alors le site ne plantera pas mais l'ancre ne fera rien sur l'un des établissement.
Un gif d'exemple est en pièce jointe de cet article
