Skip to main content

Fynd Development Kit CLI

Introduction​

Fynd Development Kit - Command Line Interface (FDK-CLI) is used for creating themes, templates, custom pages and much more, for your website.

In this document, you will learn more about:

Download and installation​

Prerequisites​

  • Node.js: To install FDK CLI, you will need to have Node.js (we recommend the latest stable version- but the maintenance and active LTS releases will also work) installed on your computer. Download the recommended version of Node.js.

  • Git: Additionally, you'll need Git to create new themes. You can download Git from here.

  • Basic knowledge of VueJS.

  • Add entry to /etc/hosts

    • Execute the command sudo nano /etc/hosts

    • Add the following lines to the end of the file

        127.0.0.1 localdev.fyndx0.de
        127.0.0.1 localdev.fynd.com
        127.0.0.1 localdev.jiox0.de
        127.0.0.1 localdev.jiox2.de

Installing FDK CLI​

We recommend installing the CLI globally. You can do this by running the following command:

    npm i -g @gofynd/fdk-cli
note

If global installation fails due to restricted permissions, you can execute the command with sudo/root permissions.

NPM Link: https://www.npmjs.com/package/@gofynd/fdk-cli Github Repository: https://github.com/gofynd/fdk-cli PPT Link: https://docs.google.com/presentation/d/1A-az0uSufX6oWrlXGmDh-EoXqLHKWkqukmuEUI1r4zw/edit?usp=sharing

Verifying the installation​

Verify that the installation was successful by running fdk whoami. Alternatively running fdk --version will show the installed version of the CLI.

Getting started​

Currently supported pages & components​

  • Home
  • Header
  • Footer
  • Collections Listing
  • Brands Listing
  • Categories Listing
  • Product Listing
  • Product Description
  • Product Reviews
  • Compared Products
  • Cart Landing
  • Cart Address
  • Cart Review
  • Order Review, Order Status, Order Tracking, Order Listing
  • Empty State
  • Loader
  • Screen Saver

When an application is created, a default theme is applied to it. If you want to modify the currently applied theme, you need to get the list of themes that are added to the application (in case of a new application, there is only one). You can get the list of themes by executing the following command:

fdk theme list 
--app-id 5eb424deb8985deb02931330 
--app-token iTNjY
--host api.fyndx0.de

From the table, you need to copy the theme ID and download theme files, as shown below.

QG1

Figure 1. Table

Downloading an existing theme linked to your application​

To download a theme that is already linked to the application, you can execute below commands to download it.

> mkdir theme-download
> cd theme-dowload
> fdk theme init
--email app@fynd.com
--password [Fynd@333] 
--app-id 000000000000000000000004
--app-token iTNAI
--theme-id 5eb450cd0ab05a59da4481c4 
--host api.fyndx0.de 
--context-name x0

Creating a new theme​

If you wish to create a new theme, create a folder with the theme name and change to the directory. Execute the below command to create a new theme.

> mkdir theme-new
> cd theme-new
> fdk theme new 
--email youremail@demo.com
--password yourpassword
--app-id 000000000000000000000004 
--app-token iTNyAI
--host api.fyndx0.de 
--theme-name test2
--context-name test2

After executing the command, a new theme is generated and linked to the application and scaffolded for you to start working.

Understanding folder structure​

  • Folder Structure for theme
    • assets
      • images: All images used in the theme must be added here
    • custom-templates
      • Templates added here are viewed under a custom route of /c/:component-name
    • global/
      • head.less
        • Override global styles added via platform (Jetfire) or specify global styles
      • variables.less
        • Specify LESS variables that can be used across the theme
    • templates
      • components
        • Common components such as header, footer, loaders, empty-state, etc. are part of this folder
      • pages
        • Pages such as collections, categories, listing, PDP are part of this folder
      • sections
        • Sections created for the theme are part of this folder
      • config
        • images
          • Theme image
        • settings_schema.json
          • Settings for theme
note

Templates that are not required to be changed must be left empty.

Data Flow​

Every template & component receives whatever data it needs for rendering in a JSON object called context. Jetfire makes the API calls and passes the data to the templates as a property (prop).

What if a template needs data that is not passed to it?

With theme v3, a theme can now use external npm packages such as axios and make API calls; alternatively, all themes get access to $restApi (only platform) handler to make API calls if needed. However, it is a good practice to not make API calls in themes. An exception here is sections. Sections instead of context receive a handler called provider which they can use to make calls. This is due to the fact that sections depend on the configuration provided by the end-user and thus Jetfire can not provide the data. More about sections later.

What if a template needs to make an API call on user interaction?

For this Jetfire exposes a list of components referred as action components. These components can be easily identified in the code as they are prefixed with fdk (fdk-search). Action components provide handlers that make API calls or execute some code for the theme.

Action Components

  • Action components are used for.

    • Performing API calls or state updation
    • Routing

  • List of Action Components 'fdk-link' 'fdk-accounts' 'fdk-search' 'fdk-product-card' 'fdk-brands-listing' 'fdk-slider' 'fdk-filter-modal' 'fdk-infinite-loading' 'fdk-back' 'fdk-compare-search' 'fdk-compare-action' 'fdk-cart' 'fdk-addresses' 'fdk-cart-delivery' 'fdk-cart-review' 'fdk-shipment-update' 'fdk-infinite-collections' 'fdk-confirm-payment' 'fdk-pincode' 'fdk-pdp-sizes'

  • Example of Action Components

    • fdk-link - Routing

        <fdk-link link="/brands" class="view-more">+ View More</fdk-link>
        
        <fdk-link :link="sortitem.url" class="filterValue sort-item">
            {{ sortitem.display }}
            <span v-if="sortitem.value === selectedSort.value">
                <div class="arrow-icon">
                    <img src="./../assets/images/sort-arrow.svg" / />
                </div>
            </span>
        </fdk-link>

    • fdk-search - 

        <fdk-search>
            <template slot-scope="searchData">
                <div class="search-container" >
                <input
                    type="text"
                    v-model="searchtext"
                    @input="searchData.fetchSuggestions(searchtext)"
                    @keydown="onArrowDown"
                    v-on:focus="showlist = true"
                    placeholder="Search for products and more"
                    autocomplete="off"
                />
            </div>
                <div class="search-suggestions-conatiner">
                <div v-if="searchData.suggestions.length > 0">
                    <ul>
                        <li
                        v-for="(data, index) in searchData.suggestions"
                        :key="index"
                        @click="redirectToPage(data.url)">
                        <span class="suggestion-row">{{ data.display }}</span>
                        </li>
                </ul>
                </div>
                <div v-if="searchData.noResults">
                <ul>
                    <li>
                    <fdk-link :link="`/product?q=${searchtext}`">
                        Search for {{ searchtext }}
                    </fdk-link>
                </li>
            </ul>
            </div>
            </div>
        </div>
        </template>
        </fdk-search>

    • suggestions - passing searchlist data

    • noResults - When no search result is found for given searchText

    • executeQuery - handler to show product listing with any query searchText

    • fetchSuggestions - handler to fetch searchResults for given searchText

Other Actions components will be added soon...

Local Development Setup​

Understanding context​

A context is a JSON object that holds the current configuration. Syncing and serving use the current active context.

Local Development​

Use the below command from the theme directory. 

fdk theme serve

Syncing themes​

fdk theme sync

Configuring Images​

Theme screenshots are saved in the config/images directory. This directory has subdirectories for Android, iOS, thumbnail and desktop. Images saved here are shown in the platform panel as a quick preview for the theme.

QG1

Figure 2. Quick Preview

Working with sections​

Sections are UI components that developers build so that users can edit the theme based on their requirements. These components expect a few settings that the user can configure and based on the configuration the UI renders. While building a theme, developers have two choices for developing a template: either to use sections which give users ability to change the look and feel of that page, or write complete code in the template file and not provide customization. Both approaches are correct and can be used in the use case.

When to use sections?

If the page needs to be updated frequently, for example, the home page, we should use sections. In case the page is not updated frequently like listing or product description pages they need not use sections.