novembre 2015 – devfrontend.info

catalog.xml :

Find “Category layered navigation layout” section or “Category default layout” section (if you don’t use layered-nav in your category pages), then add this lines or modify the exisitng ones if you already have them:

<reference name=”root”>
<action method=”setTemplate”><template>page/1column.phtml</template></action>
</reference>

<action method=”setTemplate”><template>page/1column.phtml</template></action>

</reference>

Why we do this?: we set 1column layout in category pages since we want to take advantage of the full width of the page, so we can set 4 columns of products (grid mode of course). But it’s not mandatory, you can choose between 1column,2columns-right,etc. to fit your needs.

list.phtml :

Find this line under <?php // Grid Mode ?> section:

<?php $_columnCount = $this->getColumnCount(); ?>

1	<?php $_columnCount = $this->getColumnCount(); ?>

Change it to:

<?php $_columnCount = 4  ?>

1	<?php $_columnCount = 4 ?>

Save all files, clear your Magento cache. That’s it, you’ll get a category list with 4 columns of products.

Une version qui gère l’alignement vertical des images responsives (fluides) en pure CSS

Sources : Bootstrap vertical align responsive images example code, (mon jsFiddle) [Pure CSS attempt] Responsive product list (w/responsive images).

/* CSS used here will be applied after bootstrap.css */
.thumbnail_container {
     position: relative;
     width: 100%;
     padding-bottom: 100%;
  margin-bottom:20px;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
}
.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

img{
    max-height:100%;
    max-width:100%;
}

/* CSS used here will be applied after bootstrap.css */

.thumbnail_container {

position: relative;

width: 100%;

padding-bottom: 100%;

margin-bottom:20px;

}

.thumbnail {

position:absolute;

width:100%;

height:100%;

}

.thumbnail img {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

}

img{

max-height:100%;

max-width:100%;

}

<div class="container-fluid">
<div class="row">
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/400x600">
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="http://placehold.it/600x600">
      </div>
    </div>  
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/600x400">
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="no-photo">
      </div>
    </div>  
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/400x600">
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="http://placehold.it/600x600">
      </div>
    </div>  
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/600x400">
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="no-photo">
      </div>
    </div>  
  </div>
</div>
</div>
<div id="push"></div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Une version un peu moins légère qui gère l’alignement vertical des images responsives (fluides) avec jQuery

Un code source à peu près fonctionnel est disponible ici, mais ne se lancera pas au 1er chargement de la page. Il faudra relancer le code en cliquant sur Run.
Cependant, le bout de script suivant a été mis en place avec succès dans un projet Change (v3.6.8) :

L’ajout de $(window).on('load', function(){ ... }); permet aux visuels de s’afficher dans la page avant de lancer le script (car il a besoin de connaître leurs dimensions pour effectuer ses calculs d’alignement).

<script change:javascript="head 'themes.husson.js.equalheight'"></script>

<script type="text/javascript">
	(function($){
	    "use strict";
			$(document).ready(function(){
				$(window).on('load', function(){ // http://stackoverflow.com/questions/9134918/document-ready-fires-too-early
					// http://devfrontend.info/colonnes-de-meme-hauteur/
					$('.product-visual').css({height: 'auto'}).setEqualHeight();
					$('.product-label').css({height: 'auto'}).setEqualHeight();
					//$('.product-visual').css('height', '100%');

					// http://jsfiddle.net/frontenddeveloper/d25oer58/14/
					var getContainerHeight, getImageHeight, resizeTimer;
					function vAlignImage(){
					    var getContainerHeight = $('.product-visual').height();
					    $('.product-visual img').each(function(){
					        var getImageHeight = $(this).height();
					        $(this).css('padding-top', ((getContainerHeight / 2) - (getImageHeight / 2)));
					    });
					}
					vAlignImage();
				});

				$(window).on('resize', function(e){
					// http://devfrontend.info/colonnes-de-meme-hauteur/
					$('.product-visual').css({height: 'auto'}).setEqualHeight();
		      $('.product-label').css({height: 'auto'}).setEqualHeight();

					// http://jsfiddle.net/frontenddeveloper/d25oer58/14/
					clearTimeout(resizeTimer);
				  resizeTimer = setTimeout(function() {
				 		vAlignImage();
				  });
		    });
			});
	})(jQuery);

</script>

(function($){

"use strict";

$(document).ready(function(){

$(window).on('load', function(){ // http://stackoverflow.com/questions/9134918/document-ready-fires-too-early

// http://devfrontend.info/colonnes-de-meme-hauteur/

$('.product-visual').css({height: 'auto'}).setEqualHeight();

$('.product-label').css({height: 'auto'}).setEqualHeight();

//$('.product-visual').css('height', '100%');

// http://jsfiddle.net/frontenddeveloper/d25oer58/14/

var getContainerHeight, getImageHeight, resizeTimer;

function vAlignImage(){

var getContainerHeight = $('.product-visual').height();

$('.product-visual img').each(function(){

var getImageHeight = $(this).height();

$(this).css('padding-top', ((getContainerHeight / 2) - (getImageHeight / 2)));

});

}

vAlignImage();

});

$(window).on('resize', function(e){

// http://devfrontend.info/colonnes-de-meme-hauteur/

$('.product-visual').css({height: 'auto'}).setEqualHeight();

$('.product-label').css({height: 'auto'}).setEqualHeight();

// http://jsfiddle.net/frontenddeveloper/d25oer58/14/

clearTimeout(resizeTimer);

resizeTimer = setTimeout(function() {

vAlignImage();

});

})(jQuery);

</script>

Dans le/les gabarits de page(s) de votre thème qui appellent le bloc Switchlanguage (<racine_de_votre_projet>/themes/<nom_de_votre_theme>/templates/tpl<nom_de_votre_gabarit_de_page>.xml), commencez par vérifier que l’attribut __"showflag="small" est présent :
<change:templateblock type="modules_website_switchlanguage" __viewall="false" __showflag="small" __displayMode="Scroll" />.

Si il n’existe pas déjà, commencer par créer un module spécifique au projet (ce module prote généralement le nom du projet – nous allons prendre le projet nommé « Toto » en exemple) :

$ ch add-module toto

1	$ ch add-module toto

Dans ce module (<racine_de_votre_projet>/modules/toto/), crééz l’arborescence suivante : webapp/www/changeicons/small/flags/.

…et placez-y vos drapeaux au format PNG en respectant les noms de fichiers que vous trouverez dans <racine_de_votre_projet>/media/changeicons/small/flags/.

Par exemple : le drapeau standard pour la France porte le libellé fr.png. Sa surcharge dans le module toto doit également s’appeler fr.png, même si l’image est différente.

En console, exécuter la commande :

$ ch init-webapp

1	$ ch init-webapp

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Monthnovembre 2015

[Magento] Changer le nombre de produits par rangée dans les listes produits du thème Rwd

catalog.xml :

list.phtml :

[CSS] [jQuery] Une liste responsive d’éléments avec visuels de dimensions différentes alignés horizontalement et verticalement dans les cadres dans lesquels ils s’inscrivent

Une version qui gère l’alignement vertical des images responsives (fluides) en pure CSS

Une version un peu moins légère qui gère l’alignement vertical des images responsives (fluides) avec jQuery

[Change 3.6.8] Surcharger les icônes par défaut des drapeaux pour le bloc Switchlanguage du module Website

[Atom] Les raccourcis utiles

Commenter/décommenter une ou plusieurs lignes de code

Remplacer automatiquement un terme présent à plusieurs endroits dans un fichier

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Monthnovembre 2015

[Magento] Changer le nombre de produits par rangée dans les listes produits du thème Rwd

catalog.xml :

list.phtml :

[CSS] [jQuery] Une liste responsive d’éléments avec visuels de dimensions différentes alignés horizontalement et verticalement dans les cadres dans lesquels ils s’inscrivent

Une version qui gère l’alignement vertical des images responsives (fluides) en pure CSS

Une version un peu moins légère qui gère l’alignement vertical des images responsives (fluides) avec jQuery

[Change 3.6.8] Surcharger les icônes par défaut des drapeaux pour le bloc Switchlanguage du module Website

[Atom] Les raccourcis utiles

Commenter/décommenter une ou plusieurs lignes de code

Remplacer automatiquement un terme présent à plusieurs endroits dans un fichier