T3element Builder

Estimated reading: 9 minutes 1462 views

How to use T3Element builder:

Login/Registration:

Open the URL https://user.t3marketplace.com/sign-in
Log in with your credentials if you are already a user.
Or create an account by registration. Here are the steps for registration.
1. Open URL https://user.t3marketplace.com/sign-up.
  
  Fill up the all details like First Name, Last Name, Email, Phone Number, Password, Confirm Password in this to complete your registration.
2. After Click on continue button you got a mail with OTP.
3. Enter OTP in below screen.
  
  Click on the “Verify and Continue” button, and your account will be verified, and your registration is completed here.
4. After registration, you will be redirected to this screen and you will see the below screen for fill required fields:
5. Hurray!! You are registered now.
6. After complete your profile you can access all other pages, Here you can change name, company name, city and country also on right side you can change password.

How to create a package:

After registration, you can create your package, and in that package, you can create your custom elements. You can add multiple custom elements in one package and you can add multiple packages too. Create your package by following below steps:
1. After registration, On the left side you can see the sidebar, just below the Dashboard tab, you’ll see the Package Builder tab. Click on it.
There are 3 tabs – Basic, Elements and Assets.
1. Basic : You will be able to add basic info from here.
2. Elements : You will be able to create custom elements from here.
3. Assets : You will be able to create a Header and footer and upload CSS and JS files from here. And also you can write custom CSS and JS.

Basic steps to create Package

Enter your package name, Vendor Name, Typo3 version and Description, and click on “Save & Next” button. The Vendor Name will be converted to lowercase and will remove the space automatically if you have entered the Vendor Name in any other case except lowercase or have added any space.
After creating the package, you will be redirected to this screen.
Without adding anything if you are clicking on “Save & Next” button you will be redirect in the Elements tab, press the button “Add New Option” to create a new element, and you will see the popup menu there.
There are 3 tabs – “Info”, “Fields” and “Template”.
1. Info: You will be able to add element name and basic details from here.
2. Fields: You will be able to add fields and manage table structure and field settings from here.
3. Template: You will be able to define template structure and configure template.

Create your custom elements:

Fill up the Info like Title, Short Title, Description, and Icon.

Description and Icon are not mandatory fields, so if you do not add the icon, it will take the default icon which is displayed on the right of the field.
After pressing “Next”, you will be redirected to this screen.

You can add elements from the available list of elements on the left side. Add an element or field by clicking on the “+” icon or drag the element and drop it into the box, that way you will add the desired fields and will create the elements, e.g. Slider, Teaser Box, CTA, etc.

Here is an example. Let’s create an element to be more clear about how to create custom elements by using T3Element Builder. Let’s create a Slider element.

Slider Element

To Create a Slider Element, we have to use the “Repeating” element.

This “Repeating” element is specially built for elements like sliders that have the same field or group of fields in a loop, like an image slider; which has an image in a loop or a slider with a group of fields that have a Title, Image and Button.
Let’s go with an example of a group of fields to create a Slider.
Each slide will contain a Title, an Image, and a Button.
Add repeating element.
Now you will see 2 tabs “General” and “Fields”.
In the General Tab, you can fill up details of the “Repeating” field as you can see in below screenshot.
In the Fields Tab, you can add fields for the slider like Title, Image, and Button. Hover over the icons and you will see the type of field.
1. Title
  1. Add “String” or “Text” type for the Title, expand the field by clicking on the arrow on the far right side, and fill up the details of fields.
2. Image
  1. Add “File”, expand the field, and fill up the details.
3. Button
  1. To add the button, you will need to add a String for the button text and a Link to link the button as you can see in the below screenshot.

Now all the required fields are added, press on the “Next” button and you will see the template which has been generated according to the fields you chose to create the Slider element.

Use the template to structure your element as you can see in the below screenshot. Save the template.

The template code is:

<div>
    <div>
        <div>
            <div>
                <div>
                    <f:if condition="{sliderelement1716975317175}">
                        <f:for each="{sliderelement1716975317175}" as="record" iteration="iteration">                            
                                <div>
                                    <h2>{record.data.title1718631893965}</h2>
                                    <div>
                                        <f:if condition='{record.slideimage1718632444436}'>
                                            <f:for each="{record.slideimage1718632444436}" as="image">
                                                <div>
                                                    <f:media file="{image}" width="400" height="375" />
                                                </div>
                                            </f:for>
                                        </f:if>
                                    </div>
                                    <div>
                                        <f:link.typolink parameter='{record.data.buttonlink1718632898015}'>
                                            {record.data.buttontext1718632882162}</f:link.typolink>
                                    </div>
                                </div>                            
                        </f:for>
                    </f:if>
                </div>
            </div>
        </div>
    </div>
</div>

You can use the above template if you want the same structure, but make sure that you are using your markers, instead of in above template code.

When you click on the “Save Template” button, you will find the element you just created in the element list as you can see in the below screenshot and you can edit or delete the element and you can edit the template file also.

As mentioned before, you can add multiple Elements in one package. Here 2 more elements are added for “Teaser box” and “CTA (call to action)” as you can see in the below screenshot of the custom element’s list.

Add assets to your package:

After creating custom elements, now add assets to the package. Here you can upload some basic assets like logo, favicon, CSS/JS files, fonts, etc.

Go to the Assets tab.
You can create a header and footer, upload CSS and JS files, and also can write custom CSS and JS.
Let’s understand by adding assets.

Add Header

Upload logo, favicon, CSS file, JS file, and fonts.

Add Footer

Add copyright text and upload a JS file for the footer.

Add Custom CSS and JS Code

Write custom CSS and JS.

All assets will be saved automatically once the package has been built.

Download the package:

After creating all the elements, and added assets now we will build the package. Click on the bottom right button to build the package.
After that, you will be redirected to the package list.
Then download the package in your system.
Now the package can be installed in your TYPO3 setup.

Package Installation:

Configurations

Open your TYPO3 setup.
1. Follow the steps below, before the extension upload to prevent any error in extension installation in the latest versions of TYPO3 (specifically 12.x.x & 13.x.x here).
  Ref.: https://forge.typo3.org/issues/100730
  
  Go to Admin Tools > Settings > Extension Configuration and click on Configure extensions
  
  Then the popup will open as seen below screenshot, in that popup go to the extensionmanager > Install extensions automatically after download from TER or file upload (basic.automatic Installation [boolean])) and uncheck the checkbox & click on the Save “extensionmanager” configuration button.

Upload extension/package and include Typoscript

Go to the Admin Tools > Extensions tab from the left sidebar. Upload the extension/package you have created with T3element Builder by following the above process.
After uploading, you will find your extension in the list of installed extensions.
Include the TypoScript for your extension.

Use the extension/package

Go to Web > Page from the left sidebar, add a new page where you want to add your custom elements and enable the page.
Now start to add custom elements by clicking on the +Content button as seen in the above screenshot and the pop-up will open as shown in the below screenshot, and then go to the “Custom Elements” tab from the left side of the pop-up.

There are already 17 custom elements created in another package so the total count is 20, but you can see the 3 highlighted elements created with mypackageone are also listed.
Let’s use the Slider element.
1. After clicking on the “Slider” element from the popup, the element will be open to let you add the data.
2. As it is seen in the above screenshot, the option is showing “Slider Element”, and it will allow you to add slides by clicking on the button “+Add Slide” (as we named the “Create New” button to “Add Slide” at the time of custom element creation.)
3. After the slide is added, you will be able to add the data into the fields.
4. Fill up the data and then add more slides as per your requirement.
5. Then save the page and check in the front end, and you will see the element is rendering with the design according to the CSS file and template you have added at the time of package building.
6. The organized view can be seen only if you have structured the template properly and uploaded CSS and JS files for your slider. If you haven’t updated the template file or CSS/JS, then you can edit the template, CSS, and JS directly from the file.
  In this example, we set the maximum item limit of slides to 4 in the Slider Element (1.5), so after the 4^th slide has been added, the “+Add Slide” button will disappear.
7. This way you can create your custom elements by using T3Element Builder.