Follow

Create a Widget

Overview: Widgets are an effective tool for updating your website without having to dive into the template code.  Widgets are useful for inserting and managing content, javascript, and images throughout your site.  

Level of Difficulty: Intermediate

Follow these steps to create a Widget:

1. Navigate to Admin Tool > Site Content > My Widgets

 

2. Click the New Item button.

3. Complete the Widget form:

  • Title - This field is only used to identify your Widget within the Admin Tool.
  • Slug - Enter a slug name. This is limited to alpha-numeric characters and no empty spaces, eg. homepage-main-promo
  • Image URL - Enter the image URL of the graphic that you would like to load within your widget.  
  • Content - Enter text content for the widget. This may also include javascript and HTML.
  • Data Query - This is super-powerful.  You can enter regular expressions that query your website database.  To aid you with the queries, Acenda has a built in Query Builder. Copy & Paste the query expression that's generated from the Query Builder here.
  • Publish Date - Enter the starting date and time that you want the Widget to appear within the template.  
  • Publish Date End - Enter the ending date and time that you want the Widget to appear within the template.
  • Publish - Use the checkbox to activate the Widget.

4. Click the Save button.

Now it's time to embed/include the Widget within your template(s).  Please follow these instructions:

5. Navigate to your site's Twig templates.  For example, the homepage index.html template is located at:

Admin Tool > Themes > Templates > public > "theme name" > Views > index.html.twig

 

6. Now using the Template Editor tool, add the following code to include your Widget within the template.  You must use the exact syntax below otherwise it may break your page:

{{ api.get('widget/render',{'slug':'slug_name'}) }}

  • Replace slug_name with the Slug name that you created, eg. homepage-main-promo

 

7. Click the blue Save button above the Template Editor.

8. The Widget will now appear within your Preview Site.  However, to deploy the changes to your live site you must click the Deploy Changes button.

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk