Workshop 2 von X: AJAX Filter

Wenn es nun auch verschiedene Filtergrössen gibt…nicht nur von Melit* dann schick ich Dir nen
Sixer Flaschenpost hamburgerischen Bieres auf dem Postwege zu :slight_smile:

rubber: ich glaube nicht jeder hat den anderen thread gelesen :wink: ergo wäre es nicht schlecht hier nochmal zu beschreiben, was du eigentlich machen möchtest :wink:

Das ist ja schnell beschrieben: Freies Material aus dem Netz wird für den Shop angepaßt und als Filter genutzt. Jeder kann dann seine Ideen mit einbringen und das Für und Wider wird besprochen. Also wie beim ersten Mal ;).

Merkwürdige Zufälle gibt`s :wink:

http://www.oxid-esales.com/forum/showthread.php?t=10533

Man könnte den Vorschlag als Grundlage nehmen und AJAX :smiley: hinzufügen.

Da hat eduard sicher nichts dagegen. Ich persönlich wäre erstmal dafür den modulansatz um multiple auswahlmöglichkeiten zu ergänzen. Bisher kann immer nur ein attributwert ausgewählt werden. Z.b. nur eine farbe, eine grösse etc. Oftmals wünscht man sich das filtern nach mehreren kriterien. Wenn das steht darf ajax rein:) jm2c

Vg

Na dann beginnen wir mal. Im Folgenden stehen nur die geänderten Abschnitte der angegebenen Dateien. Wer Fehler entdeckt, darf sie behalten oder korrigieren.

OK, zunächst müssen wir Checkboxen und einen Button einfügen. Die eingefügten Counter vereinfachen die Identifizierung der Checkboxen:

attributes.tpl:


[{if $attributes }]
    <form method="post" action="[{ $oViewConf->getSelfActionLink() }]" name="_filterlist" id="filterList">
    <div class="listFilter fnSubmit clear">
        [{ $oViewConf->getHiddenSid() }]
        [{ $oViewConf->getNavFormParams() }]
        <input type="hidden" name="cl" value="[{ $oViewConf->getActiveClassName() }]">
        <input type="hidden" name="tpl" value="[{$oViewConf->getActTplName()}]">
        <input type="hidden" name="fnc" value="executefilter">
        <input type="hidden" name="fname" value="">
		
		[{assign var="cnt1" value=0 }]
        [{foreach from=$attributes item=oFilterAttr key=sAttrID name=attr}]
		[{assign var=cnt1 value=$cnt1+1 }]
            <div class="dropDown" id="attributeFilter[[{ $sAttrID }]]">
                <p>
                    <label>[{ $oFilterAttr->getTitle() }]: </label>
                    <span>
                        [{if $oFilterAttr->getActiveValue() }]
                            [{ $oFilterAttr->getActiveValue() }]
                        [{else}]
                            [{ oxmultilang ident="WIDGET_PRODUCT_ATTRIBUTES_PLEASECHOOSE" }]
                        [{/if}]
                    </span>
                </p>
                <ul class="drop FXgradGreyLight shadow multifilter">
                    [{if $oFilterAttr->getActiveValue() }]
                        <li><a rel="" href="#">[{ oxmultilang ident="WIDGET_PRODUCT_ATTRIBUTES_PLEASECHOOSE" }]</a></li>
                    [{/if}]
					[{assign var="cnt2" value=0 }]
                    [{foreach from=$oFilterAttr->getValues() item=sValue}]
					[{assign var=cnt2 value=$cnt2+1 }]
                        <li class="checklist" id="attrfilter_[{$cnt1}]_[{$cnt2}]">
						<input class="checklist" type="checkbox" onclick="$('#filterList').submit();"  name="attrfilter[[{ $sAttrID }]]"  value="[{ $sValue }]" [{if $oFilterAttr->getActiveValue() == $sValue }]checked[{/if}]>[{ $sValue }]
						</li>
                    [{/foreach}]
                </ul>
            </div>
        [{/foreach}]
    </div>
	<input type="hidden" id="delfilter" name="delfilter" />
	<input type="submit" style="border: none; background-color: transparent;cursor:pointer;" name="button2" value="Alle Filter löschen" />
    </form>
[{/if}]

layout.css

/* BOF AJAX FILTER    */
input.checklist { margin-left:3px; }
li.checklist { margin-left:3px; }
/* EOF AJAX FILTER    */

base.tpl (vor )

<script type="text/javascript">
	$(document).ready(function(){
	
	$('input[type=submit]').click(function(){
    $('#delfilter').val($(this).attr('name'));
  	});

	
	$('form').submit(function() {
  	alert($(this).serialize());
  	return false;
	});
	
	})
	</script>

Jetzt sollten schonmal die einzeln angeklickten Werte ausgegeben werden. Wird der Button angeklickt, kommt ebenfalls ein Wert. In Kürze geht`s weiter mit der Übergabe der Daten.

Das Interesse scheint ja wahnsinnig groß zu sein. AlleinUnterhalter ist cool.

Check-Werte weiter verarbeiten:

<script type="text/javascript">
	$(document).ready(function(){
	$('input[name=ajax]').val('1');
	
	$('input[type=submit]').click(function(){
    $('#delfilter').val($(this).attr('name'));
  	});
	
	$image =  $('.infogridView');
	
	$('form').submit(function() {	
	$.post("[{ $oViewConf->getSelfLink() }]cl=executefilter&cnid=[{$actCategory->oxcategories__oxid->value}]", $(this).serialize(),
   	function(data) {
 	$('#delfilter').attr('value','');	 	 
	$image.css({backgroundColor: '#990000'});
   	});

  	return false;
	});
	
	})
</script>

Später mehr.

@rubber: ich mach die tage dann mit… bin nur grad mit unserer neuen site beschäftigt :slight_smile:

aber danach :slight_smile: versprochen :slight_smile:

Mich interessiert das ganze auch sehr. Nutze den vorhanden Artikelfilter sehr intensiv und bin für Verbeserungen immer zu haben.
Als Nichtprogrammierer könnte ich allerdings nur in Sachen HTML/CSS weiterhelfen.

Würde auch am liebsten SOFORT was dazusteuern, aber bin ja schon froh, dass mir genug Zeit bleibt Deinen Thread zu beobachten. Bin mir sicher, dass das Interesse gross ist, es bei den meisten nur an Zeit oder an mangelnden Kenntnissen liegt. Also lass Dich nicht demotivieren. Ich finde die Workshop Idee ausgesprochen geil!

Alles, was gratis ist, ist willkommen ;). OK, kurz zur Mittagspause:

Moduldatei erstellen, d.h. die php-Datei articlefilter.php in den Ordner modules/articlefilter speichern:

verläufiger Inhalt:

<?php

class articlefilter extends aList 
  {
 public function executefilter()
    {	
		if ($_POST["delfilter"] == "button2") {
            	oxSession::setVar( 'session_attrfilter', '' );
    	}
       $sAjax = oxConfig::getParameter( 'ajax' );

		if (isset($aFilter) && $aFilter != "" && $sAjax == "1") {
	 
       }else {
		return parent::executefilter();
        }
	}
}

Modul eintragen: alist => articlefilter/articlefilter

Modul mit folgender Änderung ansprechen (cl=alist).

<script type="text/javascript">
	$(document).ready(function(){
	$('input[name=ajax]').val('1');
	
	$('input[type=submit]').click(function(){
    $('#delfilter').val($(this).attr('name'));
  	});
	
	$image =  $('.infogridView');
	
	$('form').submit(function() {	
	$.post("[{ $oViewConf->getSelfLink() }]cl=alist&cnid=[{$actCategory->oxcategories__oxid->value}]", $(this).serialize(),
   	function(data) {
 		$('#delfilter').attr('value','');
	 	 
	$image.css({backgroundColor: '#990000'});
   	});

  	return false;
	});
	
	})
</script>

Bei Anklicken einer Checkbox und Aktualisierung der Seite sollte sich nun schon was tun (noch begrenzt auf ein Filterelement). Ebenso sollte der Button “Alle Filter Löschen” bei Reload der Seite funktionieren.

Formularwerte als Array Übergeben. Dazu wird “[]” eingefügt:

<li class="checklist" id="attrfilter_[{$cnt1}]_[{$cnt2}]">
						<input class="checklist" type="checkbox" onclick="$('#filterList').submit();"  name="attrfilter[[{ $sAttrID }]][]"  value="[{ $sValue }]" [{if $oFilterAttr->getActiveValue() == $sValue }]checked[{/if}]>[{ $sValue }]
						</li>

Wenn ich das so einsetze, kommt ein Fehler.

Ja neh, is klar: Ist ja jetzt ein Aray.

Die Funktion erwartet einen (1) Wert. Da jetzt mehrere Werte in einem Array übertragen werden, muss der Empfang der Werte natürlich ebenfalls angepasst werden. Im Endeffekt wird daraus in etwa folgendes:

foreach($aFilter...

Anbei mal das Gerüst. Da wo “Action” steht, fehlt noch was :D.

Ich bekomm schon ein schlechtes Gewissen, weil ich selbst gerade nur Mitleser bin :frowning:

Sauber, dass du dran bleibst!.. Leute, etwas mehr Feedback wäre angebracht!

Wenn Du mir ne Adresse pm´s gibt´s wie Versprochen ein Dankeschön :slight_smile:

Hallo,

ich würde das gerne nutzen. Kann mir jemand helfen?
Was fehlt dann da noch?

Danke, Lars

Da fehlt nur noch die ganze datenbank logik:) die verschiedenen sql aufrufe die die artikel attribut-selektiert aus der db listen. Ich nehme an die sql queries aus der originalen filterklasse liessen sich mit nur kleinen modifikationen in dieses von rubbercat sehr übersichtlich geschriebene modul übernehmen.

Wir haben die Werte aus der Funktion EXCUTEFILTER übernommen und das jetzt soweit, daß beim Anklicken von einzelnen Attributes Artikel ausgegeben werden. Es kommt noch ein Fehler beim Anklicken von mehreren Attributes, weil die GETPARAMETER mit Arrays nicht klarkommt.