Umzug der Artikel-Filter-Box auf Main-Inside

Artikel-Filter ist standardmäßig als Menübox-Nr. 2 auf die linke Seite eingestellt. Wer diese Box auf Main-Inside, über die Artikellistenansicht haben möchte, muss ein Paar kleine Erweiterungen in einige Dateien durchführen und diese als USERMOD-Dateien speichern. Damit überlädt man quasi die Standard Einstellungen.

Als aller erste, muss man die Datei „SHOP-ORDNER/templates/Honeygrid/index.html“ kopieren und die Kopie als „index-USERMOD.html“ speichern. Nun wird diese Datei an folgenden Stellen erweitert:

Suche:

HTML:

<div id="main">
         <div class="main-inside">
           {include file="get_usermod:{$tpl_path}snippets/navigation/breadcrumb.html" breadcrumb=$navtrail}
           {include file="get_usermod:{$tpl_path}snippets/banner.html" banner=$BANNER}

und füge danach:

HTML:

<!-- BOF Change Filter Position -->
           {if ""|detect_page == 'Cat'}
             {menuboxes first=2 last=2}
           {/if}
           <!-- EOF Change Filter Position -->

Nun, suche:

HTML:

<aside id="left">
         {if ""|detect_page == 'Cat'}
         {menuboxes first=1 last=100 exclude="content"}
         {else}
         {menuboxes first=1 last=100 exclude="content"}
         {/if}
       </aside>

und ändere auf:

HTML:

<aside id="left">
  {if ""|detect_page == 'Cat'}
    <!-- BOF Turnoff Filter -->
    {menuboxes first=1 last=1 exclude="filter"}
    {menuboxes first=3 last=100 exclude="filter"}          
  {else}
    {menuboxes first=3 last=100 exclude="filter"}
    <!-- EOF Turnoff Filter -->  
  {/if}
</aside>

Nun, müssen die Caches für Seitenaufbau und Modulinformationen geleert werden.
Im Frontend, befindet sich nun die Box “Artikel-Filter” in der <div> Main. Aber, je nach die Größe der Filter-Auswahl, sieht das ganze evtl. nicht so schön aus. Also muss man die Dateien erweitern, die das Aussehen der Filter-Box kontrollieren.
Die Dateien, die das Aussehen der Filter-Box kontrollieren sind wie folgt:
„../templates/Honeygrid/boxes/box_filter_form_content.html“;
„../templates/Honeygrid/boxes/box_filter“;
„../templates/Honeygrid/module/filter_selection/*.*.

Alle diese Dateien können als „USERMOD-Dateien“ verarbeitet und gespeichert werden. Dadurch sind sie ziemlich Updatessicher.
Die Gestaltungsmöglichkeiten gibt es viel. Bei mir auf Test-Shop, sieht es folgendermaßen aus:
http://test.feinkost-kraeutlein.de/index.php?cat=c61_Milchprodukte-Milchprodukte-61.html

Viel Spass

 

Sehr sehr nett nach dem hab ich gesucht.

Wie bekommst du so schöne Tabellen in deine Produktbeschreibung?

lg

 

@johannes_honke

im Textfeld einfach eine Tabelle einfügen



Das war es auch schon

 

Wird diese dann auch als Responsive-tables ausgeliefert?

 

@johannes_honke,
hast du dann Informationen, die automatische in der Tabelle eingefügt werden? Oder möchtest du die zu der Tabelle gehörenden Informationen einzelln, je Artikel, in der Tabelle per Hand eingeben?
Bei mir sind die Informationen als Extrafelder in den Produkten angelegt. Diese informationen werden per Overloads für die Artikel-Beschreibung zur Verfügung gestellt. da werden sie wie folgt über die Datei ../templates/Honeygrid/snippets/product_info/product_description-USERMOD.html" abgerufen:

HTML:

<!-- Tab panes -->
  <div class="tab-content">
    {if $show_description_tab}
      <div class="tab-pane active">
        <div class="tab-heading">
          <a href="#">{$txt.text_description}</a>
        </div>
        <div class="tab-body active">
          <p>{$ARR_PRODUCTS_DESCRIPTION[0]}</p>
          <br />
             
          <!-- BOF Table for Extra fields -->
          {if $PRODUCTS_ORIGIN || $PRODUCTS_INGREDIENT || $PRODUCTS_ALLERGEN}
            <table border class="facts">
              <thead>             
                <h4>Zutaten und Allergene von {$RICH_SNIPPET_ARRAY.product_itemprop_name_start}{$PRODUCTS_NAME}{$RICH_SNIPPET_ARRAY.product_itemprop_name_end}</h4>             
              </thead>
              <tbody>
                {if $PRODUCTS_FAT || $SHOW_PRODUCTS_FAT}
                  <tr class="product-details-facts">
                    <th class="product-details-facts-head">{$txt.text_products_fat}</th>
                    <td class="product-details-facts-desc">{$PRODUCTS_FAT}</td>
                  </tr>   
                {/if}
                {if $PRODUCTS_ORIGIN || $SHOW_PRODUCTS_ORIGIN}
                  <tr class="product-details-facts">
                    <th class="product-details-facts-head">{$txt.text_products_origin}</th>
                    <td class="product-details-facts-desc">{$PRODUCTS_ORIGIN}</td>                 
                  </tr>
                {/if}
                {if $PRODUCTS_INGREDIENT || $SHOW_PRODUCTS_INGREDIENT}
                  <tr class="product-details-facts">
                    <th class="product-details-facts-head">{$txt.text_products_ingredient}</th>
                    <td class="product-details-facts-desc">{$PRODUCTS_INGREDIENT}</td>
                  </tr>   
                {/if}
                ...
                ...

              </tbody>
            </table>
            {/if}
            {if $PRODUCTS_SATURATED_FATTY_ACID || $PRODUCTS_CARBOHYDRATE || $PRODUCTS_SUGAR}
            <table>
              <thead>
                <h4>Nährwerte von {$RICH_SNIPPET_ARRAY.product_itemprop_name_start}{$PRODUCTS_NAME}{$RICH_SNIPPET_ARRAY.product_itemprop_name_end}</h4>
              </thead>
              <tbody>
                {if $PRODUCTS_CALORIE || $SHOW_PRODUCTS_CALORIE}
                  <tr class="product-details-facts">
                    <th class="product-details-facts-head">{$txt.text_products_calorie}</th>
                    <td class="product-details-facts-desc">{$PRODUCTS_CALORIE}</td>
                  </tr>   
                {/if}   
                {if $PRODUCTS_FAT_ABSOLUTE || $SHOW_PRODUCTS_FAT_ABSOLUTE}
                  <tr class="product-details-facts">
                    <th class="product-details-facts-head">{$txt.text_products_fat_absolute}</th>
                    <td class="product-details-facts-desc">{$PRODUCTS_FAT_ABSOLUTE}</td>
                  </tr>   
                {/if}
                ...
                ... 
              </tbody>
            </table>
            <p>* Nach Angaben des Herstellers/unserer Lieferanten. Angaben ohne Gewähr.</p>
          {/if}
             
          <!-- EOF Table for Extra fields -->

Alles andere ist zuviel Arbeit.

Viel Gluck und Spass

 

Das ist ja eine super sache.
Aber wird dann das nicht doppelt angezeigt? unten in der Preisbox und unten in der beschreibung?

 

Hab es jetzt mal rein gemacht aber bei mir kommt ne fehlermeldung

FATAL ERROR(1): "Uncaught --> Smarty Compiler: Syntax error in template "get_usermod:templates/Honeygrid/snippets/product_info/product_description.html" on line 68 "<!-- EOF Table for Extra fields -->" unclosed {if} tag <--
thrown"Information:
<br />
<b>Fatal error</b>: Uncaught --&gt; Smarty Compiler: Syntax error in template &quot;get_usermod:templates/Honeygrid/snippets/product_info/product_description.html&quot; on line 68 &quot;&lt;!-- EOF Table for Extra fields --&gt;&quot; unclosed {if} tag &lt;--
thrown in <b>/var/www/web1/html/onlineshop/includes/classes/Smarty/sysplugins/smarty_internal_templatecompilerbase.php</b> on line <b>68</b><br />

 

Du hast nicht einfach den Code von oben kopiert und bei dir eingefügt? Oder?
So geht es nicht. Der Code von oben ist nur ein Beispiel. Als aller erste, musst du wissen, was du darstelllen möchtest und wo diese Daten sich befinden. Diese Daten müssen dann für die Produkt-Beschreibung per Overload(s) zur Verfügung gestellt werden. Dann kann man an die HTML-Datei "product_beschreibung-USERMOD.html" arbeiten.
Was möchtest du darstellen? Oder besser gesagt, welche Informationen sollen tabellarisch eingefügt werden?

 

Für die Kunden, die nur schnell Info brauchen, wird oben, neben dem Produkt-Image wichtigste Merkmale dargestellt. Es gibt aber Kunden, die auch gerne die Produkt-Beschreibung lesen. Für diese Gruppe von Kunden werden alle Fakten tabellarisch unterhalb der Produkt-Beschreibung komplett dargestellt.

 

Ich möchte die zusatzfelder in der Produktbeschreibung in einer Tabelle dargestellt haben.
Wenn möglich oben in der Preisbox soll er es nicht anzeigen.

 

wie sieht das ganze denn auf dem Handy aus? Kann den Testshop nicht mit dem Handy aufrufen.....

 

warum kannst du den Test-Shop nicht auf deinem Handy aufrufen? Ich habe damit keine Probleme. htc One, Android.

 

Was hast du dann als Zusatzfelder? Das Modul von Gambio? Oder die Extrafelder von Forum?

 

auf meinem iPhone sieht es leider so aus:

 

Ich habe das von Gambio

 

Schon klar. Mach mal "www" weg. NUR http://test.feinkost-kraeutlein.de

 

oja, sorry.

 

Leider kenne ich mich mit den Möglichkeiten von Zusatzfelder von Gambio nicht aus. Allerdings, die werden standardmäßig nur im Preis-Box dargestellt. Um sie in der Product_description anzeigen zu lassen muss man die Variable:

HTML:

{$additional_fields}

in der Datei product_description einfügen. Gestalltungsmöglichkeiten!!?? Mir noch nicht klar.

 

Mit "additional_fields" von Gambio, kannst du auch so eine Tabelle in der Product_description einfügen. Dafür muss man die Datei: "../templates/Honeygrid/module/additional_fields.html" kopieren und als "additional_fields-USERMOD.html" speichern. Nun wird die Usermod-Datei folgendermaßen erweitert:
suche nach:

HTML:

{if $additional_fields_data_array}

und füge danach:

HTML:

  <table>
    <tbody>

nun suche nach:

HTML:

      {foreach key=key item=item from=$additional_fields_data_array}

und ändere den Code folgendermaßen:

HTML:

      {foreach key=key item=item from=$additional_fields_data_array}
        <tr class="product-details-facts">
          {if $item.value}  
            <th class="product-details-facts-head">{$item.title}</th>
            <td class="product-details-facts-desc">{$item.value}</td>
          {/if}
        </tr>
      {/foreach}
    </tbody>
  </table>
{/if}

Nun muss die Datei "../templates/Honeygrid/snippets/product_info/product_description.html" kopiert und als "product_description-USERMOD.html" gespeichert und erweitert werden.
Je nachdem an welche Stelle die Zusatzfelder erscheinen sollen, füge den Code:

HTML:

{$additional_fields}

ein. bei mir ist nachdem Produkt-Beschreibung. Also dann:

HTML:

...
...
...
<!-- Tab panes -->
     <div class="tab-content">
       {if $show_description_tab}
         <div class="tab-pane active">
           <div class="tab-heading">
             <a href="#">{$txt.text_description}</a>
           </div>
           <div class="tab-body active">
             <p>{$ARR_PRODUCTS_DESCRIPTION[0]}</p>
             <br />
             <!-- BOF Additional_fields -->
             {$additional_fields}
             <!-- EOF Additional_fields -->
...
...
...

Damit diese Felder in der Preis-Box nicht erscheinen, muss man die Datei: "../templates/Honeygrid/module/product_info/standard.html" als USERMOD kopieren, speichern und ändern. Hier wird der Code auskommentiert:

HTML:

<!-- BOF Disable additional_fields
{$additional_fields}
EOF -->

Die letzte Arbeiten sind CSS Erweiterung.
lege eine Datei mit dem Namen "additional_fields.css" in den Ordner "../templates/Honeygrid/usermod/css/"an.
In dieser Datei müssen die folgende Selektoren und Attribute geschrieben sein.

Code:

th.product-details-facts-head {
   font-weight: bold;
   border: 1px solid #AEAEAE;
   height: 25px;
   padding: 8px;
}

tr.product-details-facts:nth-child(even) {
   background-color: #dddddd;
}

td.product-details-facts-desc {
   padding: 8px;
   border: 1px solid #AEAEAE;
}

table.facts {
   border-collapse: collapse;
   width: 100%;
   border-spacing: 10px;
   border: 1px solid #AEAEAE;
}

Nun, entleere die Caches für den Seitenaufbau und Module.
Viel Spass

 

hmm anscheinend mach ich irgendwas falsch.... funktioniert leider nicht