Portfoliofilter im Dropdownmenü ?

[sfx12]

Hello @all,

ich hänge hier an einem Problem und zwar möchte ich den Portfoliofilter auch in einem Dropdown darstellen. In meinem Beispiel geht es um Berufe (Dropdown) als auch Filterung nach Buchstaben A-Z (normaler filter)

da ich keine zwei Filter erstellen möchte als auch den CC dafür zu nehmen, hatte ich die Idee ein Formular zu erstellen und die bereits gesetzten Filter aus der Datenbank rauszuziehen. Das funktioniert auch soweit (siehe Screenhots) Danach habe ich das Template her genommen und anhand vom originalen die class in "berufefilter" und buttons.click in .buttons.change geändert (da es ja ein select field ist statt a link) leider reicht das wohl nicht aus.

1. es passiert nix nachdem ich aus dem dropdown was gewählt habe
2. werden die filter nicht "deserialized" (siehe Screenshot konsole)

Vielleicht kann mir jemand von euch sagen ob ich noch weit davon entfernt bin das es funktioniert oder ob noch paar Anpassungen gemacht werden müssen.

mein form_select template

<?php $this->extend('form_row');

//handle multiple filter values by commata seperated lists
$arrFilterClasses = array();
foreach(explode(',', $this->subHeadline) as $v)
{
$arrFilterClasses[] = 'filter_'.str_replace(array('ä','ü','ö','ß'),array ('ae','ue','oe','ss'),\Contao\StringUtil::standard ize($v));
}
// filter field in use
if( isset($this->filters) && !empty($this->filters) )
{
$arrFilterClasses = array();
foreach( \Contao\StringUtil::deserialize($this->filters) as $v)
{
$arrFilterClasses[] = 'filter_'.str_replace(array('ä','ü','ö','ß'),array ('ae','ue','oe','ss'),\Contao\StringUtil::standard ize($v));
}
}

?>

<?php $this->block('label'); ?>
<?php if ($this->label): ?>
<label for="ctrl_<?= $this->id ?>"<?php if ($this->class): ?> class="<?= $this->class ?>"<?php endif; ?>>
<?php if ($this->mandatory): ?>
<span class="invisible"><?= $this->mandatoryField ?> </span><?= $this->label ?><span class="mandatory">*</span>
<?php else: ?>
<?= $this->label ?>
<?php endif; ?>
</label>
<?php endif; ?>
<?php $this->endblock(); ?>

<?php $this->block('field'); ?>
<?php if ($this->hasErrors()): ?>
<p class="error"><?= $this->getErrorAsString() ?></p>
<?php endif; ?>

<?php if ($this->multiple): ?>
<input type="hidden" name="<?= str_ends_with($this->name, '[]') ? substr($this->name, 0, -2) : $this->name ?>" value="">
<?php endif; ?>

<select name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="<?= $this->class ?>"<?= $this->getAttributes() ?>>
<?php foreach ($this->getOptions() as $option): ?>
<?php if ('group_start' == $option['type']): ?>
<optgroup label="<?= $option['label'] ?>">
<?php endif; ?>

<?php if ('option' == $option['type']): ?>

<option class="" data-filter=".filter_<?= $option['value'] ?>"<?= $option['selected'] ?>><?= $option['label'] ?></option>
<?php endif; ?>

<?php if ('group_end' == $option['type']): ?>
</optgroup>
<?php endif; ?>
<?php endforeach; ?>
</select>
<?php $this->endblock(); ?>

<script>
/* <![CDATA[ */

jQuery(window).load(function()
{
var container = jQuery('#<?= $this->portfolioID; ?>');
var allowEmpty = false; // if set to true, the list will be empty on no results
var buttons = jQuery('.ce_berufefilter_<?= $this->id; ?>').find('select option');
var buttonAll = jQuery('.ce_berufefilter_<?= $this->id; ?> a.all');
var filters = [];
var urlParam = 'filter'; // the GET parameter containing the filter values
var classPrefix = '.filter_';
var filter_all = '*'; // is not a filter
var isStrict = false; // strict filtering
var singleAction = <?php if($isMultiple): ?>false;<?php else: ?>true;<?php endif; ?> // only one category active at a time
var overwriteLinks = true; // append the filter params to the details links
var addToUrl = true; // append selected filters to the url
var links = jQuery('#portfoliofilter_<?= $this->id; ?>').find('.item a');

// check url for predefined filters via GET parameters
<?php if(\Contao\Input::get('filter') != ''): ?>

<?php foreach(explode(',',\Contao\Input::get('filter')) as $filter): ?>
filters.push(classPrefix+'<?= $filter; ?>');
<?php endforeach; ?>

// apply filters
if(filters.length > 0)
{
if(isStrict)
{
container.isotope({ filter: filters.join('.') });
}
else
{
container.isotope({ filter: filters.join(',') });
}

// illiterate through the buttons and filters
jQuery.each(buttons, function(index,elem)
{
jQuery.each(filters, function(i,f)
{
if(jQuery(elem).attr('data-filter') == f)
{
jQuery(elem).addClass('active');
}
});
});
}

// append the current filter values to the details links in the newslist
if(filters.length > 0 && overwriteLinks)
{
// push the new GET parameters to the url
var arrGet = new Array();
jQuery.each(filters, function(i,f)
{
if(f != filter_all)
{
arrGet.push( f.replace(classPrefix, '') );
}
});

jQuery.each(links, function(index, elem)
{
var href = jQuery(elem).attr('href').split('?');
jQuery(elem).attr('href',href[0]+'?'+urlParam+'='+arrGet.join(','));
});
}
<?php endif; ?>


buttons.click(function(e)
{
e.preventDefault
var _this = jQuery(this);
var value = _this.attr('data-filter');

// reset
if(value == filter_all)
{
buttons.removeClass('active');
buttonAll.addClass('active');
filters = [];
if(allowEmpty)
{
container.isotope({ filter: '.thereShallBeNoEntry' });
}
else
{
container.isotope({filter:'*'});
}

// remove the filter GET parameter
if(addToUrl)
{
window.history.pushState('Object', 'Title', document.location.origin+document.location.pathnam e);
}

return false;
}

if(singleAction)
{
buttons.removeClass('active');
filters = [];
}

if(_this.hasClass('active'))
{
_this.removeClass('active');
filters.splice(filters.indexOf(value),1);
}
else
{
_this.addClass('active');
filters.push(value);
}

// set an "impossible" filter value if empty results are allowed
if(allowEmpty && filters.length < 1)
{
container.isotope({ filter: '.thereShallBeNoEntry' });
return false;
}

if(isStrict)
{
container.isotope({ filter: filters.join('.') });
}
else
{
container.isotope({ filter: filters.join(',') });
}

var arrGet = new Array();
jQuery.each(filters, function(i,f)
{
if(f != filter_all)
{
arrGet.push( f.replace(classPrefix, '') );
}
});

// remove current GET
if(addToUrl)
{
window.history.pushState('Object', 'Title', document.location.origin+document.location.pathnam e);
}

// push the new GET parameters to the url
if(addToUrl && arrGet.length > 0)
{
window.history.pushState('Object', 'Title', document.location.origin+document.location.pathnam e+'?'+urlParam+'='+arrGet.join(','));
}

// append the current filter values to the details links in the newslist
if(overwriteLinks && arrGet.length > 0)
{
jQuery.each(links, function(index, elem)
{
var href = jQuery(elem).attr('href').split('?');
jQuery(elem).attr('href',href[0]+'?'+urlParam+'='+arrGet.join(','));
});
}

return false;
});
});

// toggle trigger mobile
jQuery(document).ready(function(){
jQuery('.mod_portfoliofilter .trigger_mobile i').click(function(){
jQuery('.mod_portfoliofilter').toggleClass('show') ;
});
jQuery('.mod_portfoliofilter a').click(function(){
jQuery('.mod_portfoliofilter').toggleClass('show') ;
});
});

/* ]]> */
</script>

[Tim]

Hallo,
CustomCatalog hat eigene Filter-Systeme. Dort stehen auch normale Select-/Auswahlen bereit.

Der "Portfolio"-Filter selbst ist Javascript basiert und ist auf die Anwendung in Newslisten konzipiert. Diesen in einem Dropdown darzustellen ist vergleichbar mit dem Aufbau des Navigations-Moduls. Die Werte können im portfoliofilter Template in einer ul li Liste gesetzt werden, die via display none ein/ausgeblendet wird.

[sfx12]

Hallo Tim, Danke für deine Rückantwort, ist mir klar das es nur für Newslisten konzipiert ist. Könntest du mir zumindest Stichwortartig schreiben, welche Templates genau ich duplizieren und anpassen muss ? Das Dropdown funktioniert ja soweit, nur greift es nicht, wenn ich was auswähle, auch weil in der konsole die werte noch serialized sind (siehe screenshots).

[Tim]

<option class="" data-filter=".filter_<?= $option['value'] ?>"<?= $option['selected'] ?>><?= $option['label'] ?></option>

$option['value'] ist serialisiert.