Skip to main content

Customizing the look

The Eduframe module provides a very basic look for your products. However, every website has a unique design. This guide explains how to override the default template within your theme to customize the HTML structure and styling.

The module uses the following default template: modules/custom/eduframe/templates/eduframe-catalog-product.html.twig

Copy the template to your theme​

To override this file, do not edit the module directly. Changes made to the module will be lost when you update it. Instead, follow these steps:

  1. Navigate to your custom theme's directory: /themes/custom/your_theme_name.
  2. Create a folder named templates if it does not already exist.
  3. Copy the eduframe-catalog-product.html.twig file from the module into your theme's templates folder.

The new path should be: /themes/custom/your_theme_name/templates/eduframe-catalog-product.html.twig

Drupal needs to be told to look for the new file. Use the admin interface or Drush to clear the cache:

drush cr

Product attributes​

The Catalog Product entity provides several fields. You can output these using the {{ content }} object.

Processed module variables​

The module pre-processes complex data into easy-to-use Twig variables:

  • {{ custom }}: An array of extra data fields (e.g., {{ custom.my_field_key }}).
  • {{ course_tab_contents }}: An array of tabs for course descriptions.
  • {{ variants_table }}: A fully rendered HTML table showing dates, locations, and prices.
  • {{ attributes }}: Necessary HTML attributes for the wrapper (for SEO and accessibility).
tip

Enable Twig Debugging in your services.yml to see all available naming suggestions directly in your browser's "Inspect Element" view.