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:

1. Create a folder inside your default joomla template : “templates/your-template/libraries/quixnxt/visual-builder/elements”
2. 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.

{{ style.css(selector, property, value); }}   Description :  string $selector, string $property, $value = nul Ex:  {{ style.css( id ~ ' .qx-alert-heading', 'color', headingColor) }}

{{ style.raw(rules); }}   Description :  string $rules Ex:  {% set rawCss = advanced.custom_css.code %} {{ style.raw(rawCss) }}

{{ style.margin( selector, field); }}   Description :  string $selector, array $field Ex: {{ style.margin(id, styles.spacing_fields_group.margin) }}

{{ style.padding( selector, field ) }}   Description :  string $selector, array $field Ex: {{ style.padding(id, styles.spacing_fields_group.padding) }}

{{ style.width( selector, field ) }}   Description :  string $selector, array $field Ex: {{ style.width(id, styles.spacing_fields_group.width) }}

{{ style.height( selector, field ) }}   Description :  string $selector, array $field Ex: {{ style.height(id, styles.spacing_fields_group.height) }}

{{ style.typography( selector, field ) }}   Description :  string $selector, array $field Ex: {{ style.typography(id, styles.spacing_fields_group.typography) }}

{{ style.border( selector, field ) }}   Description :  string $selector, array $field Ex: {{ style.border(id, styles.spacing_fields_group.border) }}

{{ style.borderWidth( selector, field ) }}   Description :  string $selector, array $field Ex: {{ style.borderWidth(id, styles.spacing_fields_group.borderWidth) }}

{{ style.borderRadius( selector, field ) }}   Description :  string $selector, array $field Ex: {{ style.borderRadius(id, styles.spacing_fields_group.borderRadius) }}

{{ style.responsiveCss( selector, field, property, unit ) }}   Description :  string $selector, $field, ?string $property, ?string $unit Ex:  {% set iconSpacing = styles.accordion_fg_icon_style.icon_spacing %} {{ style.responsiveCss(id ~ ' .wrap-accordion-title', iconSpacing, 'margin-left', 'px') }}

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:

1. Where is my new custom element ?
   Ans : You will get this on Quix with previous default elements.
2. Why is my element icon broken ?
   Ans: You need to use svg format for your elements icon.
3. Why are my options not saving ?
   Ans : Your config.twig may not be properly structured. You can also knock on our support for more.