Create new element
My Element for Quix
Audience: Developer
To create and load a custom Quix element we need to register it first and there are few ways to register a new custom quix element:
- Create a folder inside your default joomla template : “templates/your-template/libraries/quixnxt/visual-builder/elements”
- Create a system plugin and register quix through a function hook.
Now, Let’s create your own quix element plugin. Here are more details to do it. You just need to follow the steps :
Step 1: Generate an idea. Suppose, Here we are going to implement a simple Blockquote element for Quix.
Step 2: Make a directory “plg_quix_myelement”.
Step 3: We need a few files by default like language, installer.php, config.xml and a few more files. Click here to get that template.
Step 4: Hope you get the zip file. Now, Please extract this file and go to the elements folder.
Step 5: Create a directory for your element. Here, I'm gonna make a Blockquote Element. So, I made a directory named “MyBlockquote”.
Folder structure:
Step 6: Now we are ready to build our new element. Let's create folders like this tree
MyBlockquote/
├── config.yml
├── element.php
├── element.svg(logo)
└── partials/
├── html.twig
└── style.twig
Explain:
On config.yml,
we need to define the pre-defined config for our element. For each element, we will need a config.yml file.
On html.twig,
we need to define the html structure of our element. For each element, we need a html.twig file.
On style.twig,
we need to define the style structure of our element. For each element, we need a html.twig file.
Now, we are ready to create our own element. Here, we will describe an example code for a Simple Blockquote.
Config Example:
name: My Blockquote slug: qx-blockquote groups: general helpId: form: general: - name: blockquote_fg_text label: Blockquote type: fields-group status: open schema: - name: author label: author type: text value: Mr. Mozumder - name: content label: Content type: editor value: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. - name: type label: Type type: select value: qx-blockquote-primary options: qx-blockquote-primary: Primary qx-blockquote-secondary: Secondary qx-blockquote-success: Success qx-blockquote-danger: Danger qx-blockquote-warning: Warning qx-blockquote-info: Info qx-blockquote-light: Light qx-blockquote-dark: Dark styles: - name: blockquote_fg_alignment_style label: Alignment type: fields-group status: open schema: - name: nalignment label: Alignment type: choose value: desktop: left tablet: left phone: left options: left: label: Left icon: qxuicon-align-left center: label: Center icon: qxuicon-align-center right: label: Right icon: qxuicon-align-right justify: label: Justify icon: qxuicon-align-justify - name: blockquote_fg_author_style label: author type: fields-group schema: - name: author_color label: Color type: color - name: author_font label: Typography type: typography popover: true - name: blockquote_fg_content_style label: Content type: fields-group schema: - name: content_color label: Color type: color - name: content_font label: Typography type: typography popover: true
To use this config, we need to assign the value based on tree structure. Here is the accessing process of config value.
An example of accessing a block of config:
form: general: - name: blockquote_fg_text label: Blockquote type: fields-group status: open schema: - name: author label: author type: text value: Mr. Mozumder
Accessing author for twig template :
general.blockquote_fg_text.author
Basic twig variable :
Twig application passes variables to the templates for manipulation in the template. Variables may have attributes or elements you can access, too. The visual representation of a variable depends heavily on the application providing it.
Use a dot (.) to access attributes of a variable (methods or properties of a PHP object, or items of a PHP array):
{{ foo.bar }}
Where, foo is an object and bar is a property of ‘foo’ object.
HTML in Twig:
An example of html.twig:
{% set id=advanced.identifier.id %} {% set class=advanced.identifier.class %} {% set content = general.blockquote_fg_text.content %} {% set author = general.blockquote_fg_text.author %} {% set textType = general.blockquote_fg_text.type %} {% set classes = classNames('qx-element qx-element-myblockquote qx-myblockquote', visibilityClass(visibility), textType,class) %} {% set animation = advanced.animation_fields_group.animation %} {% set animationRepeat = advanced.animation_fields_group.animation_repeat %} {% set animationDelay = advanced.animation_fields_group.animation_delay %} {% set background = advanced.background_fields_group.background %} {% set text = general.blockquote_fg_text.content %} {% embed "animation.twig" with { "id" : id, "classes" : classes, "animation" : animation, "animationRepeat" : animationRepeat, "animationDelay" : animationDelay, "background" : background } %} {% block element %} <div> {% if content %} <blockquote class="qx-blockquote__content"> {{ content }} </blockquote> {% endif %} {% if author %} <span class="qx-blockquote-author"> {{author}} </span> {% endif %} </div> {% endblock %} {% endembed %}
Note : Change only necessary parts. Follow twig templating documentation.
Style in twig:
An example of style.twig:
{% include 'global.twig' %} {% set id = '#' ~ advanced.identifier.id %} {% set alignment = styles.blockquote_fg_alignment_style.alignment %} {% set headingFont = styles.blockquote_fg_author_style.author_font %} {% set headingColor = styles.blockquote_fg_author_style.author_color %} {% set contentFont = styles.blockquote_fg_content_style.content_font %} {% set contentColor = styles.blockquote_fg_content_style.content_color %} {% set authorSelector = id ~ ' .qx-blockquote-author' %} {% set contentSelector = id ~ ' .qx-blockquote__content' %} {# Alignment #} {{ style.alignment(id, alignment) }} {# Typography #} {{ style.typography(authorSelector, headingFont) }} {{ style.css( authorSelector, 'color', headingColor) }} {# Content #} {{ style.typography(contentSelector, contentFont) }} {{ style.css( contentSelector, 'color', contentColor) }} {{ style.load(id) }}
Note : Change only necessary parts. Follow twig templating documentation.
Our style functions for twing:
You can use this methods to render your element.
|
|
|
|
|
|
|
|
|
|
|
Step 7: Ok, hope your element is ready. Now, you just need to make a zip file and install it on your Joomla site.
Step 8: Go to system>plugins through joomla Menu.
Step 9: Enable “Quix - MyElement” and “Quix - Builder Elements. You can search by the “Quix”.
Step 10: Now go the Quix - Page Builder and click on the settings icon to enable “Development Mode”.
Step 9: Now make sure your “Development Mode” is On.
Step 10: One last step before you go: Clear your cache or make a hard reload.
Now, you are ready to use your custom element. You will get this element with quix elements.
FAQ’s:
- Where is my new custom element ?
Ans : You will get this on Quix with previous default elements. - Why is my element icon broken ?
Ans: You need to use svg format for your elements icon. - Why are my options not saving ?
Ans : Your config.twig may not be properly structured. You can also knock on our support for more.