Template- und Themeprogrammierung

Startseite > Template- und Themeprogrammierung > Skriptsprache > Listen Befehle

Listen-Befehle

Blätterfunktion - page_list

Eine Blätterfunktion kann mit Hilfe einer for-Schleife und dem <liquid>page_list</liquid> Filter erstellt werden.
Über den Parameter pages kann die Anzahl der Items in der Blätternavigation angegeben werden.

<liquid-input>
{% assign page_list = product_list | page_list: pages:6 %}
{% for page_number in page_list %}
<a href="{{ page | pagination_url:page_number }}">{{ page_number }}</a>
{% endfor %}
</liquid-input>

<liquid-output>
1 2 3 4 5 6
</liquid-output>

pagination_url

Mit Hilfe des <liquid>pagination_url</liquid> Filters wird der übergebenen Seite der Parameter "page" angehängt.
Mögliche Werte für pagination_url sind:

'next'
'previous'
eine Zahl die als Wert dem Parameter "page" in der URL zugewiesen wird

<liquid-input>
{% comment %}
Für:
{
page : {
    id : 100,
    url: '/foo/'
},
product_list:{
    next_page: 5
}
}
{% endcomment %}

{{ page | pagination_url:'next' }}
</liquid-input>

<liquid-output>
/foo/?page=5
</liquid-output>

<liquid-input>
{% comment %}
Für:
{
page : {
    id : 100,
    url: '/foo/'
},
product_list:{
    previous_page: 1
}
}
{% endcomment %}

{{ page | pagination_url:'previous' }}
</liquid-input>

<liquid-output>
/foo/?page=1
</liquid-output>

<liquid-input>
{% comment %}
Für:
{
page : {
id : 100,
url: '/foo/'
},
product_list:{}
}
{% endcomment %}

{{ page | pagination_url:5 }}
</liquid-input>

<liquid-output>
/foo/?page=5
</liquid-output>

sort_url

Der <liquid>sort_url</liquid> Filter nimmt eine Liste entgegen (product_list, content_list) und fügt zur aktuellen URL den "sort" Parameter hinzu mitsamt der anderen Paramter (page_size, aktive Filter). Dem Filter können als Parameter die Sortierungsfelder übergeben werden.

<liquid-input>
{% comment %}
Für:
{
page:{
    id : 100,
    url : '/foo/'
},
product_list:{
    items_per_page: 20,
    default_items_per_page: 10,
    sort_field : 'price',
    sort_direction : 'asc',
    filters:[{
      id      : 1,
      is_active: true,
      values : [{
        filter_id   : 1,
        filter_type : 'term',
        is_active   : true,
        value       : 'val'
      }]
    }]
}
}
{% endcomment %}

{{ product_list | sort_url:'name','desc' }}
</liquid-input>

<liquid-output>
/foo/?f.1.filter.term=val&page_size=20&sort=name-desc
</liquid-output>

sort_reset_url

Der <liquid>sort_reset_url</liquid> Filter nimmt eine Liste entgegen (product_list, content_list) und entfernt aus der aktuellen URL den "sort" Parameter.

<liquid-output>
/foo/?f.1.filter.term=val&page_size=20
</liquid-output>

filter_value_url

Der <liquid>filter_value_url</liquid> Filter gibt die URL für die Auswahl bzw. Abwahl eines Filter-Value zurück. Als Eingangwert dient ein Element aus <obj>filter.values</obj>. Die zurückgegebene URL beinhaltet auch ggf. bereits aktiven Filter-Values anderer Filter, die ausgewählte Sortierung, sowie die ausgewählte Anzahl Produkte/Contents je Seite. Nicht berücksichtigt wird jedoch die aktuelle Seitennnummer.

Falls <obj>filter.values[n].is_active</obj> den Wert <liquid>true</liquid> besitzt, wird der Filter-Value abgewählt. Ansonsten wird der Filter-Value ausgwählt.

Falls <obj>filter.is_multi_select</obj> den Wert <liquid>true</liquid> besitzt, können mehere Filter-Values aktiv sein. Ansonsten wird bei der Auswahl eines weiteren Filter-Values der ggf. bereits aktive Filter-Value abgewählt.

<liquid-input>
{% for filterValue in filter.values %}
{{ filterValue | filter_value_url }}
{% endfor %}
</liquid-input>
<liquid-output>
/search/?f.1.filter.term=red
/search/?f.1.filter.term=yelloq
/search/?f.1.filter.term=blue
</liquid-output>

filter_form_url

Mit Hilfe des <liquid>filter_form_url</liquid> können mehrere Filter-Values eines <obj>filter</obj> Objektes auf einmal geändert werden. Die zurückgegebene URL muss dazu im <keyword>action</keyword> Attribut eines Formulares eingefügt werden. Als Eingangwert dient das <obj>filter</obj> Objekt. Die zurückgegebene URL beinhaltet auch ggf. bereits aktiven Filter-Values anderer Filter, die ausgewählte Sortierung, sowie die ausgewählte Anzahl Produkte/Contents je Seite. Nicht berücksichtigt wird jedoch die aktuelle Seitennnummer.

Dieser Befehl stellt eine Alternative zu <cmd>filter_value_url</cmd> dar und sollte immer dann eingesetzt werden, wenn mehrere Filter-Values eines Filters über nur einen Request abgesetzt werden sollen.

<liquid-input>
<form action="{{ filter | filter_form_url }}" method="POST">
{% for value in filter.values %}
<input
type="checkbox"
autocomplete="off"
name="{{ filter.param_name }}"
value="{{ value.param_value }}"
{% if value.is_active %}checked{% endif %} />
/>
{{ value.name }}
{% endfor %}
<input type="submit" value="Los" />
</form>
</liquid-input>

<liquid-output>
<form action="/stapelbehaelter/?sort=price-desc" method="POST">
<input type="checkbox" autocomplete="off" name="f.2.filter.term" value="101" checked /> Red
<input type="checkbox" autocomplete="off" name="f.2.filter.term" value="102" checked /> Green
<input type="checkbox" autocomplete="off" name="f.2.filter.term" value="103" /> Blue

<input type="submit" value="Go" />
</form>
</liquid-output>

filter_reset_url

Der <liquid>filter_reset_url</liquid> Filter gibt eine URL zurück, um alle Filter-Values eines Filters abzuwählen. Als Eingangswert dient das <obj>filter</obj> Objekt.
<code-block>
{{ filter | filter_reset_url }}
</code-block>

filter_slider_url

Der <liquid>filter_slider_url</liquid> Filter nimmt ein "slider_filter"-Objekt entgegen und gibt die aktuellen URL zurück mitsamt allen Parameter und dem aktuellen Filterkey.

<liquid-input>
{% comment %}
Für:
{
page:{
    id : 100,
    url : '/foo/'
},
product_list:{
    items_per_page: 20,
    default_items_per_page: 10,
    sort_field : 'price',
    sort_direction : 'asc',
    filters:[{
      id      : 1,
      is_active: true,
      values : [{
        filter_id   : 1,
        filter_type : 'term',
        is_active   : true,
        value       : 'val'
      }]
    }]
},
slider_filter:{
    id      : 2,
    type    : 'range',
    version : "2"
}
}
{% endcomment %}

{{ slider_filter | filter_slider_url }}
</liquid-input>

<liquid-output>
/foo/?f.1.filter.term=val&page_size=20&sort=price-asc&f.2.filter.range=
</liquid-output>