Comment personnaliser le niveau de zoom dans Optimizely CMS Spire / Blogs / Perficient

Dans certaines situations, nous devons définir une échelle de zoom maximale ou désactiver complètement le zoom sur notre site Web. Ce blog explique comment obtenir ce comportement dans Optimizely Spire.

Dans Optimizely, la balise méta viewport rendue sur la page provient du src\FrontEnd\modules\server-framework\src\PageRenderer.tsx déposer. Cependant, comme ce fichier fait partie du framework serveur, nous ne pouvons pas le remplacer directement.

La balise méta viewport dans le PageRenderer.tsx le fichier est comme ci-dessous. Définit de manière optimale l’échelle de zoom initiale sur 1 par défaut et ne spécifie pas de valeur d’échelle maximale.

Dans le navigateur, cela ressemble à celui ci-dessous.

En raison de limitations, nous ne pouvons pas outrepasser les PageRenderer.tsx fichier, nous avons donc une autre option pour mettre à jour la fenêtre méta.

Cette option est le fichier utilitaire addMaximumScaleToViewport.ts. Ce fichier est présent sous src\FrontEnd\modules\client-framework\src\Common\Utilities\addMaximumScaleToViewport.ts. Grâce à cet utilitaire, nous pouvons personnaliser le niveau de zoom.

Comment remplacer le fichier de rendu de page dans notre plan/thème

1. Supposons que vous ayez déjà créé un plan sous `src\FrontEnd\modules\blueprints`, Par exemple, `CustomBlueprint`.
2. Dans le plan, créez la structure de dossiers suivante : `src > Remplacements > Commun > Utilitaires`
3. Copiez ensuite le fichier utilitaire de `src\FrontEnd\modules\client-framework\src\Common\Utilities\addMaximumScaleToViewport.ts` répertoire et ajoutez ce fichier à l’intérieur de `src\FrontEnd\modules\CustomBlueprint\src\Overrides\Common\Utilities`

Comment apporter des modifications au fichier

Nous devons mettre à jour la section en surbrillance. Modifiez l’attribut d’échelle maximale pour refléter la valeur de zoom correcte, quel que soit le niveau de zoom souhaité.

Vous pouvez également ajouter ici l’attribut évolutif par l’utilisateur avec l’option d’échelle maximale.

Comment appeler le fichier utilitaire

Par défaut, Optimizely n’appelle pas ce fichier utilitaire sur toutes les pages.

Pour garantir qu’il s’affiche sur chaque page du site, nous pouvons appeler le fichier utilitaire dans le PageLayout.tsx déposer.

Nous pouvons utiliser PageLayout.tsx fichier pour appeler le fichier utilitaire. Ce fichier est présent dans src\FrontEnd\modules\content-library\src\PageLayout.tsx annuaire.

Pour remplacer ce fichier, ajoutez-le au src\FrontEnd\modules\blueprints\CustomBlueprint\src\Overrides annuaire.

Vous avez maintenant le fichier remplacé dans le répertoire mentionné.

Appelez ensuite l’utilitaire comme indiqué ci-dessous.

Dans certaines situations, il peut s’avérer nécessaire soit d’empêcher le zoom sur un site Web, soit de proposer une option de zoom. Ce blog propose une approche simple pour personnaliser les niveaux de zoom dans Optimizely Spire.