Categories
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 https://platform.fynd.com/. 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.
- ID Define the specific id to denote and use it
- Type type of data to be shown on platform
- Few are the types in setting
string, range, checkbox, radio etc.note
it is not javascript data type
- Default Default value if not received any
- options Options to be chosen from platform
- min Minimum value can be set from platform
- max Maximum value can be set from platform
Following are the ID’s description in settings object
ID | type | Description |
---|---|---|
heading | String | Heading on the top |
layout | Select | Whether the listing to be grid or horzontal |
item_count | Range | Maximum items allowed per row |
view_all | checkbox | Check to show View All Button |
apiSDK
It provide the various api developer can call to get data you can refer to jetfire source code for more info
serverProps
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 }}
</div>
<fdk-link
v-if="settings.props.view_all.value"
:link="'/categories/'"
class="ukt-links bold-sm"
>VIEW ALL</fdk-link
>
</div>
top component for heading text and view all option can be set from platform page setting
<group-list
v-if="settings.props.layout.value === 'grid'"
:cardlist="getCategories"
:cardtype="'CATEGORIES'"
:itemcount="settings.props.item_count.value"
></group-list>
grid view component when selected grid from platform setting
<div
class="category-border"
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">
<div
class="glide__slides ssr-slides-category"
:data-count="settings.props.item_count.value"
:class="{
'big-slide-item': settings.props.item_count.value < 5,
}"
>
<div
class="glide__slide def-margin"
v-for="(category, index) in getCategories"
:key="index"
>
<fdk-link
:link="`/products/?category=${category.slug}`"
class="item"
>
<div class="carousel-cell">
<js-image
class="carousel-image"
:src="category.banners.portrait.url"
:alt="category.name"
:placeholder="'https://hdn-1.fynd.com/company/884/applications/000000000000000000000001/theme/pictures/free/original/theme-image-1598448644345.png'"
:sources="[
{ 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">
{{ category.name }}
</p>
</div>
</div>
</fdk-link>
</div>
</div>
</div>
</div>
<div
class="arrows"
:class="{
'hide-slider-nav':
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>
<div class="next-btn btn" ref="nextArrow" @click="nextSlide">
<fdk-inline-svg :src="'arrow-pdp'"></fdk-inline-svg>
</div>
</div>
</div>
</div>
horizontal view with arrows ii will show once the setting horizontal from platform setting
<template v-else-if="categories.length === 0">
<placeholder-items
:count="10"
type="collection-2"
text="Category"
:layout="settings.props.layout.value"
/>
</template>
placeholders when the categories array is coming empty