Home Examples Documentation GitHub

Alpine.js integration

Two simple patterns based on examples/alpine/1.html and examples/alpine/2.html.

Experiment basics Browse examples

Load Abrantes and Alpine

Load Abrantes first, then Alpine with defer. Place your experiment code after the scripts or in DOMContentLoaded.

<script src="AbrantesPlus.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
  // experiment code
</script>

Pattern 1: Update Alpine data from variants

Use Alpine.$data to mutate component state inside each variant.

<div id="alpineBlock1" x-data="{ heading: 'Original', buttonText: 'Click', buttonColor: 'blue' }">
  <h2 x-text="heading"></h2>
  <button x-text="buttonText"></button>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  var block1 = document.querySelector("#alpineBlock1");
  var MyTest = Object.create(Abrantes);

  MyTest.variants = [
    function () {
      Alpine.$data(block1).heading = "MyTest Original";
      Alpine.$data(block1).buttonText = "Original Button";
    },
    function () {
      Alpine.$data(block1).heading = "MyTest Variant 1";
      Alpine.$data(block1).buttonText = "Variant Button";
    }
  ];

  MyTest.assignVariant("MyTest");
  MyTest.renderVariant();
  MyTest.persist("cookie");
  MyTest.add2dataLayer("example_test");
});
</script>

This keeps Alpine as the source of truth while Abrantes controls the assignment logic.

Pattern 2: Let Alpine render variants

Expose MyTest.variant to Alpine and render different markup using x-if and x-teleport.

<div id="container1"></div>

<script>
var MyTest = Object.create(Abrantes);
MyTest.variants = [function () {}, function () {}];
MyTest.assignVariant("MyTest");
MyTest.renderVariant();
MyTest.persist("cookie");
</script>

<div x-data="{ variant: MyTest.variant === -1 ? 0 : MyTest.variant }">
  <template x-if="variant === 0">
    <template x-teleport="#container1">
      <div>Variant 0 markup</div>
    </template>
  </template>
  <template x-if="variant === 1">
    <template x-teleport="#container1">
      <div>Variant 1 markup</div>
    </template>
  </template>
</div>

Use a fallback when variant is -1 so non-experiment users still see the control.

Notes

  • Make sure Alpine is initialized before calling Alpine.$data.
  • Keep the control markup in the base HTML so the page is readable without JS.
  • Call tracking plugins after assignVariant and before analytics config.
  • If you rely on delayed content, use MyTest.waitFor before rendering.