How to migrate fluidcontent to flux

Welcome to another tutorial. I will be showing you how to migrate your fluidcontent content elements to flux so you will no longer have to use the fluidcontent extension.

Just deactivating and removing the fluidcontent extension will cause errors with your Content Elements. You will have to migrate them to use the flux extension.

That is exactly what I will be showing you how to do in this tutorial. So, lets dive in …

  • Backup your project. Create a copy of the project files and an export of the database.
  • You can install the phpmyadmin extension which provides phpMyAdmin in the TYPO3 backend which you can use for exporting the database.

** Note: These steps were tested on a TYPO3 v9 installation but the same steps should apply for a TYPO3 v8 installation.

Uninstall fluidcontent extension

The first two steps below are to remove the fluidcontent dependency in your “provider” extension.

  1. Open the ext_emconf.php file of your “provider” extension (the extension containing your content elements and page templates).
  2. Remove the fluidcontent item from the “$EM_CONF[$_EXTKEY]['constraints']['depends']” array.

The next steps are to uninstall and delete the fluidcontent extension.

  1. Log into backend and go to “ADMIN TOOLS —> Extensions” module.
  2. Deactivate the fluidcontent extension.
  3. If in a “Non composer” TYPO3 installation, just delete the fluidcontent from the Extension Manager (the backend module you went to in step 1).
  4. If TYPO3 installation is in “Composer Mode”, then delete using composer remove fluidtypo3/fluidcontent command. You must do this to remove the extension from composer so it is not downloaded again when you run the composer install command.

Update CType field values of tt_content table

Run SQL query below on your database.

If you installed the phpmyadmin extension I mentioned above, you can use the phpMyAdmin tool to access the database and run this query on it.

UPDATE tt_content 
 SET CType = LOWER(REPLACE(REPLACE(tx_fed_fcefile, 'YourNamespace.YourExtension:', 'extensionnamewithoutunderscores_'), '.html', ''))
 WHERE CType = 'fluidcontent_content' AND `tx_fed_fcefile` LIKE 'YourNamespace.YourExtension%';

Thanks goes to kimomat for helping out with this query on this stackoverflow question.

I just added a little part in case you have more than one provider extensions. The query is to be run for each provider extension.

Query Explanation:

  • Change YourNamespace.YourExtension to yours. You can find what to use here from the ext_localconf.php file of your “provider” extension. See screenshot below as an example.

So, from the screenshot above, all occurrences of YourNamespace.YourExtension in the query, will be replaced with Mbigha.MyProvider

  • For extensionnamewithoutunderscores_, use name of extension without underscores. For example if my extension’s name is my_provider, then in the query, I will use myprovider_ .

Run flux migration script

  • Create a backup of your database.
  • Update all your templates (both Content and Pages templates) in your provider extension(s).
    • To all flux:grid.column elements, make sure to add a colPos attribute with a value between 0 and 99.
    • For every Page or Content template, your colPos values can start from 0 or any number. You don’t have to try to put different values in each template.
    • The colPos values have to be unique only for a single template.
    • Take note of places where flux:grid.column is being generated using a loop. In such a case, colPos value is set using the iteration index. See code below for example
<flux:grid>
    <f:for each="{items}" as="item" iteration="iterator">
        <flux:grid.row>
            <flux:grid.column colPos="{iterator.index}" 
                              name="content.{iterator.index}" 
                              label="{item.item.title}" />
        </flux:grid.row>
    </f:for>
</flux:grid>
  • Run the Flux migration script in Extension Manager to migrate your records.
    1. Go to Extension Manager, check and make sure all your provider extension(s) are activated.
    2. On the Extension Manager page, search for “flux” on this page and then go to the row of the flux extension.
    1. On the far right of this row, click on the undefined icon. to start the migration process.
    2. Click on “Perform migration” button.
    3. You will now see the migration results indicating a successful migration.

Changing page templates

This step is usually not required. I am just putting it should in case you need to change page templates later.

The page template values are usually already pre-selected. It is advisable not to change these values.

Changing them will affect the website’s front end display causing a different display from what we had before doing the migration.

  • To view or change page templates,
    • Go to the “WEB –> Page” module and select a page.
    • Click icon to edit page.
    • Go to Page Layout tab where you can select a template for this page and also for its sub pages.
    • After that, click on the Save(undefined) button to save your changes.

Testing your work

Test if migration successfully done. Follow steps below.

  • Go to “WEB –> Page” module and select a page.
  • Check to see if all page’s content elements show with no errors. If so, then migration successfully done.
  • If not, write the error you get in the comments and lets see how I can help.
  • Click on the undefined (View) icon to see the page in the front end.
  • If you see an error like ERROR: Content Element with uid “…” and type “…..” has no rendering definition!”, then you have to install the fluid_styled_content extension.
  • Use composer req "typo3/cms-fluid-styled-content:^9.5" to install it. Remember to “Activate” it.
  • Now, reload the page again and everything should work fine.

Conclusion

So, those are the steps I have for you. Any questions or issues, leave it in the comments so I can try to help.

So enjoy and thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

Create your website at WordPress.com
Get started
%d bloggers like this: