1. Knowledge Base
  2. Sources & Properties

Sources

Add a reference to external data sources

This article discusses Sources in Nyla. Sources are a key concept in Nyla, enabling you to connect data to your site.
When learning about Sources, it's also to understand Properties and Filters and how they work together:
  • Sources: Connect external data to Nyla
  • Properties: Represent data from a Source to use on your site
  • Filters: Transform properties to change their output

Intro

A Source in Nyla is a reference to data that allows you to add, manipulate, and use dynamic content throughout your website. The most commonly used Sources are the Collection and Product source content items, making it easy to bring in product information from Shopify.
Adding a Source to a content block lets you use Properties of that Source in any children content items below that Source. If you use a Source within a section template, you can add a content override to the Source, allowing you to easily maintain design while changing content.
Sources.png

Types

There are three key types of Sources that are available in Nyla:
  1. Single item
  2. List
  3. Global

Single item

A single item Source is a direct reference to one entity; at its top level, this type of Source cannot be iterated over. Commonly used examples of single item Sources are Product, Article, Customer or Bundle.
Single.png

List

A List type Source provides information regarding multiple entities residing within a list. This type of Source makes it possible to iterate through a number of items, i.e. showing products in list or repeating over items within it. Examples in Nyla are a Collection, Blog category, Orders, or Product Reviews.
Model.png

Global

Nyla has a Global source that is always available. This Source includes commonly used data and states, and allows for easy access to this information via Properties. Examples of Global Properties are your site name, the customer state and core details, and certain app constants.
Global Sources and the properties within them do not need a Source content item to be accessed and can thus be used anywhere on your site. See Using global properties.
The core global properties included in Nyla are:
  • Global.Apps – global app properties
  • Global.Customer – quick access to customer properties
  • Global.Custom – global site properties for advanced user interaction
  • Global.Site – site details, like title, URL, etc.
 
Global.png

Managing Sources

The data of a Source itself is managed within the corresponding system unless otherwise stated. An example of this would be the Product Source - data is managed in Shopify. Though a product might be added to your site in Nyla with a Source content item, the data coming from the Product Source itself being accessed is managed within Shopify. This includes the following:
  • Adding, deleting, changing product details
  • Adding or removing a product from a collection

Using sources

When used on your site, Sources give you the ability to:
  1. Select the data you want to display, making any transformations before being displayed:
    1. Choose the Source item
    2. Choose specific variants of single item type Sources
    3. Limit or exclude items from model type Sources
  2. Use the dynamic data on your page and site with properties
  3. Create conditional visibility based on properties
  4. Enable states that relate to user interaction or Source specific qualities
  5. Add actions to your site, giving users the ability to interact and transform the Source
  6. Enable an empty state, giving you control of what a user sees before the data from the Source loads
  7. Connect and display ‘related’ data. Some sources enable to you access limited or advanced properties or related Sources.
 
Sources can be added to your site in 1 of 2 primary ways:
  1. Content item Source
  2. Page Source

Content item Source

Adding a Source content item will give all children content items of that Source access to the properties of that Source.
Learn more content item Source
Content item source.png

Page Source

Connecting a Source at a Page level will create a relation of that Page to a specific Source. This lets you:
  1. Link any Source content item to that Page Source
  2. Use the Source properties in your page settings to link dynamic data, i.e. name or slug
  3. Use properties of that Source within any conditional rules on your page
 
Learn more about Page Source
Page source.png
 

Source mutation

A user’s interaction with your site can change a source properties
Sources can be altered by user interaction, changing the item or items being displayed. Common source interactions are:
  • Filtering and searching a collection or source type model will show the results of that mutation.
  • If a user makes a product option select, other options may become available or unavailable
  • Products selected in a bundle will be dynamically added to a ‘Selection’ source.
  • Pagination and moving to the next or previous page of a source will change the items displayed
 
Source mutation happens automatically and can be configured within the content item responsible for changing that source.