Git Product home page Git Product logo

magento2-alpinejs-collapse's Introduction

FriendsOfHyva_AlpineJsPersist

This is a Magento module specifically for Hyvä, which adds the AlpineJS persist plugin to Hyvä. This plugin allows you to persist Alpine.js component data between page reloads.

Alpine.js Persist Plugin

The Alpine.js persist plugin is a plugin that allows you to persist Alpine.js component data between page reloads. This plugin can be used to store data associated with Alpine.js components in the browser's local storage or session storage, allowing it to be retrieved and restored when the user returns to the page.

For more information on how to use the AlpineJS persist plugin, please refer to the official Alpine.js documentation.

Example

To use the persist plugin in your Hyvä theme, you can add the $persist property to your Alpine.js component and specify which data properties should be persisted.

<div x-data="{ count: $persist(0) }">
    <button x-on:click="count++">Increment</button>
    <span x-text="count"></span>
</div>

In this Alpine.js example, the count property is initialized with a default value of 0 using the $persist function, which enables the property to persist its value between page reloads using local storage.

Installation

To install the FriendsOfHyva_AlpineJsPersist module via composer, run the following command:

composer require SeoulCommerce/magento2-alpinejs-collapse

This module requires Hyvä theme 1.2.0 or higher and AlpineJS v3.

Using AlpineJS persist to save Magewire component data

See more details here.

Note

This module is made specifically for Hyvä and doesn't work with native Magento.

For more information on Hyvä, please visit the official Hyvä website.

Copyright & License

Copyright (c) 2023 Friends of Hyvä

The module is released under the MIT.

magento2-alpinejs-collapse's People

Contributors

tjitse-e avatar rydemods avatar

Stargazers

 avatar Wojciech M. Wnuk avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.