Templates and frontend assets

The output of the job board is rendered with Fluid. Copy the files you want to change into your site package and register its paths.

Override templates

Set the site settings jobboard.templateRootPath, jobboard.partialRootPath and jobboard.layoutRootPath to the folders of your site package. Files that you do not copy are taken from the extension.

config/sites/<site-identifier>/settings.yaml

jobboard:
  templateRootPath: 'EXT:my_sitepackage/Resources/Private/Extensions/Jobboard/Templates/'
  partialRootPath: 'EXT:my_sitepackage/Resources/Private/Extensions/Jobboard/Partials/'
  layoutRootPath: 'EXT:my_sitepackage/Resources/Private/Extensions/Jobboard/Layouts/'

Alternatively, add paths in TypoScript, see View paths.

Template files

All files are in EXT:jobboard/Resources/Private/.

File	Purpose
`Layouts/Default.html`	Wrapper `<div class="tx-jobboard">`
`Templates/Jobboard/List.html`	List: assets, search form, map and list of jobs
`Templates/Jobboard/Search.html`	Search result, same structure as the list
`Templates/Jobboard/Detail.html`	Detail view. One `<f:section>` per group of fields, for example `renderSalary` or `renderBenefits`.
`Partials/JobListAssets.html`	CSS and JavaScript of list and search, see JavaScript and CSS
`Partials/SearchForm.html`	Search form and map
`Partials/Job/Search.html`	The search form itself. Provides the URL for the location suggestions, see Own search form templates.
`Partials/Types/Table.html`	Default list rendering as table
`Partials/Types/Card.html`	Alternative list rendering as cards, see Card layout
`Partials/Job/TitleLink.html`	Table cell with the link to the job
`Partials/Job/JobAreas.html`	Occupational fields of a job, see Partial "Job/JobAreas"
`Partials/Job/JsonLd.html`	Structured data of the detail view, see Structured data (JSON-LD)
`Templates/PluginPreview/Jobboard.html`	Preview in the backend page module
`Pdf/Jobboard/Detail.html`	PDF version of a job, see PDF export

If a job has an external link (filled by an import only), the list links to this URL in a new window instead of the detail view.

Card layout

The partial Partials/Types/Card.html renders each job as a card with occupational fields, position, application deadline, title, a shortened description, a "Read more" button and, if jobboard.pidOfApplicationForm is set, an "Apply online" button. It has no "Remember?" checkbox.

To use it, override Templates/Jobboard/List.html and Templates/Jobboard/Search.html and replace the table partial:

        EXT:my_sitepackage/Resources/Private/Extensions/Jobboard/Templates/Jobboard/List.html
    

<f:render partial="Types/Card" arguments="{objects: jobs}"/>

Partial "Job/JobAreas"

Renders all occupational fields of a job, each in a <span class="job-area">.

job: The job (\JWeiland\Jobboard\Domain\Model\Job). Required.
separator: Text between the occupational fields. Optional, default ', '. Use '' if the spacing is done with CSS.

Render the occupational fields separated by a pipe

<f:render partial="Job/JobAreas" arguments="{job: job, separator: ' | '}"/>

Structured data (JSON-LD)

The detail view adds a schema.org/JobPosting as <script type="application/ld+json"> with these properties: title, description, identifier (employer and reference number), start date, validThrough (application deadline), hiring organization with logo, job location, base salary (monthly, in EUR) and directApply (true if the job has an email address).

Override Partials/Job/JsonLd.html to change the properties. Follow the rules in the comment of this partial to keep the output valid JSON: render every dynamic value with the tag syntax <f:format.json value="{...}"/>.

JavaScript and CSS

The partial Partials/JobListAssets.html adds these files with the asset collector of TYPO3:

Css/jquery-ui.min.css, Css/style.css
JavaScript/jquery-3.7.1.min.js (jQuery)
JavaScript/jquery-ui.min.js (suggestions of the location field)
JavaScript/datatables.min.js (sortable table)
JavaScript/js.cookie-2.2.1.min.js (cookie of remembered jobs)
JavaScript/script.js (job board logic)

The job board ships its own jQuery. script.js releases it with jQuery.noConflict(true) after jQuery UI and DataTables have been attached to it. A jQuery that your site loads itself stays untouched.

The texts of the table (DataTables) come from JavaScript/dataTables/i18n/de_DE.json.

To use other libraries or files, override the partial Partials/JobListAssets.html.

Labels

Frontend labels are in EXT:jobboard/Resources/Private/Language/locallang.xlf (English) and de.locallang.xlf (German). Override single labels in your site package, see Custom translations.

Some useful label keys:

dateFormat: Date format of the list, the cards, the detail view and the PDF version, for example Y-m-d (English) or d.m.Y (German).
job.applyOnline: Text of the "Apply online" link.
job.downloadPdf, job.downloadPdf.addition: Text of the link to the PDF version. The addition is hidden on small screens.
search.no_jobs_found: Text if no job matches.

ViewHelper for the map

Partials/SearchForm.html uses the ViewHelper \JWeiland\Jobboard\ViewHelpers\JobPoiCollectionViewHelper to build the map markers of all listed jobs. Each marker gets the job title and, if the job has an application deadline and an employment scope, an info window with both.

Use the ViewHelper in an own template

<html xmlns:jobboard="http://typo3.org/ns/JWeiland/Jobboard/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:variable name="poiCollections" value="{jobboard:jobPoiCollection(jobs: jobs)}"/>

Without EXT:maps2, the ViewHelper returns an empty list and no map is rendered.