Sprig Videos

The videos below show you how to build complex Sprig components.

The source code for all components is freely available in this repo.

Live Sprig Training is now available!!

To learn more about Sprig, visit the Learning Resources.

Sprigboard #

Sprigboard is a listing of entries that includes live search, filtering by section and status, selecting the number of results per page, pagination, ordering and sorting.

View the Sprigboard demo »

1. Introduction to Sprigboard #

2. Building Live Search #

3. Building Search Filters #

Note that as of Craft 5, craft.app.entries should be used in place of craft.app.sections.

4. Building More Filters #

5. Sorting Results by Column #

6. Reactive Pagination #

7. Pushing URL Updates #

The source code for this component is available in this repo. This video series is also available at CraftQuest.

Sprigcart #

Sprigcart is a reactive Craft Commerce cart that consists of three products that can be rotated and added to the shopping cart. Sprigcart uses multiple components that can re-render each other.

View the Sprigcart demo »

1. Introduction to Sprigcart #

2. Building the Product Components #

3. Building the Shopping Cart Component #

4. Communicating Between Sprig Components #

The source code for this component is available in this repo. This video series is also available at CraftQuest.

Sprigform #

Sprigform is a multi-page form that includes a live suggestion field, conditional fields and repeatable table fields.

View the Sprigform demo »

1. Introduction to Sprigform #

2. Creating a Simple Form #

3. Building the Form Steps #

4. Building Field with Element Search #

5. Building Conditional Fields #

6. Building a Multi-row Table Field #

7. Form Types and Validation #

The source code for this component is available in this repo. This video series is also available at CraftQuest.

Sprig Filters #

Sprig Filters provide advanced filtering of products using custom fields, date ranges, relationship fields and price ranges.

View the Sprig Filters demo »

1. Introduction to Sprig Filters #

2. Setting Default Values #

3. Coding the Filters #

4. Querying Based on Filter Values #

5. Outputting the Products #

The source code for this component is available in this repo. This video series is also available at CraftQuest.