Headless

Estimated reading: 30 minutes 411 views

To use Headless theme, you will need to install 2 packages, which are:

t3theme (TYPO3 installation)
Headless (Next.js package)

T3headless (TYPO3 installation)

Configurations

Extension Configuration
1. Open your TYPO3 setup and follow the steps below, before the extension upload to prevent any error in extension installation in the latest versions of TYPO3 (specifically 12.x.x & 13.x.x here).
  Ref.: https://forge.typo3.org/issues/100730
  Go to Admin Tools > Settings > Extension Configuration and click on Configure extensions
  
  Then the pop-up will open as seen screenshot below, in that popup go to the extensionmanager > Install extensions automatically after download from TER or file upload (basic.automatic Installation [boolean])) and uncheck the checkbox & click on the Save “extensionmanager” configuration button
Configure Installation-Wide Options
1. Go to Admin Tools > Settings > Configure Installation-Wide Options and click on Configure Options
2. You will get the modal by clicking the “Configuration Options” button.
3. Go to Frontend [FE] > [FE][pageNotFoundOnCHashError] and set it to false by unchecking the checkbox if it is checked. You can find this config by filter as seen in the below screenshot.
4. Then Go to System [SYS] and uncheck the below checkboxes:
  1. [SYS][features][security.backend.htmlSanitizeRte]
  2. [SYS][features][security.backend.enforceContentSecurityPolicy]
  3. [SYS][features][security.frontend.enforceContentSecurityPolicy]
    
    You can filter them by the text “[SYS][features][security”
    
    After all these configs, click on “Write Configuration” button to save all the configs.

T3headless Extension Installation

Click on Admin Tools > Extensions > Get Extensions > Upload Extensions and select & upload t3headless.zip, and then click on Save.
Once the extension is uploaded, you will get the success message on the screen. To activate the extension, click on the activate button on the left if the extension list as you can see in the below screenshot.

Dependency extension installation

To use the t3headless extension, other dependency extensions must be installed. If your TYPO3 setup has done with composer, the dependency extensions will be installed automatically, but if the TYPO3 setup has been done manually then you will need to install the dependency extensions manually.
There are 2 extensions you will have to install and they are: i ) Container Content Elements, ii) News system

Configurations after extension installation

Include TypoScript
1. Go to Site Management > TypoScript > select root page > Edit TypoScript Record and click on Edit the whole TypoScript record button.
2. Go to the General Tab and remove the default Setup TypoScript of the default TYPO3 installation.
3. Go to the Advanced Options Tab and include the TypoScript of extensions in the following sequence.
  1. Fluid Content Elements (fluid_styled_content)
  2. Fluid Content Elements CSS (optional) (fluid_styled_content)
  3. Form (form)
  4. XML Sitemap (seo)
  5. News (news)
  6. T3headless (t3headless)

Here 1.3.1 to 1.3.4 extensions are installed by default.

API Configuration

After adding TypoScript, you will have to do configurations for the API.
Now open the config.yaml file of your website from sitesmainconfig.yaml, and import the API by adding the code below. ( The placement of the sites folder could vary according to how you set up your TYPO3 website. )
```
imports:
  -
    resource: 'EXT:t3headless/Configuration/Yaml/default.yaml'
```

T3headless Activation

After all the configurations are done, now it’s time to activate the t3headless extension. Please follow the below steps to activate the t3headless extension.

There are 2 possibilities, 1 – If you have purchased the product from the t3element store and 2 – If you are going to register for a free license key.
1. Go to Web > t3headless and you will see the screen as in the screenshot below click on “Get Started”.
2. Case -1: You already have purchased the product from the t3element store and you have the license key from that purchase.
  1. Please check your mail from T3element to find the license key, and select “Activate License” and then click on “Continue”.
  2. And you will see the screen as seen in the screenshot below. Now please enter your email and the license key and click on the button “Submit”.
  3. Case -2: If you didn’t purchase the product but want to use the t3headless extension, then you can register directly after extension installation and you will get the license key in your mail, then you can add the license key to activate the t3headless. Please follow the below steps to activate the t3headless extension by Free Registration.
    1. Please Enter your email and name and then click on the “Submit” button.
    2. Now you will get License key in your registered Email. Copy that license key and click on “Activate Now” button so you will see the activation screen.
    3. Now you are a registered user, and you will be redirected to the screen as seen in the below screenshot, but you need to activate the theme and for that, you should check your mail where you will find a mail from T3element with the license key. Copy that license key and paste it into the field “License key”.
    4. After clicking on Submit you will be redirected to the screen as seen in the below screenshot.
      
      Now you can create your custom element.

Headless Configurations

Now go to the “Headless” tab and you will see the screens as seen in the screenshot below.
Add the Frontend domain with Next.js setup and server cache duration in seconds and click on the “Save Changes” button, and you will get the message “Store Successfully” and the details will be saved and you can see it on the screen.

Headless (Next.js package)

Prerequisites

To install the Headless package you will need

Next.js supported server.
Node.js version 18.17 or later, we recommend you to use node v.20.11.0

Before headless package setup, you can check your node version by SSH access:

Command: node -v
Output: v20.11.0

(Make sure you have SSH access for the domain in which the Next.js site has been built)

Next.js Package Installation

Install Next.js
1. Add provided Next.js (headless) folder in the domain’s root directory.
2. Login with SSH access into git Bash or puTTY or any other server CLI.
3. Install yarn if it is not already installed in server.
  1. You can check if the yarn is already installed in your server or not by this command:
    yarn –v
  2. If yarn is not installed in your server, you can install yarn with this command: npm install –global yarn and you will get the output like this.
  3. After yarn installation, we can install the package using this command: yarn install
    
    If you couldn’t install yarn for any reason, then you can do package installation with this command: npm install –force
  4. License key Configurations
    1. Please open the file themebuilder.js from the provided folder. The file is located in the src folder: srcthemebuilder.js and add your license key. Please check “t3headless Activation” to see how to get the license key.
  5. Sync Theme configurations in a headless package
    1. Once you set the license key, running the below command is a must, otherwise your setup will not work anyway.
      Command: node src/themebuilder.js
    2. Now your theme-wise headless package is ready to serve. You can serve by the below command.
      1. Development mode of site executed by the command: yarn dev
      2. Production mode of site executed by the command: yarn build && yarn start
      3. Now open your browser with port 3000, here the domain is headless.t3elements.com so the URL will be headless.t3elements.com:3000. You will see an empty page as we didn’t add anything yet to the page.

Headless Theme Configurations

Add Header
1. Go to Theme Options > Header. You can upload the logo and favicon from here. Also, you can upload CSS and JS files from here. Just go to the Header tab and upload your logo, favicon, CSS file and JS file.
2. Add Logo
  1. Here is an example of a logo upload.
    
    After uploading the logo, click on the “Save Changes” button and then check on Frontend and you will see the logo has been uploaded.
3. Like the logo, you can add a favicon, and CSS file and also upload theme fonts from the Logo, Favicon etc.
4. Logo custom height and width: If you don’t set any height and width for the logo, it will be rendered with its default size, but if you want to set custom height and width then you can set it from here.
  
  The logo will be rendered with the custom width and height.
5. Select Header Page: If you want a top header or a section above the main header throughout the site, you can add that from the “Header Page”. Follow the steps below to add the top-header.
  1. Create a page, here the page “Top Header” has been created, and you can give any name you want. And if you don’t want to create a new page and want to use any existing page, you can use that. But here in this example, we are going to create a new page.
    
    After creating a new page, let’s add content to that page to show on the header. After clicking on + content button the popup will open as in screenshot, you can select any element according to your content on the top header, here we are going to use Regular Text Element.
    
    Now you can add your content to show on the top header.
    
    After adding the content click on “Save” at the top and your content will be saved.
    
    Now select the Header top page in header page and click on “Save Changes”.
    
    Now refresh the Frontend and you will see the content on the top.
6. Theme Fonts
  1. You can upload fonts from here if you want to add custom fonts in your website. To upload custom fonts, please follow the below steps:
    1. Upload font files.
    2. To include the fonts in the theme, you must run a command below on headless setup with SSH access:
      Command: node src/themebuilder.js
    3. After running the command, you will get the message of “Theme updated successfully!!” and the fonts will be loaded now in your headless package.
    4. by adding the code below, you should add your custom fonts.
```
@font-face {
    font-family: 'Cute Dino';
    src: url('/fonts/CuteDino.woff2') format('woff2'),
        url('/fonts/CuteDino.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
```
    5. Theme Stylesheets: Now you will have to upload the CSS file from the Head assets. You can add multiple CSS files from here.
    6. Now you must run the command below on headless setup with SSH access to load the stylesheet:
      Command: node src/themebuilder.js
      Now the website will load with the custom fonts.
Add Footer
1. Copyright
  1. Go to Theme Options > Footer > Copyright and you will find an option to set copyright text.
    
    Now refresh the frontend you will see the footer and copyright text.
  2. If you want to add more content in the footer, you can add a footer page and can call the page in “Footer page” dropdown.
    Once you select the Footer page, it’s content will be seen as the footer.
    
    If you don’t want to add a default footer and just want the footer page to render as a footer, then you can remove the default footer by removing the copyright text from the footer and the default footer will disappear.
Add CSS/JS
1. 1. 1. Here you can add custom CSS and custom JS of header without uploading any CSS or JS files.
    1. Here you can add custom CSS and custom JS of Footer without uploading any CSS or JS files.
Menu
1. To set the header menu for the headless theme go to the Theme options > Header > Menu and you will see the screen as seen in the screenshot below:
2. On the left side there is a list of pages and you can add the pages to the menu by drag them from the list and drop into the box on the left below the “Main Menu” text.
3. Submenu
  1. To add submenu items in the main menu item, just click on the Plus Icon far right on the menu item and expand the main menu item by clicking on that Plus Icon, and you will see a box on the right to drop the submenu item for that particular main menu item.
  2. If you want to add sub of submenu, then also you can add by the same way we added above submenu item.
4. Now refresh the front-end and you will see the menu.
Language menu
1. To add a language menu to your website, go to Theme options > Header > Language menu.
2. As you can see in the above screenshot, we do have “Drag Language” box, from there you can drag the languages and drop them into the Language menu.
3. Here in the below example some languages are defined, you can define languages in TYPO3 by following the documentation link – https://docs.typo3.org/m/typo3/tutorial-editors/12.4/en-us/Languages/Index.html
4. After adding the language from the “Drag language” box to the language menu, make sure you have checked the checkbox “Show Language Menu ?” and click on the “Save Changes” button and you will get the message of success and you will see the language menu in frontend and as we selected “Flag” in above screenshot, you will see flags in language menu, but you can try other options too like “Title”, “Title Flag” and “Flag Title” and check the frontend.
404 Page:
1. 404 Page: By default when we enter the wrong URL, the 404 page will be seen like in the screenshot below.
2. But if you want to customize this page according to your theme, you will have an option to customize the 404 page. Go to Theme options > Other Pages and here you will have an option to select the page.
3. Let’s create a 404 page. As we already have seen about how to create a page in TYPO3, this is just a screenshot with the created page and added content to the 404 page.
4. Now go to t3headless > Theme options > Other Pages and select the page “404” and then click on the “Save Changes” button.
5. And try with any wrong URL in the frontend and you will get the custom 404 page.

Now let’s see about the “Elements”. Check below to know about the Elements tab.

container element

To create a container element, go to t3headless > Elements > Container Elements.

Create Container Element

To Create a container element please follow the below steps:

Add Element: Create a container element by clicking on the button “New Container Element”.

By clicking on the button, you will see 3 tabs there i) Info, ii) Fields, and iii) Template.
1. Info
  1. The first tab that will open is “Info”, and you will have to add information like Title, Short Title, Description, etc., and click on the Next button.
  2. Fields
    1. You will be redirected to the “Fields” tab, and you can add a new column by clicking on the “+ Add Column” button.
    2. You can add a number of columns as per your requirement by clicking on the “+ Add Column” button, after adding the columns, add titles for the columns as seen in the screenshot below. You can delete the column from the delete icon placed at the far right.
    3. Click on the “Next” button, and you will be redirected to the “Templates” tab.
  3. Templates
    1. You will see a basic template according to your fields/columns as seen in the screenshot below.
    2. You can edit this template to add classes or any other attributes as seen in the screenshot below, but you should be careful while editing the template as it is the React/Next Template, not just a simple HTML, for example, we have to use the “className” attribute instead of “class”.
    3. Markers
      1. Above the template code, there are some markers from where you can copy the code for the specific field. E.g. If you want to add a completely new custom template, then you can use these markers to copy the code and paste it into your new template. You can try by just click on the marker and you will get the message “Marker Copied! Paste where you want to add”.
  4. After clicking on the “Save Changes” button the template will be saved and you will see the element in the list of the element.

Perform actions on the container Element

You can perform some actions on the element. You can edit the element, delete the element, and also you can edit the template file directly.

Edit the element:
1. After creating the element, you can edit the element you have added.
2. Click on the edit icon to edit the element as seen in the above screenshot.
3. You can Edit info, fields, and template code by this.
4. Here one important thing to note is; that if you have done your templating already and now you want to add a new field in your element, then you can add the field easily by edit the element, and it will not affect your template. But after adding a new field when you press on the “Next” button you will see that your template is as it is, but you will get a marker for the new field, you can copy the new field code by clicking on that marker and can paste in your template. Below is an example of template editing:
  1. When you edit any element that is already in use, you will see a dialogue like this:
  2. Go ahead by clicking on Yes, and you will see all the 3 tabs you saw at the time of element creation which are info, field, and template.
  3. If you want to edit the title or short title or description, you can edit them and click on the “Next” button.
  4. You will see the fields/columns we added at the time of the element creation.
  5. Now let’s add one new column named “Service links” and replace it with the “Contact Details” column and edit the name of the “Contact details” column too.
  6. After clicking on the Next button the template below will open, there are no updates in the template file as you can see, but there is one marker on top, let’s copy the code of the new field by clicking on that marker and then set it in that template.
  7. Now after copying the code, we can paste the code into the template.
  8. You can structure the code well, and then click on the “Save Changes” button to save the template
Edit the container template
1. If you want to just edit the template and not add any new field, then you can click on the 3^rd and the last icon and you will be redirected to the template directly. You can edit the template and save it.
2. After edit the template, make sure to run the below command to synchronize the data with the headless theme.
  Command : node src/themebuilder.js
Delete the element
1. If you want to delete any container element, you can delete it by clicking the 2^nd icon which is a delete icon.
2. If you are going to delete any element that is already in use then you will get a warning like this.
3. But if you are going to delete any element that is not in use then you will get a dialogue with just a confirmation message.
4. And when you will give confirmation, the element will be deleted and you will see the message on the screen for “Element Deleted!!”

Custom element

To create the custom element, go to t3headless > Elements > Custom Elements

Create Custom element

To Create a Custom element please follow the below steps:

Add Element: Create a content element by clicking on the button “+ Create New Element”.

By clicking on the button, you will see 3 tabs there i) Info, ii) Fields, and iii) Template.
1. Info
  1. The first tab that will open is “Info”, and you will have to add information like Title, Short Title, Description, etc., and click on the Next button.
  2. Fields
    1. You will be redirected to the “Fields” tab.
    2. You can add elements from the available list of elements on the left side. Add an element or field by clicking on the “+” icon or drag the element and drop it into the box, that way you will add the desired fields and will create the elements, e.g. Slider, Teaser Box, CTA, etc
      Here is an example. Let’s create an element to be more clear about how to create custom elements by using T3Element Builder. Let’s create a Slider element.

Slider Element

To Create a Slider Element, we have to use the “Repeating” element.
1. This “Repeating” element is specially built for elements like sliders that have the same field or group of fields in a loop, like an image slider; which has an image in a loop or a slider with a group of fields that have a Title, Image and Button.
2. Let’s go with an example of a group of fields to create a Slider.
  Each slide will contain a Title, an Image, and a Button.
3. Add repeating element.
4. Now you will see 2 tabs “General” and “Fields”.
5. In the General Tab, you can fill up details of the “Repeating” field as you can see in below screenshot.
6. In the Fields Tab, you can add fields for the slider like Title, Image, and Button. Hover over the icons and you will see the type of field.
  1. Title
    1. Add “String” or “Text” type for the Title, expand the field by clicking on the arrow on the far left side, and fill up the details of fields.
  2. Image
    1. Add “File”, expand the field, and fill up the details.
  3. Button
    1. To add the button, you will need to add a String for the button text and a Link to link the button as you can see in the below screenshot.
7. Now all the required fields are added, press on the “Next” button and you will see the React/Next template that has been generated according to the fields you chose to create the Slider element.
  
  Here you can customize this template, and write the template according to your requirements, but you should keep in mind that this template is not a simple HTML template, it is the React/Next template you so must use attributes according to the React/Next template, like using “className” instead of “class”. For more details, you can check here.
  
  Also, we are providing markers as you can see in the above screenshot, you can copy the code by clicking on the marker for the field you have added and paste it into your customized template.
  
  Below is the example of the customized template, you can see the new structure of the same element “Slider element” with an added custom className.
  1. When you click on the “Save Changes” button, you will find the element you just created in the element list as you can see in the below screenshot.

Perform actions on the custom content element

You can edit or delete the element and you can edit the template file also.

Edit the element
1. You can edit the element by clicking on the edit icon and you will see all the 3 tabs, info, fields, and template.
  1. When you edit the element, if the element is in use then the dialogue will remind you and warn you that “Element is in used, This action can lost data or error can be occurred, Do you want to really edit element?”
2. If you want to rename the title, short title, or description you can edit them and press “Next”.
3. Now the important part of element editing is here, suppose you want to add a new field at the time of element editing, then you can add any number of fields. For example, here one element has been added for the main heading of the slider section.
4. Then click on the next button, and you will see your template will not overwrite, so the new field will not be added to the template but you can get the code of the new field from the marker.
5. Then click on the “Save” button and you are done with the element editing.
6. And if you don’t want that newly added field any more, you can just delete it, and the marker will also be deleted.
Edit the template
1. If you just want to edit the template, you can edit it by clicking the 3^rd icon on the element listing.
2. Before you edit the template. Keep in mind that this is the React/Next template and not just a simple HTML template.
Delete the template
1. You can delete the element if you want. When you delete the element if the element is already in use, the dialogue will open to remind you that the element you are going to delete is already in use.

How to use the custom element

After creating the element, now it’s the time to use the element. We can place the custom element on any page like other elements.

Go to Web > Page from the left sidebar, open any existing page, or create a new page where you want to place the custom element and enable the page.
Now start to add custom elements by clicking on the + Create New Content button as seen in the above screenshot and the pop-up will open as shown in the below screenshot, and then go to the “Custom Elements” tab from the left side of the pop-up.
After clicking on the “Slider” element from the popup, the element will be open to let you add the data.
As it is seen in the above screenshot, the option is showing “Slider Element”, and it will allow you to add slides by clicking on the button “+Add Slide” (as we named the “Create New” button to “Add Slide” at the time of custom element creation.)
After the slide is added, you will be able to add the data into the fields.
Fill up the data and then add more slides as per your requirement.
Then save the page and check in the front end, and you will see the element is rendering with the design according to the CSS file and template you have added.
The organized view can be seen only if you have structured the template properly and uploaded CSS and JS files for your slider. If you haven’t updated the template file or CSS/JS, then you can edit the template, CSS, and JS.
This way you can create your Custom content elements.

Headless Elements Synchronize

After any element operation like creating an element, updating an element, deleting an element, or updating a template of the element, if you don’t get any impact in the headless theme, and if you are getting a message on the screen as seen in the screenshot below;

You will have to run the below command into the root directory of the headless theme Next.js setup.
Command: node src/themebuilder.js

Run setup again in dev mode by Command: yarn dev

Run setup again in production mode by Command: yarn build && yarn start

Now check in frontend and you will see the error has been gone.

React Next Template Notes

Class Attribute

In normal HTML we use the “class” attribute, while in the React Next JS template, we must use the “className” attribute.

Link Attribute

In normal HTML we use <a> tag to render the link, while in the React Next JS template we should not use <a> tag, instead we can use the Next.JS Link component. You can check this guideline for more details about the Link component.

Note: According to the guideline, before using the Link component, we should import the component, but please note here that in the t3headless template, we don’t need to import the Link component before using it.

Image

In normal HTML we use <img> tag, while in React Next JS template, we must use the Image component of the element. You can check this guideline for more details about the Image component.

But here in t3headless, you must use the “Nimage” component which is a custom component and it does override the Image component and will support each property of the Image component. The example is given code below.
```
{_data?.images?.length > 0 ? _data?.images.map((immg: any, index: any) =>
<Nimage
key={_data?.uid + immg?.url + index}
immg={immg}
data={data}
width={500}
height={500}
className="w-100 h-auto"
alt="Image"
title="Image"
/>
)) : null}
```
Note: According to the guideline, before using the Image component, we should import the component, but please note here that in the t3headless template, we don’t need to import the Image component or Nimage component before using it.

Nimage attribute details

Check the below explanation of the Nimage attributes. The attributes that contain the ‘*’ sign are mandatory.

key*: Key attributes are mandatory to avoid the key warnings of Next.JS
immg*: to pass the immg object is mandatory, which will be fetched from the loop.
data*: It is the mandatory attribute to render the image.
width: It is not a mandatory attribute, but if we add the width, the image will take the given width, otherwise the image will be rendered with the original width which is the width of the image at the time of upload.
height: It is not a mandatory attribute, but if we add the height, the image will take the given height, otherwise the image will be rendered with the original width which is the width of the image at the time of upload.
className: It is not a mandatory attribute; we can use this to add a class to the image.
alt: it is the mandatory attribute but suppose if you don’t specify this then it will take the alt text from the file details.
title: It is the mandatory attribute, but suppose if you don’t specify this then it will take the alt text from the file details.

Image as background

If you want to use the image as a background image, then you will need the URL of the image. To get the URL of the image, you can use the object immg?.url as seen in the code below.


{_data?.images?.length &gt; 0 ? _data?.images.map((immg: any, index: any) =&gt;
    &lt;div style={{backgroundImage: `url(${immg?.url})`}}&gt;&lt;/div&gt;
)) : null}

React Bootstrap component

You can use any react-bootstrap component using the prefix “All “.

Accordion

Use All.Accordion as seen in the screenshot below.

<All.Accordion defaultActiveKey="0">
    {_data?.qa1710764520?.map((__rcd: any, _k: any) => (
    <All.AccordionItem eventKey={_k} key={_k + "qa1710764520" }>
        <All.AccordionHeader> {__rcd?.ques1710764541}</All. AccordionHeader>
            <All.AccordionBody>
                <div dangerouslySetInnerHTML={{ __html: __rcd?.answer1710764538 }}></div>
            </All.AccordionBody>
    </All.AccordionItem>
    ))}
</All.Accordion>

Slider

Use All.Slider for the slide’s wrapper and use All. SliderItem for the slides.
Note: Attributes of the Swiper slider are used in All.Slider & All.SliderItem tag.

<All.Slider
    slidesPerView={1}
    direction="horizontal"
    navigation={true}
>
    {_data?.slider1713012365?.map((__rcd: any, _k: any) => (
        <div key={_k + "slider1713012365"}>
            <All.SliderItem key={_k + "slider1713012365"} >
                <div className="ECom_testimonial ECom_style_1 text-center">
                    <div className="ECom_testimonial_icon">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="icon icon-tabler icon-tabler-blockquote"
                            width="54"
                            height="54"
                            viewBox="0 0 24 24"
                            strokeWidth="2"
                            stroke="currentColor"
                            fill="none"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path
                                stroke="none"
                                d="M0 0h24v24H0z"
                                fill="none"
                            />
                            <path d="M6 15h15" />
                            <path d="M21 19h-15" />
                            <path d="M15 11h6" />
                            <path d="M21 7h-6" />
                            <path
                                d="M9 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"
                            />
                            <path
                                d="M3 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"
                            />
                        </svg>
                    </div>
                    <blockquote
                        className="ECom_testimonial_text ECom_primary_color ECom_fs_29 ECom_medium text_anim"
                    >
                        <div dangerouslySetInnerHTML={{ __html: __rcd?.content1713012414 }}></div>
                    </blockquote>
                    <div className="ECom_testimonial_info">
                        <h3 className="ECom_fs_29 ECom_semibold title-anim">
                            {__rcd?.authorname1713012436}
                        </h3>
                        <p className="title-anim">
                            {__rcd?.authordesignation1713012457}
                        </p>
                    </div>
                </div>
            </All.SliderItem>
        </div>
    ))}
</All.Slider>

Go to top

If you want customization for the structure of the scroll to top button and to make the button work, then you can do that as seen in the screenshot below.
To make the button work you must add the class scroll-to-target. It is an event that will scroll up your page on the click of a button.

<button className="scroll-top scroll-to-target d-inline-block" onClick={All.goToTop} >
    <span className="far fa-angle-double-up"></span>
</button>

Show Go to top

This is an event that will show the “scroll to top” button when the user scrolls down the page and will hide the “scroll to top” button when the user scrolls up the page.

<All.ShowGoToTop></All.ShowGoToTop>
<button className="scroll-top scroll-to-target btn btn-secondary d-none position-fixed" onclick={All.goToTop} >
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-up"
    viewBox="0 0 16 16">
    <path fillRule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.70713.146 3.147a.5.5 0 0 0 .708-.7081-4-4a.5.5 0 0 e-.
    708 01-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"></path>
    </svg>
</button>

Image Modal

You can use the Image Modal component with “All” prefix if you want to show the image in a full-size popup. You should pass the immg from the loop and also pass the key as the repeater element will require the key.

<div className="single_portfolio_icon">
    {__rcd?.image1712384107?.length > 0 ? __rcd?.image1712384107.map((immg: any, i: any) => (
        <All.ImageModal immg={immg} key={i + "image_modal" }>
            <i className="bi bi-card-image"></i>
        </All.ImageModal>
    )):null}
</div>

Video Modal

You can use the Video Modal component with “All” prefix if you want to show the video in a full-size popup. You should pass the video URL as seen in the screenshot below.

<div className="video-icon style-two">
    <All.VideoModal url={youtubevideolink1712304638}>
        <i className="fa fa-play"></i>
    </All.VideoModal>
</div>

Animation

Use framer motion for animation. Use the motion component with the “All” prefix.

<All.MotionDiv 
    initial={{ opacity: 0.4, x: "100px" }} 
    whileInView={{ opacity: 1, x: "0px" }} 
    transition={{ 
        duration: 0.8,
        ease: "easeOut",
    }}
    viewport={{ once: false }}
    className="about-seven-images rmb-55">
    <Nimage immg={immg} data={data} className="w-100 h-auto object-fit-contain" />
</All.MotionDiv>

Supported motion tags are MotionDiv, MotionSpan, MotionA, MotionH1, MotionH2, MotionH3, MotionH4, MotionH5, MotionH6, MotionP, MotionLink.

CountUp

Use the CountUp component with the prefix “All“,

<All.CountUp className="count-text k-plus" 
             enableScrollSpy
             end={__rcd?.count1710755055 ? __rcd?.count1710755055: 0}
></All.CountUp>

Supported all the attributes from ReactCountUp

CircularProgressBar

Use the CircularProgressBar component with the prefix “All” if you want to use a circular progress bar.

<All.CircularProgressBar
    percentage={__rcd?.percenttext1712558215}
    duration={1000}
    size="0.5rem"
    color="#FF3C00"
/>

Supported all the attributes from the react percentage bar.

Documentation

Headless

T3headless (TYPO3 installation)

Configurations

T3headless Extension Installation

Dependency extension installation

Configurations after extension installation

API Configuration

T3headless Activation

Headless Configurations

Headless (Next.js package)

Prerequisites

Next.js Package Installation

Headless Theme Configurations

container element

Create Container Element

Perform actions on the container Element

Custom element

Create Custom element

Slider Element

Perform actions on the custom content element

How to use the custom element

Headless Elements Synchronize

React Next Template Notes

Class Attribute

Link Attribute

Image

Nimage attribute details

Image as background

React Bootstrap component

Accordion

Slider

Go to top

Show Go to top

Image Modal

Video Modal

Animation

CountUp

CircularProgressBar

Headless