Web Theme Binding

Overview

Bindings allow extensions to expose reusable components, known as sections (See React Section, Vue Section), which can be managed from the Theme Editor. These bindings are fully compatible with server-side rendering and can be used alongside native theme sections. This feature empowers both sellers and extension developers to create highly customisable user interfaces by leveraging the following capabilities:

• Integration with Theme Editor: Extension bindings can now be added, removed, and ordered just like native theme sections, directly from the Theme Editor. Bindings support all the usage of props and blocks just like the native theme sections do.
• Server-Side Rendering (SSR) Compatibility: Extension bindings are designed to be SSR compatible, ensuring optimal performance and SEO benefits.
• Seamless Coexistence: Extension bindings can be used alongside existing theme sections, providing a cohesive and flexible design experience.

Developer Guide:

This guide will walk you through the process of creating and managing extension sections using the FDK CLI. This includes initialising a binding, creating a draft, publishing, and previewing your extension sections. This guide provides a comprehensive, step-by-step process for creating an extension that fetches products using the theme engine data store and displays them in a list.

Prerequisites

• Ensure you have Node.js installed.
• Familiarity with the basics of using a terminal/command prompt.

Step 1: Install the Supported Version of FDK CLI

To get started, you need to install the latest version of the FDK CLI. Open your terminal and run the following command:

npm i @gofynd/fdk-cli -g

Verify the installation by checking the version:

fdk -V

Step 2: Create a New Extension Binding

Extension Binding To create a new extension binding, follow these steps:

1. Run the following command:

fdk binding init

2. The CLI will prompt you to select your extension from a list. Select the appropriate extension.

3. Enter a name for your binding.

4. Select the framework you are using (React or Vue 2).

5. Choose the interface for your Bindings. Currently, only Web Themes are supported.

The source code for the binding will be created in your repository.

Folder Structure For Default Theme

React JS

Vue 2

The boiler plate code should have a sample section created for you that fetches products list using engine data store (fpi). Here is the code you should see in the Section (React Section, Vue Section)

React JS

export function Component() {
  const fpi = useFPI();
  const products = useGlobalStore(fpi.getters.PRODUCTS);

  const productItems = products?.data?.items ?? [];
  useEffect(() => {
    if (!productItems.length) {
      fpi.products.fetchProductListing({});
    }
  }, []);

  return (
    <div>
      <h1>Products List</h1>

      {!productItems.length ? (
        <h2>No Products</h2>
      ) : (
        <div class={styles.container}>
          {productItems.map((product) => (
            <ProductCard product={product} key={product.slug} />
          ))}
        </div>
      )}
    </div>
  );
}

Component.serverFetch = ({ fpi }) => fpi.products.fetchProductListing({});

export const settings = {
  label: "Product List",
  name: "product-list",
  props: [],
  blocks: [],
};

Vue 2

<template>
    <div class="main-div">
        <h1>Header - {{ getHeader }}</h1>
        <h2>Products List</h2>

        <div v-if="products.length == 0" class="no-product">
            No Products Found
        </div>
        <div class="container" v-else>
            <div
                v-for="product in products"
                :product="product"
                :key="product.slug"
                class="product"
            >
                <h1>{{ product.name }}</h1>
                <h2>{{ product.slug }}</h2>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'test',
    props: ['settings', 'serverProps', 'global_config'],
    async initializeServerProps({ settings, apiSDK }) {
        try {
            const data = await apiSDK.catalog.getProducts({
                pageId: '*',
                pageSize: 12,
            });
            return data;
        } catch (error) {
            console.log(error);
        }
    },
    data() {
        return {
            products: this.serverProps?.items || [],
        };
    },
    computed: {
        getHeader() {
            return this.settings?.props?.heading?.value;
        },
    },
    async mounted() {
        try {
            const data = await this.$apiSDK.catalog.getProducts({
                pageId: '*',
                pageSize: 12,
            });
            this.products = data?.items;
        } catch (error) {
            console.log(error);
        }
    },
};
</script>

<settings>
    {
      "name": "product-listing",
      "label": "product-listing",
      "props": [],
      "blocks": [],
      "preset": {}
    }
  </settings>

<style lang="less" scoped>
.main-div {
    h1 {
        color: blue;
    }
    h2 {
        color: orange;
    }
    .no-product {
        color: red;
    }
    .container {
        display: flex;
        .product {
            border: 1px solid green;
            h1 {
                color: green;
            }
            h2 {
                color: green;
            }
        }
    }
}
</style>

Step 3: Create a Draft Binding

Creating a draft allows you to test your extension section in a development environment before publishing it. To create a draft, run:

fdk binding draft

The CLI will prompt you to identify the binding you wish to draft. Select the appropriate options for the prompts and hit enter.

Once the draft is made, you should be able to see the binding in theme editor in your development company.

Navigate to the theme editor in your development company and click on Add Section

Select the binding you just created to see a live preview of the section.

Click on save. you should see the changes live in your storefront.

Step 4: Publish Extension Section Binding

Once you are satisfied with your extension section, you can publish it. This will make your extension section available across all live companies using this extension. To publish, run:

fdk binding publish

The CLI will again prompt you for the same details about the extension binding. Provide the necessary information to proceed with publishing.

Once the binding is published, it will be available across all sales channels it is installed in.

Step 5: Preview Extension Section Binding Locally

You can also preview the changes to your binding code locally before create a draft or publishing a binding. Previewing your extension section locally helps you see the changes in real-time before making them live. To preview locally, follow these steps:

1. Start a tunnel on your machine using Ngrok, Cloudflare, or any other tunnel service provider.
2. Run the following command:

fdk binding preview

1. The CLI will prompt you for details about the extension binding. Enter the port and tunnel URL during the prompt.
2. Select the sales channel where you wish to preview your changes. Make sure the extension is installed and the section is added on the storefront.

The CLI will generate a preview URL for you, allowing you to see how your extension section looks and behaves in a live environment.