Étiquette : rwd

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

26/11/2015 / admin

Source : How to change product column quantity in Magento.

Hi pals!, looking for tips to customize your theme?, here’s one very useful and easy to do: How to change the product column quantity in your product list pages. We’ll modify only 2 files:

app/design/frontend/default/yourtheme/layout/catalog.xml
app/design/frontend/default/yourtheme/template/catalog/product/list.phtml

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.

[Magento 1.9] Ajouter un nouvel onglet (tab) sur la fiche produit dans le thème rwd

12/02/2015 / admin

Source : Alternative way of adding tabs to the Magento product page.

Afin que cette technique fonctionne, il faut d’abord vérifier que le template phtml qui injecte les onglets ait le code adéquat. C’est normalement le cas avec le thème rwd. Ouvrir le fichier app/design/frontend/<mon_package>/<mon_theme>/template/catalog/product/view.phtml et vérifier la présence du code suivant :

<div class="product-collateral toggle-content tabs">
        <?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?>
            <dl id="collateral-tabs" class="collateral-tabs">
                <?php foreach ($detailedInfoGroup as $alias => $html):?>
                    <dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt>
                    <dd class="tab-container">
                        <div class="tab-content"><?php echo $html ?></div>
                    </dd>
                <?php endforeach;?>
            </dl>
        <?php endif; ?>
    </div>

<?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?>

<?php foreach ($detailedInfoGroup as $alias => $html):?>

<dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt>

</dd>

<?php endforeach;?>

</dl>

<?php endif; ?>

</div>

Dans app/design/frontend/<mon_package>/<mon_theme>/template/catalog/product/view/ créer un fichier newtab.phtml.

<h1>NewTab</h1>

1	<h1>NewTab</h1>

Dans app/design/frontend/<mon_package>/<mon_theme>/layout/local.xml ajouter ceci :

<?xml version="1.0"?>
<layout version="0.1.0">
    <catalog_product_view>
        <reference name="product.info">
            <block type="core/template" name="the_new_tab" as="the_new_tab" template="catalog/product/view/newtab.phtml">
                <action method="addToParentGroup"><group>detailed_info</group></action>
                <action method="setTitle" translate="value"><value>The New Tab</value></action>
            </block>
        </reference>
    </catalog_product_view>
</layout>

<?xml version="1.0"?>

<catalog_product_view>

<action method="addToParentGroup"><group>detailed_info</group></action>

</block>

</reference>

</catalog_product_view>

</layout>

[Magento 1.9] Afficher un nombre de produits par rangée différent en fonction du viewport dans la liste de catégories/produits du thème RWD

11/12/2014 / admin

Méthode #1 : vous avez une contrainte responsive

Une solution full CSS qui gère le nombre de produits par rangée en fonction du viewport.
Cette solution repose sur l’exploitation du mixin SASS product-grid natif au thème Rwd et sur la modification de 2 fichiers :

app/design/frontend/rwd/yourpackage/template/catalog/product/list.phtml pour l’ajout de classes supplémentaires nécessaires à l’activation des media-queries
skin/frontend/rwd/yourpackage/scss/module/_product-list.scss pour l’ajout des mediaqueries

list.phtml

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

1	<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

…et ajouter les classes suivantes :

<ul class="products-grid products-grid--max-1-col products-grid--max-2-col products-grid--max-3-col products-grid--max-<?php echo $_columnCount; ?>-col">

1	<ul class="products-grid products-grid--max-1-col products-grid--max-2-col products-grid--max-3-col products-grid--max-<?php echo $_columnCount; ?>-col">

Remarque : la logique est la même que celle du système de grid responsive proposé par Bootstrap pour ceux qui connaissent.

_product-list.scss

Pour info : les variables prédéfinies à exploiter

$product-column-spacing : espace entre les colonnes (valeur en px).
$productsGridActionHeight : hauteur d’un item produit (valeur en px – si la hauteur de l’élément .product-info change, cette valeur devrait être ajustée).

Repérer le mixin suivant :

@include bp(min-width, 960px) {
    @include product-grid(4, 960);
    @include product-grid(5, 960);
    @include product-grid(6, 960);
}

@include bp(min-width, 960px) {

@include product-grid(4, 960);

@include product-grid(5, 960);

@include product-grid(6, 960);

}

…et ajouter juste en dessous :

@include bp(min-width, 993px) {
    @include product-grid(3, 993);
}

@include bp(max-width, 992px) {
    @include product-grid(2, 992);
}

@include bp(max-width, 360px) {
    @include product-grid(1, 360);
}

@include bp(min-width, 993px) {

@include product-grid(3, 993);

}

@include bp(max-width, 992px) {

@include product-grid(2, 992);

}

@include bp(max-width, 360px) {

@include product-grid(1, 360);

}

Méthode #2 : vous n’avez pas de contrainte responsive

Prendre la main sur le nombre de produits par rangée en modifiant un paramètre de layout.

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et localiser la ligne suivante :

<!-- Since the addColumnCountLayoutDepend does not work, we are manually setting the max columns -->
<action method="setColumnCount"><count>3</count></action>

1 2	<!-- Since the addColumnCountLayoutDepend does not work, we are manually setting the max columns --> <action method="setColumnCount"><count>3</count></action>

Modifier la valeur de <count /> selon le nombre de colonnes souhaité.

Méthode #3 (bidouille – ne pas utiliser)

Source : How to change product column quantity in Magento

Il faut modifier 2 fichiers :

app/design/frontend/default/yourtheme/layout/catalog.xml
app/design/frontend/default/yourtheme/template/catalog/product/list.phtml

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et ajouter les lignes suivantes (ou modifiez les si elles existent déjà) :

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

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

</reference>

Remarque : vous pouvez cibler le template de votre choix en modifiant la valeur entre la balise <template />.

list.phtml :

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

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

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

…et la remplacer par :

<?php $_columnCount = 3  ?>

1	<?php $_columnCount = 3 ?>

Remarque : vous pouvez choisir le nombre de colonnes par rangée à affocher en modifiant la valeur de $_columnCount.

Articles récents

Catégories

Archives

Méta

Étiquette : rwd

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

catalog.xml :

list.phtml :

[Magento 1.9] Ajouter un nouvel onglet (tab) sur la fiche produit dans le thème rwd