FDK React Templates

Overview

FDK React Templates is a React component library designed specifically for Fynd Commerce. It includes a collection of reusable components, tools, and utilities to streamline the development process. This library is built with Webpack to handle JavaScript, TypeScript, CSS, and other assets, making it efficient and easy to maintain.

Features

• Dynamic Entry Points: Automatically includes all .jsx files from the src directory.
• Optimized Output Configuration: Outputs files to the dist directory, maintaining the relative path structure.
• Support for CSS and Less: Handles both CSS modules and global CSS, as well as Less files.
• Comprehensive Asset Management: Supports various asset types including fonts and SVGs.
• Powerful Plugins: Utilizes CleanWebpackPlugin and MiniCssExtractPlugin for efficient build processes.
• Advanced Optimization: Configured with Terser for JavaScript minification and optimized chunk splitting.

Installation

Prerequisites

• Node.js (v18 or later recommended)
• npm (v8 or later)
• fdk-cli
• All the external packages in themes node modules

Installation Steps For Use

1. Install the package in react theme repositary.

   npm install github:gofynd/fdk-react-templates.git#V.X.X.X

   Replace V.X.X.X.X with proper version. Example :

   npm install github:gofynd/fdk-react-templates.git#V.1.0.0

2. Use in your Component

   import ProductListing from "fdk-react-templates/Astra/pages/product-listing/product-listing.js";

Installation Steps For development

1. Clone the repository:

   git clone https://github.com/gofynd/fdk-react-templates.git
   cd fdk-react-templates

2. Install dependencies:

   npm install

Usage

Build for Production

To build the project for production, run:

npm run build

This will generate the output in the dist directory.

Development

For development, use: To test locally package in your local system before publishing npm package in your local theme repo, run: \r

npm i "src url of fdk-react-templates"

This will install the development package in your projects node_modules.

Project Structure

• src/: Source files including JavaScript/TypeScript, CSS, Less, and assets.
• dist/: Output directory for the production build.
• webpack.config.js: Webpack configuration file.

Webpack Configuration

Entry Points

The entry points are dynamically generated by including all .jsx files from the src directory:

entry: () => {
    const entryFiles = glob.sync('./src/**/*.jsx');
    const entry = {};
    entryFiles.forEach(file => {
        entry[file.replace('src', '')] = file;
    });
    return entry;
},

Output

The output is configured to generate files in the dist directory, maintaining the relative path structure:

output: {
    path: path.resolve(__dirname, "dist"),
    filename: (chunkInfo) => {
        const getNameFromPath = (path) => path.replace(/\.jsx$/, "");
        chunkInfo.chunk.name = getNameFromPath(chunkInfo.chunk.name);
        return '[name].js';
    },
    libraryTarget: "umd",
    library: "firestone",
    umdNamedDefine: true,
    globalObject: 'typeof self !=="undefined" ? self : this',
    clean: true,
    publicPath: './',
},

Plugins

The configuration includes several plugins to enhance the build process:

• CleanWebpackPlugin: Cleans the dist directory before each build.
• MiniCssExtractPlugin: Extracts CSS into separate files, supporting both modules and global CSS.

Loaders

Various loaders are configured to handle different types of files:

• babel-loader: Transpiles JavaScript and TypeScript files using Babel presets.
• css-loader, style-loader, postcss-loader: Handles CSS files with support for CSS modules.
• less-loader: Compiles Less files, with support for both modules and global styles.
• @svgr/webpack: Processes SVG files to be used as React components.
• asset/resource: Manages font files and other static assets.

Externals

Certain libraries are treated as external dependencies to reduce the bundle size So make sure to add them in your package.json:

externals: {
    react: "react",
    "react-router-dom": "react-router-dom",
    'fdk-core/components': 'fdk-core/components',
    'fdk-core/utils': 'fdk-core/utils',
    'awesome-snackbar': 'awesome-snackbar',
    'react-outside-click-handler': 'react-outside-click-handler'
}

Optimization

The project uses Terser for minification and optimizes chunk splitting:

optimization: {
    minimizer: [
        new TerserPlugin({
            terserOptions: {
                keep_fnames: true,
                keep_classnames: true,
            },
        }),
    ],
    splitChunks: {
        chunks() {
            return false;
        },
    },
}

Pages

The Pages includes a variety of pre-built page templates designed to streamline the development process. Each page is crafted to meet specific use cases and can be easily customized to fit your project's needs.

Components

The Components offers a collection of reusable UI components that can be integrated into any React application. These components are designed to be flexible and easy to use, promoting consistency across your project.

Global Configuration

The following table provides a detailed overview of all Global Configurations available for this component. These configurations allow for customization of typography, header, footer, product cards, and other storefront design elements. The settings are grouped into categories for easy reference and can be modified via the Fynd Platform.

| Configuration | Type | Default Value | Category | Description | |---------------------------|------------------|----------------------------|------------------------------|-------------------------------------------------------------------------------------------------------| | font_header | font | false | Typography | Defines the font styling for header elements across the site. | | font_body | font | false | Typography | Defines the font styling for body text content. | | header_layout | select | "single" | Header | Configures the layout of the header. Options include: Single Row Navigation and Double Row Navigation. | | logo_menu_alignment | select | "layout_1" | Header | Determines the alignment of the logo and menu on desktop. Options include: logo left/menu center, menu left, or menu right. | | header_mega_menu | checkbox | false | Header | Enables the mega menu layout for navigation. This option is applicable only when the header layout is set to Double Row Navigation. | | extension | extension | {} | Header | Allows you to add and manage extensions in specific positions within the header, such as before or after header icons. | | is_hyperlocal | checkbox | false | Header | Activates hyperlocal functionality to personalize content based on the user's location. | | is_delivery_minutes | checkbox | false | Header | Displays the delivery promise in terms of minutes on applicable pages. | | max_delivery_min | text | "60" | Header | Specifies the threshold value (in minutes) for displaying the delivery promise. | | is_delivery_hours | checkbox | false | Header | Displays the delivery promise in terms of hours on applicable pages. | | max_delivery_hours | text | "2" | Header | Specifies the threshold value (in hours) for displaying the delivery promise. | | is_delivery_day | checkbox | false | Header | Shows delivery promise as a simple Today/Tomorrow format. | | is_delivery_date | checkbox | false | Header | Displays delivery promise as a date range. Useful for deliveries expected over multiple days. | | logo | image_picker | "" | Footer | Allows uploading a custom logo for display in the footer. | | footer_description | text | "" | Footer | Adds a text description in the footer area, typically used for branding or additional information. | | payments_logo | image_picker | "" | Footer | Allows adding an image in the footer to showcase payment options or any relevant footer image. | | footer_image | checkbox | false | Footer | Enables an image to be displayed within the footer section. | | footer_image_desktop | image_picker | "" | Footer | Specifies an image to display in the footer for desktop devices. | | footer_image_mobile | image_picker | "" | Footer | Specifies an image to display in the footer for mobile and tablet devices. | | disable_cart | checkbox | false | Cart & Button Configuration | Disables the shopping cart and checkout functionality across the site. | | show_price | checkbox | true | Cart & Button Configuration | Toggles the visibility of product prices on Product Cards, Product Details Pages (PDP), and Featured Product sections. | | button_options | select | "addtocart_buynow" | Cart & Button Configuration | Configures the available options for product action buttons. Options include combinations of Add to Cart, Buy Now, or custom buttons. | | custom_button_text | text | "Enquire now" | Cart & Button Configuration | Specifies the text to display on a custom button for specific product actions. | | custom_button_link | url | "" | Cart & Button Configuration | Adds a URL that the custom button will redirect to when clicked. | | custom_button_icon | image_picker | "" | Cart & Button Configuration | Allows uploading an icon for the custom button, applicable to Product Details Pages (PDP) and Featured Product sections. | | product_img_width | text | "" | Product Card Configuration | Configures the width of product card images. Applicable to product listing, detail, and featured sections. | | product_img_height | text | "" | Product Card Configuration | Configures the height of product card images, maintaining their aspect ratio. | | show_sale_badge | checkbox | true | Product Card Configuration | Displays a Sale badge on discounted products. | | image_border_radius | range | 24 | Product Card Configuration | Sets the corner radius for product images, enhancing the visual style. | | img_fill | checkbox | false | Product Card Configuration | Ensures the image fully fits its container by clipping parts of the image if necessary. | | img_container_bg | color | "" | Product Card Configuration | Specifies the background color of image containers for products, collections, and categories. | | show_image_on_hover | checkbox | false | Product Card Configuration | Displays an additional image of the product when hovering over the product card. | | img_hd | checkbox | false | Other Page Configuration | Enhances image quality by upscaling, which may affect page performance. Applicable on the homepage. | | section_margin_bottom | range | 16 | Other Page Configuration | Sets the bottom margin for page sections, useful for spacing adjustments. | | button_border_radius | range | 4 | Other Page Configuration | Defines the corner radius for buttons, improving their visual style and user experience. |

Steps to Modify Global Configuration via Fynd Platform

1. Log in to the Fynd Platform:

   • Go to Fynd Platform and log in with your credentials.

2. Navigate to Your Company:

   • Once logged in, select your compay from the list.

3. Select the Theme

   • In the sidebar, under Sales Channel, select your sales channel.
   • Then, under Appearance, click on Themes.
   • In the current theme, click on Edit. Here, you can preview and configure the theme.
     Here's a sample theme.

4. Locate Global Configuration Section:

   • Within the Theme, find the Settings section under Configuration. This is where the configurations described are accessible.

5. Modify Configurations:

   • Select and update the configurations based on your requirements, such as:
     • Fonts under Typography.
     • Header layouts under Header.
     • Button styles under Cart & Button Configuration.

6. Preview Changes:

   • Preview the updates made to the page in real time to ensure they look and function as expected.

7. Save and Publish:

   • After confirming your changes, click on Save. This will publish the updated configurations.

8. Test Your Storefront:

   • Visit your store's live URL to confirm the updates are functioning as expected.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any changes.

Contact

For any questions or feedback, please contact Prashant Pandey at [email protected].

This README provides a detailed overview of the FDK React Templates library, including installation, usage, and configuration details. Ensure to update any placeholders with actual information specific to your project.