@loomchild/webflow-alpinejs
v2.2.0
Published
A simple script to allow using Alpine.js in Webflow designer.
Readme
webflow-alpinejs
To learn the basic usage, read my "Webflow + Alpine.js" tutorial. To interact with Webflow built-in components, see the "Interacting with the Webflow Slider Component using Alpine.js" article.
You can also check a demo site for a live example.
Initialization
To initialize Alpine.js in Webflow add the following code at the bottom of the <body> element, either globally in Project Settings or via HTML Embed on each page.
<script src="https://cdn.jsdelivr.net/npm/@loomchild/webflow-alpinejs@2/dist/index.js"></script>Next, add the following style at the top of the <body> element via HTML Embed on each page:
<link href="https://cdn.jsdelivr.net/npm/@loomchild/webflow-alpinejs@2/dist/style.css" rel="stylesheet">Initialize a component
To create an Alpine.js component add an x-data custom attribute to any HTML element. For example it can contain the value { open: false }.
Displaying expressions
To display a value of an expression, use x-text or x-html attribute with value containing the expresion, for example open.
Binding
To set an attribute value to result of an expression, add an x-bind attribute (shorthand starting with : symbol cannot be used in Webflow). For example x-bind:class with value myclass
Event handlers
To add an event handler, add a x-on custom attribute (shorthand starting with @ symbol cannot be used in Webflow). For example to react to a mouse click, add x-on:click attribute with value open = true.
Modifiers
Attributes containing a dot . character in their name are not allowed in Webflow. To bypass this limitation, use another : character instead. For example, add x-on:click:away attribute with value open = false.
Conditional statements
In Webflow it's not possible to create a <template> element in the designer, and it is necessary for x-if conditionals. To solve this issue, this script automatically wraps any element containing x-if in a <template>. For example we can create a conditional Div Block with x-if attribute with open value.
For loops
Similarly to conditional statements, any element containing x-for is automatically wrapped in a <template>. For example, to initialize a loop, simply create a div block with x-for attribute equal to item in items, and x-bind:key attribute with value item.
Cloak
When refreshing the site, the hidden content is briefly displayed, creating an ugly flickering effect. To hide an element before Alpine.js is initialized, add an x-cloak attribute with any value to it. You can add .uncloak class to such element to make it temporarily visible during development.
Components
This script also simplifies interacting with built-in Webflow components, such as Slider, Tabs or Lightbox.
Slider
Initialize the slider component by adding x-data="slider" attribute to it. Alternatively, attach to any slider component on the page by passing it's selector as a parameter, e.g. slider('#myslider').
The component contains slide variable indicating current slide index (read/write) and slideCount variable (read-only). It also contains nextSlide() and previousSlide() convenience methods.
Tabs
Initialize the tabs slider component by adding x-data="tabs" attribute to it. Alternatively, attach to any tabs component on the page by passing it's selector as a parameter, e.g. tabs('#mytabs').
The component contains tab variable indicating current tab index (read/write) and tabCount variable (read-only). It also contains nextTab() and previousTab() convenience methods.
Wizard
This component is used to create multi-step forms. Add a form block component and place slider component in it. Initialize the wizard by adding x-data="wizard" attribute, and the slider by adding x-data="slider" attrbiute. More information about usage can be found in "Implement a multi-step form in Webflow with Alpine.js" article.
Additional components
To reduce the bundle size, some components are not included in the library by default and need to be imported separately. For example to use the Phone component, import the library as follows (note that multiple files are combined and retrieved in one request by jsDelivr)
https://cdn.jsdelivr.net/npm/@loomchild/webflow-alpinejs@3/dist/index.js,npm/@loomchild/webflow-alpinejs@3/dist/components/phone.min.jsYou can see the list of available components below (name of the file to be imported corresponds to the component name) or select them via jsDelivr.
Phone
This component is used to format and validate the phone number. Initialize it by adding x-data="phone('FR')" and x-bind="input" attributes to the phone field. Replace FR by default country code if the phone number if calling code is not provided. More information about usage can be found in the last section of ["Phone number validation and formatting in Webflow forms" article].
For more information how to use Alpine.js please refer to the official documentation. If you notice something not working as expected in Webflow, do not hesitate to report errors here.