Storefront Bindings

It allows developers and sellers enhanced capabilities to upgrade their online storefronts by integrating various widgets and functional tools. This feature enables the incorporation of elements such as product cards, customer reviews, and promotional banners, and more dynamic functionalities like real-time tracking and advanced filtering options through iframe or JavaScript injection.

Web Theme Bindings

Prerequisites

• Ensure that you have installed FDK-CLI. Refer to Getting Started for more details.

Create Extension Bindings

To create a new extension bindings, 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).

5. Choose an interface for your Bindings.

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

Directory Structure

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

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: [],
};

Create a Draft Bindings

Creating a draft bindings 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 bindings 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 the theme editor in your development company.

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

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

5. Click Save. You will see the changes live in your storefront.

Publish Bindings

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 following command to publish extension section bindings:

   fdk binding publish

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

2. Provide the necessary information to proceed with publishing.

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

Preview Bindings Locally

You can preview the changes to your bindings code locally before creating a draft or publishing a bindings. 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 bindings.

3. Enter the port and tunnel URL during the prompt.

4. Select the sales channel where you wish to preview your changes. Ensure the extension is installed and the section is added to the storefront.

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