Hi everyone! Kory and I wanted to get you thoughts on an idea we are considering involving custom attributes. For context, if you’ve used the “Add to Cart Button” element before you’ll notice it’s just a button but has some Custom Attributes preconfigured for you to be compliant with WooCommerce markup.
After Pro 4 (Loopers, Element Conditions, and Effects), we’ve found that so much can be done by simply composing a few core elements together. In fact, you can probably use the Div + Text elements to create just about any kind of static content (e.g. no javascript).
What if you just wanted to add a predictable behavior to any element? Here are a few quick examples:
- Turn any button into an Add to Cart Button without having to change elements.
- Wait 5s before showing an element
- Close the closest Toggleable area
- Other custom triggers for element toggles
- Automatically open a modal when the page loads or on exit intent
Many of these come from thinking of future potential of offscreen content (more discussion on that topic here).
Try it yourself
Here’s a quick example to get a feel for it:
- Add this Custom CSS
[data-delay-fade]:not([data-delay-fade-complete]) {
opacity: 0;
pointer-events: none;
}
- Add this Custom JS
window.csGlobal.everinit('[data-delay-fade]', function(el) {
el.getAttribute('data-delay-fade')
setTimeout(function() {
el.setAttribute('data-delay-fade-complete', true)
}, el.getAttribute('data-delay-fade'))
});
- Add a Button, then go to Custom Attributes and add a new attribute with
data-delay-fadeas the name and5000as the value.
You should see the element fade in after 5 seconds.
We’re thinking this feature would be a new button next to Custom Attributes that opened a little modal that was similar to Dynamic Content. When you select a behavior it automatically adds all the custom attributes you need. All the JS and CSS would already be in Pro/Cornerstone. The biggest downside is those particular behaviors would be less approachable than adding actual controls to all elements. To change them, you’d have to directly manipulate the custom attributes.
We’re curious on your overall take on the idea, and also if there are any other use cases that come to mind.
)