
At some point in your development career you will most likely be asked to make a `<textarea>` autogrow with the value that the user has inputted.

There are a few approaches you can take when creating this functionality but the most common is a JavaScript function similair to this.

```js
function textareaAutogrow() {
  let el = event.currentTarget

  el.style.height = 'auto'
  el.style.height = `${el.scrollHeight}px`
}
```

It's simple, clean and easy to use.

How do we take this and translate it to Alpine JS?

Let's start with a solution that uses the same code as the JavaScript example, but written with Alpine JS.

## Basic Alpine JS Example

```html
<textarea
  x-data="{
    resize: () => {
      $el.style.height = 'auto';
      $el.style.height = `${$el.scrollHeight}px`
    }
  }"
  x-init="resize()"
  @input="resize()"
></textarea>
```

What's happening here?

We have the `x-data` context initialising a `resize()` function which has the same logic as our JavaScript example. This function is then called when the Alpine JS component initialises and again everytime the `input` DOM event is dispatched.

Great, this works but does it tick the three boxes of the JavaScript example?

**Simple**

Yes. It's standard Alpine JS, minus the creation of a function in an x-data context.

**Clean**

No. It's added a extra complexity and bloat to your HTML which makes it much harder to quickly read through.

**Reusable/Easy**

No. It's not DRY and that's not something I'd want to be using, especially in HTML where things can often change.

## Extracting Alpine JS Logic Example

Let's take the logic we just wrote and extract it into it's own Alpine JS data context function. Here's what that would look like.

```html
<textarea x-data="grow"></textarea>
```

And the Alpine JS directive.

```js
document.addEventListener('alpine:init', () => {
  Alpine.data('grow', () => ({
    init() {
      this.resize()
      this.$el.addEventListener('input', () => this.resize())
    },
    resize() {
      this.$el.style.height = 'auto'
      this.$el.style.height = `${this.$el.scrollHeight}px`
    },
  }))
})
```

This looks much better!

Handling it with this approach allows us to add `x-data="grow"` without having to write the functionality over and over again. However... Let's take the following example.

```html
<textarea
  x-data="{ valid: false, grow }"
  :class="{ 'border-green-500': valid }"
></textarea>
```

Here we have a `valid: false` which handles adding/removing a CSS class.

Will the CSS work? Yes.

Will the autogrow functionality work? No.

There's probably a way to fix this, but for now I have a different solution.

## Alpine JS Plugin Example

I've created an Alpine JS plugin called [Alpine JS Textarea Autogrow](https://github.com/markmead/alpinejs-textarea-autogrow) that handles this functionality with an Alpine JS directive.

What this means is we can add this functionality like this.

```html
<textarea x-data x-grow></textarea>
```

Here we are initialising an Alpine JS component with `x-data` which is required to initialise the Alpine JS component. We then use `x-grow` which is an Alpine JS directive provided by the plugin to handle the autogrow functionality.

Under the hood `x-grow` is the JavaScript example showcased at the start of this blog post.

Something to ask is "Why would I use a plugin for something like this?" which is a great question. Here's some reasons.

- Simple, clean and easy to use
- Easy to reuse and no HTML bloat
- Very small JavaScript package (0.000344 MB)
- Allows for full use of `x-data`

All of these examples have their use cases, but if I were to create a list of best to worst approaches it would be.

1. Alpine JS Plugin - [Alpine JS Textarea Autogrow](https://github.com/markmead/alpinejs-textarea-autogrow)
2. Extracting Alpine JS Logic
3. JavaScript
4. Basic Alpine JS


Easily create an autogrowing textarea with Alpine JS.

How to Autogrow Textarea with Alpine JS (+ New Plugin)


Recently, I've been using a lot of Alpine JS when developing Shopify themes and so far it's worked very well.

Thanks to the latest version of Alpine JS (version 3) we now have access to Alpine JS stores by default! 🥳

[Alpine JS Stores Documentation](https://alpinejs.dev/globals/alpine-store)

This means that we can create a source of truth for particular state management, in this case the Shopify cart.

Let's create a new Alpine JS store called "cart" that we will place in either `assets/theme.js` or `layouts/theme.liquid`.

<Callout text="If using `assets/theme.js` then you will need to import Alpine JS as a module." />

Here's our Alpine JS store for the cart.

```js
Alpine.store('cart', {
  data: null,

  clearCart() {
    fetch('/cart/clear.js, { method: 'POST' })
      .then((response) => response.ok && this.getCart())
  },

  getCart() {
    fetch('/cart.js')
      .then((response) => response.json())
      .then((data) => this.data = data)
      .catch((error) => console.error(error))
  }
})
```

Let's breakdown what this is doing.

| ID          | Type     | Description                                               |
| ----------- | -------- | --------------------------------------------------------- |
| `data`      | Variable | Keeps all the cart data that is set from `getCart`        |
| `clearCart` | Function | Clears the cart and then calls `getCart` once finished    |
| `getCart`   | Function | Gets the current cart and saves it to the `data` variable |

Once question you might have is why do we call `getCart` after clearing? This is so we can reset the `data` variable.

There's another approach to doing this with `response.ok && this.cart = null` but the approach is your choice, they're both very quick.

The last part is the HTML, thankfully Alpine JS exposes the store in a `$store` variable. Therefore, we can create a button that clears the cart with the following code.

```html
<button x-data type="button" @click="$store.cart.clearCart">Clear Cart</button>
```

And that's that. You can now take `$store.cart.clearCart` and place that where you need to clear the cart in your Shopify store.

<Callout text="If the clear cart button is within a `form` then you'll need to add `type='button'` to the button to prevent it from submitting the form." />

If you are using this on the cart page or within a cart popup/drawer then you'll want to handle the UI to show the user that the cart has been emptied.


Find out how to clear the Shopify cart with Alpine JS and the Shopify API.

How to Clear the Shopify Cart with Alpine JS


In this post we will go over two methods of getting product data from the Shopify API with Alpine JS.

If you've been using Dawn, the new open-source theme from Shopify that makes use of Shopify 2.0, you may have seen the following code.

```html
<script type="application/json">
  {{ product | json }}
</script>
```

This will render the product data as JSON which we can then get via JavaScript.

```js
JSON.parse(document.querySelector('[type="application/json"]').textContent)
```

This approach works great and is a new concept to me, so thanks Shopify 🙌

The next step with this process is getting the data into Alpine JS, for that we can use `Alpine.data()`.

```html
<div x-data="product">
  <h1>Product Title</h1>

  <p x-text="variant.title"></p>

  <p x-money="variant.price"></p>

  <form>
    <input type="text" name="id" x-model="variant.id" />
    <button type="submit">Add to Cart</button>
  </form>

  <script type="application/json">
    {{ product | json }}
  </script>
</div>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('product', () => ({
      data: '',
      variant: '',

      init() {
        this.data = JSON.parse(
          document.querySelector('[type="application/json"]').textContent
        )

        this.activeVariant()
        this.listenForChange()
      },

      activeVariant() {
        const variantId = this.getVariantParam()

        this.variant = variantId
          ? this.data.variants.find((variant) => variant.id === variantId)
          : this.data.variants[0]
      },

      listenForChange() {
        document.addEventListener('change', () => {
          this.activeVariant()
        })
      },

      getVariantParam() {
        const params = new URLSearchParams(window.location.search)
        const variantId = Number(params.get('variant'))

        return variantId
      },
    }))
  })
</script>
```

<Callout text="`x-money` is an custom Alpine JS directive that replicates the `| money` filter." />

Check out the [Alpine JS Money](https://github.com/markmead/alpinejs-money) plugin.

Everything happens in the `init()` function from Alpine JS. Let's break this down.

```js
init() {
  this.data = JSON.parse(
    document.getElementById('productData').textContent
  )

  this.activeVariant()
  this.listenForChange()
}
```

First, we are setting the `data` variable value to be the JSON product data that we can get from Liquid.

Then there's the two functions; `activeVariant()` and `listenForChange()`.

Here's what they're doing.

**`activeVariant()`**

This function calls another function `getVariantParam()` which returns the variant param from the URL, this value is then set to a local variable of `variantId`.

If then checks the variants array in the `data` object for a match based on the `variantId`, if no match was found it defaults to the first variant in the variants array. It then sets the `variant` variable to the variant that's returned.

<Callout text="The variants array is included within `{{ product | json }}`" />

**`listenForChange()`**

This sets up a `change` event listener on the document that calls `activeVariant()`, which allows us keep the `variant` variable up to date with user changes in the product form.

## Get Shopify Product Data with Async/Await

This is an alternative approach that uses the Shopify API and doesn't require many changes.

It's worth noting that if you've added the following then you should be OK to remove it.

```html
<script type="application/json">
  {{ product | json }}
</script>
```

_Please do not remove this if you are using Dawn, or it was already in your theme._

Using the Shopify API for this is as simple as updating the way we get the JSON product data in the `init()` function.

Here's the new function.

```js
async init() {
  const res = await fetch('/products/{{ product.handle }}.js')
  const data = await res.json()

  this.data = data

  this.activeVariant()
  this.listenForChange()
}
```

This is using the Shopify API endpoint for the current product and gets the `data` from the response. Then we set the `data` variable to the data that is returned.

From there it's business as usual.

Which way is better? That's a personal choice. Personally, I prefer the first method of using `{{ product | json }}` as it's the approach Shopify have taken with Dawn and once explained, I believe it's easier to understand.

With the new Dawn theme, it ships with JavaScript that handles what's included in the basic example in this post. However, if you wanted to extend that then you have to start editing the base JavaScript that Shopify has shipped with Dawn.

This isn't a huge issue and in fact is a great way to learn more about the Dawn theme, but you can easily run into complications. Therefore, I believe it's better to run Alpine JS alongside the Dawn JavaScript and gradually replace what it.


Learn how you can use Alpine JS to fetch product data in Shopify.

Mark Mead

How to Autogrow Textarea with Alpine JS (+ New Plugin)

How to Clear the Shopify Cart with Alpine JS

How to Get Product Data from Shopify with Alpine JS