Links

Transform ❺🧪

Automatically modify elements and attributes in your Webflow hosted page.
Note that dynamic attributes would likely be moved here;
x-attribute is a transform / overwrite
xe-element type?
xx-element = change element type?
ww-wrap = create element wrapper?

Use cases

  • Modify attributes such as hrefs by combining static and dynamic CMS content
  • Solve the lack of CMS attribute binding on ECommerce lists
  • Wrap collection lists / nested collection lists in a link by transforming a wrapper DIV

Concept

  • Sequential series of transforms, applied in order, e.g.
    • Create element
    • Add attribute
    • Add second attribute
​

Example

Position within a collection list item, to target relative items such as a wrapper link.
Here we're using closest with a CSS selector;
​
<script type="sa5:transform:hson">
[]
selector: div.foo
target: closest
transform: elem
type: a
[]
// replace attribute
selector: a
target: closest
transform: attr
name: href
val: /browse?category=EMBED-FIELD
[]
</script>
​
<script type="sa5:transform:attr"
target="closest"
selector="'a'"
attr="href"
val="/browse?category=EMBED-FIELD"
></script>
Use sa5 data format;
​
Add;
  • querystring encoding, compat with FS filter
  • append rather then replace
<script type="sa5:transform:attr"
target="closest"
selector="'a'"
transform="append"
attr="href"
val="EMBED-FIELD"
encode="querystring"
></script>
​
script type
sa5:transform:attr -
target = closest | ?
selector = CSS selector string used with closest
transform = replace | append | prepend
attr = attribute to transform
val = value to use in the transform
encode = none | querystring | url

Notes

Runtime diagnostics are important here.
​
​
Last modified 2mo ago