Voog Markup

https://www.voog.com/developers/markup
Admin
Voog Markup is a template language documentation for developers to create web pages, blogs, and...
Tokens:55,147
Snippets:614
Trust Score:10
Update:7 months ago
Show doc for...
Tokens:
Raw
### Basic Voog Page Layout Example

Source: https://www.voog.com/developers/markup

A fundamental example demonstrating a basic page layout in Voog. It includes essential HTML structure, meta tags, stylesheet linking, and placeholders for dynamic content using Liquid markup.

```html
<html>
  <head>
    <title>{{ title }}</title>
    <meta name="keywords" content="{{ page.keywords }}" />
    <meta name="description" content="{{ page.description }}" />
    {% stylesheet_link "style.css" %}
    {% rss_link %}    {% site.stats_header %}
  </head>
  <body>
    <h1>Welcome to Voog!</h1>
    {% content name="maincontent" %}    {% site.analytics %}
  </body>
</html>
```

--------------------------------

### Voog Image Sizes Data Structure Example (JSON)

Source: https://www.voog.com/developers/markup/objects/image

This example shows the structure of the `page.image.sizes` array in Voog. It includes objects for each image size variant, detailing its URL, height, and width. The variants include original, '_huge' (2048px), '_large' (1280px), and '_block' (600px) from the longer side.

```json
| "page.image.sizes": [
---|---
|  {
|    "url": "//media.voog.com/0000/0036/2450/photos/picture-of-me.jpg",
|    "height": 3200,
|    "width": 4800
|  },
|  {
|    "url": "//media.voog.com/0000/0036/2450/photos/picture-of-me_huge.jpg",
|    "height": 1365,
|    "width": 2048
|  },
|  {
|    "url": "//media.voog.com/0000/0036/2450/photos/picture-of-me_large.jpg",
|    "height": 853,
|    "width": 1280
|  },
|  {
|    "url": "//media.voog.com/0000/0036/2450/photos/picture-of-me_block.jpg",
|    "height": 400,
|    "width": 600
|  }
| ],

```

--------------------------------

### Equivalent Loop for Including Components (Voog Markup)

Source: https://www.voog.com/developers/markup/tags/include

Provides an alternative syntax to the 'include for collection' example, explicitly using a 'for' loop to iterate over 'elements' and include the 'colorbox' component for each 'element', passing the 'element' using the 'with' keyword.

```Voog Markup
{% for element in elements %}
    {% include "colorbox" with element }}
{% endfor %}
```

--------------------------------

### Static Key Access in Liquid Templating (Equivalent)

Source: https://www.voog.com/developers/markup/advanced-examples/using-variables-as-dynamic-keys

Shows the equivalent static access to the data structure demonstrated in the dynamic key example. This illustrates the direct access method that the dynamic key approach emulates. It's useful for understanding the underlying data structure being accessed.

```liquid
{{ page.data.foo.bar_1.title }}
{{ page.data.foo.bar_2.title }}
{{ page.data.foo.bar_3.title }}
```

--------------------------------

### Accessing Page Navigation and URLs

Source: https://www.voog.com/developers/markup/objects/page

Examples of how to generate links to the current page or its parent using path and URL properties.

```Liquid
<a href="{{ page.path }}">{{ page.title }}</a>
<a href="{{ page.url }}">{{ page.title }}</a>
Go <a href="{{ page.parent.url }}">up one level</a>
```

--------------------------------

### Get Product Quantity (Voog Markup)

Source: https://www.voog.com/developers/markup/ecommerce-objects/order-item

Returns the quantity of a specific product in the order. This is useful for displaying order summaries and managing inventory.

```Voog Markup
{{ quantity }}
```

--------------------------------

### Responsive Image with Multiple Variants (Voog Markup)

Source: https://www.voog.com/developers/markup/objects/image

This example demonstrates how to use Voog's `for-width-*` attribute to implement responsive images. It utilizes the `<picture>` and `<source>` elements to provide different image variants (`for-width-1024` and `for-width-600`) based on the viewport width, ensuring optimal image loading for various devices. It also includes fallback for older browsers.

```voog
| {% if article.image %}
---|---
|   <picture title="" style="position: absolute; display: block; max-width: none; width: auto; height: 100%; left: 0%; top: 0px;">
|     <!--[if IE 9]><video style="display: none;"><![endif]-->
|     <source sizes="315px" srcset="{{ article.image.for-width-1024.url }} 1024w, {{ article.image.for-width-600.url }} 600w">
|     <!--[if IE 9]></video><![endif]-->
|     <img src="{{ article.image.for-width-600.url }}" style="position: absolute; max-width: none; width: auto; height: 100%;">
|   </picture>
| {% endif %}

```

--------------------------------

### Get Product Price (Voog Markup)

Source: https://www.voog.com/developers/markup/ecommerce-objects/order-item

Returns the product price after any applicable discounts have been applied. This markup is essential for displaying accurate pricing information to customers.

```Voog Markup
{{ price }}
```

--------------------------------

### Embed Video Asset with assets_path

Source: https://www.voog.com/developers/markup/basics/variables

Provides a path to assets like videos stored in the assets directory. This example shows how to embed an MP4 video using the HTML5 video tag.

```html
<video controls>
  <source src="{{ assets_path }}/somevideo.mp4" type="video/mp4">
  I'm sorry; your browser doesn't support HTML5 video in MP4 with H.264.
</video>
```

--------------------------------

### Complete Page Template Example in HTML and Liquid

Source: https://www.voog.com/developers/markup/basic-examples/common-page

This snippet demonstrates a full HTML page structure including header, navigation, content areas, and footer. It utilizes Liquid tags for dynamic content, meta tags, stylesheets, RSS feeds, and analytics. Essential Liquid tags like `site.stats_header`, `sitejs_include`, and `site.analytics` are included for proper site functionality.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>{{ page.site_header }} - {{ page.title }}</title>
    <meta name="description" content="{{ page.description }}" />
    {% stylesheet_link "style.css" %}   
    {% rss_link %}   
    {% site.stats_header %}  
  </head>
  <body>
    <div id="header">
      <h1>{{ page.title }}</h1>
      <ul id="menu">
        {% menulink site.root_item wrapper-tag="li" %}   
        {% for item in site.menuitems %}   
          {% menulink item wrapper-tag="li" %}   
        {% endfor %}  
      </ul>
    </div>
    <div id="content">
      <div id="body">{% content %}</div>
      <div id="sidebar">{% content name="sidebar" %}</div>
    </div>
    <div id="footer">{% xcontent name="footer" %}</div>
    {% sitejs_include %}   
    {% site.analytics %}  
  </body>
</html>
```

--------------------------------

### Get first element

Source: https://www.voog.com/developers/markup/basics/filters

Retrieves the first element from an array.

```liquid
{{ blog.articles | first }}
```

--------------------------------

### Voog menubtn Example

Source: https://www.voog.com/developers/markup/tags/menubtn

This snippet demonstrates the usage of the 'menubtn' tag in Voog's developer markup. It's used to display a button indicating the number of hidden menu items, with an example of its HTML output.

```markup
| {% menubtn site.hidden_menuitems %}  
---|---  
| #=> <a href="#" class="edy-menu-hidden">5 hidden</a>  



```

--------------------------------

### Displaying Book Elements in Voog Templates

Source: https://www.voog.com/developers/markup/basic-examples/elements

This example demonstrates how to use Voog's template tags to iterate over a list of 'elements' (books in this case) and display their details. It includes basic HTML structure and uses the `{% for %}` loop and `{% addbutton %}` tag. The `{% sitejs_include %}` tag is used to include necessary JavaScript.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Element list example</title>
  </head>
   
  <body>
    {% addbutton element_type="Element" %}
    <h1>Books</h1>
    
    {% for book in elements %}
      <div class="book">
        <h2><a href="{{ book.url }}">{{ book.title }}</a></h2>
        <p>{{ book.author }} - {{ book.isbn }}</p>
        <img src="{{ book.cover_photo }}">
      </div>
    {% endfor %}
    {% sitejs_include %}
  </body>
</html>

```

--------------------------------

### Get Product Variant Descriptions (Voog Markup)

Source: https://www.voog.com/developers/markup/ecommerce-objects/order-item

Retrieves all product variant descriptions in an array format. Returns an empty array if no products have descriptions. This markup is used within the Voog platform to display product variant details.

```Voog Markup
{{ order_item.product_variant_descriptions }}
```

--------------------------------

### Layout Usage with Template Includes in Voog HTML

Source: https://www.voog.com/developers/markup/basic-examples/using-components

This example demonstrates how to integrate various template components within a main HTML layout. It includes the head, translations, menus, content areas, and footer, showcasing the structure of a typical Voog page.

```Voog HTML
<!DOCTYPE html>
<html>
  <head>
    {% include "template-head" %}
    {% include "template-translations" %}
  </head>
 
  <body>
    <div class="header">
      <h1>{{ page.title }}</h1>
      {% include "menu-main" %}
    </div>
 
    <div class="content-wrapper">
      <button>{{ translation_login }}</button>
      <button>{{ translation_register }}</button>
      <button>{{ translation_forgot }}</button>
 
      <div class="content-area">{% content %}</div>
 
      <div class="sidebar">
        {% include "menu-sub" %}
 
        <div class="content-area">{% content name="sidebar" %}</div>
      </div>
    </div>
 
    {% include "site-footer" %}
  </body>
</html>
```

--------------------------------

### Limiting and offsetting 'for' loop in Voog Markup

Source: https://www.voog.com/developers/markup/tags/for

Demonstrates how to control the number of items iterated over and the starting point using 'limit' and 'offset' parameters. 'limit' specifies the maximum number of items to process, while 'offset' defines how many items to skip from the beginning of the collection.

```Voog Markup
| 
| --|
| {% for item in collection limit: 5 offset: 10 %}
|   {{ item.name }}
| {% endfor %}
```

--------------------------------

### Create and Include a Voog Component (Voog Markup)

Source: https://www.voog.com/developers/markup/basics/components

This example demonstrates how to create a simple HTML component named 'Header' and then include it within a page template using Voog's templating language. Components help in reducing duplicate code by allowing you to define reusable pieces of template code.

```Voog Markup
<h1>My site header</h1>
```

```Voog Markup
<!DOCTYPE html>
<html>
  <body>
    {% include "Header" %}
  </body>
</html>
```

```HTML
<!DOCTYPE html>
<html>
  <body>
    <h1>My site header</h1>
  </body>
</html>
```

--------------------------------

### Retrieve latest blog articles

Source: https://www.voog.com/developers/markup/objects/site

Retrieves a specific number of the most recent blog articles using the 'latest_n_articles' accessor. This example demonstrates fetching 3 and 15 articles respectively.

```liquid
{% for article in site.latest_3_articles %}{{ article.title }}<br>{% endfor %}
{% for article in site.latest_15_articles %}{{ article.title }}<br>{% endfor %}
```

--------------------------------

### Generate Submenus with Nested Loops

Source: https://www.voog.com/developers/markup/basic-examples/navigation-menu

This example shows how to generate second-level submenus by checking if a top-level menu item is selected and then iterating through its children. It utilizes nested loops and the menulink tag to display sub-pages.

```Voog Markup
{% for level_1 in site.menuitems %}
  {% if level_1.selected? %}
    <ul id="submenu">
      {% for level_2 in level_1.children %}
        {% menulink.level_2 wrapper-tag="li" %}
      {% endfor %}
    </ul>
  {% endif %}
{% endfor %}
```

--------------------------------

### Chaining Filters (Append and Upcase) in Voog Markup

Source: https://www.voog.com/developers/markup/basics/filters

Illustrates how to chain multiple filters together in Voog Markup. This example uses the 'append' filter to add a string to another, followed by the 'upcase' filter to convert the entire result to uppercase. Chaining allows for sequential modification of data.

```markup
| {{ "foo" | append: "bar" | upcase }}  
---|---  
| #=> FOOBAR  

```

--------------------------------

### Include Component for Each Element in Array (Voog Markup)

Source: https://www.voog.com/developers/markup/tags/include

Demonstrates how to include a component for each item in an array. An array 'colors' is created by splitting a string, and then the 'colorbox' component is included for each color in the array.

```Voog Markup
{% assign colors = "red,green,blue" | split: "," %}
{% include "colorbox" for colors %}
```

--------------------------------

### Load Voog objects using markup tags

Source: https://www.voog.com/developers/markup/tags/load

Demonstrates how to fetch various content types like media sets and articles using the 'load' tag, including filtering by attributes, tags, and sorting.

```liquid
{% load media_set to "my_gallery" q.media_set.title="Foobar" %}
<h2>{{ my_gallery.title }}</h2>
{% for photo in my_gallery.photos %}
  <img src="{{photo.medium_thumbnail_url}}">
{% endfor %}
```

```liquid
{% load articles to "my_articles" q.page.id=page.id q.article.title.$starts="Event" s="article.created_at.$desc,article.id.$desc" limit=10 %}
{% for article in my_articles %}
  <div>{{ article.title }}</div>
{% endfor %}
```

```liquid
{% load articles to "my_articles" q.page.id=page.id tag="my tag" s="article.created_at.$desc,article.id.$desc" limit=10 %}
{% for article in my_articles %}
  <div>{{ article.title }}</div>
{% endfor %}
```

```liquid
{% assign my_tags = 'tag1,tag2' | split: ',' %}
{% load articles to "my_articles" q.page.id=page.id tag=my_tags limit=10 %}
{% for article in my_articles %}
  <div>{{ article.title }}</div>
{% endfor %}
```

--------------------------------

### GET /content

Source: https://www.voog.com/developers/markup/objects/content

Retrieves the structure and attributes of a content area object within the Voog platform.

```APIDOC
## GET /content

### Description
Retrieves the definition and attributes of a content area object, which represents elements like text areas, galleries, forms, or buy buttons.

### Method
GET

### Endpoint
/content

### Parameters
#### Path Parameters
- **content_id** (string) - Required - Unique ID of the specific content area object.

### Response
#### Success Response (200)
- **content_id** (string) - Unique ID of the specific content area object.
- **content_type** (string) - Type of content: content_partial, text, gallery, form, or buy_button.
- **id** (integer) - Unique ID of the content area.
- **language_id** (integer) - Unique ID of the associated language.
- **name** (string) - The name of the content area stack.
- **parent_id** (integer) - ID of the parent object.
- **parent_type** (string) - Type of the parent: language, page, article, or element.
- **parent** (object) - The parent object itself.
- **position** (integer) - The display position of the content.

### Response Example
{
  "content_id": "text_123",
  "content_type": "text",
  "id": 12345,
  "language_id": 1,
  "name": "main_content",
  "parent_id": 50,
  "parent_type": "page",
  "position": 1
}
```

--------------------------------

### GET blog.to_json

Source: https://www.voog.com/developers/markup/objects/blog

Serializes the blog object into a JSON string representation.

```APIDOC
## GET blog.to_json

### Description
Serializes the entire blog object, including its metadata and properties, into a JSON string.

### Method
GET

### Endpoint
blog.to_json

### Response
#### Success Response (200)
- **json** (string) - JSON serialized string of the blog object.

#### Response Example
{
  "title": "My Blog",
  "has_tags": true,
  "rss_url": "/blog/feed.rss"
}
```

--------------------------------

### GET /site/analytics

Source: https://www.voog.com/developers/markup/objects/site

Retrieves and renders the configured statistics service JavaScript code for the site.

```APIDOC
## GET /site/analytics

### Description
Renders the statistics service tracking code configured in the site settings. This should be placed at the end of the HTML body tag.

### Method
GET

### Endpoint
{{ site.analytics }}

### Request Example
N/A (Liquid template tag)

### Response
#### Success Response (200)
- **script** (string) - The rendered JavaScript tracking code snippet.

#### Response Example
```html
<html>
  <body>
    ...
    <script>...tracking code...</script>
  </body>
</html>
```
```

--------------------------------

### Accessing Site Keywords and Languages in HTML (Voog Markup)

Source: https://www.voog.com/developers/markup/basics/variables

Illustrates how to use the 'site' object to access site-wide information like keywords ('site.keywords') and iterate through available languages ('site.languages'). This allows for dynamic meta tag generation and language switching elements.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>{{ page.title }}</title>
    <meta name="keywords" content="{{ site.keywords }}">
  </head>
  <body>
    {% for language in site.languages %}
      <a href="{{ language.url }}">{{ language.title }}</a>
    {% endfor %}
  </body>
</html>
```

--------------------------------

### GET blog.tags

Source: https://www.voog.com/developers/markup/objects/blog

Retrieves a list of tags associated with the articles of the current blog object.

```APIDOC
## GET blog.tags

### Description
Returns a list of tags for the current blog. In public/preview mode, only published articles are considered; in editing mode, all tags are included.

### Method
GET

### Endpoint
blog.tags

### Response
#### Success Response (200)
- **tags** (array) - A collection of tag objects containing name and path properties.

#### Response Example
[
  { "name": "News", "path": "news" },
  { "name": "Tutorials", "path": "tutorials" }
]
```

--------------------------------

### GET blog.rss_url

Source: https://www.voog.com/developers/markup/objects/blog

Generates the URL for the blog's RSS feed without creating an HTML link tag.

```APIDOC
## GET blog.rss_url

### Description
Generates the URL to the RSS feed for the specified blog object.

### Method
GET

### Endpoint
blog.rss_url

### Request Example
{{ blog.rss_url }}

### Response
#### Success Response (200)
- **url** (string) - The absolute URL to the blog's RSS feed.

#### Response Example
"/blog/feed.rss"
```

--------------------------------

### Advanced menulink configuration with wrappers and classes

Source: https://www.voog.com/developers/markup/tags/menulink

Demonstrates advanced usage of menulink by applying custom CSS classes, specifying a wrapper tag, and defining state-specific classes like current-class.

```Liquid
{% assign my_class = "my-class" %}
<nav><ul>
{% for item in site.menuitems %}
  {% menulink item link-class=my_class wrapper-tag="li" wrapper-class="link" current-class="currentitem" %}
{% endfor %}
</ul></nav>
```

--------------------------------

### Load Objects (Articles, Buy Buttons, Media Sets, Product Widgets)

Source: https://www.voog.com/developers/markup/tags/load

The `load` tag is used to fetch various types of objects (articles, buy buttons, media sets, product widgets) based on provided attributes and assign them to a template variable. It supports filtering by attributes and offers optional parameters like `limit` and `tag` for further refinement.

```APIDOC
## LOAD Objects

### Description
Loads specific types of objects and assigns them into a variable that is accessible in the template. Valid types of objects are: article, articles, buy_button, buy_buttons, media_set, media_sets, product_widget, product_widgets.

### Method
Template Tag

### Endpoint
N/A (Template Tag)

### Parameters
#### Object Types
- **article**: Returns the first article found by attributes. NB! unpublished articles and articles under unpublished languages are returned only in editor mode and articles under password protected blog pages are returned only when user has logged in.
- **articles**: Returns a list of articles found by attributes or an empty list if none match.
- **buy_button**: Returns the first buy button matching the attributes or no object in case of no match.
- **buy_buttons**: Returns a list of buy buttons matching the attributes or an empty list in case of no matches.
- **media_set**: Returns the first media set found by attributes or no object when it cannot find any.
- **media_sets**: Returns a list of media sets found by the attributes or an empty list if none match.
- **product_widget**: Returns the first product widget matching the attributes or no object in case of no match.
- **product_widgets**: Returns a list of product widgets matching the attributes or an empty list in case of not matches.

#### Optional Attributes
- **limit** (integer) - Limits returned list length. Applies to `articles` and `media_sets`.
- **tag** (string or array) - Limits returned list by article tag. Applies to `article` and `articles`.
- **q.[object_type].[attribute]** (string) - Filter by specific attributes of the object type (e.g., `q.article.title.$starts="Event"`, `q.media_set.title="Foobar"`).
- **s** (string) - Sort order for the returned list. Multiple sort criteria can be comma-separated (e.g., `s="article.created_at.$desc,article.id.$desc"`).

### Request Example
```twig
{% load media_set to "my_gallery" q.media_set.title="Foobar" %}
{% for photo in my_gallery.photos %}
  <img src="{{photo.medium_thumbnail_url}}">
{% endfor %}
```

```twig
{% load articles to "my_articles" q.page.id=page.id q.article.title.$starts="Event" s="article.created_at.$desc,article.id.$desc" limit=10 %}
{% for article in my_articles %}
  <div>{{ article.title }}</div>
{% endfor %}
```

```twig
{% load articles to "my_articles" q.page.id=page.id tag="my tag" s="article.created_at.$desc,article.id.$desc" limit=10 %}
{% for article in my_articles %}
  <div>{{ article.title }}</div>
{% endfor %}
```

```twig
{% assign my_tags = 'tag1,tag2' | split: ',' %}
{% load articles to "my_articles" q.page.id=page.id tag=my_tags limit=10 %}
{% for article in my_articles %}
  <div>{{ article.title }}</div>
{% endfor %}
```

### Response
#### Success Response (200)
Variables assigned in the template context containing the requested objects.

#### Response Example
(Response is directly assigned to a template variable, no direct JSON response)

```

--------------------------------

### Site Configuration and Assets

Source: https://www.voog.com/developers/markup/objects/site

Access site-wide configurations like header, favicon status, static asset host, and search functionality.

```APIDOC
## Site Configuration and Assets Accessors

### Description
These accessors provide access to site-wide configurations, assets, and features.

### Method
GET (Implicit through templating)

### Endpoint
N/A (Used within Voog templates)

### Parameters
None

### Request Example
```twig
{% if site.has_favicon? %}
  <link rel="icon" href="/favicon.ico">
{% endif %}

{{ site.header }}

<script src="{{ site.static_asset_host }}/libs/edicy-search/latest/edicy-search.js"></script>
{% if search.enabled %}
  <form class="search-form">
    <input type="search"/>
  </form>
{% endif %}
```

### Response
#### Success Response (200)
- **header** (string) - The site header content.
- **has_favicon?** (boolean) - Returns `true` if the site has an uploaded favicon.
- **static_asset_host** (string) - The URL for the static asset server.
- **search.enabled** (boolean) - Returns `true` if search functionality is enabled for the site.
- **stats_header** (string) - Header code content configured under site settings.
- **to_json** (string) - Serializes the site object into a JSON string.
- **url** (string) - The URL for the current site.

#### Response Example
```json
{
  "header": "<header>My Website Header</header>",
  "has_favicon?": true,
  "static_asset_host": "https://static.voog.com",
  "search.enabled": true,
  "stats_header": "<!-- Google Analytics -->",
  "to_json": "{\"site_name\": \"Example Site\"}",
  "url": "https://www.example.com"
}
```
```

--------------------------------

### Get Tax Rate (Voog Markup)

Source: https://www.voog.com/developers/markup/ecommerce-objects/order-item

Returns the tax rate applied to an order row. This markup is useful for understanding the tax breakdown of an order.

```Voog Markup
{{ tax_rate }}
```

--------------------------------

### Get Tax Amount (Voog Markup)

Source: https://www.voog.com/developers/markup/ecommerce-objects/order-item

Returns the total tax amount for a specific order row. This is important for financial reporting and customer clarity on taxes.

```Voog Markup
{{ tax_amount }}
```

--------------------------------

### Get Subtotal Amount (Voog Markup)

Source: https://www.voog.com/developers/markup/ecommerce-objects/order-item

Returns the total sum of an order row before tax, but after discounts have been applied. This provides a clear view of the order subtotal.

```Voog Markup
{{ subtotal_amount }}
```

--------------------------------

### Include Component with Local Variables (Voog Markup)

Source: https://www.voog.com/developers/markup/tags/include

Shows how to include a component and pass optional local variables to it. These variables are accessible within the included component, with some variables like 'lang' reflecting context-specific values.

```Voog Markup
{% include "mycomponent" local1: "foo", local2: "bar", lang: page.language_code %}
```

--------------------------------

### Include Component for Collection Elements (Voog Markup)

Source: https://www.voog.com/developers/markup/tags/include

Explains how to include a component for each element in a collection named 'elements'. Inside the include, the current element is available as 'colorbox', allowing access to its attributes like 'title'.

```Voog Markup
{% include "colorbox" for elements %}
```

--------------------------------

### Get Editor Interface Language with editor_locale

Source: https://www.voog.com/developers/markup/basics/variables

Retrieves the language code of the editor's user interface when in edit mode. Returns 'nil' if in preview mode or logged out.

```twig
{% if editor_locale == 'en' %}
  <Edit mode message for editor with English interface.
{% endif %}
```

--------------------------------

### Iterate over site blogs and articles

Source: https://www.voog.com/developers/markup/objects/site

Demonstrates how to loop through all visible blogs on a site and display their respective articles. It accesses the 'site.blogs' collection and iterates through nested article objects.

```liquid
{% for blog in site.blogs %}
  <h2>{{ blog.page.title }}</h2>
  {% for article in blog.articles %}
    {{ article.title }}<br/>
  {% endfor %}
{% endfor %}
```

--------------------------------

### Include Component in Template (Voog Markup)

Source: https://www.voog.com/developers/markup/tags/include

Demonstrates how to include a component named 'header' into an HTML template using the 'include' tag. The content of the 'header' component is then rendered within the template.

```Voog Markup
{% include "header" %}
```

--------------------------------

### Configure invisible and titled content areas

Source: https://www.voog.com/developers/markup/tags/content

Examples of using the invisible attribute to hide content areas until triggered, and setting custom titles and tooltips for the UI.

```Liquid
{% content invisible="true" %}
{% content title="Shared content" %}
{% content title_tooltip="Add shared content here" %}
```

--------------------------------

### Get and Edit Element Title

Source: https://www.voog.com/developers/markup/objects/element

Retrieves the title of an element. This property can be made user-editable directly within the template using the 'editable' tag. The title must be present and editable for the object to be saved.

```voog_markup
{% editable element.title %}
```

--------------------------------

### Advanced Logical Comparisons and Containment Checks

Source: https://www.voog.com/developers/markup/tags/if

Provides examples of advanced conditional logic including equality checks, logical 'and' operators, and checking for values within strings or arrays.

```Voog Markup
{% if element.email != '' %}
  {{ element.email }}
{% endif %}

{% if element.name == 'peter' and element.name != 'John' %}
  Hello you, Non-John Peter!
{% endif %}

{% if articles.size < 1 %}
  No articles to display
{% endif %}

{% if array contains 'foo' %}
  There is a 50/50 chance that this array also contains "bar" :)
{% endif %}

{% if some_string contains 'hello' %}
  String contains "hello"
{% endif %}
```

--------------------------------

### Include Component with 'with' Keyword (Voog Markup)

Source: https://www.voog.com/developers/markup/tags/include

Illustrates using the 'with' keyword to pass data to an included component. The data passed with 'with' becomes the primary variable within the component, named after the component itself (e.g., 'colorbox').

```Voog Markup
{% include "colorbox" with "red" %}
```

--------------------------------

### Loop Through Latest Articles (Voog Markup)

Source: https://www.voog.com/developers/markup/objects/article

Iterates through the latest 10 articles on the site, displaying the title of each article. This is a basic example of using the `site.latest_articles` accessor and a `for` loop in Voog markup.

```Voog Markup
| {% for article in site.latest_articles %)
---|---
|   <b>{{ article.title }}</b><br>
| {% endfor %}

```

--------------------------------

### Iterate and Render Articles with Components

Source: https://www.voog.com/developers/markup/basics/components

Demonstrates using a loop in a template to iterate over site articles and rendering each using an 'Article' component. The component automatically accesses the 'article' variable from the parent scope.

```Liquid
<!DOCTYPE html>
<html>
  <body>
    {% for article in site.latest_articles %}
      {% include "Article" %}
    {% endfor %}
  </body>
</html>
```

```Liquid
<h2>{{ article.title }}</h2>
<p>{{ article.excerpt }}</p>
```

--------------------------------

### Display Product Thumbnail Image (Voog Markup)

Source: https://www.voog.com/developers/markup/objects/image

This Voog Markup snippet shows how to conditionally display a product's thumbnail image. It checks if `product.image.thumbnail` exists and, if so, renders an `<img>` tag using the `schemeless_url` attribute. This is useful for displaying small preview images.

```voog
| {% if product.image.thumbnail %}
---|---
|   <img src="{{ product.image.thumbnail.schemeless_url }}">
| {% endif %}

```

--------------------------------

### Get Unique Elements from Array with uniq

Source: https://www.voog.com/developers/markup/basics/filters

The `uniq` filter returns an array containing only the unique elements from the input array. It can also be used to find unique objects based on a specific property. It takes an array or a string (which is split into an array) as input, and optionally a property name.

```markup
| {% assign fruitsArray = "orange,apple,orange,banana,banana" | split: "," %}  
---|---  
| {{ fruitsArray | uniq | join: ", " }}  
| #=> orange, apple, banana  
| {% for tag in site.language_tags | uniq: "name" %}  
---|---  
|   {{ tag.name }}<br/>  
| {% endfor %}
```

--------------------------------

### Product Variant Description Structure (Voog Markup)

Source: https://www.voog.com/developers/markup/ecommerce-objects/order-item

Illustrates the expected structure of product variant descriptions when returned by the `order_item.product_variant_descriptions` markup. Each variant is an object with 'name' and 'value' properties.

```Voog Markup
| [
|   {
|     "name": "Color",
|     "value": "Blue"
|   },
|   {
|     "name": "Size",
|     "value": "M"
|   }
| ]
```

--------------------------------

### Create main navigation menu

Source: https://www.voog.com/developers/markup/basic-examples/using-components

Generates the primary site navigation list. It iterates through visible menu items and provides administrative controls for hidden items and adding new pages when in edit mode.

```Liquid
<nav class="menu-main">
  <ul class="menu">
    {% unless site.root_item.hidden? %}
      {% menulink site.root_item wrapper-tag="li" %}
    {% endunless %}

    {% for item in site.visible_menuitems %}
      {% menulink item wrapper-tag="li" %}
    {% endfor %}
    {% if editmode %}
      {% if site.hidden_menuitems.size > 0 %}
        <li>{% menubtn site.hidden_menuitems %}</li>
      {% endif %}
      <li>{% menuadd %}</li>
    {% endif %}
  </ul>
</nav>
```

--------------------------------

### Filter Elements by Page Path Prefix in Voog Markup

Source: https://www.voog.com/developers/markup/tags/elementscontext

Use 'edicy_page_path_prefix' to display elements associated with pages whose paths start with a given prefix. This includes child pages. It requires the 'elementscontext' tag and iterates through the 'elements' collection.

```Voog Markup
{% elementscontext edicy_page_path_prefix="products/blenders" %}
  {% for element in elements %}
    <p><a href="{{ element.url }}">{{ element.title }}</a></p>
  {% endfor %}
{% endelementscontext %}
```

--------------------------------

### Retrieve latest blog articles using Liquid

Source: https://www.voog.com/developers/markup/objects/blog

Demonstrates how to iterate through the 15 most recent articles in a blog using the latest_n_articles accessor pattern.

```Liquid
{% for article in blog.latest_15_articles %}
  {{ article.title }}
{% endfor %}
```

--------------------------------

### Multi-Level Submenu with Edit Mode Features

Source: https://www.voog.com/developers/markup/basic-examples/navigation-menu

This complex example generates a multi-level submenu (up to three levels) and includes conditional rendering for edit mode. It displays hidden children and provides options to add new sub-items at different levels.

```Voog Markup
<ul class="level-1-menu">
  {% for level_1 in site.menuitems_with_hidden %}
    <li class="level-1-item">
      {% menulink level_1 %}   
      {% if level_1.selected? %}   
        {% if editmode or level_1.children? %}  
          <ul class="level-2-menu">
            {% for level_2 in level_1.visible_children %}  
              <li class="level-2-item">
              {% menulink level_2 %}  
              {% if level_2.selected? %}   
                {% if editmode or level_2.children? %}  
                  <ul class="level-3-menu">
                    {% for level_3 in level_2.visible_children %}  
                      <li class="level-3-item">{% menulink level_3 %}</li>  
                    {% endfor %}  
                    {% if editmode %}   
                      {% if level_2.hidden_children.size > 0 %}  
                        <li>{% menubtn level_2.hidden_children %}</li>  
                      {% endif %}  
                      <li>{% menuadd parent="level_2" %}</li>  
                    {% endif %}  
                  </ul>  
                {% endif %}  
              {% endif %}  
              </li>  
            {% endfor %}  
            {% if editmode %}  
              {% if level_1.hidden_children.size > 0 %}  
                <li>{% menubtn level_1.hidden_children %}</li>  
              {% endif %}  
              <li class="last">{% menuadd parent="level_1" %}</li>  
            {% endif %}  
          </ul>  
        {% endif %}  
      {% endif %}  
    </li>  
  {% endfor %}  
</ul>
```

--------------------------------

### Iterate and Render Blog Articles in Liquid

Source: https://www.voog.com/developers/markup/objects/article

Demonstrates how to loop through an array of articles on a blog page template and output their titles and body content using Liquid syntax.

```liquid
{% for article in articles %}
  <h1>{{ article.title }}</h1>
  <div>
    {{ article.body }}
  </div>
{% endfor %}
```

--------------------------------

### Unless Conditional Tag Example

Source: https://www.voog.com/developers/markup/tags/unless

Demonstrates the usage of the 'unless' conditional tag in Voog's templating language. This tag executes code when a condition is false, providing an inverse logic to the 'if' tag. It's useful for displaying content based on specific criteria not being met.

```Voog Markup
{% unless x < 0 %} x is greater than zero {% endunless %}
```

--------------------------------

### Product Price API

Source: https://www.voog.com/developers/markup/ecommerce-objects/order-item

Returns the product price after applying any applicable discounts.

```APIDOC
## GET /websites/voog_developers_markup/price

### Description
Returns the product price after applying discounts.

### Method
GET

### Endpoint
/websites/voog_developers_markup/price

### Parameters
#### Query Parameters
None

#### Request Body
None

### Response
#### Success Response (200)
- **Number** - The product price after discounts.

#### Response Example
```json
19.99
```
```

--------------------------------

### Use named cycle groups

Source: https://www.voog.com/developers/markup/tags/cycle

Shows how to define and reference named cycles to maintain multiple independent sequences of values. This is useful for alternating different sets of data simultaneously.

```Liquid
{% cycle 'fruits': 'apple', 'orange', 'banana' %}
{% cycle 'beverages': 'beer', 'soda' %}
{% cycle 'fruits': 'apple', 'orange', 'banana' %}
{% cycle 'beverages': 'beer', 'soda' %}
```

--------------------------------

### Editable Tag with Lookup Page ID Attribute

Source: https://www.voog.com/developers/markup/tags/editable

This example demonstrates using the 'editable' tag with the 'lookup_page_id' attribute. This attribute restricts the search for related elements to a specific page when in edit mode lookup forms. If not defined, related elements are searched across the entire site.

```Voog Markup
{% editable element.subcategory lookup_page_id: page.id %}
```

--------------------------------

### Iterate over order item amounts in Liquid

Source: https://www.voog.com/developers/markup/ecommerce-objects/order

Shows how to access the 'item_amounts' array to retrieve and display tax rates associated with ordered items.

```liquid
{%- for item in order.item_amounts -%}
  {{ item.tax_rate }}
{%- endfor -%}
```

--------------------------------

### Manual Menu Creation without menulink Tag

Source: https://www.voog.com/developers/markup/basic-examples/navigation-menu

This snippet illustrates how to construct a navigation menu manually by directly creating anchor tags and list items. It accesses page URLs, titles, and selection status directly from the site object properties.

```Voog Markup
<ul class="menu">
  {% unless site.root_item.hidden? %}
    <li class="menu-item">
      <a class="menu-link{% if site.root_item.selected? %} active{% endif %}" href="{{ site.root_item.url }}">{{ site.root_item.title }}</a>
    </li>
  {% endunless %}
  {% for item in site.visible_menuitems %}
    <li class="menu-item">
      <a class="menu-link{% if item.selected? %} active{% endif %}{% unless item.translated? %} untranslated fci-editor-menuadd{% endunless %}" href="{{ item.url }}">{{ item.title }}</a>
    </li>
  {% endfor %}
</ul>
```

--------------------------------

### Iterating over a range of numbers in Voog Markup

Source: https://www.voog.com/developers/markup/tags/for

Illustrates how to use the 'for' loop to iterate over a numerical range, from a specified start to end value. This is useful for generating sequences or repeating actions a set number of times. The loop variable directly represents the current number in the sequence.

```Voog Markup
| 
| --|
| {% for item in (1..10) %}
|   Item {{ item }}
| {% endfor %}
```

--------------------------------

### Initialize Edicy Tools in Voog Templates

Source: https://www.voog.com/developers/markup/tags/editorjsblock

This snippet demonstrates how to include the edicy-tools.js library within a Voog template using the editorjsblock tag. It ensures the library is loaded before executing custom initialization scripts.

```html
{% editorjsblock %}
  <script src='{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js'></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Your code here ...
    });
  </script>
{% endeditorjsblock %}
```

--------------------------------

### Product Quantity API

Source: https://www.voog.com/developers/markup/ecommerce-objects/order-item

Returns the quantity of items for a product.

```APIDOC
## GET /websites/voog_developers_markup/quantity

### Description
Returns the quantity of items.

### Method
GET

### Endpoint
/websites/voog_developers_markup/quantity

### Parameters
#### Query Parameters
None

#### Request Body
None

### Response
#### Success Response (200)
- **Integer** - The quantity of the product.

#### Response Example
```json
5
```
```

--------------------------------

### Basic 'for' loop iteration in Voog Markup

Source: https://www.voog.com/developers/markup/tags/for

Demonstrates the fundamental usage of the 'for' loop to iterate over a collection and access item properties. It also shows how to display the current index of the item within the loop. This is a core feature for displaying lists of data.

```Voog Markup
| {% for item in collection %}
| --|
|   {{ forloop.index }}: {{ item.name }}
| {% endfor %}
```

--------------------------------

### Iterate values with cycle in Liquid loops

Source: https://www.voog.com/developers/markup/tags/cycle

Demonstrates how to use the cycle tag within a for loop to alternate CSS classes or values. The cycle automatically resets or continues based on the loop index.

```Liquid
{% for item in items %}
  <div class="{% cycle 'red', 'green', 'blue' %}"> {{ item }} </div>
{% endfor %}
```

--------------------------------

### Include Stylesheet with stylesheets_path

Source: https://www.voog.com/developers/markup/basics/variables

Generates a link to a stylesheet file located in the stylesheets directory. This is a fundamental way to apply CSS to web pages.

```html
<link rel="stylesheet" href="{{ stylesheets_path }}/style.css">
```

--------------------------------

### Conditional Rendering with if, elsif, and else in Voog

Source: https://www.voog.com/developers/markup/tags/if

Demonstrates basic conditional logic using the 'if' tag. It shows how to toggle content visibility based on user authentication status and numeric comparisons.

```Voog Markup
{% if editmode or previewmode %}
  Visible for logged in users
{% else %}
  Visible for everyone else
{% endif %}

There are {% if count < 5 %}less than{% elsif count > 5 %}more than{% else %}exactly{% endif %} 5 items.
```

--------------------------------

### Execute template block within a specific blog context

Source: https://www.voog.com/developers/markup/tags/blogcontext

The blogcontext tag sets the 'blog' variable to the blog located at the provided path for the duration of the block. If the blog is not found or the path is invalid, the block content is not rendered.

```Liquid
{% blogcontext "my_blog" %}{{ blog.rss_url }}{% endblogcontext %}
```

```Liquid
{% blogcontext "another_blog" %}{{ blog.rss_url }}{% endblogcontext %} - {{ blog.rss_url }}
```

--------------------------------

### Menu Item Properties and Methods

Source: https://www.voog.com/developers/markup/objects/menu-item

A collection of methods and properties available on menu item objects to retrieve page information, visibility status, and child relationships.

```APIDOC
## Menu Item Object Reference

### Description
Provides access to page metadata, navigation status, and hierarchical relationships for menu items.

### Properties
- **title** (string) - Returns the menu title, falling back to the page title.
- **path** (string) - Returns the relative path for the page.
- **url** (string) - Returns the full URL of the page.
- **page_id** (integer) - Returns the unique identifier for the page.
- **content_type** (string) - Returns the content type of the associated page.
- **layout_title** (string) - Returns the name of the page's layout.
- **data** (object) - Returns custom data associated with the page.

### Status Methods
- **children?** (boolean) - Returns true if the item has visible, translated children.
- **current?** (boolean) - Returns true if the item is the current page.
- **hidden?** (boolean) - Returns true if the page is hidden from the menu.
- **link?** (boolean) - Returns true if the page is an external link.
- **private?** (boolean) - Returns true if the page is password protected.
- **selected?** (boolean) - Returns true if the page or its descendants are active.
- **translated?** (boolean) - Returns true if the item is translated.

### Child Navigation Methods
- **visible_children** (array) - Returns all visible child menu items.
- **hidden_children** (array) - Returns all hidden child menu items.
- **children_with_hidden** (array) - Returns all children including hidden items.

### Serialization
- **to_json** (string) - Serializes the menu item into a JSON string.

### Response Example
{
  "title": "About Us",
  "url": "/about",
  "hidden": false,
  "children": []
}
```

--------------------------------

### Generate Top-Level Navigation Menu

Source: https://www.voog.com/developers/markup/basic-examples/navigation-menu

This snippet demonstrates how to create a basic top-level navigation menu by looping through site.menuitems. It uses the menulink tag to generate links for each menu item, wrapping them in list items.

```Voog Markup
<ul id="menu">
  {% menulink site.root_item wrapper-tag="li" %}
  {% for item in site.menuitems %}
    {% menulink.item wrapper-tag="li" %}
  {% endfor %}
</ul>
```

--------------------------------

### Generate Language Selection Menu with Liquid

Source: https://www.voog.com/developers/markup/basic-examples/language-selection

This snippet iterates over the site.languages object to create a list of links for site translations. It includes conditional logic to highlight the active language and provides an interface for adding new languages when in edit mode.

```liquid
{% if editmode or site.has_many_languages? %}
  <ul class="langmenu">
    {% for language in site.languages %}
      <li{% if language.selected? %} class="active"{% endif %}>
        <a href="{{ language.url }}"{% if language.selected? %} class="active"{% endif %}>{{ language.title }}</a>
      </li>
    {% endfor %}
    {% if editmode %}
      <li>{%languageadd%}</li>
    {% endif %}
  </ul>
{% endif %}
```

--------------------------------

### Render Blog Articles Template in Voog

Source: https://www.voog.com/developers/markup/basic-examples/blog-page

This template uses the 'blog.articles' collection to iterate through posts. It displays the article title, formatted creation date, author name, and an excerpt with a link to the full article.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>{{ page.title }}</title>
    {% stylesheet_link "style.css" %}
    {{ blog.rss_link }}
  </head>

  <body>
    <h1>Welcome to my Blog!</h1>

    {% for article in blog.articles %}
      <h2>{{ article.title }}</h2>
      <p class="article_date">
        Created on {{ article.created_at | date : "%d.%m.%Y" }}
        by {{ article.author.name }}
      </p>
      <p>{{ article.excerpt }} | <a href="{{ article.url }}">Read full article...</a></p>
    {% endfor %}

    <hr>
    <a href="{{ blog.rss_url }}">Subscribe to RSS feed</a>
    {% sitejs_include %}
  </body>
</html>
```

--------------------------------

### Retrieve latest blog articles

Source: https://www.voog.com/developers/markup/objects/site

Fetches a specific number of the most recent blog articles, ordered by creation date. The 'n' in the accessor represents the quantity of articles to return.

```Liquid
{% for article in site.latest_3_articles %}
  {{ article.title }}<br/>
{% endfor %}

{% for article in site.latest_15_articles %}
  {{ article.title }}<br/>
{% endfor %}
```
Tokens:
Raw