Skip to main content

Categories

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

QG11


The following Props we can get

  • settings
  • apiSDK
  • serverProps

Settings Object

QG21


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.

  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.
    note

    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

IDtypeDescription
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

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