<  Widgets

RocketFuel SC Category Items

Widget

### Description

This widget allows users to select service catalog items from within the Catalog Categories view.

### Configuration

The options mentioned below can be entered through the instance options modal or the Additional Options JSON format field in the page editor.

### Widget Option Schema Parameters

The instance options allow you to select a custom template for displaying individual items, add classes to the parent element of the widget, set how many items are to be displayed on each page, add a class to the column of the widget, and select a specific category for which to display items.

|  Option       | Property | Comments |
| ----- |:-----:| ---- |
| Results per page | `results_per_page` | Specify how many items to display on each page
| Template | `u_template` | Specify a custom template for item layout |
| Column Classes | `col_class` | Allows you to add CSS classes to the widget's parent element |
| Category | `category_id` | Select a specific category for which to display items  |

### Sample Data
```json
{
"data": {
"items": [
{
"short_description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
"name": "Lorem Ipsum",
"href": "#",
"picture": "http://via.placeholder.com/200x200"
},
{
"short_description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
"name": "Lorem Ipsum",
"href": "#",
"picture": "http://via.placeholder.com/200x200"
}
],
"templateID": "left-icon.html",
"col_class": "col-md-4"
}
}
```
### Dependencies
_Dependencies are included and configured as part of the provided Update Set._

> None


### CSS/SASS Variables

_CSS/SASS variables are given default values that can be overridden with theming or portal-level CSS._


| Variable | Comments |
| -------- |:-------------:|
| `$nr-category-item-image-size: 50px !default;` | This is used to set the default height and width of the image on each item. |
| `$nr-category-item-title-color: $brand-primary !default;` | This is used to set the default color of the title text on each item.  |
| `$nr-category-item-text-color: $text-color !default;` | This is used to set the default color of the text below the title on each items. |

Get Awesome Updates

Enter your email address for news and updates from NewRocket.

Thanks for your email!
There was an error, please try submitting again.