Introduction
Au passage à la version 1.6, le thème de base de prestashop à intégrer Twitter Bootstrap. Il est donc par défaut responsive ou encore adaptatif. Ce qui signifie que l’affichage s’adapte de façon automatique à tous les types de terminaux (desktop, smarphone / mobile, tablette …). Bien que pouvant et à juste titre être considérer comme un avantage, nous avons eu à Novazen, des clients bien que voulant un site e-commerce sur la version 1.6 de Prestashop ne veulent pas d’un thème responsive. Dans ce petit tutoriel, nous allons vous présenter la méthode que nous utilisons pour désactiver le responsive sur un thème Prestashop 1.6
Etapes de désactivation du responsive sur Twitter Boostrap
Étape 1 : Supprimer les « viewport » dans le « header »
Cette étape est la plus simple, il suffit de supprimer les métas « viewport » dans le header de notre thème.
Étape 2 : Fixer la largeur du conteneur principal
Ajouter la classe ci-dessous dans un fichier css qui sera charger après celui de Twitter Bootsrap. Son rôle est de surcharger le max-width de la classe .container
.container{
max-width: none!important;
width:970px; // 970px correspondant à la largeur utile de votre site Internet
}
Étape 3 : Fixer la largeur des colonnes latérales encore appelées « navbars »
Ouvrir le fichier variables.less et paramétrer les variables suivantes à 0
- @grid-float-breakpoint
- @screen-xs-max
Étape 4 : Utiliser les grilles
Pour gérer les grilles, utiliser les classes .col-xs-* en lieu et place des grilles de types medium et large
Étape 5 : Optionnel
Utiliser le fichier « Respond.js » pour IE 8. Les médias queries étant toujours présent ce fichier désactivera l’affichage mobile sur IE8
Conclusion
Bien que Twitter Bootstrap étant premièrement orienté mobile, il est possible de désactiver son fonctionnement relatif en cas de besoin. Nous venons ci-dessus de présenter les étapes pour y arriver. En cas de question ou de besoin pour la création d’un thème ou le développement Prestashop offshore, n’hésitez pas à nous contacter.