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 customizable 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 initializing 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 that you have installed Node.js.
• 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

note

You can run fdk --version to check if FDK CLI is successfully installed.

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

The CLI will prompt you to select your extension from the list.

2. Select the appropriate extension from the list.

3. Enter a name for your binding. For example, product-binding.

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

5. Choose an 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 binding allows you to test your extension section in a development environment before publishing it.

1. Run the following command to create a draft:

fdk binding draft

The CLI will prompt you to identify the binding you wish to draft.

2. Select the appropriate options for the prompts and enter. Once the draft is made, you will see the binding in theme editor in your development company.

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

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

5. Click Save. You will 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.

1. Run the followind command to publish extension section binding:

fdk binding publish

The CLI will again prompt you for the same details about the extension binding.

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

The CLI will prompt you for details about the extension binding.

3. Enter the port and tunnel URL during the prompt.
4. 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.