Modules
Stackend modules are small pieces of code that provide additional functionality for your site.
Stackend will process any elements on your page that has a recognized data-stackend-type attribute. They will typically look something like:
<div data-stackend-type="stackend-cms" data-stackend-id="123:456"/>
Some modules have additional parameters controlling the behaviour and appearance.
These are the supported modules:
Code Bin
Attributes
- data-stackend-type
- "stackend-cms" - The module type. Required.
- data-stackend-id
- The community and module id using the format XXX:YYY. Required.
Feed
Display a list of feed entries.
May also allow the users to create new post, if the rules of the feed allow for that.
Attributes
- data-stackend-type
- "stackend-feed" - The module type. Required.
- data-stackend-id
- The community and module id using the format XXX:YYY. Required.
Login
Displays a login button if the user is not currently logged in.
When logged in it displays the user profile image. Clicking the image will open a menu with options to view the profile, log out etc.
This module is automatically added to the start of the page. There is no need to add the module unless it needs to be in a specific part of the page DOM.
Attributes
- data-stackend-type
- "stackend-login" - The module type. Required.
- data-stackend-id
- The community id using the format XXX. Required.
Page
Displays a number of Code Bin boxes
Attributes
- data-stackend-type
- "stackend-page" - The module type. Required.
- data-stackend-id
- The community and module id using the format XXX:YYY. Required.
Profile
Displays the profile of a selected user
This module is automatically added to the start of the page. There is no need to add the module unless it needs to be in a specific part of the page DOM.
Attributes
- data-stackend-type
- "stackend-profile" - The module type. Required.
- data-stackend-id
- The community id using the format XXX. Required.
Site
Displays a selected set of pages and a menu allowing the user to navigate the pages.
Navigation happens within the element, much like an iframe.
Attributes
- data-stackend-type
- "stackend-site" - The module type. Required.
- data-stackend-id
- The community and module id using the format XXX:YYY. Required.
- data-stackend-menu
- Controls menu visibility and layout. Accepts: vertical, horizontal and false Default: vertical
Slideshow
Displays a slideshow.
The slideshow should contain a number of CMS boxes, one for each slide
Attributes
- data-stackend-type
- "stackend-slideshow" - The module type. Required.
- data-stackend-animation-time
- Duration of the slide change animation in ms. Default: 350
- data-stackend-arrows
- Display arrows allowing the user to navigate between the slides. Default: true
- data-stackend-auto-play
- Should the slideshow start automatically? Default: true
- data-stackend-delay
- Delay between slides in ms. Default: 3000
- data-stackend-indicators
- Display a number of dots for quick navigation of the slides. Default: false
Examples
<div data-stackend-type="stackend-slideshow" data-stackend-indicators="true">
<div data-stackend-type="stackend-cms" data-stackend-id="123:456"/>
<div data-stackend-type="stackend-cms" data-stackend-id="123:567"/>
</div>
Throbber
Contains the trobber used to indicate that the app is loading data in the background and the modal throbber that temporarily stops user interaction while posting data.
This module is automatically added to the start of the page. There is no need to add the module unless it needs to be in a specific part of the page DOM.
Attributes
- data-stackend-type
- "stackend-throbber" - The module type. Required.
- data-stackend-id
- The community id using the format XXX. Required.
Product
Displays a product from the shop.
Attributes
- data-stackend-type
- "stackend-shop-product" - The module type. Required.
- data-stackend-id
- The community id using the format XXX. Required.
- data-stackend-handle
- Product handle
- data-stackend-layout
- "full" - Displays a large image, the complete description and options to select variant.
"small" - Displays reduced product information and a small image.
Product collection
Displays a collection of products from the shop.
Attributes
- data-stackend-type
- "stackend-shop-collection" - The module type. Required.
- data-stackend-id
- The community id using the format XXX. Required.
- data-stackend-handle
- Collection handle
- data-stackend-layout
- "list" - Display products as a list.
"slideshow" - Display products as a slideshow
Comments
Displays a list of comments and allows users post a comment.
The comments are associated with the url where the module is included. If you use more than one comment module the parameter data-reference-id needs to be set in order to separate the modules.
Attributes