# 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 %}