# Data binding

Funnelish V2 now supports **Data Bindings,** a feature that **allows you to connect dynamic data** (such as blog posts, categories, and products) directly to elements on your funnels. This ensures that your content stays synchronized with your datasets without needing manual updates.

### How Data Binding Works 

Each page type (e.g., blog pages, category pages, funnel pages) provides certain datasets. Each dataset contains fields (text, images etc.). Each field can only be bound to compatible elements:

* Text fields → paragraphs, headlines, buttons, links, prices, counters) etc. 
* Image fields → image elements. 
* URLs → link targets (buttons, anchor tags, linked images).

### Available Datasets - (Blogs)

1. **Blog Post** 

**Context:** Available inside a blog\_page when the page type is Blog Post Template. 

* **Type**: object (can be attached to a section, row, container, or page). 
* **Fields**: 
  * `name` → Blog post title (text) 
  * `seo_title` → Blog post SEO title (text) 
  * `seo_description` → Blog post SEO description (text) 
  * `author_name` → Blog post author name (text) 
  * `published_by_author_on` → Blog post published at (text) 
  * `thumbnail_url` → Blog post thumbnail (image)
  * `html` → Blog post content (text/HTML) 
  * `excerpt` → Blog post excerpt (text) 
  * `url` → Blog post URL (text/link) 

{% hint style="info" %}
**Binding examples:**

* Title → Headline 
* Author name → Paragraph 
* Thumbnail → Image 
* URL → Button/link target
  {% endhint %}

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FP1FN5dJNdikSMGBywNE9%2Fimage.png?alt=media&#x26;token=8e9d0aa5-45f9-4071-a5ad-39ad1731a941" alt=""><figcaption></figcaption></figure>

2. **All Blog Posts (Collection)**

**Context**: Available in any blog\_page.

* **Type**: array (use with repeaters).
* **Configurable properties:**
  * showAll: Select between All Blog Posts or Related Blog Posts
  * category: Select a category from your blog categories
  * max: Limit how many posts to display
* **Fields** per post:
  * `name`, `author_name`, `published_by_author_on`, `thumbnail_url`, `excerpt`, `url`

{% hint style="info" %}
Binding examples:

Use with a repeater to show blog lists:

* Thumbnail → Image
* Title → Headline
* Excerpt → Paragraph
* URL → Button/Link
  {% endhint %}

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FCzGfbSSVHbBAPTb8YRlG%2Fimage.png?alt=media&#x26;token=3db69984-1d03-49cf-ad68-51e17b1ed9dc" alt=""><figcaption></figcaption></figure>

#### 3. Blog Page

**Context**: Available in any blog\_page.

* **Type**: object
* **Fields:**

  * `name` → Blog page title
  * `thumbnail_url` → Blog page thumbnail (image)
  * `url` → Blog page URL

  <figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FWFcZXoZSCMJP8jeisTlA%2Fimage.png?alt=media&#x26;token=0ee8365f-801d-4f0f-9189-87da15437377" alt=""><figcaption></figcaption></figure>

4. **Category**

**Context:** Available inside a blog\_page with filter type = Category Template.

* **Type**: object
* **Fields**:

  * `name` → Category name (text)
  * `slug` → Category slug (text)

  <figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FTprYsWtEIcwfLTPnjzNY%2Fimage.png?alt=media&#x26;token=60644085-fcf6-45d6-abf5-132aa0e5daae" alt=""><figcaption></figcaption></figure>

5. **Current Category Posts**

**Context:** Available inside blog pages with filter type = category.

* **Type**: array (for repeaters).
* Configurable properties:
  * showAll: Current category posts only
  * max: Limit number of posts
* Fields per post:
  * `name` → Blog post title (text)
  * `author_name` → Blog post author (text)
  * `published_by_author_on` → Blog post published at (text)
  * `thumbnail_url` → Blog post thumbnail (image)
  * `excerpt` → Blog post excerpt (text)
  * `url` → Blog post URL (text)

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F3f1hD1QXDboi68OX4HzX%2Fimage.png?alt=media&#x26;token=766fdd7b-f34a-42ce-a62e-32895c4ccd86" alt=""><figcaption></figcaption></figure>

### Available Datasets - (Funnels)

1. #### All Products (Collection)

   **Context**: Available in store\_funnel\_page or funnel\_page (checkout, upsell, downsell).

   * **Type**: array (for repeaters).
   * Configurable **properties**:
     * showAll: Choose product sets (Order bumps, Hidden products, Subscription products, etc.)
     * max: Limit number of products to show
   * **Fields** per product:
     * `id` → Product ID (text)
     * `name` → Product name (text)
     * `title` → Product title (text)
     * `price` → Price (text)
     * `display_price` → Displayed price (text)
     * `image_url` → Product image (image)

{% hint style="info" %}
Binding examples:

* Product image → Image
* Product name/title → Headline
* Price → Paragraph or label
* Displayed price → Paragraph&#x20;
  {% endhint %}

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FNHKsBMiysQFx4XmudUaD%2Fimage.png?alt=media&#x26;token=03dc2b6a-0bab-42ad-944d-62aa27c01046" alt=""><figcaption></figcaption></figure>

2. **Product (Current Product)**

Context: Available in checkout, upsell, or downsell pages.

* **Type**: object
* Configurable **property**: productId: - Select which product from  your funnel products.
* **Fields**:

  * `id` → Product ID (text)
  * `name` → Product name (text)
  * `title` → Product title (text)
  * `price` → Price (text)
  * `display_price` → Displayed price (text)
  * `image_url` → Product image (image)

  <figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FhBst5tfcvRGMxj8piKkd%2Fimage.png?alt=media&#x26;token=4f0aa9fa-dc5f-4fea-90cf-dd8b13705145" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

### Binding Rules (Quick Reference)

* Text fields → Headlines, paragraphs, buttons, links.
* Image fields → Image elements only.
* URLs → Links, buttons, linked images.
* Arrays → Must be used with a repeater element (to loop through each item).
* Objects → Can be bound to individual elements or groups.
  {% endhint %}

<br>

## Shared components data binding

Unlike page-level data bindings, which are defined by context and page type, **shared components data bindings work globally.** This means a component can be added to any page, and **if the required dataset exists in that context, the binding will render. Otherwise, it will not output anything.**

Funnelish V2 uses Liquid behind the scenes for component bindings. This gives you flexibility and access to a wide range of formatting options.

### How It Works

* **In components, you can use Liquid syntax to access dataset fields directly.**
* If the dataset is available in the current page context, the value will render.
* If the dataset does not exist for that page type, the expression will render nothing.

#### Example:

`{{ blogPage.name }}`

* On a blog\_page, this outputs the page title.
* On other page types, it outputs nothing.

### Practical Examples

1. **Using Defaults**

   Provide a fallback value if the field is missing or null:

   `{{ blogPage.name | default: "No name" }}`
2. #### Formatting Text

   Uppercase, lowercase, capitalize:

   `{{ blogPost.author_name | upcase }}`

   `{{ blogPost.name | downcase }}`

   `{{ blogPost.seo_title | capitalize }}`
3. #### Numbers and Prices

   `{{ product.price | prepend: "$" }}`

   `{{ allProducts[0].display_price | append: " USD" }}`
4. **Working with Arrays**

   Looping through an array (like blog posts or products):

   `{% for post in allBlogPosts %}`

   &#x20; `<h2>{{ post.name }}</h2>`

   &#x20; `<p>{{ post.excerpt }}</p>`

   `{% endfor %}`
5. #### Conditional Rendering

   Show content only if a value exists:

   `{% if product.image_url %}`

   &#x20; `<img src="{{ product.image_url }}" alt="{{ product.name }}">`

   `{% endif %}`
6. #### Combining Filters

   Chain filters for formatting:

   `{{ blogPost.published_by_author_on | date: "%B %d, %Y" | upcase }}`

### Supported Datasets in Components

All datasets documented earlier (blogPost, allBlogPosts, currentCategoryPosts, blogPage, category, allProducts, product) can be used in components with Liquid syntax.\
Just reference them by their IDs, e.g. :

* `{{ blogPost.name }}`
* `{{ allProducts[0].title }}`
* `{{ category.slug }}`<br>

{% hint style="danger" %}
If the dataset isn’t available in the current page, nothing will render.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.funnelish.com/advanced-features/data-binding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.