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 two content types called Discount Codes and Product for this use case. The Discount Codes content type will contain the varying information you can 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. In the left-hand side primary navigation, click the Marketplace icon to go to the Marketplace.
      
      
   3. Click Apps from the left panel.
   4. Within the Marketplace, you can see all the available apps. Hover over the Variables app and click the Install App button.
      
   5. In the popup window, select the stack where you want to install the Variables app and click the Install button.
      
   6. To configure your plugin, enter the Content Type UID from which data for the variable will be rendered, and the Field name.
      
   7. On the UI Locations tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.

   Additional Resource: For more information on UI locations, please refer to the Installed Apps guide.

   8. Click the Save button.
   9. Click Open Stack 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 the Insert a field link represented by a + sign.
   4. Under Select Plugin, select the Variables plugin, and click the Add Plugin(s) button.
   
   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 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 looks as follows:
   

   

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