https://github.com/putyourlightson/craft-htmx
Provides helpers for integrating Htmx with Craft CMS.
https://github.com/putyourlightson/craft-htmx
Last synced: 12 months ago
JSON representation
Provides helpers for integrating Htmx with Craft CMS.
- Host: GitHub
- URL: https://github.com/putyourlightson/craft-htmx
- Owner: putyourlightson
- License: mit
- Created: 2020-05-23T16:30:32.000Z (about 6 years ago)
- Default Branch: v1
- Last Pushed: 2023-06-06T19:33:47.000Z (almost 3 years ago)
- Last Synced: 2024-10-02T08:09:30.841Z (over 1 year ago)
- Language: PHP
- Size: 58.6 KB
- Stars: 10
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Htmx Plugin for Craft CMS 3
> This plugin is no longer maintained and has been replaced by [Sprig](https://putyourlightson.com/plugins/sprig).
Provides components and helpers for using [Htmx](https://htmx.org/) with [Craft CMS 3](https://craftcms.com/).
The plugin will automatically route any action requests made from Htmx through the `htmx/route` controller to ensure that the result is always in the format `text/html` and that no redirects take place.
## Variables
The `craft.htmx` variable (and the shorthand version `hx`) is available in your twig templates. It provides components as well as values passed in through the [Htmx request headers](https://htmx.org/docs/#request-headers).
### `craft.htmx.component(template, options = {})`
Renders a reactive component using the provided template.
```twig
{{ hx.component('path/to/template', {
params: {
entryId: entry.id,
title: entry.title,
},
}) }}
```
The `params` automatically become available as twig variables in the component:
```twig
Entry ID: {{ entryId }}
{# Add `hx-get` to make the input field reactive #}
{{ title|length }} characters of max 255
{# Any `hx-` attributes can be used #}
Refresh
```
### `craft.htmx.get(tag, options = {})`
Renders a `get` component using the provided tag and options.
```twig
{# Minimal example #}
{{ hx.get('div', {
content: 'Like',
}) }}
{# Example with all possible options #}
{{ hx.get('button', {
url: '/like',
content: 'Like',
params: {
entryId: 1,
},
hx: {
trigger: 'click',
},
attributes: {
class: 'btn',
}
}) }}
```
Which will be output as:
```twig
{# Minimal example #}
Like
{# Example with all possible options #}
Like
```
### `craft.htmx.post(tag, options = {})`
Renders a `post` component using the provided tag and options. A CSRF token will automatically be added _if_ CSRF validation is enabled.
```twig
{# Minimal example #}
{{ hx.post('form', {
content: '',
}) }}
{# Example with all possible options #}
{{ hx.post('form', {
url: '/like',
content: '',
params: {
entryId: 1,
},
hx: {
confirm: 'Are you sure?',
},
attributes: {
class: 'form',
}
}) }}
```
Which will be output as:
```twig
{# Minimal example #}
{# Example with all possible options #}
```
### `craft.htmx.script(attributes = {})`
Returns a script tag to include the latest version of Htmx from unpkg.com.
```twig
```
### `craft.htmx.request`
Returns `true` if this is a Htmx request, otherwise `false`.
### `craft.htmx.trigger.id`
Returns the ID of the element that triggered the request.
### `craft.htmx.trigger.name`
Returns the name of the element that triggered the request.
### `craft.htmx.target.id`
Returns the ID of the target element.
### `craft.htmx.url`
Returns the URL of the browser.
### `craft.htmx.prompt`
Returns the value entered by the user when prompted via `hx-prompt`.
### `craft.htmx.eventTarget.id`
Returns the ID of the original target of the event that triggered the request.
### `craft.htmx.element.id`
Returns the ID of the current active element.
### `craft.htmx.element.name`
Returns the name of the current active element.
### `craft.htmx.element.value`
Returns the value of the current active element.
## Requirements
Craft CMS 3.0.0 or later.
## Installation
Install the plugin using composer.
```
composer require putyourlightson/craft-htmx:^0.1.0
```
## License
This plugin is licensed for free under the MIT License.
Created by [PutYourLightsOn](https://putyourlightson.com/).