TYPO3 upgrade in conjunction with PIM integration
Upgrade of the installation to TYPO3 version 10 and integration of an interface to the PIM system Viamedici EPIM.
The major "TYPO3 upgrade & PIM integration" project began in September 2020. Apart from the technical upgrade from TYPO3 to the current version 10.4 LTS, the project also included the integration of a PIM system for the product catalogue on the website.
A "reproducible" TYPO3 upgrade was used on this project: the local development environments install the current database of the TYPO3 version 8 environment (pre-upgrade installation) and perform all the necessary upgrade steps once by script. The current status of the live environment can thus be adjusted at any time. Potential sources of errors during the live upgrade can also be detected immediately.
![[Translate to English:]](/fileadmin/_processed_/9/7/csm_pfm-mockup-freigestellt_ed2ab165f0.webp "[Translate to English:]")
| Client | pfm medical gmbh |
|---|---|
Project duration | 2020–2024 |
Discover the project from the perspective of:
CMS technologies
A total of 6 websites are currently managed within a TYPO3 installation version 10. This includes 3 corporate sites as well as various websites for subsidiaries and projects.
The special feature or requirement of this project is that the client would like to maintain and manage both shared and separate content across all corporate websites. The benefit of TYPO3 is that centrally maintained content is also used for multiple websites, language-dependently for each site, thanks to its "Localisation" feature. This means, for example, that global news and press releases as well as events and download files are maintained, localised and then output on the German or English website in the appropriate language.
CMS technologies
In addition to the core functionalities of TYPO3, the installation of the 6 websites was extended by the Bootstrap package to provide a comprehensive and versatile set of technical configurations and settings. Tailored and customised modifications were then carried out on this basis.
As the installation includes multiple different websites, 3 different website templates are used, as well as legacy templates to exploit synergies between the individual websites. There is also differentiated control of permitted content type – depending on the defined options of the website designs.
Redis was also integrated and is used for a data-centric cache and to save sessions.
Search technologies
The website's search function is based on the Apache Solr search service. News and press releases, events, product pages and download files are indexed and displayed on the search results page for users alongside the regular pages.
The site's global search interface also includes a suggest function and a grouping of results by category.
The Download Centre is also based on solrfal. These are separate assets that are provided with specific policies.
Search technologies
The websites' search function is based on the Apache Solr search server. News, products, events and also file metadata can be searched in addition to content.
Apart from the Auto-suggest function with grouping by search result type, the feature also includes after-search navigation. This provides for the search results to be grouped by configurable facets based on a customised search algorithm with configurable field weighting.
Files and product records are indexed with EXT:solrfal with different file pools for each site.
Backend and frontend technologies
The Bootstrap package was integrated as well as the TYPO3 core, and includes an extensive set of design options and settings for the backend and frontend. Additional container elements were created to provide for multi-column layouts (grid layouts).
Numerous content elements are based on the Bootstrap package and have been adapted to pfm medical gmbh's corporate identity, including an accordion element, the tab element and a timeline. Any missing content elements or elements required for specific content were custom-developed and configured with a focus on content manager-friendly backend maintenance.
Backend and frontend technologies
The upgrade project introduced a number of technical improvements and new features:
- During the process, a reproducible automatic TYPO3 upgrade was developed in the form of a shell script to execute upgrade wizards as well as a series of individual SQL commands.
- Integration of Bootstrap (migration from Foundation).
- Frontend rendering: Migration of css_styled_content to Bootstrap package/Fluid.
- Migration of grid elements to the container extension and proprietary CTypes.
- Project-specific upgrade wizards to migrate replaced content.
- Integration of Webpack Encore and lazy loading images.
Hosting and monitoring
We host the installation on virtualised hardware in Germany for safe and failure-free operation. The range of services offered includes operation on all levels as well as physical hardware. We understand the application and the system environment and can coordinate both to each other. Our portfolio of services also includes hardware maintenance and regular updates of all hardware components. Our monitoring tools provide a permanent overview of the installation and enable us to intervene immediately in the event of an emergency.
Incident reporting of bugs with Sentry provides a direct link to the ticket system, so that bug sources can be identified and processed quickly and automatically.
Due to direct collaboration and downstream daily business, the automatically created review environments enable the client to easily approve developments.
Hosting and monitoring
The following systems have been set up to host and monitor the client's project:
- Direct integration of internal systems to the productive systems of the corporate site by IPsec VPN for data sharing.
- Incident reporting of bugs with Sentry including a direct link to our internal ticket system.
- Sharing of standard database loggings by the direct integration of Graylog via GELF.
- Scalable, organisationally parallelisable development using Kubernetes; complete and totally independent TYPO3 instances are automatically created by GitLab as required.
- Automated preparation for patch updates and scripted provision as a merge request for review.
PIM Integration (Product section)
An interface to the Viamedici EPIM system was developed for the website's product section. There is also an interface to the Canto digital asset management (DAM) system for the integration of any images. The organisational and technical collaboration with the service provider responsible for rolling out the PIM at pfmmedical was fast and straightforward. Short and direct communication channels eliminated complexity and loss of information.
The upstream project for pfmmedical's internal product catalogue significantly speeded up integration of the PIM, as the previous lead-in project had already delivered know-how about the structure, concept and handling. Experience with data sharing proved useful when connecting the EPIM to TYPO3, as our developers did not require a "basic" EPIM onboarding phase.
PIM Integration (Product section)
The data for the product catalogue was transmitted via the VPN tunnel set up for that purpose. Efficient handling of the import into TYPO3 ensures that the extensive XML data files from the PIM are efficiently processed and imported within minutes. The product images are delivered directly from the Canto DAM system via Amazon CloudFront. Product data in Solr is indexed by an individualised record indexer.
An individual t3://-URL scheme for the internal linking of product pages from the content was developed for the integration and further use of the product pages as part of the entire installation, and there was also provision of a link picker for pfmmedical products in the backend.
Glossary links
The corporate websites include a glossary, the terms of which are output by automatically generated links in the form of tool tips in the running text on the remaining pages. As a result, there is no longer a need for backlinks to the glossary itself and users obtain definitions of the terms when reading the copy.
Integration of CleverReach
A system-side plug-in was configured to replace the old HTML element when subscribing to the newsletter. It is based on the Forms extension for the registration form, with the additional "cleverreach" extension providing the interface to the pfmmedical newsletter service REST API.
Timeline element
The old history element, based on HTML, was replaced by a new modern element. Minor modifications to the design ensure that it fits seamlessly into the existing website and is easy for content managers to maintain in the backend. The new timeline element provides both usability and performance benefits, thanks to its lazy loading function.
Integration of Social Buttons
Social buttons have also been integrated into all websites within the installation. The choice of social media platforms varies depending on the target group of the different websites. Links to the individual profiles are integrated, as well as social share buttons, so that the contents of the websites can be shared directly on social media. The client can then maintain the profile links individually in the backend.