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)

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

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

  

1. Category

Context: Available inside a blog_page with filter type = Category Template.

• Type: object

• Fields:

  • name → Category name (text)

  • slug → Category slug (text)

  

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

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)

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

  

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

   <h2>{{ post.name }}</h2>

   <p>{{ post.excerpt }}</p>

   {% endfor %}

5. Conditional Rendering

   Show content only if a value exists:

   {% if product.image_url %}

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