Variables Plugin Usage Guide

Variables plugin allows you to insert and configure varying values fetched from the referred content types within your JSON Rich Text Editor.

Consider a scenario where you have varying information on your ecommerce website. Changing every entry containing this varying content can be time-consuming. In this case, the Variable plugin can be helpful. Add the data for different variables to a content type, and refer these varying values within the JSON Rich Text Editor in multiple content types. This helps change the variable data in a centralized location instead of editing the content for various entries.

Prerequisites

• Contentstack account
• Access to the Contentstack Organization/ Stack as the Owner/ Admin

This step-by-step guide explains how to set up and use the Variables plugin within your JSON Rich Text Editor in Contentstack.

Setting Up and Using the Variables Plugin

The steps to set up and use the Variables plugin are as follows:

1. Create a Content Type to Render Variable Data
2. Install and Configure the Variables Plugin
3. Add the Variables Plugin within your JSON Rich Text Editor

1. Create a Content Type to Render Variable Data

   Let's create a content type called Discount Codes for this use case. This content type will contain the varying information you will use within different JSON RTEs. The content type from which you render your variable content must match the following structure:

   

   Note: Your variable data content type must have a Group field set to type Multiple containing a Title field with the UID as title.

   Create an entry for this content type as given below:

   After you have created the content type with an entry from which you are rendering variable content, let's configure the Variables plugin.

2. Install and Configure the Variables Plugin

   Follow the steps below to install the application in Contentstack.

   1. Log in to your Contentstack account.
   2. On the left-hand-side primary navigation, you will find a new icon for Marketplace (as shown below). Click the icon to go to the Marketplace. 
      
   3. Within the Marketplace, you will be able to see all the apps available, hover over the Variables app and click Install App. 
      
   4. In the popup window, select the stack where you want the Variables app to be installed and click Install.
   
   5. To configure your plugin, enter the Content Type UID from which data for the variable will be rendered, and the Field name.
   
   6. Click Save and then click the Open Stack button to start using the plugin within your stack.

3. Add the Variables Plugin within your JSON Rich Text Editor

   1. Go to your stack and click the “Content Models” icon on the left navigation panel, and click the + New Content Type button.
   2. Create a content type by adding relevant details and click the Save and proceed button.
   
   3. In the Content Type Builder page, add a JSON Rich Text Editor field in your content type by clicking on the “Insert a field” link represented by a + sign.
   4. Under Select Plugin(s), select the Variables plugin.
   
   5. After adding the plugin, click Save or Save and Close to save your changes.
   
   6. Now, create an entry for the Product content type.
   7. Within your JSON Rich Text Editor, add your content and click on the Insert Variable icon to add variable data from the Discount Codes content type: 
      
   8. From the options, select the discount codes you want to add within your content and click the Add button.
   

   Your content with the variable Discount Codes data will look as follows:
   

   

   Whenever you want to change or update a discount code, you need to update the Discount Codes content type, and the change will automatically reflect in all the JSON RTEs where the discount code was referred.