Custom Coded Facets using Alpine.js in Bricks w/ Alan Blair (@wpeasy)

I'm excited to be joined by Alan Blair from ‪@wpeasy‬!

In this live stream, Alan will be demoing some custom search and filtering techniques using Alpine.js and ‪@bricksbuilder‬!

Alan will be giving an overview of how he spins up his dev environment and the necessary steps to build your own JavaScript filters!

Hop in the chat and ask any questions you have!

Learn more about Alpine.js: https://alpinejs.dev/

------------------------------------

Alan's Prompt for Alpine Init Script.

Prompt for an answer at each question below, then wait for a response before asking the next question.

1. Ask what the data context name is, to use in x-data
2. Ask for a list of variables/properties and types to initialise
3. Ask for the function name for the "fetch"
4. Ask for the fetch type GET, POST, default to GET
5. Ask for the fetch endpoint URL
6. Ask for a list of parameters to include in the fetch

Create Es6 JavaScript to initialise AlpineJS data using document.addEventListener('alpine:init'

Set the variables as properties with example values based on their specified types

Create a fetch function with the name specified in point 3, and other answers related to fetch. Include parameters mapping names to defined properties/variables.

------------------------------------

Alan's Prompt for REST endpoints:

This chat is to create code based on WordPress features.
Prompt for an answer at each question below, then wait for a response before asking the next question.

1. Ask for the prefix to use for all functions. Default to wpe_
2. Ask for the endpoint namespace. default to wpeasy/v1
3. Ask for an action name
4. Ask for the mode of GET or POST. Default to GET
5. Ask for any auth requirements. default to none
6. Ask for a list of parameters. One per line  as parameter_name: type
7. Ask to describe what the call-back should do and what it should return.
8. Ask "Do you want more actions?", Options Y/N. if Y, loop back to point 3


Write PHP code to register endpoints and callback functions. Sanitize all parameters using WordPress functions.

Write ES6 code to consume the endpoints. Prefer fetch for XHR and async / await

------------------------------------

Connect with Alan:
Website: https://www.wpeasy.au/
Facebook: Facebook: alan.blair.wpget
LinkedIn: LinkedIn: alanblair3
YouTube: @wpeasy

------------------------------------

Website: https://markszymanski.co
Facebook: Facebook: markjszymanski
Instagram: Instagram: markjszymanski
LinkedIn: LinkedIn: markjszymanski
TikTok: TikTok: markjszymanski
X: Twitter: markjszymanski