Docs | Hublify

You want create/handle many concurrent URL-GET-parameters, e.g. filtering, sorting, paging, ... of multiple twig-components on the same page ?

Then "hfyOpt" is for you!

The "hfyOpt"-URL-GET-parameters are a Hublify-specific concept for which Hublify provides already several functions for easy usage.

The problem / use-case

Very often ...

concurrent URL-GET-parameters of multiple twig-components on the same page
building "server-side rendered" urls wile keeping-up other URL-GET-vars too!
- Example: "Product List Page - with multiple filters & paging"
"server-side-rendered" (=NOT Javascript-based (click-) behaviour!) is good for SEO!
URL-GET-parameter collision: Different twig-components build links with same parameters!

To solve the described ...

Organize ALL (component-dynamic) URL-GET-parameters in one big array-structure: hfyOpt[...] !
Every rendered twig components has a own unique id !
So, specific URL-GET-params can be easily identified from/to which component they belong.
=> prevents parameter collision!
...

The basic URL-GET-parameter structure is:

URL:    https://...hublify.io/myPage?hfyOpt[<hfyComponentId>][<var>]="<value>"

Typically you would split up your twig templates into smaller files, e.g. "components".

Components that shall be able to send/receive hfyOpt-parameters ...

must have hfyComponentId.
Either this is hardcoded within the component, which is rather unusual. Or it passed as a twig-parameter into the component.

Of course there are some implemented functions already. You are not alone with this "problem"! :)

There are some commonly used and helpful hublify-functions in this context:

hublify.urlInfo(...) - Getting the current URL + all current (hfyOpt-) parameters.
hublify.urlBuild(...) - Composing urls + (modified) (hfyOpt-) parameters.
hublify.array_set(...) / hublify.array_unset(...) - To easily modify detected (hfyOpt-) parameters.

There is standard Hublify-JS-Lib to help out...

After HTML-page is loaded, a JS-Object "hfy" is instantiated & initialized
The hfy JS-Object provides ...
- functions to build / append URL-GET-parameters
- reload the page
- extract dynamic values from INPUT-fields, such as (filter-)checkboxes, (sorting-)selectboxes....

Yet, to come...