Umzug der Artikel-Filter-Box auf Main-Inside

Thema wurde von Cyrus (LeGong), 4. Dezember 2016 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    9. Oktober 2014
    Beiträge:
    248
    Danke erhalten:
    31
    Danke vergeben:
    127
    Ist es auch möglich, diese in der Kategorie des Artikels bei der Lieferzeit und dem Lagerbestand mit auszugeben?
    Das würde und so viel arbeit ersparen.
     
  2. Cyrus (LeGong)

    Cyrus (LeGong) Erfahrener Benutzer

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    1.432
    Danke erhalten:
    342
    Danke vergeben:
    176
    Meinst du Lieferzeit und Lagerbestand als Filterwert in Frontend, auswählen zu können?
    Oder nenne einfach einen Beispiel.
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    9. Oktober 2014
    Beiträge:
    248
    Danke erhalten:
    31
    Danke vergeben:
    127
    Hallo @Cyrus (LeGong),
    ich möchte gerne diese selbst angelegten Felder
    artikelansicht.PNG

    an dieser Position im Kategoriemenü anzeigen lassen
    kategorie.PNG

    Ich weiß ja nicht ob an dieser Stelle die Zusatzfelder zur Verfügung stehen oder ob man da wieder so einen Extender oder so benötigt. Kenne mich auf dem Gebiet da leider so garnicht aus.
     
  4. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.755
    Danke erhalten:
    1.516
    Danke vergeben:
    1.051
    das hat jetzt aber nix mit diesem Thread zu tun...........
     
  5. Cyrus (LeGong)

    Cyrus (LeGong) Erfahrener Benutzer

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    1.432
    Danke erhalten:
    342
    Danke vergeben:
    176
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    9. Oktober 2014
    Beiträge:
    248
    Danke erhalten:
    31
    Danke vergeben:
    127
    Hallo @Cyrus (LeGong) & @marmoles ,
    ja das habe ich auch bemerkt, aber oben wurde auch schon über die Zusatzfelder geschrieben und von daher dachte ich, wäre ich doch nicht so fehl am Platz.
     
  7. reo

    reo Erfahrener Benutzer

    Registriert seit:
    21. Januar 2014
    Beiträge:
    217
    Danke erhalten:
    7
    Danke vergeben:
    32
    So ich habe dass mit der Filterauswahl auf die Informationsseite zu setzen versucht. Funktioniert soweit auch. Doch wenn mann die Position der Boxen im Style Editor jetzt ändert, hat man statt dem Filter z.B den Schnellkauf auf der Infoseite. Was mir auch noch aufgefallen ist, dass nicht mehr alle Menüboxen auf der Starseite angezeigt werden. Warum auch immer.

    Gibt es da auch eine Variante ohne dass es an anderen Stellen Fehler giebt? Also dass es auch funktioniert wenn man spähter die Menüboxen verschiebt?

    Gruss René
     
  8. Cyrus (LeGong)

    Cyrus (LeGong) Erfahrener Benutzer

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    1.432
    Danke erhalten:
    342
    Danke vergeben:
    176
    Ja Renè, man kan nicht einerseits die Gestalltung der Webseiten per USERMODs und andererseits über StyleEdit machen. Nicht alles ist so möglich. Ich benutze persönlich kaum SE. Gambio Shopsystem bietet viele komfortablen Overload Möglichkeiten an. Sowohl für die Gestalltung als auch für die Erweiterung der Funktionalität. man muss sich ein Mal damit auseinander setzen. Ich bin selbst auch immernoch am entdecken und experimentieren und hier im Forum gibt es genugend nette Leute, die einem auch dabei hilfen.
    Jede Box hat eine Positionsnummer. Ich vermute, wenn du über SE die Positionen änderst, dann werden die Positionsnummer auch geändert. Da in meinem Beispiel, es sich um ungeänderte Positionierung der Boxen handelt, die Filter-Box hat die Position 2, die du dann über SE geändert hast. In diesem Fall, muss du dann den Code von oben auch entsprechend ändern.
    Also statt "2" die neue Position angeben:
    {menuboxes first=2 last=2}
    Auch hier muss der Code entsprechen angepasst werden:
    {menuboxes first=1 last=1 exclude="filter"}
    {menuboxes first=3 last=100 exclude="filter"}
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    Sehr schön.

    Ich hatte zwar einen Thread zu einem anderen Thema gesucht ... und dann diesen hier gefunden. Die Umpositionierung der Filter war auch ein Thema, welches ich vor Monaten schon auf dem Schirm hatte.

    Zu allererst: Es funzt auch noch in v. 3.2.3.0

    Allerdings ist es nun eine "Riesenbox" o_O die ich gern verkleinern wollen würde. Dafür sollte augenscheinlich die "/Honeygrid/boxes/box_filter_form_content.html" verantwortlich sein.

    Ich brauche nur 2 Filter. Der Preisfilter könnte weg. Da die beiden Filter und der Preisfilter derzeit untereinander angeordnet sind, nehmen die einfach nur viel Platz weg.

    Frage 1 ist: Wie bekomme ich die beiden Filter nebeneinander dargestellt?
    Frage 2 ist: Könnte man die beiden Filter auch in der Zeile mit der Paginierung unterbringen? Wenn ja, wie?

    upload_2017-2-19_11-54-4.png
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    Hat niemand eine Idee?
     
  11. Cyrus (LeGong)

    Cyrus (LeGong) Erfahrener Benutzer

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    1.432
    Danke erhalten:
    342
    Danke vergeben:
    176
    TEIL 1:

    Ich bin angeschrieben worden, dass einige Forum-User die Gestalltung der Filterbox nicht hinbekommen und wenn möglich ich soll mehr Erklärung dazu schreiben.
    Hier meine Methode:
    1: Um die Filterbox von dem linken Menü auf Main, über die Produkt-Listing zu bekommen, muss man als aller erste die Datei: "templates/Honeygrid/index.html" kopieren und die Kopie auf "index-USERMOD.html" umbenennen.
    Nun muss die USERMOD-Datei folgendermaßen erweitert werden.
    Such nach:
    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}
                       {$main_content}
                   </div>
               </div>
    
    und ändere sie wie folgt:
    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}
                       <!-- BOF Change Filter Position -->
                       {if ""|detect_page == 'Cat'}
                           {menuboxes first=2 last=2}
                       {/if}
                       <!-- EOF Change Filter Position -->
              {$main_content}
                   </div>
               </div>
    
    dann such nach:
    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 sie wie folgt:
    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>
    
    2: Damit unsere Filterbox auch schön aussieht und die aufklappbar ist, muss die Datei "templates/Honeygrid/boxes/box_filter.html" kopiert und die Kopie auf "box_filter-USERMOD.html" umbenannt werden. Nun wird die USERMOD-Datei folgendermaßen erweitert:
    Suche nach:
    HTML:
    {include file="get_usermod:{$tpl_path}snippets/box/default/top.html" class="filter" headline=$txt.heading_filter}
    <div id="filterbox-container">
       <form name="search_filter" method="get" action="{$content_data.FORM_ACTION_URL}" data-gambio-widget="filter"
             data-gambio-_widget="filter"
             {if $content_data.FEATURE_DATA|@count == 0} data-filter-auto-update="false"{/if}>
           {include file="get_usermod:{$tpl_path}boxes/box_filter_form_content.html"}
           
           <div class="preloader"></div>
           
           <div class="preloader-message">
               <span>{$error.error}</span>
           </div>
           
       </form>
    </div>
    
    {include file="get_usermod:{$tpl_path}snippets/box/default/bottom.html"}
    
    und ändere sie wie folgt:
    HTML:
    <!-- BOF Setting the filter-box in a accordion panel -->
    <div class="panel-group" id="accordion" role="filterlist">
      <div class="panel panel-default">   
        <h4 class="panel-title">
          <button id="myBtn" style="text-align:left" class="btn btn-eigene btn-block" type="button" data-toggle="collapse" data-parent="#accordion" href="#collapsible">
            <span class="dropdown-name">Produkte filtern (Suche verfeinern) </span><span class="caret"></span>
          </button>
        </h4>   
        <div id="collapsible" class="panel-collapse collapse out" role="tabpanel">
               <div class="panel-body">
                   <div id="filterbox-container">
                       <form name="search_filter" method="get" action="{$content_data.FORM_ACTION_URL}" data-gambio-widget="filter"
                   data-gambio-_widget="filter"
                         {if $content_data.FEATURE_DATA|@count == 0} data-filter-auto-update="false"{/if}>
                           <!-- BOF Including the data of the file "boxes/box_filter_form_content.html" instead of including the file. -->
                           {include file="get_usermod:{$tpl_path}boxes/box_filter_form_content.html"}
                       </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    3: Damit die Dropdowns "Inline" dargestellt werden, wird die Datei "templates/Honeygrid/boxes/box_filter_form-content.html" kopiert und die Kopie auf "box_filter_form_content-USERMOD.html" umbenannt. Die Usermod-Datei wird nun folgendermaßen erweitert:
    suche nach:
    HTML:
    <div class="filter-box-form-wrapper">
       <input type="hidden" name="feature_categories_id" value="{$content_data.categories_id}" />
       <input type="hidden" name="filter_categories_id" value="{$content_data.categories_id}" />
    
       {foreach name=feature_html item=feature_code from=$content_data.FEATURE_DATA}
           <div class="{if ($content_data.FEATURE_MODE == 1 && $feature_code.show == false) || ($content_data.FEATURE_EMPTY_BOX_MODE == 0 && $feature_code.empty_feature == true)} hidden{/if}">
               {$feature_code.html}
               {if $content_data.FEATURE_EMPTY_BOX_MODE == 1}
                   <div{if !$feature_code.empty_feature} class="hidden"{/if}>
                       {$txt.feature_empty_text}
                   </div>
               {/if}
           </div>
       {/foreach}
    
       {if $content_data.PRICE_FILTER_FROM_ACTIVE eq 'true' || $content_data.PRICE_FILTER_TO_ACTIVE eq 'true'}
           <fieldset class="form-horizontal">
               <label class="control-label option-heading" for="filter_price_min">
                   {$txt.text_price}
               </label>
    
               <div class="form-group input-container">
                   <div class="col-sm-4">
                       {if $content_data.PRICE_FILTER_FROM_ACTIVE eq 'true'}
                           <input type="text" class="form-control" id="filter_price_min" name="filter_price_min" placeholder="{$txt.text_price}" value="{$content_data.DEFAULT_PRICE_START}" />
                       {/if}
                   </div>
    
                   {if $content_data.PRICE_FILTER_TO_ACTIVE eq 'true'}
                       <label class="control-label col-sm-1" for="filter_price_max">
                           {$txt.text_between}
                       </label>
                       <div class="col-sm-4">
                           <input type="text" class="form-control" id="filter_price_max" name="filter_price_max" placeholder="{$txt.text_between}" value="{$content_data.DEFAULT_PRICE_END}" />
                       </div>
                       <label class="control-label col-sm-1">
                           {$content_data.CURRENCY}
                       </label>
                   {/if}
               </div>
    
           </fieldset>
       {/if}
    
       <div class="form-group">
           <button class="btn btn-primary btn-block" type="submit" title="{$txt.button_filter}">
               {$txt.button_filter}
           </button>
    
           <button class="btn btn-default btn-block" type="reset" title="{$txt.button_reset}">
               {$txt.button_reset}
           </button>
       </div>
    
       <input type="hidden" name="filter_url" value="{$content_data.FILTER_URL}" />
       {load_env_array source='get' name='ENV_GET_DATA' exclude='filter_fv_id,value_conjunction,filter_price_min,filter_price_max,do,value_conjunction,page_token'}
       {foreach name=hidden_params key=param_key item=param_value from=$ENV_GET_DATA}
           {if $param_key != 'feature_categories_id' && $param_key != 'filter_url' && $param_key != 'module' && $param_key != 'action'}
               <input type="hidden" name="{$param_key}" value="{$param_value}" />
           {/if}
       {/foreach}
    
       {load_env_array source='post' name='ENV_GET_DATA_POST' exclude='filter_fv_id,price_start,price_end,feature_values,filter_categories_id,filter_price_min,filter_price_max,do,value_conjunction,page_token'}
       {foreach name=hidden_params key=param_key item=param_value from=$ENV_GET_DATA_POST}
           {if $param_key != 'feature_categories_id' && $param_key != 'filter_url' && $param_key != 'module' && $param_key != 'action'}
               <input type="hidden" name="{$param_key}" value="{$param_value}" />
           {/if}
       {/foreach}
    
    </div>
    
    und ändere sie wie folgt:
    HTML:
    <div class="filter-box-form-wrapper">
       <input type="hidden" name="feature_categories_id" value="{$content_data.categories_id}" />
       <input type="hidden" name="filter_categories_id" value="{$content_data.categories_id}" />
    
      {foreach name=feature_html item=feature_code from=$content_data.FEATURE_DATA}
           <!-- Changing the conditions for the "class-selector" to get our own class-selector -->
         <div class="{if ($content_data.FEATURE_MODE == 1 && $feature_code.show == false) || ($content_data.FEATURE_EMPTY_BOX_MODE == 0 && $feature_code.empty_feature == true)} hidden {else} eigene{/if}">   
               {$feature_code.html}
               {if $content_data.FEATURE_EMPTY_BOX_MODE == 1}
                   <div{if !$feature_code.empty_feature} class="hidden"{/if}>
                       {$txt.feature_empty_text}
                   </div>
               {/if}
           </div>
       {/foreach}
    
       {if $content_data.PRICE_FILTER_FROM_ACTIVE eq 'true' || $content_data.PRICE_FILTER_TO_ACTIVE eq 'true'}
           <fieldset class="form-horizontal">
               <label class="control-label option-heading" for="filter_price_min">
                   {$txt.text_price}
               </label>
    
               <div class="form-group input-container">
                   <div class="col-sm-4">
                       {if $content_data.PRICE_FILTER_FROM_ACTIVE eq 'true'}
                           <input type="text" class="form-control" id="filter_price_min" name="filter_price_min" placeholder="{$txt.text_price}" value="{$content_data.DEFAULT_PRICE_START}" />
                       {/if}
                   </div>
    
                   {if $content_data.PRICE_FILTER_TO_ACTIVE eq 'true'}
                       <label class="control-label col-sm-1" for="filter_price_max">
                           {$txt.text_between}
                       </label>
                       <div class="col-sm-4">
                           <input type="text" class="form-control" id="filter_price_max" name="filter_price_max" placeholder="{$txt.text_between}" value="{$content_data.DEFAULT_PRICE_END}" />
                       </div>
                       <label class="control-label col-sm-1">
                           {$content_data.CURRENCY}
                       </label>
                   {/if}
               </div>
    
           </fieldset>
       {/if}
       <!-- Lets set a horizontal line to separate the filter section from the buttons -->
       <hr />
       <!-- BOF disabling the div -->
       <!--<div class="form-group">-->
           <button class="btn btn-primary" type="submit" title="{$txt.button_filter}">
               {$txt.button_filter}
           </button>
    
           <button class="btn btn-default" type="reset" title="{$txt.button_reset}">
               {$txt.button_reset}
           </button>
       <!--</div>-->
       <!-- EOF -->
    
       <input type="hidden" name="filter_url" value="{$content_data.FILTER_URL}" />
       {load_env_array source='get' name='ENV_GET_DATA' exclude='filter_fv_id,value_conjunction,filter_price_min,filter_price_max,do,value_conjunction,page_token'}
       {foreach name=hidden_params key=param_key item=param_value from=$ENV_GET_DATA}
           {if $param_key != 'feature_categories_id' && $param_key != 'filter_url' && $param_key != 'module' && $param_key != 'action'}
               <input type="hidden" name="{$param_key}" value="{$param_value}" />
           {/if}
       {/foreach}
    
       {load_env_array source='post' name='ENV_GET_DATA_POST' exclude='filter_fv_id,price_start,price_end,feature_values,filter_categories_id,filter_price_min,filter_price_max,do,value_conjunction,page_token'}
       {foreach name=hidden_params key=param_key item=param_value from=$ENV_GET_DATA_POST}
           {if $param_key != 'feature_categories_id' && $param_key != 'filter_url' && $param_key != 'module' && $param_key != 'action'}
               <input type="hidden" name="{$param_key}" value="{$param_value}" />
           {/if}
       {/foreach}
    
    </div>
    
     
  12. Cyrus (LeGong)

    Cyrus (LeGong) Erfahrener Benutzer

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    1.432
    Danke erhalten:
    342
    Danke vergeben:
    176
    Teil 2:


    4: Nun wird die Gestalltung von "Dropdowns" geändert. Die Datei "templates/Honeygrid/module/filter_selection/dropdown.html" wird kopiert und die Kopie auf "dropdown-USERMOD.html" umbenannt. Die Usermod-Datei wird folgendermaßen erweitert:

    suche nach:

    HTML:
    
    <fieldset>
    
       <div class="form-group{if $feature_value.VISIBLE == false && $feature_value.DISPLAY_MODE == 1} disabled{/if}">
    
           <label class="control-label option-heading" for="filter_fv_id[{$content_data.FEATURE_ID}][]">
    
               {$content_data.FEATURE_NAME}
    
           </label>
    
           <select class="form-control" id="filter_fv_id[{$content_data.FEATURE_ID}][]" name="filter_fv_id[{$content_data.FEATURE_ID}][]"{if $feature_value.VISIBLE == false && $feature_value.DISPLAY_MODE == 1} disabled="disabled"{/if}>
    
               <option value="">-</option>
    
               {foreach name=features item=feature_value from=$content_data.FEATURE_VALUE_DATA}
    
                   <option value="{$feature_value.ID}" {if $feature_value.SELECTED}selected="selected"{/if}>
    
                       {$feature_value.NAME}
    
                   </option>
    
               {/foreach}
    
           </select>
    
       </div>
    
    </fieldset>
    
    <input type="hidden" name="value_conjunction[{$content_data.FEATURE_ID}]" value="{$content_data.VALUE_CONJUNCTION}" />
    
    
    und ändere sie wie folgt:

    HTML:
    
    <fieldset>
    
       <!-- Change class="form-group" to class="filter-form-group" for a different css-styling -->
    
       <div class="filter-form-group{if $feature_value.VISIBLE == false && $feature_value.DISPLAY_MODE == 1} disabled{/if}">
    
           
    
           <!-- BOF Filter Extension "Insert Table" -->
    
           <table style="width:100%;">
    
               <tr style="width:100%;">
    
                   <td style="width: 20%;">
    
                       <!-- Change class="control-lable" to class="filter-control-lable" for a different css-styling -->
    
                       <label class="filter-control-label option-heading" for="filter_fv_id[{$content_data.FEATURE_ID}][]">
    
                           {$content_data.FEATURE_NAME}
    
                       </label>       
    
                   </td>
    
                   <td style="width:100%;">
    
                       <!-- Change class="form-control" to class="filter-form-control" for a different css-styling -->
    
                       <select class="filter-form-control" id="filter_fv_id[{$content_data.FEATURE_ID}][]" name="filter_fv_id[{$content_data.FEATURE_ID}][]"{if $feature_value.VISIBLE == false && $feature_value.DISPLAY_MODE == 1} disabled="disabled"{/if}>
    
                           <option value="">-</option>
    
                           {foreach name=features item=feature_value from=$content_data.FEATURE_VALUE_DATA}
    
                               <option value="{$feature_value.ID}" {if $feature_value.SELECTED}selected="selected"{/if}>
    
                                   {$feature_value.NAME}
    
                               </option>
    
                           {/foreach}
    
                       </select>
    
                   </td>
    
               </tr>
    
           </table>
    
           <!-- EOF Filter Extension "Insert Table" -->
    
           
    
       </div>
    
    </fieldset>
    
    <input type="hidden" name="value_conjunction[{$content_data.FEATURE_ID}]" value="{$content_data.VALUE_CONJUNCTION}" />
    
    
    5: Nun müssen wir an die Gestalltung der Filterbox arbeiten. Bei mir habe ich die folgende CSS-Datei für die Gestalltung. Man kann die Box auch anderes gestallten. Allerdings die Selectoren müssen dabei gleich bleiben. Nur die Attribute sollte man nach seinem Wunsch ändern:

    Code:
    
    /* Benötigte Bootstrap CSS zur „Akkordeon-Darstellung“ */
    
    @import "../bootstrap/bootstrap/component-animations“;
    
    
    /* Benötigte Bootstrap CSS Formatierungen zur „Akkordeon-Darstellung“ */
    
    .collapse {
    
      display: none;
    
    }
    
    .collapse.in {
    
      display: block;
    
    }
    
    tr.collapse.in {
    
      display: table-row;
    
    }
    
    tbody.collapse.in {
    
      display: table-row-group;
    
    }
    
    .collapsing {
    
      position: relative;
    
      height: 0;
    
      overflow: hidden;
    
      -webkit-transition-property: height, visibility;
    
      -o-transition-property: height, visibility;
    
         transition-property: height, visibility;
    
      -webkit-transition-duration: 0.35s;
    
      -o-transition-duration: 0.35s;
    
         transition-duration: 0.35s;
    
      -webkit-transition-timing-function: ease;
    
      -o-transition-timing-function: ease;
    
         transition-timing-function: ease;
    
    }
    
    
    .filter-control-label {
    
       display: inline;
    
    }
    
    
    .filter-checkbox {
    
       display: inline;
    
    }
    
    
    .eigene {
    
       display: inline-block;
    
       margin-right: 10px;
    
    }
    
    
    .radio, .checkbox {
    
        position: relative;
    
        display: inline-block;
    
        margin-top: 10px;
    
        margin-bottom: 10px;
    
           padding-left: 10px;
    
    }
    
    
    .checkbox label {
    
       margin-right: 30px;
    
    }
    
    
    .panel-filter {
    
        margin-bottom: 18px;
    
        background-color: #fff;
    
        border: 1px solid transparent;
    
        border-radius: 2px;
    
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    
    }
    
    .box-filter .panel-body {
    
        background-color: #fff;
    
    }
    
    
    form fieldset {
    
        margin-bottom: 10px;
    
    }
    
    
    form fieldset:first-of-type {
    
        margin-top: 5px;
    
    }
    
    
    .filter-form-group {
    
       display: inline;
    
       margin-bottom: 15px;
    
       box-sizing: border-box;
    
    }
    
    
    .filter-form-control {
    
       color: #999;
    
       opacity: 1;
    
       border: 1px solid #87a114;
    
       box-shadow: none;
    
       display: inline-block;
    
       width: 100%;
    
       height: 26px;
    
       padding: 2px 12px;
    
       font-size: 13px;
    
       line-height: 1.42857;
    
       color: #555;
    
       background-color: #fff;
    
       background-image: none;
    
       border-radius: 2px;
    
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    
       
    
    }
    
    
    6: Damit die bootstrap Akkordeon auch funktioniert, muss man die Datei "bootstrap-collapse.min.js" in dem Ordner "templates/Honeygrid/usermod/javascript/Global" ablegen.

    Code:
    
    if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(t){"use strict";var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||1==e[0]&&9==e[1]&&e[2]<1||e[0]>3)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4")}(jQuery),+function(t){"use strict";function e(e){var n,a=e.attr("data-target")||(n=e.attr("href"))&&n.replace(/.*(?=#[^\s]+$)/,"");return t(a)}function n(e){return this.each(function(){var n=t(this),i=n.data("bs.collapse"),s=t.extend({},a.DEFAULTS,n.data(),"object"==typeof e&&e);!i&&s.toggle&&/show|hide/.test(e)&&(s.toggle=!1),i||n.data("bs.collapse",i=new a(this,s)),"string"==typeof e&&i[e]()})}var a=function(e,n){this.$element=t(e),this.options=t.extend({},a.DEFAULTS,n),this.$trigger=t('[data-toggle="collapse"][href="#'+e.id+'"],[data-toggle="collapse"][data-target="#'+e.id+'"]'),this.transitioning=null,this.options.parent?this.$parent=this.getParent():this.addAriaAndCollapsedClass(this.$element,this.$trigger),this.options.toggle&&this.toggle()};a.VERSION="3.3.7",a.TRANSITION_DURATION=350,a.DEFAULTS={toggle:!0},a.prototype.dimension=function(){var t=this.$element.hasClass("width");return t?"width":"height"},a.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var e,i=this.$parent&&this.$parent.children(".panel").children(".in, .collapsing");if(!(i&&i.length&&(e=i.data("bs.collapse"),e&&e.transitioning))){var s=t.Event("show.bs.collapse");if(this.$element.trigger(s),!s.isDefaultPrevented()){i&&i.length&&(n.call(i,"hide"),e||i.data("bs.collapse",null));var r=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[r](0).attr("aria-expanded",!0),this.$trigger.removeClass("collapsed").attr("aria-expanded",!0),this.transitioning=1;var o=function(){this.$element.removeClass("collapsing").addClass("collapse in")[r](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!t.support.transition)return o.call(this);var l=t.camelCase(["scroll",r].join("-"));this.$element.one("bsTransitionEnd",t.proxy(o,this)).emulateTransitionEnd(a.TRANSITION_DURATION)[r](this.$element[0][l])}}}},a.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var e=t.Event("hide.bs.collapse");if(this.$element.trigger(e),!e.isDefaultPrevented()){var n=this.dimension();this.$element[n](this.$element[n]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse in").attr("aria-expanded",!1),this.$trigger.addClass("collapsed").attr("aria-expanded",!1),this.transitioning=1;var i=function(){this.transitioning=0,this.$element.removeClass("collapsing").addClass("collapse").trigger("hidden.bs.collapse")};return t.support.transition?void this.$element[n](0).one("bsTransitionEnd",t.proxy(i,this)).emulateTransitionEnd(a.TRANSITION_DURATION):i.call(this)}}},a.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()},a.prototype.getParent=function(){return t(this.options.parent).find('[data-toggle="collapse"][data-parent="'+this.options.parent+'"]').each(t.proxy(function(n,a){var i=t(a);this.addAriaAndCollapsedClass(e(i),i)},this)).end()},a.prototype.addAriaAndCollapsedClass=function(t,e){var n=t.hasClass("in");t.attr("aria-expanded",n),e.toggleClass("collapsed",!n).attr("aria-expanded",n)};var i=t.fn.collapse;t.fn.collapse=n,t.fn.collapse.Constructor=a,t.fn.collapse.noConflict=function(){return t.fn.collapse=i,this},t(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(a){var i=t(this);i.attr("data-target")||a.preventDefault();var s=e(i),r=s.data("bs.collapse"),o=r?"toggle":i.data();n.call(s,o)})}(jQuery),+function(t){"use strict";function e(){var t=document.createElement("bootstrap"),e={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var n in e)if(void 0!==t.style[n])return{end:e[n]};return!1}t.fn.emulateTransitionEnd=function(e){var n=!1,a=this;t(this).one("bsTransitionEnd",function(){n=!0});var i=function(){n||t(a).trigger(t.support.transition.end)};return setTimeout(i,e),this},t(function(){t.support.transition=e(),t.support.transition&&(t.event.special.bsTransitionEnd={bindType:t.support.transition.end,delegateType:t.support.transition.end,handle:function(e){return t(e.target).is(this)?e.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery);
    
    
    Hier nochmals alle Dateien als ZIP.
     

    Anhänge:

  13. Jan Brodowsky

    Jan Brodowsky Erfahrener Benutzer

    Registriert seit:
    20. Juni 2012
    Beiträge:
    249
    Danke erhalten:
    27
    Danke vergeben:
    129
    @Cyrus (LeGong) : Super gute Anleitung. Einzig die Filterbox klappt nicht ein, wenn man darauf klickt. Sie springt zwar hoch, die Filterwerte sind aber dennoch in der darunterliegenen Schrift zu sehen.
    https://www.aloha-bowling.de/shop/gx2/bekleidung/

    hast Du da eine Idee? Und noch eine Frage: Wo ändere ich die Schriftgröße, Farbe, Stil der Filterwerte und Überschriften? Läuft das alles in der filter.css?
     
  14. Cyrus (LeGong)

    Cyrus (LeGong) Erfahrener Benutzer

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    1.432
    Danke erhalten:
    342
    Danke vergeben:
    176
    @Jan Brodowsky,
    In der Zip-Datei ist eine CSS-Datei unter "\Filter_Umzug_GX_3\templates\Honeygrid\usermod\css\filter.css". Evtl. verursacht diese Datei den Fehler. Du muss diese Datei löschen. Es ist dann bei dir unter "\templates\Honeygrid\usermod\css\filter.css".
    Nicht vergessen nachdem Löschen die Caches für Seitenausgabe und Modulinformation zu leeren.
    Nun sollte die Filter-Box ohne Probleme auf und zu klappen und das Problem mit dem Überlappen auch weg sein.
    Aber gleichzeitig wären auch eventuell deine Stylings weg sein.
    Da ich überwiegend mit "SCSS-Dateien" arbeite, habe ich mein Styling auch in der Datei "\templates\Honeygrid\styles\custom\_usermod.scss" eingefügt. Diese Datei ist die "SCSS" äquivalent von "Usermod.css". Für meine Bedürfnisse habe ich folgende Selektoren und Attribute eingefügt:
    Code:
    // ****************************** BOF Categorie Filter Changes ******************************
    
    .box-filter {
       position: relative;
    }
    
    .panel-default {
       background-image: linear-gradient(to bottom, #f2f5ad 0%, $my-color 100%);
       color: #000;
       box-shadow: inset 0 1px #ddd;
       border-color: $my-color;
    }
    
    .btn.btn-filter {
       background-color: #EEE;
       background-image: linear-gradient(to bottom, #f5f5f5 0%, #eee 100%);  
    }
    
    .btn.btn-filter:hover {
       background-color: #eee;
       background-image: linear-gradient(to bottom, #ddd 0%, #f1f1f1 100%);  
    }
    
    .show-filter {
       display: inline-block;
       margin-right: 10px;
    }
    
    .filter-form-group {
       display: inline;
       margin-bottom: 15px;
       box-sizing: border-box;
    }
    
    .filter-td {
       width: 100px;
       text-align: right;
       padding-right:10px;
    }
    
    .filter-control-label {
       display: inline;
    }
    
    .filter-checkbox {
       display: inline;
    }
    
    .filter-form-control {
       color: #999;
       opacity: 1;
       border: 1px solid $my-color;
       box-shadow: none;
       display: inline-block;
       width: 100%;
       height: 26px;
       padding: 2px 12px;
       font-size: 13px;
       line-height: 1.42857;
       color: #555;
       background-color: #fff;
       background-image: none;
       border-radius: 2px;
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;  
    }
    
    option { 
       width: 100px;
    }
    
    .radio, .checkbox {
        position: relative;
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 10px;
           padding-left: 10px;
    }
    
    .checkbox label {
       margin-right: 30px;
    }
    
    .panel-filter {
        margin-bottom: 18px;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 2px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    }
    
    form fieldset {
        margin-bottom: 10px;
    }
    
    form fieldset:first-of-type {
        margin-top: 5px;
    }
    
    .collapse {
      display: none;
    }
    .collapse.in {
      display: block;
    }
    tr.collapse.in {
      display: table-row;
    }
    tbody.collapse.in {
      display: table-row-group;
    }
    .collapsing {
      position: relative;
      height: 0;
      overflow: hidden;
      -webkit-transition-property: height, visibility;
      -o-transition-property: height, visibility;
         transition-property: height, visibility;
      -webkit-transition-duration: 0.35s;
      -o-transition-duration: 0.35s;
         transition-duration: 0.35s;
      -webkit-transition-timing-function: ease;
      -o-transition-timing-function: ease;
         transition-timing-function: ease;
    }
    
    // ////////////////////////////// EOF Filter Changes //////////////////////////////
    
    Für deine Bedürfnisse musst du evtl. ein Paar Änderungen machen.
    Das Ergebnis kannst du dir unter https://www.feinkost-kraeutlein.de/Produkte/Milchprodukte/
    anschauen
     
  15. Cyrus (LeGong)

    Cyrus (LeGong) Erfahrener Benutzer

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    1.432
    Danke erhalten:
    342
    Danke vergeben:
    176
    @Jan Brodowsky,
    Um die Schriftgrößen und Farben zu ändern kannst du bei den Selektor:
    Code:
    .panel-default {
       background-image: linear-gradient(to bottom, #f2f5ad 0%, $my-color 100%);
       font-family: Georgia, "Times New Roman", Times, serif;  //BEISPIEL
       font-size: 14px;  //BEISPIEL
       color: #87a114; //BEISPIEL
       box-shadow: inset 0 1px #ddd;
       border-color: $my-color;
    }
    
    eingeben.
     
  16. Jan Brodowsky

    Jan Brodowsky Erfahrener Benutzer

    Registriert seit:
    20. Juni 2012
    Beiträge:
    249
    Danke erhalten:
    27
    Danke vergeben:
    129
    Danke für die Info, ich habe nun die filter.css aus dem benannten Ordner gelöscht, alle Caches (auch per FTP) geleert , aber leider ohne Erfolg. Das Menu klappt nicht zu / auf.
    Habe dann die _usermod.scss von Dir mal übernommen, aber da bekomme ich folgenden Fehlermeldung auf der Startseite:
    Code:
    Parse error: parse error:failed at `position relative;`templates/honeygris/styles/custom/_usermod.scss on line 4 body:before { content: "[CSS compile erroe] 'filltime() stat faled for cache/cde8dd0bd7a368a440409c7f972dc64e.css' in /mnt/web111/d2/55/51325055/htdocs/aloha/shop/gx2/includes/classes/scssphp/scss.inc.php:4518 "; position: absolute; background: #FF5722; color: #fff; top: 0; left: 0; z-index: 100000; padding: 15px; }
    Was mir gut gefällt, ist dass das Menu stehen bleibt beim scrollen. Ich kenn mich nicht wirklich mit css aus, aber ich denke mir, dass ich die Daten auf mich individuell anpassen muss, damit es funktioniert?! Ich habe die _usermod.css mal umbenannt, weil Fehler auf der Startseite schaut nicht besonders aus.
     
  17. Cyrus (LeGong)

    Cyrus (LeGong) Erfahrener Benutzer

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    1.432
    Danke erhalten:
    342
    Danke vergeben:
    176
    @Jan Brodowsky,
    hast du denn Code von oben übernommen? Oder hast du es selbst getippt?
    Code:
    position relative;
    
    da fehlt eine Doppelpunkt ":" nach position bei der Fehlermeldung.
     
  18. Cyrus (LeGong)

    Cyrus (LeGong) Erfahrener Benutzer

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    1.432
    Danke erhalten:
    342
    Danke vergeben:
    176
    @Jan Brodowsky,
    falls du Probleme mit SCSS-Dateien hast, kannst du auch mit CSS-Dateien weiter arbeiten. "\templates\Honeygrid\usermod\css\filter.css". Der richtige Code für die aufklappbare Box wäre dann:
    Code:
    .collapse {
      display: none;
    }
    .collapse.in {
      display: block;
    }
    tr.collapse.in {
      display: table-row;
    }
    tbody.collapse.in {
      display: table-row-group;
    }
    .collapsing {
      position: relative;
      height: 0;
      overflow: hidden;
      -webkit-transition-property: height, visibility;
      -o-transition-property: height, visibility;
         transition-property: height, visibility;
      -webkit-transition-duration: 0.35s;
      -o-transition-duration: 0.35s;
         transition-duration: 0.35s;
      -webkit-transition-timing-function: ease;
      -o-transition-timing-function: ease;
         transition-timing-function: ease;
    }
    
     
  19. Jan Brodowsky

    Jan Brodowsky Erfahrener Benutzer

    Registriert seit:
    20. Juni 2012
    Beiträge:
    249
    Danke erhalten:
    27
    Danke vergeben:
    129
    Ich habe es abgetippt, da es sich nicht kopieren ließ. Vielen, vielen Dank für Deine Hilfe - jetzt funktioniert es.
    Jetzt muss ich es nur noch nach meinen Vorstellungen anpassen :)
     
  20. Jan Brodowsky

    Jan Brodowsky Erfahrener Benutzer

    Registriert seit:
    20. Juni 2012
    Beiträge:
    249
    Danke erhalten:
    27
    Danke vergeben:
    129
    Hallo,
    Ich würde gerne mit den Checkboxen in den Filterwerten arbeiten. Wie kann ich die vertikal anordnen, anstatt horizontal?
    Über eine USERMOD?! checkboxes.html? Aber wo o_O?

    https://www.aloha-bowling.de/shop/gx2/Baelle/