Streaming live at 10am (PST)

Hash URLs with mixitup

I am using mixitup with multifilter and pagination. I would like to have internal links on my site that link to pre-selected filters and figure the way to do this is to enable hash URLs (e.g, www.site.com/blog#shape=square&size=small). I have been trying to emulate the programmatic-filtering-by-url demo in the multifilter package but have thus far struck out on getting this to work in Webflow. Has anyone been able to implement this? And if so would you be willing to check my setup out so far and/or share a read-only link to see what I’m missing? Thank you.

Read only: https://preview.webflow.com/preview/rblt-scratch-mix?utm_medium=preview_link&utm_source=dashboard&utm_content=rblt-scratch-mix&preview=30fb32d5a93aaaac6a5558df4021f275&mode=preview

Live Link: https://rblt-scratch-mix.webflow.io/hash

Anyone willing to take a look at this? @sabanna can I summon you?

Hi, @jmkriz!

The problem is in the filters control setup.
In the original MixitUp demo, they applied values to the filter-groups. Also, they are using the fieldset HTML element to define filtergroups.

Since Webflow doesn’t have a fieldset element, in my tutorial I used div element and applied “data-filter-group” attribute to it. Which is pretty providing the same functionality as a fieldset.

I see that you tried to add a fieldset element through the HTML embeds but in that case, control buttns are still sitting OUTSIDE of the fieldset (plus you actually never put the closing tag </fieldset>, but Webflow is automatically generating such tags to prevent crashes)

In demo

In your site

  1. you DON"T NEED embedding fieldset, regular div is working the same way
  2. on the filter-group div, remove the “data-filter” attribute and simply leave the “data-filter-group” attribute with a corresponding value.

Image 2020-02-01 at 1.19.07 PM

  1. Remove this part from the custom code:

That’s it. Everything will work.

Cheers,
Anna

1 Like

You are my hero. Thank you so much for taking the time to explain that.

1 Like