Dynamische Filter

ist doch bei gambio alles schon in arbeit. eins nach dem anderen.
ruhe bewahren und vielleicht einen kleinen glühwein trinken.

 

Das kann man mit einem Mini-jQuery-Script lösen....

 

Weil doch bald Weihnachten ist (und ich Lust dazu hatte), habe ich das mal implementiert...

Folgenden Code an das Ende von "templates\EyeCandy\boxes\box_filter.html" anfügen.

Dann wird bei jeder Filter-Auswahl die Seite automatisch neu geladen.

PHP:

<script type="text/javascript" src="gm/javascript/jquery/jquery.js"></script>
<script type="text/javascript">
{literal}
var filter_form;

function xmit_data()
{
  filter_form.submit();
}

$(document).ready(function(){
  filter_form=$('form[name=search_filter]');

  $('.filter_feature select, #filter_prices input').change(function(){
    xmit_data();
  });

  $('.filter_feature input[type=checkbox]').click(function(){
    xmit_data();
  });

  $('#filter_reset input').click(function(){
    var elements;

    elements=filter_form.find('input[type=text]');
    if (elements.length)
    {
      elements.val('');
    }
    elements=filter_form.find('input[type=checkbox]');
    if (elements.length)
    {
      elements.attr('checked',false);
    }
    elements=filter_form.find('select option[value=""]');
    if (elements.length)
    {
      elements.attr('selected',true);
    }
    xmit_data();
  });
});
{/literal}
</script>

Der nächste logische Schritt ist, dass man nicht mehr die gesamte Seite neu lädt, sondern nur noch den Content-Bereich (Artikelliste) per AJAX austauscht, was den Effekt noch spektakulärer macht....

Ist auch nicht so richtig schwierig....

 

Wenn wir gerade schon mal dabei sind.....

Für die AJAXifizierung des Filterprozesse folgenden Code statt des zuvor geposteten an das Ende von "templates\EyeCandy\boxes\box_filter.html" anfügen.

PHP:

<script type="text/javascript" src="gm/javascript/jquery/jquery.js"></script>
<script type="text/javascript">
{literal}
var filter_form;

function xmit_data()
{
    if (true)
    {
    var form_data=filter_form.serialize()+'&ajax_replace=true';

    $('body').css('cursor','wait');
        $.ajax({
          url: filter_form.attr('action'),
          cache: false,
          data: form_data,
          type: 'GET',
          async: false,
          success: function(html){
              var target=$("#maincol");

              if (!target.length)
              {
                  target=$("#main_inside");
              }
              if (target.length)
              {
                target.html(html);
              }
          }
        });
    $('body').css('cursor','default');
    }
    else
    {
      filter_form.submit();
    }
}

$(document).ready(function(){
  filter_form=$('form[name=search_filter]');

  $('.filter_feature select, #filter_prices input').change(function(){
    xmit_data();
  });

  $('.filter_feature input[type=checkbox]').click(function(){
    xmit_data();
  });

  $('#filter_reset input').click(function(){
    var elements;

    elements=filter_form.find('input[type=text]');
    if (elements.length)
    {
      elements.val('');
    }
    elements=filter_form.find('input[type=checkbox]');
    if (elements.length)
    {
      elements.attr('checked',false);
    }
    elements=filter_form.find('select option[value=""]');
    if (elements.length)
    {
      elements.attr('selected',true);
    }
    xmit_data();
  });
});
{/literal}
</script>

In "includes\classes\Smarty_2.6.14\Smarty.class.php"

PHP:

    function display($resource_name, $cache_id = null, $compile_id = null)
    {
         $this->fetch($resource_name, $cache_id, $compile_id, true);
    }

ersetzen mit

PHP:

    function display($resource_name, $cache_id = null, $compile_id = null)
    {
            if ($_GET['ajax_replace']==true && basename($resource_name)=='index.html')
            {
                 header("Content-Type: text/html; charset=".$_SESSION["language_charset"].PHP_EOL);
                echo $this->_tpl_vars['main_content'];
                exit();
            }
            else
            {
               $this->fetch($resource_name, $cache_id, $compile_id, true);
            }
    }

Es ist immer wieder verblüffend, mit wie wenig Änderungen man dank jQuery doch ziemliche große Dinge realisieren kann.

Ein dringende Bitte an die Gambio GmbH hätte ich noch:

jQuery unbedingt schon im "Head"-Tag einbeziehen, und nicht erst in "gm_javascript.php"....

Damit erspart man sich, bei jeder jQuery-Funktion jQuery laden zu müssen.....

Andernfalls ist nämlich jQuery bei "document ready" noch nicht definiert.

Und jQueryUI sollte auch mal aktualisiert werden, die jetzige Version ist ja schon antik....

Dann könnte man mal darangehen, die Preisauswahl mit einem "Rangeslider" (z.B. http://ghusse.github.com/jQRangeSlider/stable/demo/ ) statt Input-Boxen zu lösen......

Und das sogar mit schon richtig eingestellten Min.- und Max.-Werten auf Basis der in diesen Kategorien vorhandenen Produkten...

Was am Filter unbedingt auch noch verbessert werden muss, ist, dass nicht nur die Artikel der aktuellen Kategorie, sondern auch die aller Unterkategorien in die Filterung einbezogen werden.

Es ist sogar schon fast alles dafür vorhanden......

 

Habe das mal realisiert, sieht einfach cooler aus.....



Im linken Bildteil sieht man den Zustand nach dem Laden der Seite (mit vorbelegten Min/Max-Werten!), im rechten den Zustand nach Auswahl von anderen Grenzwerten.

Nach jedem Auswahlvorgang mit dem Slide für den Min- oder Max-Wert wird die Seite auch wieder neu geladen.....

 

so hab mal den ersten abschnitt eingebaut.
leider ohne erfolg. es wird nichts dynamisch geladen!
oder habe ich was falsch verstanden?
Klick ich eine Auswahl an...wird die seite neu geladen und zeigt das ergbnis an.

http://www.elektro1a.de/Einbaustrahler/Deckeneinbauleuchten/Einbau-LED

 

Bug im Filter-Management

Bei meiner Arbeit an dieser Sache bin ich m.E. auf einen Bug gestoßen: der Startpreis wird immer auf 0 gesetzt...

Das Problem liegt in folgender Sequenz der "default.php":

PHP:

            if($category['show_sub_products'] == 1)
            {
                $_SESSION['coo_filter_manager']->set_categories_id((int)$current_category_id);
               ==> $_SESSION['coo_filter_manager']->set_price_range_start(0); <==
                $_SESSION['coo_filter_manager']->set_active(true);
            }

Hier wird mit "$_SESSION['coo_filter_manager']->set_price_range_start(0);" der Startpreis (der zuvor schon richtig übernommen wurde) wieder auf 0 gesetzt,

 

Ich hatte mein Template doch schon etwas geändert, so dass die jQuery-Selektoren nicht mehr ganz zu dem Original-Template passten.

Versuche es mal mit dieser Variante:

PHP:

<script type="text/javascript" src="gm/javascript/jquery/jquery.js"></script>
<script type="text/javascript">
{literal}
var filter_form;

function xmit_data()
{
  filter_form.submit();
}

$(document).ready(function(){
  filter_form=$('form[name=search_filter]');

  filter_form.find('select, .filter_price_input').change(function(){
    xmit_data();
  });

  filter_form.find('input[type=checkbox]').click(function(){
    xmit_data();
  });

  filter_form.find('#filter_submit input, .action_submit').click(function(event){
    event.preventDefault(); // Cancel the submit
    xmit_data();
  });

  filter_form.find('#filter_reset input, .button_reset_form').click(function(){
    var elements;

    elements=filter_form.find('input[type=text]');
    if (elements.length)
    {
      elements.val('');
    }
    elements=filter_form.find('input[type=checkbox]');
    if (elements.length)
    {
      elements.attr('checked',false);
    }
    elements=filter_form.find('select option[value=""]');
    if (elements.length)
    {
      elements.attr('selected',true);
    }
    xmit_data();
  });
});
{/literal}
</script>

 

jeeeep so läuft es sehr schön. vielen dank an avenger.

mit ajax hab ich auch mal probiert...da mag er auch nicht.

aber die erste variante ist doch schon mal 1000 mal besser als vorher.
jetzt kann man den filter geil nutzen.

http://www.elektro1a.de/Einbaustrahler/Deckeneinbauleuchten/Einbau-LED

 

Die AJAX-Variante hat ja das gleiche Problem wie die normale, wollte erst warten, ob die OK ist....

An das Ende von "templates\EyeCandy\boxes\box_filter.html" anfügen:

PHP:

<script type="text/javascript" src="gm/javascript/jquery/jquery.js"></script>
<script type="text/javascript">
{literal}
var filter_form;

function xmit_data()
{
  if (true)
  {
    var form_data=filter_form.serialize()+'&ajax_replace=true';

    $('body').css('cursor','wait');
    filter_form.attr('disabled', 'disabled');
    $.ajax({
      url: filter_form.attr('action'),
      cache: false,
      data: form_data,
      type: 'GET',
      async: false,
      success: function(html){
        var target_name,target;

        target_name="maincol";
        target=$("#"+target_name)
        if (!target.length)
        {
          target_name="main_inside";
          target=$("#"+target_name)
        }
        if (target.length)
        {
          target.html(html);
          document.getElementById(target_name).scrollIntoView(true);
        }
      }
    });
    filter_form.removeAttr('disabled');
    $('body').css('cursor','default');
  }
  else
  {
    filter_form.submit();
  }
}

$(document).ready(function(){
  filter_form=$('form[name=search_filter]');

  $('.filter_feature select, #filter_prices input').change(function(){
    xmit_data();
  });

  $('.filter_feature input[type=checkbox]').click(function(){
    xmit_data();
  });

  $('#filter_reset input').click(function(){
    var elements;

    elements=filter_form.find('input[type=text]');
    if (elements.length)
    {
      elements.val('');
    }
    elements=filter_form.find('input[type=checkbox]');
    if (elements.length)
    {
      elements.attr('checked',false);
    }
    elements=filter_form.find('select option[value=""]');
    if (elements.length)
    {
      elements.attr('selected',true);
    }
    xmit_data();
  });
});
{/literal}
</script>

In "includes\classes\Smarty_2.6.14\Smarty.class.php"

PHP:

function display($resource_name, $cache_id = null, $compile_id = null)
{
  $this->fetch($resource_name, $cache_id, $compile_id, true);
}

ersetzen mit

PHP:

function display($resource_name, $cache_id = null, $compile_id = null)
{
  if ($_GET['ajax_replace']==true && basename($resource_name)=='index.html')
  {
      ob_end_clean();
      header("Content-Type: text/html; charset=".$_SESSION["language_charset"].PHP_EOL);
      echo $this->_tpl_vars['main_content'];
      exit();
  }
  else
  {
     $this->fetch($resource_name, $cache_id, $compile_id, true);
  }
}

Man kann diese Variante auch ohne AJAX verwenden, indem man der "function xmit_data()"

"if (true)" mit "if (false)" ersetzt.

 

nö mag nicht....ajax true oder false ("function xmit_data()")

 

Das werden wir aus Performancegründen nicht tun. Jedoch werden wir Möglichkeiten schaffen auf einfache Art und Weise eigene JavaScripte einbinden zu können, die jQuery benötigen.

 

Oops, hatte noch den falschen Code erwischt......

Auf ein Neues:

An das Ende von "templates\EyeCandy\boxes\box_filter.html" anfügen:

PHP:

<script type="text/javascript" src="gm/javascript/jquery/jquery.js"></script>
<script type="text/javascript">
{literal}
var filter_form;

function xmit_data()
{
  if (true)
  {
    var form_data=filter_form.serialize()+'&ajax_replace=true';

    $('body').css('cursor','wait');
    filter_form.attr('disabled', 'disabled');
    $.ajax({
      url: filter_form.attr('action'),
      cache: false,
      data: form_data,
      type: 'GET',
      async: false,
      success: function(html){
        var target_name,target;

        target_name="maincol";
        target=$("#"+target_name)
        if (!target.length)
        {
          target_name="main_inside";
          target=$("#"+target_name)
        }
        if (target.length)
        {
          target.html(html);
          document.getElementById(target_name).scrollIntoView(true);
        }
      }
    });
    filter_form.removeAttr('disabled');
    $('body').css('cursor','default');
  }
  else
  {
    filter_form.submit();
  }
}

$(document).ready(function(){
  filter_form=$('form[name=search_filter]');

  filter_form.find('select, .filter_price_input').change(function(){
    xmit_data();
  });

  filter_form.find('input[type=checkbox]').click(function(){
    xmit_data();
  });

  filter_form.find('#filter_submit input, .action_submit').click(function(event){
    event.preventDefault(); // Cancel the submit
    xmit_data();
  });

  filter_form.find('#filter_reset input, .button_reset_form').click(function(){
    var elements;

    elements=filter_form.find('input[type=text]');
    if (elements.length)
    {
      elements.val('');
    }
    elements=filter_form.find('input[type=checkbox]');
    if (elements.length)
    {
      elements.attr('checked',false);
    }
    elements=filter_form.find('select option[value=""]');
    if (elements.length)
    {
      elements.attr('selected',true);
    }
    xmit_data();
  });
});
{/literal}
</script>


In "includes\classes\Smarty_2.6.14\Smarty.class.php"

PHP:

function display($resource_name, $cache_id = null, $compile_id = null)
{
  $this->fetch($resource_name, $cache_id, $compile_id, true);
}

ersetzen mit

PHP:

function display($resource_name, $cache_id = null, $compile_id = null)
{
  if ($_GET['ajax_replace']==true && basename($resource_name)=='index.html')
  {
      ob_end_clean();
      header("Content-Type: text/html; charset=".$_SESSION["language_charset"].PHP_EOL);
      echo $this->_tpl_vars['main_content'];
      exit();
  }
  else
  {
     $this->fetch($resource_name, $cache_id, $compile_id, true);
  }
}

 

ajax läuft mit fehlermeldung:

PHP:

WARNING(2): Cannot modify header information - headers already sent by (output started at /kunden/115158_45478/webseiten/lampen/includes/header.php:33)
 in /kunden/115158_45478/webseiten/lampen/includes/classes/Smarty_2.6.14/Smarty.class.php:1111 

testen unter:

http://www.elektro1a.de/Einbaustrahler/Deckeneinbauleuchten/Einbau-LED

 

Hast Du diesen neuen Code verwendet?

(Ich habe gleich noch mal ein "@" vor "header" eingebaut.)

PHP:

function display($resource_name, $cache_id = null, $compile_id = null) 
{ 
  if ($_GET['ajax_replace']==true && basename($resource_name)=='index.html') 
  { 
      ob_end_clean(); 
      @header("Content-Type: text/html; charset=".$_SESSION["language_charset"].PHP_EOL); 
      echo $this->_tpl_vars['main_content']; 
      exit(); 
  } 
  else 
  { 
     $this->fetch($resource_name, $cache_id, $compile_id, true); 
  } 
}

 

alles perfekt !!! Ich bedanke mich aufs schärfste