Magento. Wie stellt man die Spaltenanzahl in Kategorie Produktliste stellt

Dieses Tutorial zeigt wie man die Spaltenanzahl in Kategorie Produktliste im Marengo Shop stellt.

Im ausgewahlten Template werden die Produkte in 3 Spalte angezeigt.

Sehen wir mal ob wir diese Produkte in 4 Spalte anzeigen konnen.

XML Layout-Datei bearbeiten

Erst offnen Sie das Magento Installation Verzeichnis und suchen die Theme Layout XML Daten. Normaleweise sind sie im "app/design/frontend/default/theme###/layout" Verzeichnis.

Im Layout Verzeichnis offnen das catalog.xml Datei mithilfe von Ihre Editor und machen die Kategorie Layout Settings:

    <catalog_category_default translate="label">
       <label>Catalog Category (Non-Anchor)</label>
       <reference name="right">
           <block type="catalog/navigation" name="catalog.leftnav" before="-" template="catalog/navigation/left.phtml"/>
       </reference>
       <reference name="content">
           <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
               <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                   <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                       <block type="page/html_pager" name="product_list_toolbar_pager"/>
                       <!-- The following code shows how to set your own pager increments -->
                       <!--
                           <action method="setDefaultListPerPage"><limit>4</limit></action>
                           <action method="setDefaultGridPerPage"><limit>9</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>2</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>4</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>8</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                       -->
                   </block>
                   <action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>
                   <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
               </block>
           </block>
       </reference>
   </catalog_category_default>

Jetzt stellen Sie die Spalteanzahl fur Kategorie Produktliste. Fugen Sie den folgenden Code hinzu:

<action method="setColumnCount"><count>4</count></action>

vor

<action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>

Als Ergebnisse bekommen Sie den folgenden:

    <catalog_category_default translate="label">
       <label>Catalog Category (Non-Anchor)</label>
       <reference name="right">
           <block type="catalog/navigation" name="catalog.leftnav" before="-" template="catalog/navigation/left.phtml"/>
       </reference>
       <reference name="content">
           <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
               <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                   <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                       <block type="page/html_pager" name="product_list_toolbar_pager"/>
                       <!-- The following code shows how to set your own pager increments -->
                       <!--
                           <action method="setDefaultListPerPage"><limit>4</limit></action>
                           <action method="setDefaultGridPerPage"><limit>9</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>2</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>4</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>8</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                       -->
                   </block>
                   <action method="setColumnCount"><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>
                   <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
               </block>
           </block>
       </reference>
   </catalog_category_default>

Fugen Sie den gleichen Code in Anchor Kategorie Settings (anchor categorie settings ) hinzu. Scrollen sie die catalog.xml Datei herunter und fugen Sie den gleichen Code in Anchor Kategorie Settings:

<catalog_category_layered translate="label">
       <label>Catalog Category (Anchor)</label>
       <reference name="right">
           <block type="catalog/layer_view" name="catalog.leftnav" before="-" template="catalog/layer/view.phtml"/>
       </reference>
       <reference name="content">
           <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
               <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                   <!-- <action method="addReviewSummaryTemplate"><type>default</type><template>review/helper/su.phtml</template></action> -->
                   <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                       <block type="page/html_pager" name="product_list_toolbar_pager"/>
                       <!—Den folgenden Code zeigt Ihnen wie man die Seite-Erweiterungen macht -->
                       <!--
                           <action method="setDefaultListPerPage"><limit>4</limit></action>
                           <action method="setDefaultGridPerPage"><limit>3</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>2</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>4</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>8</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                           <action method="addPagerLimit"><mode>grid</mode><limit>3</limit></action>
                           <action method="addPagerLimit"><mode>grid</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>grid</mode><limit>9</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>grid</mode><limit>all</limit><label>All</label></action>
                       -->
                   </block>
                   <action method="setColumnCount"><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>
                   <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
               </block>
           </block>
       </reference>
   </catalog_category_layered>

Dann speichern Sie die Datei.

Magento Cache loschen

Loschen Sie Magento Cache um die Anderungen auf Magento Frontend zu sehen. Fur das melden Sie in Magento Adminbereich an und gehen zur "System > Cache Management" Seite.

Dort aktivieren Sie alle Cache Typs , im Auswahlfeld von Aktionen-Box (Actions) wahlen Sie "Refresh" und drucken den Button Submit.

Jetzt offnen das Geschaft Frontend und aktualisieren die Seite um die Anderungen zu sehen.

Wie Sie sehen stehen die Produkten nicht so wie wir brauchen. Der Grund liegt in CSS Stylen. CSS Stylen konnen die Produkte in drei Spalte angezeigt lassen.

CSS Stylen bearbeiten

In Magento sind die Theme-CSS-Datein im "skin/frontend/default/theme###/css" Ordner. Nehmen Sie Browser Developer Tool um eine Produktklasse, Stilparametern und Standort von Stil zu finden. Normalerweise werden die Style-Eigenschaften von Produktliste in der style.css Datei definiert.

Beachten Sie bitte: der Klassname und Style-Eigenschaften konnen in Ihrem Template anders sein.

Sehen wir mal was kann man andern. Die Produkten haben die folgende Style-Eigenschaften :

.products-grid li.item {
   float: left;
   margin: 0 22px 0 0;
   padding: 0 0 29px;
   width: 200px;
}

Hier andern wir Marge und Breite von Artikel. Nach der Bearbeitung bekommen wir das folgendes:

Na ja… das ist nicht ideal aber wir im Naher sind. Jetzt bearbeiten wir die Style-Eigenschaften von Produkttitel, Prise, in den Warenkorb Button und Produkt Linke. Experimentieren Sie einfach um das notige Ergebnis zu bekommen.

Nach einer Weile haben wir so was bekommen:

Vielen Dank fur Ihre Zeit und Aufmerksamkeit. Wir hoffen, dass dieses Tutorial Ihr geholfen hat.

Sehen Sie das Video-Tutorial uber CSS Anderungen:

Magento. Wie stellt man die Spaltenanzahl in Kategorie Produktliste stellt