Skip to main content


You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

This lists all the product within the category. For example, furnitures can be one of category and the products may be table, chair, bed, etc.

Default view of categories page


The following Props we can get

  • settings
  • apiSDK
  • serverProps

Settings Object


Setting object is basically the settings that to be provided from platform panel A sales person can set to their needs and according to that particular settings developer can get various objects, by using these objects developer can perform and manipulate various task by putting logic around these objects

Refer to above screenshot we can see Settings has name, label and props etc

For development purpose we are only concern about props, In props we can see id, type, default, options, min, max etc.

  1. ID Define the specific id to denote and use it
  2. Type type of data to be shown on platform
  3. Few are the types in setting string, range, checkbox, radio etc.

    it is not javascript data type

  4. Default Default value if not received any
  5. options Options to be chosen from platform
  6. min Minimum value can be set from platform
  7. max Maximum value can be set from platform

Following are the ID’s description in settings object

headingStringHeading on the top
layoutSelectWhether the listing to be grid or horzontal
item_countRangeMaximum items allowed per row
view_allcheckboxCheck to show View All Button


It provide the various api developer can call to get data you can refer to jetfire source code for more info


Initial categories for the page

Config & Schema

consist of four parts

     <div class="banner text-spacing">
<div v-if="settings.props.heading.value" class="title">
{{ settings.props.heading.value }}
class="ukt-links bold-sm"
>VIEW ALL</fdk-link

top component for heading text and view all option can be set from platform page setting

v-if="settings.props.layout.value === 'grid'"

grid view component when selected grid from platform setting

v-if="settings.props.layout.value === 'horizontal'"
<div class="category-items">
<div :class="'glide' + _uid" ref="glide">
<div data-glide-el="track" class="glide__track">
class="glide__slides ssr-slides-category"
'big-slide-item': settings.props.item_count.value < 5,
class="glide__slide def-margin"
v-for="(category, index) in getCategories"
<div class="carousel-cell">
{ breakpoint: { min: 1025 }, width: 220 },
{ breakpoint: { min: 769 }, width: 316 },
{ breakpoint: { min: 768 }, width: 231 },
{ breakpoint: { min: 481 }, width: 220 },
{ breakpoint: { min: 376 }, width: 190 },
{ breakpoint: { min: 361 }, width: 162 },
{ breakpoint: { min: 321 }, width: 154 },
{ breakpoint: { max: 320 }, width: 136 },
<div class="carousel-details">
<p class="title">
{{ }}
getCategories.length <= settings.props.item_count.value,
<div class="prev-btn btn" ref="prevArrow" @click="prevSlide">
<fdk-inline-svg :src="'arrow-pdp-left'"></fdk-inline-svg>
<div class="next-btn btn" ref="nextArrow" @click="nextSlide">
<fdk-inline-svg :src="'arrow-pdp'"></fdk-inline-svg>

horizontal view with arrows ii will show once the setting horizontal from platform setting

    <template v-else-if="categories.length === 0">

placeholders when the categories array is coming empty