Skip to main content

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.
It also allows sellers to customize and augment their storefront themes with extensions crafted by developers. The support extends to frontend enhancements, using iframe and JavaScript based widgets that enrich the user experience directly on the storefront, and backend improvements through data synchronization and API integrations. You can do the Storefront Bindings in two ways:

  1. ScriptTag Bindings
  2. Web Theme Bindings

ScriptTag Bindings

To display product highlights and price drop labels on the theme, custom JavaScript may be necessary. Do the following steps to create a ScriptTag:

  1. Go to the Fynd Partner panel.
  2. In the left pane, click Extensions and select the extension you want to configure.
  3. Go to the Extension Setup and ensure that the extension URL and permissions are correctly configured.
  4. In the Bindings section, click Manage.
  5. In the upper-right side of the window, click Add to create new bindings.
  6. Select Storefront in Interface Area dropdown list.
  7. Select ScriptTag from the Binding Type dropdown list.
  8. Enter a name for the bindings.
  9. Enter the wrapper code. For example, <div id="product-price-drop"></div>.
  10. Select Allow on all pages checkbox if you need to highlight all pages.
  11. Select where you need to show the product highlight from the dropdown list.
  12. Click Add.

Web Theme Bindings

Prerequisites

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

Step 1: Create a New 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.

  1. Select the appropriate extension from the list.
  2. Enter a name for your Binding. For example, product-binding.
  3. Select the framework you are using (React or Vue 2).
  4. Choose an interface for your Bindings.

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

Folder Structure for Default Theme

image

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 should see in the Section (React Section, Vue 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: [],
};

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

  1. 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.
  2. Navigate to the theme editor in your development company and click Add Section.
  3. Select the bindings you have created to see a live preview of the section.
  4. Click Save. You will see the changes live in your storefront.

Step 3: 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 followindg command to publish extension section bindings:
fdk binding publish

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

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

Step 4: 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.

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


Was this section helpful?