Documentation
Docs

Alpine.js

ska-theme comes equipped with Alpine.js, its’ plugins “collapse”, “focus” and “intersect”, as well as some custom components listed below.

Alpine.js pairs well with ska-blocks plugin because the blocks have an ability to accept custom HTML attributes, making it easy to add Alpine.js directives in the editor.

The Alpine.js instance can be accessed on the front end from the window object:

window.ska_theme.Alpine

Bundled plugins

Extending Alpine.js

To add re-usable Alpine.data contexts the implementation should be provided before the alpine:init JS event fires, therefore adding an inline script before ska-theme’s main public script is a good place to do it:

Child theme’s functions.phpPHP
add_action('wp_head', function() {
	wp_add_inline_script(ska_theme()->get_script_handle('public'), <<<JS
		document.addEventListener('alpine:init', () => {
			ska_theme.Alpine.data('customData', () => ({
				open: false,
				toggle() {
					this.open = !this.open
				},
			}))
		})
	JS, 'before');
});

After adding the custom Alpine data, it can be used anywhere on the front-end by adding the x-data attribute to HTML (or a block):

<div x-data="customData">...</div>

Alternatively, if you don’t want to write JavaScript in PHP files, enqueueing a JS file before ska-theme’s main public script is enqueued (wp_enqueue_scripts at priority 9) should also work:

Child theme’s functions.phpPHP
add_action('wp_enqueue_scripts', function() {
	wp_enqueue_script(
		'custom', 
		get_stylesheet_directory_uri() . '/custom.js', // File that listens for `alpine:init` event and extends `window.ska_theme.Alpine` object.
		[],
		'1.0.0' // Use `time()` during development for cache-busting.
	);
}, 8);

Custom components

  • ska-theme

    Toast

    Display notifications that appear on the front end to provide feedback or information to the user. ska-theme includes a template part for rendering Toasts, which can be enabled from ska-theme -> General -> Toasts. The template part is set up to use the skaToast Alpine.js module. Adding a toast Ensure that rendering of the template…

    Read more

    Alpine.js
  • ska-theme

    Dialog

    ska-theme includes a custom Alpine.js component for handling HTML dialog elements. The module abstracts away calling the native .showModal(), .close() functions, adds x-transition to the dialog and enables closing of the modal by clicking away from the modal. Creating a dialog Adding x-data=”skaDialog” do an element will locate a button and a dialog from its’…

    Read more

    Alpine.js
  • ska-theme

    Sticky

    ska-theme includes an Alpine.js component for creating a sticky header. For creating a sticky header, add the x-data=”skaSticky” attribute to the element that should stick. That element will receive the .is-sticky class when it is sticky. Arguments can be specified like this: x-data=”skaSticky({offset: 128})”. When making a sticky header, it’s a good idea to give…

    Read more

    Alpine.js
  • ska-theme

    Dropdown

    ska-theme includes an Alpine.js component for creating dropdowns. For creating a dropdown, add the x-data=”skaDropdown” attribute to the root element that contains one or many elements that trigger a dropdown as well as the dropdown elements.The button or another element that triggers a dropdown should have a wrapper with the x-bind=”item(‘dropdownId’)” attribute. The element that…

    Read more

    Alpine.js
  • ska-theme

    Tabs

    ska-theme includes an Alpine.js component for creating tabs. For creating tabs, add the x-data=”skaTabs” attribute to the root element.The element that contains the buttons that change tabs should have the x-bind=”tablist” attribute and individual buttons that allow to select a tab should have the x-bind=”tabItem(‘tabId’)” attribute with a unique ID that matches the content.Content elements…

    Read more

    Alpine.js
  • ska-theme

    Accordion

    ska-theme includes an Alpine.js component for creating an accordion. For creating an accordion, add the x-data=”skaAccordion” attribute to the root element.All direct children of that element should have the attribute x-bind=”item”.The item elements should have 2 child elements, one with x-bind=”toggle” and another with x-bind=”content”. There is 1 argument available for the skaAccordion component: exclusive.…

    Read more

    Alpine.js