Optimizely Opal

https://support.optimizely.com/hc/en-us/categories/36242844454797-Optimizely-Opal
Admin
Optimizely Opal is an agent orchestration platform that empowers users to make data-driven...
Tokens:1,656
Snippets:25
Trust Score:10
Update:10 months ago
Show doc for...
Tokens:
Raw
### EJS Responsive Grid Helper

Source: https://support.optimizely.com/hc/en-us/categories/36242844454797-Optimizely-Opal/index

This EJS helper function generates responsive CSS classes for grid columns, adjusting for different screen sizes (sm, md, lg). It's used for creating adaptable layouts.

```ejs
<% var getColumnClasses = function(numberColumns) { var classNames = 'col-12'; if (numberColumns >= 2) classNames += ' sm:col-6'; if (numberColumns >= 3) classNames += ' md:col-4'; if (numberColumns >= 4) classNames += ' lg:col-3'; return classNames; } %>
```

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

### EJS Block Rendering Logic

Source: https://support.optimizely.com/hc/en-us/categories/36242844454797-Optimizely-Opal/index

This EJS code snippet iterates over a collection of 'blocks' to render them, displaying their name and description. It handles cases where a block might not have a description.

```ejs
<% if (heading) { %>
##  <%= heading %>
<% } %>
<% blocks.forEach(function(block, index) { %>
  * <% if (imageHeight) { %> <% } %>
###  <% if (!block.description) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>
<% if (block.description) { %>
<%= block.description %>
<% } %>
<% }) %>
```

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

### EJS Helper for Column Classes

Source: https://support.optimizely.com/hc/en-us/categories/36242844454797-Optimizely-Opal/index

This EJS helper function dynamically generates CSS class names for column layouts based on the number of columns specified. It's used to create responsive grid systems.

```ejs
<% var getColumnClasses = function(numberColumns) { var classNames = 'col-12'; if (numberColumns >= 2) classNames += ' md:col-6'; if (numberColumns >= 3) classNames += ' lg:col-4'; if (numberColumns >= 4) classNames += ' xl:col-3'; return classNames; } %>
```

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

### EJS Category Navigation Rendering

Source: https://support.optimizely.com/hc/en-us/categories/36242844454797-Optimizely-Opal/index

This EJS code renders navigation links for categories. It iterates through a 'categories' array and uses a partial to render article lists within each category.

```ejs
<% categories.forEach(function(category, index) { %>
  * <%= category.name %>
<%= partial('partial-article-list-sections', { id: 'category-' + category.id, parentId: '#sidebar-article-navigation', sections: category.sections, activeCategoryId: activeCategoryId, activeSectionId: activeSectionId, activeArticleId: activeArticleId, partial: partial }) %>
<% }); %>
```

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

### EJS Nested Article List Rendering

Source: https://support.optimizely.com/hc/en-us/categories/36242844454797-Optimizely-Opal/index

This EJS code recursively renders nested article lists. It iterates through sections and their sub-sections/articles, using a partial for detailed rendering and handling article display.

```ejs
<% if (sections.length) { %>
<% sections.forEach(function(section) { %>
  * <%= section.name %>
<%= partial('partial-article-list-sections', { id: 'section-' + section.id, parentId: '#' + id, sections: section.sections, activeCategoryId: activeCategoryId, activeSectionId: activeSectionId, activeArticleId: activeArticleId, partial: partial }) %> <% if (section.articles.length) { %> <% section.articles.forEach(function(article) { %>
    * <%= article.title %>
<% }); %> <% } %>
<% }); %> 
<% } %>
```

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

### EJS Section Navigation with Max Sections

Source: https://support.optimizely.com/hc/en-us/categories/36242844454797-Optimizely-Opal/index

This EJS code snippet renders navigation for categories and their sections, with a limit ('maxSections') on the number of sections displayed per category. It uses a partial for rendering section details.

```ejs
<% var maxSections = 5 %>
###  Toggle navigation menu 
<% categories.forEach(function(category, index) { %>
  * ###  <%= category.name %>
<%= partial('partial-section-list-sections', { parent: category, sections: category.sections, maxSections: maxSections, partial: partial }) %>
<% }); %>
```

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

### EJS Truncated Section List Rendering

Source: https://support.optimizely.com/hc/en-us/categories/36242844454797-Optimizely-Opal/index

This EJS code renders a list of sections, but truncates the display to a maximum number ('maxSections'). It uses a partial for rendering section details and includes a 'See more' link if there are additional sections.

```ejs
<% if (sections.length) { %>
<% sections.slice(0, maxSections).forEach(function(section) { %>
  * <%= section.name %> <%= partial('partial-section-list-sections', { parent: section, sections: section.sections, maxSections: maxSections, partial: partial }) %>
<% }); %> <% if (sections.length > maxSections) { %>
  * See more 
<% } %> 
<% } %>
```
Tokens:
Raw