jekyll-store-display

Product Display plugin for Jekyll-Store Engine

Usage no npm install needed!

<script type="module">
  import jekyllStoreDisplay from 'https://cdn.skypack.dev/jekyll-store-display';
</script>

README

Jekyll-Store/Display

Build Status

Product Display plugin for Jekyll-Store Engine.

Actions

setDisplayFilter

Sets the display filter associated with a name.

Args:

  • name - Name to associate filter.
  • filter - Function that filters products in a display.

Example:

JekyllStoreEngine.Actions.setDisplayFilter({
  name: 'page',
  filter: JekyllStoreEngine.Filters.Page(6, 2)
});

removeDisplayFilter

Removes the display filter associated with a name.

Args:

  • name - The filter's associated name.

Example:

JekyllStoreEngine.Actions.removeDisplayFilter({ name: 'page' });

DisplayStore

The products to be displayed after filters have been applied. Optionally has page information if page filter is applied.

Example output:

{
  display: Immutable({
    products: [
      { name: 'Slippers', price: 45.50 }),
      { name: 'Crocs', price: 88.00 }),
      { name: 'Sandals', price: 5.25 })
    ],
    page: {
      current: 2,
      numbers: [1, 2, 3, 4, 5, 6, 7],
      prev: 1,
      next: 3
    }
  })
}

Filters

Filters are simple functions that filter the products in a display. They have an associated precedence to make sure they are run in the correct order. The following is a list of the filters:

PageFilter

Paginates the display at the specified page number.

Example:

JekyllStoreEngine.Actions.setDisplayFilter({
  name: 'page',
  filter: JekyllStoreEngine.Filters.Page(6, 2)
});

RangesFilter

Allows products with a field within the supplied ranges.

Example:

JekyllStoreEngine.Actions.setDisplayFilter({
    name: 'weight-range',
    filter: JekyllStoreEngine.Filters.Ranges('weight', [[0, 1.5], [3.5, 5]])
});

SearchFilter

Allows products with a field that contains the searched text.

Example:

JekyllStoreEngine.Actions.setDisplayFilter({
    name: 'search',
    filter: JekyllStoreEngine.Filters.Search('name', 'bo')
});

SortFilter

Sorts products on a field in the specified direction.

Example:

var sortFilter = JekyllStoreEngine.Filters.Sort;

JekyllStoreEngine.Actions.setDisplayFilter({
    name: 'sort',
    filter: sortFilter('vintage', sortFilter.ASC)
});

TagsFilter

Allows products with a field that matches one of the supplied tags.

Example:

JekyllStoreEngine.Actions.setDisplayFilter({
    name: 'colour-tag',
    filter: JekyllStoreEngine.Filters.Tags('colour', ['red', 'blue'])
});

ContainsFilter

Allows products with a field that contains one of the supplied strings.

Example:

JekyllStoreEngine.Actions.setDisplayFilter({
  name: 'sizes-contain',
  filter: JekyllStoreEngine.Filters.Contains('sizes', ['Small', 'Medium'])
});

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request