Dynamic URLs π§ͺ
Modify links and other URLs dynamically using CMS data.
CONCEPTUAL Feature under consideration.
Goals
Conceptually SA5's Dynamic URLs would work similiarly to Dynamic Attributes. However rather than overwriting an attribute's value completely, it would be contextually aware of urls and support the modification of the primary URL on an element by using custom attributes.
Add or replace a querystring param on URL-supporting elements
Add or replate a hash value
Future goals ( possible );
Remove a querystring param
Transform a querystring param
Prepend/append static or CMS content to a param
Compose a param from multiple pieces, both static and CMS sourced
Support certain path mods ( must distinguish absolute v. relative v. rooted URLs )
Hostname
Protocol
etc.
Use Cases
Navigate from a Collection List item or Collection List page to another page, carrying key CMS content for;
Context
Form filling in hidden fields
Finsweet filter initialization, from querystring
Customize IFRAME urls so that the hosted content is CMS-item-specific
Component-driven URL and IFRAME customizations
Supported Elements & Attributes
Certain elements have a primary attribute which specifies a URL. The name of that attribute varies depending on the element, so to manage this we'll detect and support specific element types.
Initially, these are the ones we're focused on;
A href
IFRAME src
Other element types may be supported in the future.
Related Concepts
Externally trackable links. GTM, Posthog, etc.
Internally trackable links
Capture link click
Store in sessionStorage
Feed into forms
Usage Notes
Here's the conceptual attribute protocol, mirrored from x:
as used in Dynamic Attributes.
Query string changes
Query string changes
uq:*
uq:*:pre
uq:*:post
uq:*:remove
Future
Hash changes
uh:*
Set the #hash
of the URL
uh::remove
Remove the #hash
of the URL
Future
URL changes
URL attribute changes can be applied directly using existing Dynamic Attributes functionality.
x:src
Set the URL path
x:src:pre
Prefix the URL path
x:src:post
Postfix the URL path
Webflow's custom attributes feature has a powerful data-binding capability that supports binding to CMS fields and component properties- but there are several key limitations;
Reserved attributes. many important attribute names are reserved to protect novice web designers. See the notes section below for a list.
ECommerce. Collection pages and collection lists that are bound to ECommerce Product and Categories do not support attribute data binding.
SA5's Dynamic Attributes feature overcomes this by allowing you to create proxy attributes that are then applied to the page once the page has loaded.
Use Cases
This is a more technical feature, but it has an incredible range of uses. Here are a few;
Forms
Initialize form field values on INPUTs, TEXTAREAs, SELECTs, CHECKBOXes and other elements with data from a CMS collection item or component property.
e.g. Use
x:value
= ( your value ) to initialize an INPUT, TEXTBOX, or SELECT element from a CMS collection item.e.g. Use
x:checked
= ( boolean value ) to initialize a checkbox element.
Special field configuration
e.g. Use
x:type
=date
on an INPUT element to change it to a date type
Set hidden form fields to capture data silently, such as the Collection page you're on when the form is submitted.
Element behavior
Such as onclick
Supporting other SA5 libraries, such as CMS Lightbox Captions and Groups
And making these work with ECommerce content
As of 2024-Jun-03, Webflow does not yet support attribute binding to switch ( boolean ) field types or to select ( option ) field types. In a pinch you could use CMS text fields instead.
How it Works
SA5 Dynamic Attributes can be applied in two ways.
Custom Attributes. Any attribute created with an
x:
prefix on the name is specially recognized as an SA5 Dynamic Attribute. It will be processed, and the un-prefixed attribute will then be set to that value. e.g. A custom attribute namedx:value
would override thevalue
attribute.Custom Embeds. Webflow's embed element can be used to contain a special
<script>
element, which will be processed and then apply the attribute value to the specified element. As an embed, this is more compatible with ECommerce data-binding.
Getting Started
STEP 1 - Add the Library
First, add the library as detailed in Quick Start.
STEP 2 - Apply x:
prefixed custom attributes to any elements
x:
prefixed custom attributes to any elementsThese will overwrite existing attributes on that element.
e.g. x:onclick
will be applied as onclick
on that same element.
Data-bind the value where to CMS fields or component properties where it makes sense.
In previous versions, SA5 also supported dynamic attribute prefixes of x-
however we've moved away from that to avoid conflict with Alpine.js which also uses the x-
prefix on attributes. Currently this is still supported but considered obsolete.
STEP 3 - Create Embeds where custom attributes cannot work
SA5 Dynamic Attributes use a special embed <script>
structure containing a JSON chunk that specifies the target element ( relative to the Embed ), the name of the attribute to set, and the value of that element.
In this example, the style
attribute would be created on the parent element containing the Embed, and would be set to a value of font-weight: bold;
.
See the usage notes for specific details and advanced use.
Usage Notes
x:*
attributes
x:*
attributesCreate a custom attribute beginning with x:
on any element in your page. Set the value you want, and bind it to a CMS field or component property if you want.
x:*:pre
attributes
x:*:pre
attributesAttributes that are also suffixed with :pre
are prepended to the attribute value.
x:*:post
attributes
x:*:post
attributesAttributes that are also suffixed with :post
are appended to the attribute value.
Embeds
SA5's embed feature has the same capabilities, defined in a JSON chunk.
It must be placed in an Embed, and positioned relative to the element you want the attribute to be applied to, either as a child or as an adjacent sibling.
Here's an example;
Notes;
Both the script
type
andhandler
are essentialtarget
can beparent
,prev
, ornext
, and identifies the element that the attribute will be applied toname
indicates the name of the attribute to create or replacevalue
( opional ) indicates the value to setpre
( opional ) prefixes the existing or replaced valuepost
( opional ) suffixes the existing or replaced value
https://discourse.webflow.com/t/how-to-make-html-embed-cover-full-button/193848/3
Last updated
Was this helpful?