TYPO3 Extension Builder

Estimated reading: 85 minutes 131 views

How to create an extension using the extension builder?

You can use our extension builder to create the TYPO3 extensions. By using the extension builder, you will avoid the typical process of creating the TYPO3 extension. You will have to just add the details for your extension into the UI of the extension builder including the basic information, models/tables for your extension, add plugins, etc. You must be a registered user of the extension builder in order to use it. Let’s see how to use our extension builder.

Log in/Registration

Open the URL https://t3marketplace-user-panel.vercel.app/sign-in
Log in with your credentials if you are already a user.
Or create an account by registration.
Fill up all the details to complete your registration as seen in the screenshot above, as you submit the form, you will get a verification mail.

Enter OTP in below screen:

Click on the “Verify” button, and your account will be verified, and your registration is completed here.
After registration, you will be redirected to https://t3marketplace-user-panel.vercel.app/user and you will see the below screen for fill required fields:
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.
On the left side you can see the sidebar, just below the Dashboard tab, you’ll see the Extension Builder tab. Click on it.

Add New Extension

You will see a blank list of extensions as seen the the screenshot above, as there is no extension created yet and an option “Add New Extension” to create a new extension. After creating the extension you will see the extension in the list and also you will be able to download, edit, or delete that extension. You can create an extension by following the process. The process is divided into 4 steps, and those steps are:

Step 1: Basic of Extension
Step 2: Tables/Models
Step 3: Plugins
Step 4: Publish Extension

Note here that if you don’t complete the whole procedure at once by publishing the extension and if you have saved the previous steps, all the data will be saved in a draft so you will not lose any tables/models or plugins until you delete the draft. Let’s understand each phase of the process of creating the extension.

Basic of Extension
1. In the extension list click on the button “Add New Extension” on the top right and you will see the below screen.
2. As you can see in the above screenshot, some fields are empty and some are pre-filled. Let’s see about each of them.
  1. Extension Name: Add the name of the extension you want to create.
  2. Vendor Name: Add your vendor name.
  3. Extension key: It will be generated automatically according to the name of your extension, you can edit the extension key and add a valid key, once it is generated automatically. You can check this ref. link for the valid extension key: https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ExtensionArchitecture/BestPractises/ExtensionKey.html
  4. Description: Add the description of the extension.
  5. Extension version: You can update the pre-filled version of your extension to match your extension’s version.
  6. Extension Author: You can update the author’s name of your extension.
  7. Extension Category: Select the category of your extension to update it. Below is the list of the categories (Ref. link: https://docs.typo3.org/m/typo3/reference-coreapi/12.4/en-us/ExtensionArchitecture/FileStructure/ExtEmconf.html#file-ext-emconf-php)
    1. Frontend plugins: Frontend plugins (Plugins inserted as an “Insert Plugin” content element)
    2. Backend modules: Backend modules (When something is a module or connects with one)
    3. Miscellaneous: Miscellaneous stuff (Where not easily placed elsewhere)
    4. Backend: Backend (Generally backend-oriented, but not a module)
    5. Frontend: Frontend (Generally frontend oriented, but not a “true” plugin)
    6. Services: Contains TYPO3 services
    7. Templates: Contains website templates
    8. Distribution: Distribution, an extension kickstarting a full site
    9. Examples: Example extension (Which serves as examples etc.)
    10. Documentation: Documentation (e.g. tutorials, FAQ’s, etc.)
  8. Extension state: select the extension state to update it. (Ref. link for state: https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/Security/GuidelinesIntegrators/Extensions.html)
    1. Alpha
    2. Beta
    3. Stable
    4. Experimental
    5. Test
  9. Select the Typo3 version of your project: select the TYPO3 version of your TYPO3 setup where you want to add the extension.
  10. Select the icon for your extension: select the icon for your extension, else the default icon will be set for your icon.
3. After filling out all the details, click on the “Save & Next” button.
4. When you click on the “Save & Next” button, the extension will be saved in a draft.
  1. As you click on the “Save & Next” button, the next step “Tables/Models” will open as seen in the screenshot below
  2. In step 2 “Tables/Models”, if you click on the cancel button you will close the extension window and the extension list will open but you will not lose the data you have filled up in step 1 “Basic of Extension”, and when you add the new extension again by clicking on the “Add New Extension”, you will see the fields of basic details are filled up with your previous values. You can delete that information by clicking on the “Delete Draft Extension” if you don’t want to continue with that information and fill out the fields with the new information.
  3. Click on the “Save & Next” button again and you will see step 2 and you can add your tables/models there.
Tables/Models
1. After filling out the extension details, the next step is to add the tables/models for the extension.
2. You will have to create tables/models for the things you want to perform CRUD operations in the “List” module of TYPO3.
  1. Suppose you want to perform CRUD for products, you will create the table/model for the products.
  2. There could be a “product type” for each product, so you can create a separate table/model of “product type” so that you can perform CRUD on the product type too.
3. Click on the button “Add Model”, at the top right of the model list and you will see the screen “Model Information”.
4. Here add the title for your model and the key will be generated automatically, you can edit the key once it is generated, but be sure you are entering a valid key.
5. Now add the fields you want to add to your model/table. There are many fields and you can use multiple fields multiple times as per there requirement. You can refer to the field explanation at the end of this topic.
6. You can add the elements by just drag and drop them into the “Drop Elements” column.
7. Click on the edit icon of that particular element/field and you will see a form of Element Info on the right side.
8. Fill up the form of the element with the valid data, and click on “Save Element Info”. Below is the example of creating the new table “test”. As you click on the “Add Plugin” button you will be able to add a new table/model, add title, key and fields for that table/model.
  
  Then add all the fields you want in your model and click on the “Save” button and the model will be saved.
  
  You will be redirected to the list of Tables/Model. As you can see in the screenshot below, there are icons of edit and delete in the far right of the table/model.
  1. Edit icon: You can edit the table/model by clicking this icon. You can edit any information like title, key or fields you have added. You can add more fields, remove fields or edit the information in the fields.
  2. Delete icon: You can delete the table/model by clicking this icon. But before deleting any table think twice and be sure that you haven’t used that table in any another existing table as a field otherwise the data will be lost and there is no option of restoration.
    
    For example let’s create a new table testTwo and add any field to that table.
    
    Then add a new field in the existing table “test” and use the new table “testTwo”. Let’s add a new field “select” in the “test” table, and select the new table “tableTwo” for fetching the data of as a dropdown items for the select field.
  3. Then save the element info and save the table “test”. Now delete the table “tableTwo” by clicking the delete icon from the list of tables/models:
  4. After deleting the table “tableTwo” now check the table “test” for the select field where we used the “tableTwo”, and you can see in the below screenshot that we lost it.
  5. So before deleting any table just be sure that the table is not used as a field in any other tabel.
9. Below is the field explanation:
  1. String: This is input with the type “text”. It can be used for the fields like title.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Placeholder: Add a placeholder for the field if you want to add.
    4. Default: Add the default value if you want to show any default value for the product title.
    5. Is Required: Check this checkbox if you want to make this field required.
  2. Text: This is a textarea field. It can be used for a field like a short description.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Placeholder: Add a placeholder for the field.
    4. Default: Add the default value if you want to show any default value for the product title.
    5. Is Required: Check this checkbox if you want to make this field required.
  3. Rich Text: It is a text editor. This can be used for the description with all the text editing options.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Placeholder: Add a placeholder for the field.
    4. Default: Add the default value if you want to show any default value for the product title.
    5. Is Required: Check this checkbox if you want to make this field required.
  4. Email: This can be used to add the email address.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Placeholder: Add a placeholder for the field.
    4. Default: Add the default value if you want to show any default value for the product title.
    5. Is Required: Check this checkbox if you want to make this field required.
  5. Link: This can be used to add the URL (URL of the page/blog of the same website or any third-party website)
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Placeholder: Add a placeholder for the field.
    4. Default: Add the default value if you want to show any default value for the product title.
    5. Is Required: Check this checkbox if you want to make this field required.
  6. Number: This can be used to add the numbers.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Placeholder: Add a placeholder for the field.
    4. Default: Add the default value if you want to show any default value for the product title.
    5. Is Required: Check this checkbox if you want to make this field required.
    6. Format: Select the format of a number field.
  7. Slug: Set the slug of that particular page/blog you are creating from the list module of TYPO3.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Generate slug based on: select the field option from the available options. Based on that selected field, your slug will be generated. If you don’t select any options from this field, the slug will be generated automatically and you will not be able to set the slug manually.
    4. Is Required: Check this checkbox if you want to make this field required.
  8. Color: This should be used to render a JavaScript-based color picker.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Is Required: Check this checkbox if you want to make this field required.
  9. Password: should be used for input values that represent passwords.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Placeholder: Add a placeholder for the field.
    4. Default: Add the default value if you want to show any default value for the product title.
    5. Is Required: Check this checkbox if you want to make this field required.
  10. Date: should be used to input values representing a date time or datetime.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Format: Select the format of the date according to your requirements.
      1. Date: It stores the calendar date.
      2. DateTime: It is used for values that contain both date and time parts.
      3. Time: The time data type stores time values using a 24-hour clock.
      4. Timesec: The value of TimeSec relates the t=0 point of the trace to another point in time, and depends on the Data Source setting when the data was acquired.
        
        From Recording: offset from the t=0 time of the recording (TimeStamp)
        
        From Hardware: offset from the t=0 time of the data of the first measurement after measurement restart.
    4. Is Required: Check this checkbox if you want to make this field required.
  11. Select: By the “select” type you can create selector boxes. In the most simple form, this is a list of values among which you can choose only one.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Select Type: Select the type of select box from below: (we will check these options in deep into the example)
      1. Single select: Allow to select only one option from.
      2. Single select box: Allow to select multiple options from the select box, press CTRL key while selecting multiple options. Also, there is an option of Revert selection on the top right side of the select box.
      3. Select check box: Checkboxes that allow selecting multiple options and also an option of “Toggle all” to select/deselect each option. Also, there is an option of Revert selection beside the “Toggle all” option.
      4. Select multiple side by side: allow to select the options from all the available options. All the options do exist on the right side, you can select the options from there and the selected options will be visible on the left side box.
        Also, you can delete the option from selected items. Select the option from the left side and click on the delete button and that option will be deleted and will move to the right side box.
    4. Is Required: Check it if you want to make this field required.
    5. Fetch data from the table: You can select the existing table from here if you want that particular table’s field as an option for your select box.
    6. Select field: If you select the field from the “Fetch data from table” field, then you will see a new field “Select Field” beside it. Here you can select the field from the table that you want to show as an option.
  12. Image: Image field
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Is Required: Check this checkbox if you want to make this field required.
  13. File: Add files
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Is Required: Check it if you want to make this field required.
  14. Category: It works as the TYPO3 default category
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Is Required: Check it if you want to make this field required.
  15. CheckBox: By the “CheckBox” type you can create selector boxes.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Is Required: Check it if you want to make this field required.
    4. Select type: Select the type of the checkbox.
      1. Default Checkbox: Allow to select the option by checking the checkboxes. You can check multiple checkboxes.
      2. Toggle checkbox:
      3. Labeled toggle checkbox:
  16. Radio: You can select any one option from all the given options by using radio buttons.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Is Required: Check it if you want to make this field required.
    4. Add New Option: Add the options for radio to select.
  17. Child: By using this element you can create a repeater element. It repeats a single element many times. Suppose you want to create an element that contains a title and an image and want to repeat the element many times, and also want flexibility on the count of that element so that on one page you can repeat that element 3 times, and on the second page you can repeat it 10 times, then you can do that by using the child element.
    1. Title: field title. [Required]
    2. Key: field key (auto generate). [Required]
    3. Add New Button Title: Title for the button. (By clicking this button in the TYPO3 backend, you can repeat the element (a group of multiple elements).)
    4. Add New Field: By clicking this button you can add a new element. After adding the new element, select the element type and fill up the information for that field like title, key, placeholder, etc.
10. You can add multiple models/tables for your extension, create them, and click on the “Save & Next” button and you will see the screen of “Front End Plugin”. Let’s see the front-end plugins.
Front End Plugin
1. After creating the tables/models, you can create front-end plugins. You will see an empty list of plugins as you can see in the screenshot below:
2. To add the new plugin, click on the button “Add Plugin”, and you will see the screen for “Plugin Information” as seen in the screenshot below:
3. Fill up all the field details. There are 5 plugin types and according to the various plugin types, there are multiple possibilities for the plugin.
  Let’s check each “plugin type” and the possibilities according to each of them.
  1. Plugin Type – List: This type of plugin will create a list.
    1. Plugin Type: Select the Plugin Type “List”. [Required]
    2. Title: Add title for the plugin. [Required]
    3. Key: Add a key for the plugin. This will be generated automatically according to the title, later you can edit if you want to edit it but it should be unique. You can not use the same key in different plugins. [Required]
    4. Description: Write a description of your plugin.
    5. Table: Select the table from here, you want to create a list for. [Required]
    6. Fields: Add the fields of the selected table. Only include the fields you wish to display in a list. Suppose you are creating a list of products and you want to display the “Product Name”, “Product SKU” and “Product Category” fields in your list, then just select those 3 fields here and they will appear in your list, other fields will not be seen in the list.
    7. Detail Page ?: If you want a detail page for your list items then check this field. E.g. if you have blogs or products in your list, you will need a detail page for them, and in that case, you can check this field and you will be able to access the detail page. And if you want only a list of records then you can skip this field. If you check this field, other fields will appear like “Detail Slug” and “Slug Text”.
      1. Detail Slug: Select the field you want to generate the slug based on but to select that field, be sure that you have added the field “slug” in your table. E.g., if you are going to list the products from the table “Products”, and want to add the “Detail Slug” field, be sure that you have added the field “Slug” in your “Products” table for being able to select the slug field here.
      2. Slug Text: Add the text here, and by clicking on that text you will be redirected to the detail page.
    8. Add Pagination?: Check this checkbox if you want to add the pagination to the list.
    9. Show Selected Items Only?: Check this checkbox if you want to show selected items only. By using this option you will be able to select the items that you want to show in a front-end list. If you are checking this checkbox then you will not have the option of “Filterable Fields“.
    10. Order By Options: This field will sort the list of your records. You can select a single or multiple options from the available options. Two options are default options which are “Created At” and “Modified At”.
      1. Created At: This field will list the records ordered by the created date of the records.
      2. Modified At: This field will list the records ordered by the modified date of the records.
        Other options will be added to this field according to your table field. If you have string and date fields in your table then all those string and date fields will be added here as options and you can select them to utilize.
        
        These options will be rendered in a dropdown field in the TYPO3 setup, and you can select any one of them. Suppose you have selected 2 options “Created At” and “Modified At” at the time of creating the plugin, you will find them as drop-down options and can select any one from them (drop-down: A Drop-down field is a type of data field which provides users with a list of items, from which only one selection can be made.)
    11. List Items Based on Fields?: You can check the checkbox if you want to filter the list items according to any field of the table. As you check this checkbox, another dropdown field “Filterable Fields” will appear below this field.
      Note here that if you check this checkbox, the field “Show Selected Items Only” will be hidden. You can not use both the fields “Show Selected Items Only” and “List Items Based on Fields” at a time.
      1. Filterable Fields: Here you will get options from your table. To get the options here, adding the “single select” field /”radio” field/”category” field in your table is a must. You will get the “single select” field /”radio” field/”category” field here in this field as an option. You can select any of them or all of them. And when you use the plugin in the TYPO3 backend, the filter will be provided with these options, you can select any one of them and you will get the filtered list according to the field you have selected.
  2. Plugin Type – Detail: This type of plugin will create a detail page of the particular record.
    1. Plugin Type: Select the Plugin Type “Detail”. [Required]
    2. Title: Add the title for the plugin. [Required]
    3. Key: Add a key for the plugin. This will be generated automatically according to the title, you can edit the key later if you want to edit it but it should be unique. You can not use the same key in different plugins. [Required]
    4. Description: Write a description of your plugin.
    5. Table: The table you wish to create the detail page for the records of should be the one you select from this list. [Required]
    6. Fields: Select the fields of the selected table that you want to show on your detail page, only those selected fields will be added to the detail page. Suppose you are creating a detail page of a product and you want the “Product Name”, “Product SKU”, “Product Category”, “Product Short Description”, “Product Description”, and “Product Price”, then just select those fields only and they will appear in the detail page, other fields will be eliminated from the detail page.
    7. Display back button?: Check this checkbox if you want to add the back button to the detail page, you will be redirected to the list page after clicking on the “Back” button. If you check this option, you will get an option in your TYPO3 backend to add the label for the “Back” button after installing the extension in the TYPO3 setup. Default the back button’s text is “Back to List”.
    8. Only show selected item?: This option allows you to get a detail page of any record to render as a normal page. E.g if you want to show a product detail page content of any product XYZ as normal page content, you can do that by just checking this option.
      1. Check this checkbox, and in the TYPO3 setup when you will add the detail plugin in any page, you will have the option to select a record.
      2. Select the record you want to show the detail of that record on that page.
      3. Save the page and view the webpage. you will see the content of the detail page of the selected record.
      4. If you are using this option, the plugin should be a separate detail plugin from the detail plugin you want for the item’s detail page from the list.
  3. Plugin Type – Filter: You can create a filter by creating this plugin.
    1. Plugin Type: Select the Plugin Type “Filter”. [Required]
    2. Title: Add the title for the plugin. [Required]
    3. Key: Add a key for the plugin. This will be generated automatically according to the title, you can edit the key later if you want to edit it but it should be unique. You can not use the same key in different plugins. [Required]
    4. Description: Write a description of your plugin.
    5. Table: The table you wish to create the filter for the records of should be the one you select from this list. [Required]
    6. Filterable Fields: Here you will get options from your table. To get the options here, it is a must to add the “single select” field and/or “radio” field and/or “category” field in your table. You will get the “single select” and/or “radio” and/or “category” fields from your table to here in this field as options. Select the fields you want to create a filter for. Suppose you want to create a filter on products based on the product size and product type then you can select both fields here.
      
      Note: To get the result for your filter in the front-end you must create a plugin with the plugin type “Filter Result”.
  4. Plugin Type – Filter Result: You can get the filter result by using this plugin.
    1. Plugin Type: Select the Plugin Type “Filter Result”. [Required]
    2. Title: Add the title for the plugin. [Required]
    3. Key: Add a key for the plugin. This will be generated automatically according to the title, you can edit the key later if you want to edit it but it should be unique. You can not use the same key in different plugins. [Required]
    4. Description: Write a description of your plugin.
    5. Table: The table you wish to obtain the filter result for the records, should be the one you select from this list. [Required]
    6. Fields: Add the fields of the selected table. Only include the fields you wish to display in a filter result.
    7. Detail Page?: If you want to open the detail page of your records when they appear as a filter result, check this checkbox.
      1. When you check this field, other fields will appear like “Detail Slug” and “Slug Text”.
      2. Detail Slug: Select the field you want to generate the slug based on but to select that field, be sure that you have added the field “slug” in your table.
      3. Slug Text: Add the text here, and by clicking on that text you will be redirected to the detail page of that record.
    8. Add pagination: Check this checkbox if you want to add the pagination for the filter result.
    9. Order by options: This field will provide sorting for the list of your records. You can select a single or multiple options from the available options. In your TYPO3 setup, you will get those options in a dropdown and you will be able to select any one option from that dropdown and the records will be sorted according to that selected option. Two options are default options which are “Created At” and “Modified At”.
      1. Created At: This field will list the records ordered by the created date of the records.
      2. Modified At: This field will list the records ordered by the modified date of the records.
        Other options will be added to this field according to your table field. If you have string and date fields in your table then all those string and date fields will be added here as options and you can select them to utilize them.
        
        These options will be rendered in a dropdown field in the TYPO3 setup, and you can select any one of them. Suppose you have selected 2 options “Created At” and “Modified At” at the time of creating the plugin, you will find them as drop-down options and can select any one from them (drop-down: A Drop-down field is a type of data field which provides users with a list of items, from which only one selection can be made.)
    10. Filterable Fields: Be sure about the field selection here. It is mandatory to select the fields that are selected in the plugin type “Filter”. If any mismatch is found for this field, between the plugin type “Filter” and “Filter Result”, then you will not get the proper filter result.
  5. Plugin Type – Form: To create a form, you can use this plugin. This plugin will allow you to create a form with the fields of any existing table.
    1. Plugin Type: Select the Plugin Type “Form”. [Required]
    2. Title: Add the title for the plugin. [Required]
    3. Key: Add a key for the plugin. This will be generated automatically according to the title, you can edit the key later if you want to edit it but it should be unique. You can not use the same key in different plugins. [Required]
    4. Description: Write a description of your plugin.
    5. Table: You should choose the table from this list for which you wish to create a form. [Required]
    6. Fields: Select the fields of the table you want to include in the form.
4. Once you fill up all the details for the plugin and click on the “Save” button, you will be redirected to the list of plugins, here the plugin will be seen in the list, and at the far right three icons will appear as you can see in the below screenshot:
  
  If you click on the “Save & Next” button to save the plugin, you will get the message of “Save template for plugins!!” as you can see in the below screenshot:
  So before saving the plugin, you need to click on the second icon to open the plugin template and the below screen will be seen, just click on the “Save” button and the template will be saved.
  You can make changes to the template anytime as per your requirements. As you save the plugin, you will be redirected to the plugin list again.
  
  Now you can save the plugin by clicking the “Save & Next” button, but before saving the plugin, let’s understand all the three action icons of plugins which are “Edit”, “Template” and “Delete”.
  1. Edit Icon: Edit the plugin details by clicking this icon.
    1. You can edit any of the plugin details from here. Click on the edit icon, the very first action icon and you will see all the plugin details you have filled up when creating the plugin. Update any detail you want and click the “Save” button.
  2. Template Icon: Here you will get the template code according to the plugin you have created. Each plugin you create will have its own template code according to the plugin type, the table, and the fields of the table you have selected, and it also depends on the other fields like “Add pagination”.
    
    Templating is the essential part of the plugin, it will decide the structure for your plugin. You can manipulate the template code according to your requirements. Also, you can remove the code completely by using the button “Clear Template”. We will see all the utilities in the example.
    
    There are 2 parts of the templating here. i ) Template ii ) Markers. Below is the explanation of these 2 parts. Also, you can check the example to understand this in detail.
    1. Template:
      1. Click on the second action icon to edit the template, and you will see a screen with markers and a fluid template. If you want to manipulate/edit the template, be sure that you know the TYPO3 fluid template (ref. link: https://docs.typo3.org/other/typo3/view-helper-reference/main/en-us/)
      2. After manipulating the template click on the save button and the template will be saved.
    2. Markers:
      1. Markers are created for user convenience.
      2. You can copy the original code (before manipulating the template) by just clicking the marker and pasting the code if you want the original code of the plugin.
      3. You can have multiple markers according to the options you have selected for that plugin.
        
        Note here that if you are making any changes in the table field or in the plugin, you will have to update the template accordingly. As you make changes in the plugin or in any table fields, you will get the code with those changes into the markers in the template, so just clear the existing template code, copy the markers, and paste the code that’s it.
  3. Delete Icon: Delete the plugin by clicking this icon.
    1. You can delete the plugin if you don’t find it useful. After deleting the plugin, you will not be able to restore that plugin, so think twice before deleting the plugin.
  4. As you click on the “Save & Next” button in the plugin list, the backend module tab will open as seen in the screenshot below:
    Let’s understand the backend module in detail.
Backend Module:
1. The backend module in TYPO3 is a user-friendly option to see or manage the data. It can be dependent on the requirement and can have a variety of functionalities according to the requirement. Here in this extension, the backend module is a user-friendly option to only see the data of the tables in a list form.
2. Generally, we can see the list and manage the data from the “List” module which is the default module of TYPO3, but a non-technical user can be unaware of that, so the backend module has been given here as the user convenience option to see the table data in a list form.
3. In the above screenshot, you can see the option to create the backend module for the available tables, the tables that are created in this extension.
4. You can select the tables for which you want to create the backend module.
5. After selecting the tables, click on the “Save Extension” button and the extension will be saved and you will be redirected to the extension list as seen in the screenshot below:
6. As seen in the above screenshot, the extension has been saved and listed. On the far right side, there are 3 action icons, “Download Extension”, “Edit extension” and “Delete extension”.
  1. Download Extension: Once you create the extension, download the extension to use it. Click on the download icon and the extension will be downloaded to your system. Now upload the extension into the TYPO3 setup as seen in the screenshot below.
    To upload the extension, open the TYPO3 admin panel > Go to the Admin Tools > Extensions > Click on “Upload Extension” and upload your extension.
    
    After uploading the extension, the extension will appear in the extension list in the TYPO3 backend.
    If you already have uploaded the extension before and want to upload the new version of that extension after editing it, just upload by checking the overwrite option. As seen in the screenshot below, upload the extension but be sure the name is the same as the installed version of that extension and check the “Overwrite” checkbox to overwrite the existing extension.
  2. Edit extension: Edit the extension by clicking this icon.
    1. You can edit the extension by making changes in tables/models or plugins or in the backend module.
    2. You can edit or delete the tables/models. You can make changes in the fields of the table or update the title or key by editing it. If you are deleting any table, then make sure that table is not used in any other table’s field.
    3. You can edit or delete the plugins. You can update the plugin name, table, fields, etc., or any other functionality like adding pagination, filter, etc. Or you can delete the plugin but be sure before deleting the plugin, once you delete the plugin it can not be undone.
    4. You can edit the backend module too, if you want to remove the backend module for any of the tables you can uncheck that table from the backend module tab and inversely you can check the tables you want the backend modules for.
  3. Delete Extension: You can delete the extension if the extension is not needed. If you have downloaded the extension already and are using it in TYPO3 then after deleting the extension from the extension builder you will still be able to use that downloaded extension but you will not be able to make any updates to that extension.

Example of the extension builder – Products Extension

Let’s try to understand how the extension builder works by an example. Let’s create a product extension that will include a product list, a filter, a product detail page, and a form.

If you don’t have an account on the extension builder, please register yourself, or else log in with your credentials. You can check the Log in/Registration procedure at the start of this document. Click here to check.

After log in/registration, you will see a blank list of extensions. Click on “Add New Extension” to create a new extension and you will see the screen of step 1.

In step 1 “Basic of extension”, fill up the details of the extension you are going to create. You can take the reference to fill up the basic details for the extension by clicking here. After filling up the basic details for the extension, click on the “Save & Next” button, and you will see the second step “Tables/Models”.

In step 2, create the tables for the extension. Here in this example, let’s create 2 tables “Producs” and “Country of Origin” for now, then we will create more tables as per further requirements.

Create Tables

Let’s create the first table “Products.”

Table – Products

Click on the button “Add Model”, at the top right of the model list and you will see the screen for “Model Information”.
Here add the title for your model and the key will be generated automatically, you can edit the key once it is generated, be sure you are entering a valid key.
Now add the fields you want to add to your model/table.
You can add the elements by just dragging and dropping them into the “Drop Elements” column and it will appear as seen in the screenshot below:
Click on the edit icon of that particular element and you will see fields on the right side. You will have to fill in the information of that element. Here the element is “String” in the below screenshot, so after clicking on the edit icon of the string element, you will see fields to fill in on the right side for the string element.
Fill in the fields of the element with the valid data, and click on “Save Element Info”.
Then add all the fields you want in your model, as seen in the screenshot below, and fill in the information for each element in the corresponding fields as illustrated above for the “String” element.

After adding all the fields click on the “Save” button and the model will be saved.
Below is an explanation of the fields that are used in the product model.
1. Product Title: A string element is used for the product title.
  1. Title: product title. [Required]
  2. Key: Key for the product title (auto-generated). [Required]
  3. Placeholder: Add a placeholder for the field if you want to add.
  4. Is Required: Check this checkbox if you want to make this field required.
2. Product Image: An image element is used for the product image.
  1. Title: Title for the product image field. [Required]
  2. Key: Key for the product image field (auto-generated). [Required]
3. Product SKU: A string element is used for the product SKU.
  1. Title: Title for the product SKU. [Required]
  2. Key: product SKU key (auto generate). [Required]
4. Slug: A slug element is used for the product slug. This field will allow us to set the slug for products
  1. Title: field title. [Required]
  2. Key: field key (auto generate). [Required]
  3. Generate slug based on: select the field option from the available options. Based on that selected option, your slug will be generated. If you don’t select any options from this field, the slug will be generated automatically and you will not be able to set the slug manually.
    1. In this example, there are 2 options in this field as you can see in the screenshot below
    2. If you select any option from these options, the slug will generate automatically based on that, else you will have to set the slug manually.
5. Contact Link: A link element is used for this field. This can be used to add the URL (URL of the page/blog of the same website or any third-party website)
  1. Title: Title for the contact link field. [Required]
  2. Key: Key for the contact link field (auto-generated). [Required]
6. Short description: A text element is used for the short description. This field is added to show a short description of the product in the product listing.
  1. Title: Title for short description field. [Required]
  2. Key: Key for the short description field (auto-generated). [Required]
7. Product description: A rich text field is used for the short description. The use of this field is to add a long description for products, and as it is a rich text editor, it contains advanced styling options like heading levels, bold, italic, bullet points, font typefaces, and text size.
  1. Title: Title for the product description field. [Required]
  2. Key: Key for the product description field (auto-generated). [Required]
8. Email us: An email field is used here. This will validate the email at the time we add an email ID to the field.
  1. Title: Title for the email us field. [Required]
  2. Key: Key for the email us field (auto-generated). [Required]
9. Color: This field will provide a color picker to select the color. You can use the color in the template file for the inline style.
  1. Title: Title for the color field. [Required]
  2. Key: Key for the color field (auto-generated). [Required]
10. Product Type: Product type is used to select the type of product. The element “Single Select” is used here for the product type.
  1. Title: Title for the single select field.
  2. Key: Key for the product type
  3. Select Type: Select the type of select from here. In this field, the type “Single Select” is used.
  4. Add New Option: Added the static options for the select box.
11. Product Accessories: The product accessories field is used to select the accessories. The element “Single Select Box” is used for the product accessories.
  1. Title: Title for the Single Select Box field.
  2. Key: Key for the product accessories
  3. Select Type: Select the type of select from here. In this field, the type “Single Select Box” is used.
  4. Add New Option: Added the static options for the select box.
12. Product Packaging Includes: The product packaging includes is used to select the options for the packaging. The element “Select Check Box ” is used for the product packaging include.
  1. Title: Title for the Select Check Box field.
  2. Key: Key for the product accessories.
  3. Select Type: Select the type of select from here. In this field, the type “Single Select Box” is used.
  4. Add New Option: Added the static options for the select box.
13. Similar Product: A similar product is used to show similar products on the detail page of the product. The element “Select Multiple Side by Side ” is used for a similar product.
  1. Title: Title for the Select Check Box field.
  2. Key: Key for the product accessories.
  3. Select Type: Select the type of select from here. In this field, the type “Select Multiple Side by Side” is used.
  4. Add New Option: Added the static options for the select box.
14. Product Category: This will provide an option to select the category. It’s a default option of TYPO3.
  1. Title: Title for the product category field. [Required]
  2. Key: Key for the product category field (auto-generated). [Required]
  3. Is Required: Check this checkbox if you want to make this field required.
15. Add Brochure: A child element is used for this field. This will provide a repeating element which means a single element can repeat many times in design. To add multiple numbers of the brochure we have added the required elements – a string element for the brochure title and a link element for the link of the brochure file. In the TYPO3 backend, the group of those 2 elements will be added as a single element as a brochure.
  1. Title: Title for the Brochure. [Required]
  2. Key: Key for the Brochure (auto generate). [Required]
  3. Add New Button Title: Added title “Add New Brochure” for the button. (By clicking this button in the TYPO3 backend, you can repeat the element we created for the brochure.)
  4. Add New Field: By clicking this button you can add a new element. After adding the new element, select the element type and fill up the information for that field like title, key, placeholder, etc.
    1. String: Used this field for the “Brochure Name”
    2. Link: Used this field for the “Link Brochure File”
16. Launch Date: This will provide an option to select the date of the product launch. The element “Date” is used for this field.
  1. Title: Title for the date field.
  2. Key: Key for the date.
  3. Format: There are 4 formats of date. Select the date format as per your requirement. Here the selected format is “Date”.
17. Features: This will allow you to add the features of a specific product by checking the checkbox. The element “Checkbox” is used in this field with the select type “Default checkbox”.
  1. Title: Title for the checkbox field.
  2. Key: Key for the checkbox field.
  3. Select type: The selected type here is “Default checkbox” which will allow you to add simple checkboxes.
  4. Add new options: Add required options for checkboxes.
18. Product includes: This will allow you to add what will be included with the specific product by toggling the toggle button or toggle checkbox. The element “Checkbox” is used in this field with the select type “Toggle checkbox”.
  1. Title: Title for the checkbox field.
  2. Key: Key for the checkbox field.
  3. Select type: The selected type here is “Toggle checkbox” which will allow you to add toggle checkbox or toggle buttons.
  4. Add new options: Add required options for the toggle checkbox.
19. Extra: This will allow you to include extra things. The element “Checkbox” is used in this field with the select type “Labeled toggle checkbox”.
  1. Title: Title for the checkbox field.
  2. Key: Key for the checkbox field.
  3. Select type: The selected type here is “Labeled toggle checkbox” which will allow you to Labeled toggle checkbox and that can be enabled/disabled when you use them.
  4. Add new options: Add required options for the labeled toggle checkbox.

Table – Country of Origin

The same procedure has been followed to create another table “Country of Origin”.
Click on the button “Add Model” to create the new table/model.
You will see the window of “Model information”.
Fill up the information like the title for the model and key (auto-generated).
Then add the elements as per the requirement. Here the only field “Add countries” is required, and here the string field is used.
Click on the button “Save Element Info” and the element will be saved.
As you can see in the above screenshot, the string field is used. You can add more fields according to your requirements. Let’s add one more field of “Image” for the country flag.
Click on the button “Save Element Info” and the element will be saved.
Then click on the “Save” button to save the table/model.
And you will see both the tables in the list of tables.
Here just keep in mind that if you want to use this table “Country of Origin” in any other table as a foreign table, you must add the “String” element for the field you want to use as a foreign field. Let’s see an example.
Let’s add another field into the Products table for the “Product’s country” and use the table “Country of Origin”. Let’s see in detail.
1. Add the element “Select “.
2. Title: Add the title for the field – Product Country
3. Key: Add the key for the field – productcountry.
4. Select type: select the type “Single select”.
5. Fetch data from table: Select the table “Country of Origin”.
6. Select Field: Here you will get only “Add countries” fields which is a string field. We added 2 fields in the “Country of Origin” table which are “Add Countries” and “Flag” but only the string field will be available to establish the relationship with the foreign table as you can see in the screenshot below:
  Click on the “Save Element Info” to save the element and then save the model. After saving the model you will be redirected to the list of models, here just click on “Save & Next” and you will see the next tab for “Frontend Plugins “

After creating Tables/Models, let’s move to the step 3 – front-end plugins.

Front-end Plugins

As is already explained, above there are 5 types of plugins – List, Detail. Filter, Filter Result, and Form. Let’s create one-by-one plugins for the product extension.

As we haven’t created any extensions yet, we have a blank list of plugins.

Let’s create a List plugin first.

Plugin type – List

To create a new plugin click on the “Add Plugin” button which is on the top right of the plugin list and you will see the below screen:
The default selected plugin type is list.
Add other information like title, key, description, etc.
In the “Table” field select the table you want to create a list for and in the “Fields” select the fields of that table you want to show in your list.
We need a detail page for products so let’s check the “Detail Page” checkbox.
1. As you select this option, you will see another 2 fields “Detail Slug” and “Slug Text”.
2. We have the field “Slug” in the “Products” table so we have the option of the “Slug” field in “Detail Slug”.
3. In the “Slug Text” field, let’s add the text “Learn More” for the link to the product detail page.
The product list should have the pagination so let’s enable the “Add Pagination” field.,
Let’s enable the “Show Selected Items Only?” field so we can have the option to show the selected products in the product list.
“Order By Options” is a mandatory field, select the options you think you will need in your extension. Let’s select the “Created At”, “Product Title”, and “Launch Date” fields. Please note here that the “Created At” and “Modified At” fields are default fields for this field, and other fields like here “Product Title”, “Product SKU”, “Launch Date”, etc. will be added according to your selected table’s fields. All the fields with the data type “String” and “Date” will be shown here as options.
Here you will not see the option “List Items Based on Fields” as we already selected the field “Show Selected Items Only ?” so this option will be hidden (If you select the “List Items Based on Fields” field then “Show Selected Items Only ?” field will be hidden.)
Click on the “Save” button and you will see the “List” plugin is added to the plugin list as seen in the screenshot below:
If you click on “Save & Next”, you will get an error of “Set Template for the plugin!”. As you can see in the above screenshot, on the far right side there are 3 action icons and the second icon is highlighted in red which is a template icon. As we haven’t set the template yet, the icon is highlighted in red. To set the template, click on the template icon and you will see a template as seen in the screenshot below:
Above is the fluid template. You can make changes to the template according to your requirements (Fluid template ref. link: https://docs.typo3.org/other/typo3/view-helper-reference/main/en-us/ ). And if you don’t want to make any changes, just click on the save button and save the template, as you save the template, you will be redirected to the plugin list and now there is no error.
Now let’s create another plugin for the product detail page. You can click on the “Save & Next” button before creating the new plugin everytime so the created plugin will be saved.

Plugin type – Detail

This plugin will be used to create the detail page for products. The detail page will contain all the information about the particular product. In the product list, we have limited information about the product like the product name, SKU, launch date, etc. but on the detail page of the particular product, will have all the information like the product image, detailed information about the product like product’s full description, product features and many more.

There is a possibility that a particular product’s detail page should be used as a normal page. E.g, if one wants to link the detail page of any particular product to any random section or wants to link that page to the menu items, here the option is provided which is “Only Show Selected Item?”. By checking this checkbox you will be able to select a page in detail page config at the time of adding the detail plugin in your TYPO3 setup.

We will create a separate plugin to utilize that functionality. Here in this plugin, we will not check the checkbox of “Only Show Selected Item?” because we want the detail page of each product, not just for any selected item.

Create a detail plugin without selecting “Only Show Selected Item?”

Click on the “Add Plugin” button, the default selected plugin will be “List”. Select “Detail” there to create the detail plugin.
As you select the “Detail” plugin, you will see the below options for the detail plugin.
Add the Title, Key, and Description for the plugin. (Title and Key are the mandatory fields).
Let’s select the “Products” table as we want to create the detail page for the products.
As you select the table, the “Fields” dropdown will enable and you can select the fields that will appear on the detail page. Generally, all the fields should be there on the detail page. Or you can add the fields as per your requirement.
You can add a back button to the product list by selecting the “Display Back Button” option.
We are not checking the “Only Show Selected Item?” checkbox here.
Save the plugin and the plugin will be added to the plugin list, and then save the template for the “Product detail plugin”.

Create a detail plugin by selecting “Only Show Selected Item?”

Click on the “Add Plugin” button, the default selected plugin will be “List”. Select “Detail” there to create the detail plugin.
As you select the “Detail” plugin, you will see the options for the detail plugin.
Add the Title, Key, and Description for the plugin. (Title and Key are the mandatory fields).
Let’s select the “Products” table as we want to create the detail page for any particular product here.
As you select the table, the “Fields” dropdown will enable and you can select the fields that will appear on the detail page. Generally, all the fields should be there on the detail page. Or you can add the fields as per your requirement.
You can add a back button to the product list by selecting the “Display Back Button” option.
Let’s check the “Only Show Selected Item?” checkbox so we can show the detail page of a particular selected product directly to any CMS page.
Save the plugin and the plugin will be added to the plugin list, and then save the template for the “Single Product Detail”.
Let’s create a Filter plugin after this.

Plugin type – Filter

A filter allows consumers to search for desired items more efficiently. So one can search for items according to the different categories. Let’s create a plugin to add a filter to the product list. Here you can add filters for multiple fields too.

In the plugin list, click on the “Add Plugin” button to add the new plugin.
Select the plugin type “Filter” and add the field information for the filter plugin.
As you select the plugin type “Filter”, you will see the below screen.
Add the Title, Key, and Description for the plugin. (Title and Key are the mandatory fields).
Let’s select the table “product” in the field “Table”.
In “Filterable Fields” select the fields you want to filter the products by them. Here you will get options from your table. To get the options here, adding the “single select” field /”radio” field/”category” field in your table is a must. You will get the “single select” field /”radio” field/”category” field here in this field as an option. Let’s see the available options.
As in the product table, we have 2 “single select” fields – Product type and Product country and a “Category” field – Product category so as seen in the above screenshot we have 3 options for the filterable fields, The radio field would be listed as one of the filterable fields if it were present in the products table.
Let’s select the fields “Product Title” and “Product country” as filterable fields.
Click on the “Save” button to save the plugin information and after being redirected to the plugin list, open the template of the plugin by clicking on the second action icon, update the fluid template if you want to update it, else just click on the “Save” button so the template will be saved.
After creating the filter plugin, we will need to create a plugin “Filter Result” to show the result of the filter. E.g. if we are adding the filter to the product list, after we apply the filter we will need to see the filtered products and for that, we need to create the plugin “Filter Result”.
Let’s create the “Filter Result” plugin.

Plugin type – Filter Result

Let’s create a plugin to display the result after the product list filter.

Click on the “Add Plugin” button. By default, the selected plugin will be “List”.
Select the “Filter Result” plugin, and after selecting that plugin, you will see the screen below with the fields for the “Filter Result” plugin.
Add the Title, Key, and Description for the plugin. (Title and Key are the mandatory fields).
Select the table “Products” as we want to create the filter result plugin for the products table.
After selecting the table “Products”, the “Fields” dropdown will be enabled.
All the selected fields will appear on the filter result page. E.g if you have a filter “Product Origin”, select the country USA, all the products that originated in the USA will be displayed on the filter result page, and the details will be displayed according to the selected fields. Let’s select the fields “Product Title”, “Product SKU”, “Product Image”, and “Short Description” for the filtered products.
Check the “Detail Page” checkbox if you want to add the detail page link in the filtered products, here we are checking this checkbox so we can have the detail page link in the resulting products.
1. As you select this option, you will see another 2 fields “Detail Slug” and “Slug Text”.
2. We have the field “Slug” in the “Products” table so we have the option of the “Slug” field in “Detail Slug”.
3. In the “Slug Text” field let’s add the text “See detail page” for the link to the product detail page.
The product list should have the pagination so let’s check the “Add Pagination” checkbox.
“Order By Options” is a mandatory field, select the options you think you will need in your extension. Let’s select the “Created At”, “Product Title”, and “Launch Date” fields. Please note here that the “Created At” and “Modified At” fields are default fields for “Order By Options” field, and other fields like here “Product Title”, “Product SKU”, “Launch Date”, etc. will be added according to your selected table’s fields. All the fields with the data type “String” and “Date” will be shown here as options.
As in the product table, we have 2 “single select” fields – Product type and Product country and 1 “Category” field – Product category so as seen in the above screenshot we have 3 options for the filterable fields, The radio field would be listed as one of the filterable fields if it were present in the products table.
Let’s select the fields “Product Category” and “Product country” as filterable fields. Remember here that you will have to select the same fields you already have selected in the “Filter” plugin, otherwise, there will be a mismatch of fields in “Filter” and “Filter Result” and you may get the wrong filtered data.
Click on the “Save” button to save the plugin information and after being redirected to the plugin list, open the template of the plugin by clicking on the second action icon, update the fluid template if you want to update it, else just click on the “Save” button so the template will be saved.
Let’s create the plugin “Form”.

Plugin Type – Form

If you want to provide the form for the front-end user, you can do that by using the plugin type “Form”. E.g if you want to provide a form of the “Job Application”, “Contact” form, or any other as per the requirement you can create them by using the “Form” plugin type. Let’s start to create a contact form.

To create a contact form, we need to create a new table “Contact”. We need to go to the “Previous Step”, but before clicking on the “Previous” button, it is a must to click on the “Save & Next” button, otherwise you will lose the plugins you created.
So after clicking on the “Save & Next” button, let’s click on the “Previous” button, and go to the Tables/Models.
Let’s add the new table/model by clicking the “Add Model” table.
Let’s add the title, key, and all the fields we require for the contact form.
Here we have added First Name [Required] – String Field, Last Name [Required] – String Field, Email [Required] – Email field, Phone – String Field, and Comment – Text Fields.
Save the Table by clicking on the “Save” button and you will see the table is added to the list.
Click on the “Save & Next” button, and the next tab “Plugins” will open with a list of 5 plugins we created as seen in the screenshot below.
Now create the “Form” plugin for the contact table here.
Click on the “Add Plugin” button to add a new plugin.
Select the plugin type “Form”.
Add the Title, Key, and Description for the plugin. (Title and Key are the mandatory fields).
Then select the table you want to create a form for. Here we are creating the contact form, so let’s select the table “Contact”.
Then select the fields of the table you want to add to the form into the “Fields”. Here let’s select each field of the contact table.
Then click on the save button and the plugin information will be saved and you will be redirected to the plugin list.
Save the plugin and the plugin will be added to the plugin list, and then save the template for the “Contact Form”.
Now click on “Save & Next” so the “Contact Form” plugin can be saved (we already saved other plugins at the time of creating the “Contact” table). The next tab is about creating the backend modules of your tables and saving the extension.
In the last step, step-4, let’s see the backend module.

Backend Module

You will see the below screen in the last tab.
Here you will get an option to create the backend modules of the tables you have created in this extension. Here we have 3 tables in this extension and those are “Products”, “Country of Origin” and “Contact”. If we create the backend module for any table, we will see the list of those tables in the corresponding backend module, so it will be a user-friendly option to check the product list, list of countries, and list of contacts.
Let’s create the backend module of “Products” and “Contact” by checking the checkbox of them, and we will not check the “Country of Origin” table.
Then click on the “Save Extension” button, and you will be redirected to the extension list.
Download the extension now and upload it to the TYPO3 setup.
If in your typo3 setup, you already have installed this extension, you can overwrite the extension also.
After overwriting the extension, deactivate it and activate it again to avoid any field mismatch error.
Now let’s start to use the extension.

How to use the extension in TYPO3

Let’s start to use the Products extension in TYPO3. First of all, let’s add a few products and render the list of products.

Add products for the “Products” table.

Create a folder to store the products. You can name the folder as you wish. Here let’s create the folder named “Products”, by default the folder is disabled.
Enable the folder, to enable it, right-click on the folder and click on “Enable”.
Go to the “List” module, and select the folder, and click on the “Create new record” to add new products.
After clicking on the “Create new record”, you will see the “Products” extension and the tables “Products”, “Country of Origin”, and “Contact”.
To add new products, click on “Products”, and you will see all the fields we added at the time of creating the “Products” table.
As you can see in the above screenshot, in the “Product country” dropdown, we don’t have any option to select it, as we still haven’t added any country. After adding the countries to the country table, we will get the country option. Let’s add countries in the “Country of Origin” table.

Add countries for the “Country of Origin” table.

As we started to add products for the product table, let’s add countries for the “Country of Origin” table.
First of all, add a folder to store the records for the countries. Here the folder name is “Countries”. You can choose any name for your folder.
Enable the folder and click on the “Create new record” button and select “Countries of Origin”.
When you click on the “Country of Origin”, you will see the fields you added at the time of creating the table. Fill up the details like country name and flag.
After filling up the details, save the country by clicking on the “Save” button from the top left.
To see the list of countries, click on the “Countries” folder again from the sidebar, and you will see the list of countries in TYPO3 backend as seen in the screenshot below.
Let’s add more countries by clicking on the “+Create new record” button.
As seen in the screenshot above, the newly added countries “USA” and “Germany” can be seen in the countries list in the TYPO3 backend.
There is one more option in “Products” which is “Product Category” and it is blank for now as you can see in the screenshot of the product. If we want to add categories for products, we need to add the categories in TYPO3 and then those categories will be rendered in “Products” and we can select the categories for our products. Let’s add TYPO3 categories.

Add TYPO3 categories

Go to the root page “Home”.
Select the “List” module, and click on the “Create new record”. You will see an option to add a category as seen in the screenshot below:
You will see the below screen:
Add the categories as per your requirements. You can also create the child categories. If you are not aware of TYPO3 categories, you can refer to the doc. – https://docs.typo3.org/p/t3g/blog/main/en-us/Guides/Categories/Index.html
Let’s add a first category. Add the title of the category and as we haven’t any existing category so there will be no parent for the first category. To create a new category, add the title of the category and click on the “Save” button from the top left and you will see the saved category as seen in the screenshot below.
Let’s add a child category for the first category “Application”. Click on the “+New” from the top left. Creating it as a child category of “Application”, add the title of the new child category and check the checkbox of the “Application” from the category tree as seen in the screenshot below
Click on the “Save” button and you will see the category “Sensitive” has been added as a child category of “Application”.
Here we have added other categories as you can see in the below screenshot of the category tree. Add categories like this as per your requirement.
Now, let’s add the details for the first product. Here our first product to be added is the “Tangent galvanometer”.
1. Product Title: Added the product title “Tangent Galvanometer”.
2. Product Image: Uploaded the product image.
3. Product SKU: Added the product sku “sku-001”.
4. Slug: The slug has been generated automatically “tangent-galvanometer”. We can edit the slug if it is required.
5. Contact Link: For now added “/” here, which redirects to the home page.
6. Short Description: Added a short description of the product so that one can get basic knowledge about the product.
7. Product Description: This should contain all the information about the product that can convince the potential customer to buy that product.
8. Email Us: Add the email ID here on which a user can send his/her query or contact you.
9. Product Color: Specify the color code of the product. Here it is #1a1616
10. Product type: Select the product type from the dropdown. The selected option here is “Industrial products”. (The options you will get here would be the options you have added at the time of creating the table in the extension builder.)
11. Product Accessories: The selected option here is “Handheld Tools”.
12. Product Packaging Includes: The selected option here is ” Put Thermocol Sheets”.
13. Similar Product: There are no other products to select for “Similar Product” as we still haven’t added any other products.
14. Product Category: The selected category here is “Sensitive”. You can see all the categories here we added as TYPO3 categories.
15. Add Brochure: Click on the “+Add New Brochure” button and you will get an option to add “Brochure Name” and “Link Brochure File”. See the below screenshots and follow them.
  
  Add the title and click on the link icon to add the brochure file, as you click on the link icon you will see a popup as seen in the screenshot below:
  
  Click on the “File” from the top left to get the existing files and also to upload a new file. After clicking on the “Files”, you will see the below popup:
  
  As seen in the above screenshot, select the brochure file and click on the button “Upload files”, you will see a success message once the file is uploaded. Then select that file to add it as a brochure or if you can’t see that file then use search to search that file and select.
  
  You will see the file is added to the field after selecting it.
16. Launch date: Select the date. Click on the input and you will get a calendar to pick the date.
17. Features: Select one or multiple features. Here the selected feature is “Capacity to contain highest load”.
18. Product includes: Select what your product includes. Here the selected option is “Product it self”
19. Extra: You can select the options by clicking on the button. If the button is “Enabled” then the option is added and if the button is “Disabled” then that option is not added. Here the option is “Batteries” and we are not adding it.
20. Product country: Select the country of origin for the product. you will get all the countries we have added to the “Countries” folder. You can add more country options too to the “Countries” folder.

How to create the product list with the plugin type “List”?

Go to “Page”. Create a page you want to render the product list in.
Here we have created a page named “Product List”. Enable the page.
To create the product list, let’s add the plugin “Product list”.
Click on the “+ Content” button and the widget will open as seen in the screenshots:
Go to “Plugins” in the widget and select the plugin “Product list”, and you will see the below screen.
Go to the “Plugin” tab and you will see the below screen:
As you can see in the above screenshot, in “Plugin Options” it is required to add the “Record Stored Page”. Click on the “Page” button and select the folder you have stored your records in. Here the folder is “Products”.
Add the number of records you want per page in “Records Per Page”.
Add the “Detail page”. At the time of creating the list plugin, we checked the checkbox of “Detail Page?”, so that we can have a detail page for products. Here we have to choose the detail page for products. For that, we need to create a detail page and select that detail page by clicking on the “Page” button.
See the screenshots below:
Order By and Order Direction options have selected value, you can change their values according to your requirements. Below is the final screenshot:
Save the plugin and click on the “View” button to view the webpage.
When you click on the “View” button, you will see the list of products. As we have only one product, the list will show only one product as seen in the screenshot below:
To implement the design for the list, let’s manipulate the template of the list plugin.

Template manipulation in extension builder

Go to the extension builder, log in to your account.
Edit the extension and go to the “Plugins” tab.

Click on the template icon of the “Product list” plugin to open the template, and paste the below code.

<div class="container">
  <table class="table table-striped">
    <f:if condition="{items}">
      <f:then>
        <thead>
          <tr>
            <th scope="col">Product Name</th>
            <th scope="col">SKU</th>
            <th scope="col">Short Description</th>
            <th scope="col">Country of Origin</th>
            <th></th>
          </tr>
        </thead>
        <f:for each="{items}" as="item" iteration="i">
          <tbody>
            <tr>
              <td>
                <p>{item.producttitle}</p>
              </td>
              <td>
                <p>{item.productsku}</p>
              </td>
              <td>
                <f:format.html>{item.shortdescription}</f:format.html>
              </td>
              <td>
                <p>{productcountry_{i.index}}</p>
              </td>
              <td>
                <f:link.page pageUid="{settings.detailPid}" additionalParams="{uid: item.uid}">Learn More</f:link.page>
              </td>
            </tr>
          </tbody>
        </f:for>
      </f:then>
      <f:else>
        <p>NO Items Found !! </p>
      </f:else>
    </f:if>
  </table>
  <f:if condition="{items}">
        <nav aria-label="pagination">
            <ul class="pagination">
                <li class="page-item">
                    <f:if condition="{previousPage}">
                        <f:then>
                            <f:link.action arguments="{page:previousPage,pagesize:pagesize}">
                                <span class="page-link">Previous</span>
                            </f:link.action>
                        </f:then>
                        <f:else>
                        <span class="page-link disabled">Previous</span>    
                        </f:else>
                    </f:if>
                </li>
                <f:for each="{pagination.allPageNumbers}" as="page">
                    <li class="page-item">
                        <f:link.action arguments="{page:page,pagesize:pagesize}" class="page-link {f:if(condition:'{page}=={page}',then:'active')}">
                            {page}
                        </f:link.action>
                    </li>
                </f:for>
                <li class="page-item">
                    <f:if condition="{nextPage}">
                        <f:then>
                            <f:link.action arguments="{page:nextPage,pagesize:pagesize}">
                                <span class="page-link">Next</span>
                            </f:link.action>
                        </f:then>
                        <f:else>
                        <span class="page-link disabled">Next</span>    
                        </f:else>
                    </f:if>
                </li>
            </ul>
        </nav>
    </f:if>
</div>

Save the template, and then save the extension by clicking the “Save & Next” button for all the further steps.

Download the extension “Products” again, upload, and override the extension.
Open the list page in the front end, you will see the below view for the list with the above template code.
In our “Extension Builder”, the bootstrap CSS and JS files are already added, so we can implement the basic style just by using the bootstrap class.
Let’s add more products to get a list view for multiple products.
1. When we add a new product as a second or third or any number product after creating the very first one, we will have an option in “Similar Products”. If you select the products from there, those products will be considered as “similar products” to that product.
After adding more products, they can be seen in the TYPO3 backend “List” module by selecting the folder “Products”.
You can see the new products in the front-end product list as well. We have total 4 products and at the time of creating the page “Product List” we defined the “Records Per Page” field’s value as 3 so we will get 3 records on the first page and the 4th record will be seen on the second page, and the value of the “Order Direction” is “Descending ” so the records will be arranged in the descending order.
After “List” plugin, let’s check how to use the “Detail” plugin.

How to create the product detail page with the plugin type “Detail”?

Plugin – Product detail plugin (without “Only Show Selected Item” option)

When you click on the “Learn More” button from the list without adding the detail plugin, the blank detail page will appear. Let’s add the detail plugin for products so the corresponding detail page will open with the click of the “Learn More” button.
We already created the page “Product Details” so we will use that page to add the “Product detail plugin”.
Open the page “Product Details”, click on the “+ Content” button, and select the plugin “Product detail plugin” from the wizard.
Go to the tab “Plugin” and fill up the details.
1. List Page: Select the product list page. Here we have selected the “Product List” page as that is our product list page.
2. Back Button Label: This option appears because we selected the option “Display Back Button?” at the time of creating the plugin. This button will be redirected to the list page again. You can change the label as you wish.
After saving the page “Product Details”, click on the “Learn More” button of any product from the product list, and the corresponding detail page will open. Let’s click on the “Tangent Galvanometer” and the detail page will open as seen in the screenshot below:
The detail page appears with all the details in it’s original form. We should edit the template of the plugin “Product detail plugin”, before editing the template let’s add similar products for the “Tangent Galvanometer”.
Go to “List” module and open the “Products” folder, select the product “Tangent Galvanometer” and add a similar product to its field as seen and highlighted in the below screenshot.
After selecting similar products, if you open the detail page for this product “Tangent Galvanometer”, you will see the selected similar products are displayed below the product.

Now let’s update the template of the detail plugin. Go to the extension builder, log in to your account, go to the Plugins tab, click on the template icon of the plugin “Product detail plugin”, copy the existing code (to use IDs/markers from it), and paste it anywhere in your system editor, clear that existing code, and add the below code which is specific for this plugin only. But before saving the template, replace the field IDs with your own field IDs. E.g. in the below code, the ID for the brochure’s link is “f17314105191” but it can be different for your code, so find out the correct IDs from your default code and then replace the appropriate IDs in the given code below

<div class="container">
    <div class="row mb-5">
        <f:if condition="{item}">
            <f:if condition="{item.producttitle}">
                <h1 class="text-center text-decoration-underline mb-5">{item.producttitle}</h1>
            </f:if>
            <div class="col-md-6 product_img shadow-lg p-4 bg-body-tertiary rounded text-center">
                <f:for each="{item.productimage}" as="img">
                    <f:image image="{img}" alt="image" />
                </f:for>
            </div>
            <div class="col-md-6 product_desc px-5">
                <f:if condition="{item.productsku}">
                    <h3><strong>Product SKU:</strong> {item.productsku}</h3>
                </f:if>
                <f:if condition="{item.shortdescription}">
                    <f:format.html>{item.shortdescription}</f:format.html>
                </f:if>
                <f:if condition="{item.productcolor}">
                    <p><strong>Product Color: </strong> {item.productcolor}</p>
                </f:if>
                <f:if condition="{item.producttype}">
                    <p><strong>Product Type: </strong> {producttype}</p>
                </f:if>
                <f:if condition="{item.productaccessories}">
                    <p><strong>Product Accessories: </strong> {productaccessories}</p>
                </f:if>
                <f:if condition="{item.productpackagingincludes}">
                    <p><strong>Product Packaging Includes:</strong> {productpackagingincludes}</p>
                </f:if>
                <f:if condition="{item.launchdate}">
                    <p><strong>Product Launch Date: </strong>
                        <f:format.date>{item.launchdate}</f:format.date>
                    </p>
                </f:if>
                <f:if condition="{features}">
                    <p><strong>Product Features: </strong>{features}</p>
                </f:if>
                <f:if condition="{productincludes}">
                    <p><strong>What Product Includes: </strong>{productincludes}</p>
                </f:if>
                <f:if condition="{extra}">
                    <p><strong>What you will get with the product?: </strong>{extra}</p>
                </f:if>
                <f:if condition="{productcountry}">
                    <p><strong>Country of Origin: </strong>{productcountry}</p>
                </f:if>
                <div class="prod_buttons">
                    <f:if condition="{item.contactlink}">
                        <f:link.typolink class="btn btn-primary" parameter="{item.contactlink}">Contact Us
                        </f:link.typolink>
                    </f:if>
                    <f:if condition="{item.emailus}">
                        <f:link.email class="btn btn-secondary" email="{item.emailus}">Email Us</f:link.email>
                    </f:if>
                </div>
                <f:link.page class="btn btn-dark mt-3" pageUid="{settings.listPid}">{settings.backTitle}</f:link.page>
            </div>
    </div>

    <f:if condition="{item.productdescription}">
        <div class="prod_long_desc">
            <h2 class="text-center text-decoration-underline">Product Description</h2>
            <f:format.html>{item.productdescription}</f:format.html>
        </div>
    </f:if>

    <f:if condition="{item.addbrochure}">
        <div class="brochures text-center m-5">
            <h2 class="text-decoration-underline mb-4">Brochures</h2>
            <f:for each="{item.addbrochure}" as="itm" iteration="inline">
                <f:link.typolink class="shadow-lg p-4 bg-body-tertiary rounded  text-decoration-none fw-bold fs-6 text"
                    parameter="{itm.f17314105191}">{itm.f17314104270}</f:link.typolink>
            </f:for>
        </div>
    </f:if>
    </f:if>
    <f:if condition="{similarproduct}">
        <h2 class="text-decoration-underline text-center pt-5">Similar Products</h2>
        <div class="col-md-12 d-flex flex-row justify-content-center align-items-center">
            <f:for each="{similarproduct}" as="_similarproduct" iteration="i">
                <div class="col-md-6 p-5">
                    <div class="inner-col d-flex justify-content-center align-items-center flex-column shadow-lg p-4 bg-body-tertiary rounded"
                        style="min-height: 354px;">
                        <h4>{_similarproduct.producttitle}</h4>
                        <f:for each="{_similarproduct.productimage}" as="img">
                            <f:image class="object-fit-contain" image="{img}" alt="image" width="400" height="auto" />
                        </f:for>
                    </div>
                </div>
            </f:for>
        </div>
    </f:if>
</div>
</div>

Save the template, and then save the extension by clicking the “Save & Next” button for all the further steps. (This template contains a few bootstrap classes for the design of the detail page. You can use bootstrap class here or can add your custom style in your CSS file.)

Download the extension “Products” again, upload, and override the extension.
Open the detail page in the front end, you will see the below view with the above template code.

Now let’s check how the detail plugin with “Only Show Selected Item?” works

Plugin – Single Product Detail (with “Only Show Selected Item” option)

Let’s add the plugin “Single Product Detail” on the home page. We are adding it to the home page. You can add this on any page where you want the details for any particular product.

Open the home page and add the plugin “Selected Product Deail” the same as we did for the “Product detail plugin”.
Then go to the tab “Plugin” and fill up the details.

Select Items: This option appears because we selected the option “Only Show Selected Item?” at the time of creating the plugin. When you select the product here, you will be able to use that product’s detail page as a normal page. E.g. in this illustration we want to show the detail page of the “Oscilloscope” when viewing the Home page, then this option is useful here.
Save the page and click on the view button at the top left and the detail page of the product “Oscilloscope” will open because in “Select Items” we selected the product “Oscilloscope”.:
You can manipulate the template of this plugin the same as we did for the plugin “Product detail plugin”.
After the detail plugin, let’s check how to use the plugin “Filter.”

How to filter products with the plugin type “Filter”?

In this example, the filter requirement is in the product list. So let’s add the plugin “Product Filter” in the page “Product List”.
Go to “Page” > open the page “Product List” > Click on “+ Content” button to open the wizard.
Select the plugin “Product filter” to add the filter.
After adding the plugin, go to the “Plugin” tab and you will see the below screen:
You will have to select the filter result page ID. If you want your filter result on the same page, select the list page (“Product List” in this example.) Or if you want the filter result in a different page, create a new page.
Let’s create a new page “Filter Result”, and select that page in the “Filter Result Page Id” field of the filter plugin.
Save the page and open the product list page in front-end. You will see the filters we added at the time of creating the plugin “Product filter”.
To take the filters above the product list, go to the page “Product List” and change the order of plugins “Product list” and “Product filter” as seen in the screenshot below:

You can change that order by just drag and drop.
Check the front end after reordering the plugins and you will see the filters are moved above the product list.
Let’s manipulate the template of the filter plugin to show them better on the front-end.
Go to the extension builder, log in to your account, and go to the “Plugins” tab, click on the template icon of the “Product filter result” plugin to open the template.

Copy the existing code (to use IDs/markers from it), paste it anywhere in your system editor, clear that existing code, and add the below code which is specific to this plugin only. But before saving the template, replace the field IDs with your own field IDs.

<div class="product_filter position-absolute top-0 start-0 w-auto bg-light">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <f:form action="productfilterSubmit" enctype="multipart/form-data" name="productfilter" object="{products}">
                    <div class="filter_wrapper d-flex flex-column">
                        <f:if condition="{categories}">
                            <div class="form-group mb-3 mx-3">
                                <h6 class="mb-3" for="productcategory"><f:translate key="products_productcategory" /></h6><br />

                                <f:for each="{categories}" as="cat" iteration="ii">
                                    <div>
                                        <f:form.radio property="productcategory" value="{cat.uid}"
                                            checked="{productcategory_res} == {cat.uid}" />
                                        {cat.title}
                                        <f:if condition="{cat.childs}">
                                            <f:render partial="childs"
                                                arguments="{data: cat.childs,property:'productcategory',res:productcategory_res}" />
                                        </f:if>
                                    </div>
                                </f:for>
                            </div>
                        </f:if>
                        <div class="form-group mb-3 mx-3">
                            <h6 class="mb-3" for="productcountry"><f:translate key="products_productcountry" /></h6><br />
                            <f:form.select property="productcountry" class="form-control" options="{productcountry}"
                                value="{productcountry_res}" />
                        </div>            
                    </div>
                    <f:form.hidden name="filterResultPid" value="{settings.filterResultPid}" />
                    <f:form.submit class="btn btn-primary" value="<f:translate key='filter' />" />
                </f:form>    
            </div>            
        </div>
    </div>
</div>

After saving the template, save the extension, re-install the extension and check the front-end. It will look like this in the screenshot below:
If you filter here by selecting the options in “Product Category” and/or “Product country” you will see the blank page. To get the filter result we must add the plugin type “Filter Result”.
Let’s check how to use the plugin “Filter Result”.

How to get filtered products with the plugin type “Filter Result”?

If you want to get the result on the same page, you should add the plugin “Product filter result” on the list page. And if you want to get the result on a completely new page then you should add the plugin on the new page.
As we already created the page “Filter Result” at the time of adding the plugin “Product filter”, let’s add the plugin “Product filter result” to that page.
After adding the plugin go to the “Plugin” tab.
As you can see in the above screenshot, you will have to fill up the details.
1. Record Stored Page: Select the page/folder where you have stored your records. Here the folder is the “Products” folder.
2. Records Per Page: Add the number of records you want per page. Let’s add 2 here.
3. Detail Page: Select the detail page, the page where you have added the detail plugin. Here the detail page is “Product Details”.
4. Order By: This field will contain the options we selected at the time of creating the plugin “Product filter result”. You can change the order from here according to your requirements. Let’s select “Product Title”.
5. Order Direction: This is the default TYPO3 option to select the direction of items in the filter result list. Here the selected option is “Ascending”.
Below is the screenshot of the filter result plugin after filling up all the details.
Click on the save button.
Now go to the front end and select options from the filter, as seen in the screenshot below:
Click on the button “Filter” and you will get the filtered data or filtered products as seen in the screenshot below:
As we manipulated the template for the detail plugin, let’s do the same for the filter result plugin.
Go to the extension builder, log in to your account, and go to the “Plugins” tab, click on the template icon of the “Product filter result” plugin to open the template.

<div class="container">
    <div class="row mb-5">
        <f:if condition="{items}">
            <f:then> 
                <f:for each="{items}" as="item" iteration="i">
                    
                        <f:if condition="{item.producttitle}">
                            <h1 class="text-center text-decoration-underline mb-5 mt-5">{item.producttitle}</h1>
                        </f:if>
                         <div class="col-md-6 product_img shadow-lg p-4 bg-body-tertiary rounded text-center">
                            <f:for each="{item.productimage}" as="img">
                                <f:image image="{img}" alt="image" />
                            </f:for>
                         </div>
                         <div class="col-md-6 product_desc px-5">
                            <f:if condition="{item.productsku}">
                                <h3><strong>Product SKU:</strong> {item.productsku}</h3>
                            </f:if>
                            <f:if condition="{item.shortdescription}">
                                <f:format.html>{item.shortdescription}</f:format.html>
                            </f:if>                                               
                            <f:link.page class="btn btn-primary" pageUid="{settings.detailPid}" additionalParams="{uid: item.uid}">See detail page</f:link.page>                  
                        </div>
                </f:for>
            </f:then>
            <f:else>
                <p>NO Items Found !! </p>
            </f:else>
        </f:if>
        <f:if condition="{items}">
            <div class="my-5 d-flex align-items-center justify-content-center">
                <nav aria-label="pagination">
                    <ul class="pagination">
                        <li class="page-item">
                            <f:if condition="{previousPage}">
                                <f:then>
                                    <f:link.action arguments="{page:previousPage,pagesize:pagesize,productcategory:productcategory,productcountry:productcountry}">
                                        <span class="page-link">Previous</span>
                                    </f:link.action>
                                </f:then>
                                <f:else>
                                <span class="page-link disabled">Previous</span>    
                                </f:else>
                            </f:if>
                        </li>
                        <f:for each="{pagination.allPageNumbers}" as="page">
                            <li class="page-item">
                                <f:link.action arguments="{page:page,pagesize:pagesize,productcategory:productcategory,productcountry:productcountry}" class="page-link {f:if(condition:'{page}=={page}',then:'active')}">
                                    {page}
                                </f:link.action>
                            </li>
                        </f:for>
                        <li class="page-item">
                            <f:if condition="{nextPage}">
                                <f:then>
                                    <f:link.action arguments="{page:nextPage,pagesize:pagesize,productcategory:productcategory,productcountry:productcountry}">
                                        <span class="page-link">Next</span>
                                    </f:link.action>
                                </f:then>
                                <f:else>
                                <span class="page-link disabled">Next</span>    
                                </f:else>
                            </f:if>
                        </li>
                    </ul>
                </nav>
            </div>
        </f:if>
    </div>
</div>

After saving the template, save the extension, re-install the extension and check the front-end for the filter result. It will look like this in the screenshot below:
After “Filter Result”, let’s check how to use the plugin type “Form”.

How to create the form by using the plugin type “Form”.

To create any kind of form, you can use the plugin type – Form. Here we took the “Contact Form” as an example.
To add the plugin, let’s create a separate page “Contact Us”.
Click on the “+ Content” button, and select the plugin “Contact Form” from the wizard.
After adding the plugin, go to the tab “Plugin” and you will see the below screen.
As you can see in the above screenshot, you will have to fill in the details.
1. Record Stored Page: Select the page/folder where you have stored your records, which will be records of the form submission.
  1. Let’s create a folder “Contact” and select that folder in this field. This folder will contain all the contacts who submitted the contact form.
  2. You can manage these contacts from the “List” module of the TYPO3.
2. Thank You Page: Select the page that will appear after your form has been submitted with some message like a simple thank you message.
  1. Let’s create a page “Thank You”, enable the page, and add some content or a ‘thank you’ message.
  2. To add the content, click on the “+ Content” button, Go to the “Typical page content” and select the “Regular text element”.
  3. You can add a header and text in that element. In this case, we are skipping to add the header and just adding the thank you message.
  4. After creating the page and folder, let’s select them in the plugin “Contact Form” to their appropriate fields.
  5. Save the page and click on the “View” button to view the front-end, you will see a below screen.
  6. The fields of the forms are the fields we added at the time of creating the plugin type “Contact Form”.
  7. Let’s manipulate the template of the plugin “Contact form”.
  8. Go to the extension builder, log in to your account, and go to the “Plugins” tab, click on the template icon of the “Contact form” plugin to open the template.
  9. Copy the existing code (to use IDs/markers from it), paste it anywhere in your system editor, clear that existing code, and add the below code which is specific to this plugin only. But before saving the template, replace the field IDs with your own field IDs.
```
<div class="container mt-5">
    <f:form action="contactformSubmit" enctype="multipart/form-data" name="contactform" object="{contact}">
        <div class="form-group mb-3">
            <label class="mb-3" for="firstname">
                <f:translate key="contact_firstname" /></label><br />
            <f:form.textfield property="firstname" class="form-control" placeholder="" required="true" />
        </div>
        <div class="form-group mb-3">
            <label class="mb-3" for="lastname">
                <f:translate key="contact_lastname" /></label><br />
            <f:form.textfield property="lastname" class="form-control" placeholder="" required="true" />
        </div>
        <div class="form-group mb-3">
            <label class="mb-3" for="email">
                <f:translate key="contact_email" /></label><br />
            <f:form.textfield property="email" class="form-control" placeholder="" required="true" type="email" />
        </div>
        <div class="form-group mb-3">
            <label class="mb-3" for="phone">
                <f:translate key="contact_phone" /></label><br />
            <f:form.textfield property="phone" class="form-control" placeholder="" />
        </div>
        <div class="form-group mb-3">
            <label class="mb-3" for="comment">
                <f:translate key="contact_comment" /></label><br />
            <f:form.textfield property="comment" class="form-control" placeholder="" />
        </div>
        <f:form.hidden name="storePid" value="{settings.storePid}" />
        <f:form.hidden name="thankPid" value="{settings.thankPid}" />
        <f:form.submit class="btn btn-primary" value="<f:translate key='submit' />" />
    </f:form>
</div>
```
  10. After saving the template, save the extension, re-install the extension, and check the front-end. It will look like the screenshot below:
  11. Let’s submit the form.
  12. If you submit the form without filling up the required fields, you will see a warning and you will not be allowed to submit it.
  13. Let’s fill in the details for testing.
  14. After filling up the details, click on the submit button, and you will be redirected to the thank you page as seen in the screenshot below:
  15. Now let’s check the entry of the submitted form in TYPO3.
  16. Go to the “List” module, go to the “Contact” folder and you will see the entries of the form.
  17. You can edit the record, disable the record, or delete the record by using the action icons on the far right.
  18. You can see all the details by clicking on the edit icon.

After completing all the plugin types, let’s see about the “Backend Module”.

How to use the “Backend Module”?

At the time of creating the extension, in the last step, we checked the checkbox of the tables “Products” and “Contact” to add these tables in the backend module to list the data of corresponding tables.
So we got those backend modules when we installed the extension.
You can see the backend module in the screenshots below and the tables “Products” and “Contact”.
Here you can see the details of your tables in a list form. Within this extension, the backend module is a user-friendly option to see all the table data in a list form.

Documentation

TYPO3 Extension Builder

How to create an extension using the extension builder?

Log in/Registration

Add New Extension

Example of the extension builder – Products Extension

Create Tables

Table – Products

Table – Country of Origin

Front-end Plugins

Plugin type – List

Plugin type – Detail

Create a detail plugin without selecting “Only Show Selected Item?”

Create a detail plugin by selecting “Only Show Selected Item?”

Plugin type – Filter

Plugin type – Filter Result

Plugin Type – Form

Backend Module

How to use the extension in TYPO3

Add products for the “Products” table.

Add countries for the “Country of Origin” table.

Add TYPO3 categories

How to create the product list with the plugin type “List”?

Template manipulation in extension builder

How to create the product detail page with the plugin type “Detail”?

Plugin – Product detail plugin (without “Only Show Selected Item” option)

Plugin – Single Product Detail (with “Only Show Selected Item” option)

How to filter products with the plugin type “Filter”?

How to get filtered products with the plugin type “Filter Result”?

How to create the form by using the plugin type “Form”.

How to use the “Backend Module”?

TYPO3 Extension Builder

CONTENTS