Barmer Fractal

Pager: Page As Url 

<div class="m-pager js-pager-init">
    <form action="/components/preview/search" method="get" data-page-url-template="/expertenforen/forum-gesund-abnehmen-1002810/page-{0}">
        <input type="hidden" value="latestEntry" class="a-input input--hidden" name="sortBy">
        <ul class="pager__list">
            <li class="list__item">
                <button class="a-btn btn--previous" type="button" title="Vorige Seite" disabled="disabled"><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>

            </li>
            <li class="list__item">
                <label class="a-label " for="search-result-page">
                    Sprung zur Suchergebnisseite

                </label>

                <input type="text" value="1" class="a-input input--text js-pager-search-results-page" id="search-result-page" autocomplete="off" inputmode="numeric" required="required">
                von <span class="js-pager-number-max">7</span>
                <button class="a-btn is-hidden" type="submit">Zur eingegebenen Seite wechseln</button>

            </li>
            <li class="list__item">
                <a class="a-btn btn--next" href="/components/preview/search?query&#x3D;Reisepass&amp;sort&#x3D;&amp;pageNum&#x3D;2" title="Nächste Seite">
                    <i class="a-icon icon--arrow-forward" aria-hidden="true"></i>
                </a>

            </li>
        </ul>
    </form>
</div>
 
<div class="m-pager {{viewtypes.specifier}}">
  <form action="/components/preview/search" method="get" {{#switches.hasDataAttr}}{{{content.dataAttr}}}{{/switches.hasDataAttr}}>
    {{^ switches.isVariant }}
    {{render '@formelement-input--hidden' partials.inputQuery merge=true}}
    {{render '@formelement-input--hidden' partials.inputSort merge=true}}
    {{render '@formelement-input--hidden' partials.inputPageNum merge=true}}
    {{/switches.isVariant}}
    {{# switches.isVariant }}
      {{# switches.hasPageAsUrl}}
        {{render '@formelement-input--hidden' partials.inputSortBy merge=true}}
      {{/ switches.hasPageAsUrl }}
    {{/switches.isVariant}}
    <ul class="pager__list">
      <li class="list__item">
        {{ render '@button--previous' partials.btnPrevious merge=true }}
      </li>
      <li class="list__item">
        {{ render '@formelement-label' partials.label merge=true }}
        {{ render '@formelement-input--text' partials.inputSearchResultsPage merge=true }}
        von <span class="js-pager-number-max">7</span>
        {{render '@button--default' partials.btnSubmit merge=true }}
      </li>
      <li class="list__item">
        {{ render '@button--next' partials.btnNext merge=true }}
      </li>
    </ul>
  </form>
</div>
 
{
  "switches": {
    "hasDataAttr": true,
    "isVariant": true,
    "hasPageAsUrl": true
  },
  "viewtypes": {
    "specifier": "js-pager-init"
  },
  "content": {
    "dataAttr": "data-page-url-template=\"/expertenforen/forum-gesund-abnehmen-1002810/page-{0}\""
  },
  "partials": {
    "inputQuery": {
      "content": {
        "name": "query",
        "value": "Reisepass"
      }
    },
    "inputSort": {
      "content": {
        "name": "sort",
        "value": ""
      }
    },
    "inputPageNum": {
      "content": {
        "name": "pageNum",
        "value": "0"
      }
    },
    "btnPrevious": {
      "switches": {
        "asLink": false,
        "isDisabled": true
      },
      "viewtypes": {
        "specifier": "btn--previous"
      }
    },
    "label": {
      "content": {
        "text": "Sprung zur Suchergebnisseite",
        "for": "search-result-page"
      }
    },
    "inputSearchResultsPage": {
      "switches": {
        "isRequired": true
      },
      "viewtypes": {
        "specifier": "input--text js-pager-search-results-page"
      },
      "content": {
        "value": "1",
        "id": "search-result-page",
        "name": false,
        "placeholder": false,
        "autocomplete": "off",
        "minlength": false,
        "inputmode": "numeric"
      },
      "partials": {}
    },
    "btnSubmit": {
      "switches": {},
      "viewtypes": {
        "specifier": "is-hidden"
      },
      "content": {
        "type": "submit",
        "label": "Zur eingegebenen Seite wechseln"
      },
      "partials": {}
    },
    "btnNext": {
      "switches": {
        "asLink": true
      },
      "viewtypes": {
        "specifier": "btn--next"
      },
      "content": {
        "url": "/components/preview/search?query=Reisepass&sort=&pageNum=2"
      }
    },
    "inputSortBy": {
      "content": {
        "name": "sortBy",
        "value": "latestEntry"
      }
    }
  }
}

Pager

The variants are needed to map two different usages of the pageNum parameter.

  • default – pageNum is added as GET query parameter (e.g. for search results page)
  • page-as-url – pageNum is added somewhere in the URL, according the replacement-pattern in in FORM[data-page-url-template] (e.g. expert forums)

The trigger for the different handling is in the JS and looks for specific elements in the markup:

  • default – when there is an INPUT[type="hidden"][name="pageNum"] element
  • page-as-url – when there is an FORM[data-page-url-template] element

Apart from that: anything put as INPUT[type="hidden"] elements in the code will be submitted as GET query parameter.