npm package: @loomchild/webflow-alpinejs
Description: A simple script to allow using Alpine.js in Webflow designer.
Author: Jarek Lipski
Latest version: 2.2.0

# webflow-alpinejs

> A simple wrapper to use [Alpine.js](https://github.com/alpinejs/alpine) in [Webflow](https://webflow.com/) Designer.

To learn the basic usage, read my ["Webflow + Alpine.js" tutorial](https://medium.com/@jareklipski/webflow-alpine-js-d53d77e3293). To interact with Webflow built-in components, see the ["Interacting with the Webflow Slider Component using Alpine.js" article](https://medium.com/@jareklipski/interacting-with-the-webflow-slider-component-using-alpine-js-c154885feaed).

You can also check a [demo site](https://webflow.com/website/alpinejs-demo) 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](https://medium.com/webflow-sprinkles/implement-a-multi-step-form-in-webflow-with-alpine-js-2ec1a5308a6a).  

## 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://www.jsdelivr.com/features))

```
https://cdn.jsdelivr.net/npm/@loomchild/webflow-alpinejs@3/dist/index.js,npm/@loomchild/webflow-alpinejs@3/dist/components/phone.min.js
```

You 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](https://www.jsdelivr.com/package/npm/@loomchild/webflow-alpinejs?path=dist%2Fcomponents).

### 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](http://alpinejs.dev/). If you notice something not working as expected in Webflow, do not hesitate to report errors [here](https://github.com/loomchild/webflow-alpinejs/issues).