file_box

The file_box macro is used to render a box that downloads a file after clicking on it.

Definition

{% file_box(file) %}

Input parameters

file

object represents an object of file box attributes

Option key	Type	Default	Required	Description
file.name	string	""	yes	Name of the file and a text that will be displayed in the file box
file.url	Url	null	yes	Url object that represents a path to download a file
file.iconPath	string	/assets/img/file_extensions	no	Path to a folder containing extension icons
file.extension	string	""	no	The extension of a file which determines which icon will be displayed. Supported extensions are: doc, docx, jpg, pdf, png, txt, xls and jpeg. If any other extension is passed it will be rendered as a generic file icon
file.size	Size	null	no	Size
file.description	string	""	no	An optional description of a file

Example

In this example we display a basic file box.

{% from "@macros/file_box.twig" import file_box %}

{{ file_box({
    name: 'My file',
    url: {
        relative: 'path/to/download/a/file',
        absolute: 'https://website.com/path/to/download/a/file'
    }
}) }}

Example

In this example we display a list of file boxes from a product.

{% from "@macros/file_box.twig" import file_box %}

{% set product = ObjectApi.getProduct(product_id) %}

{% for file in product.files %}
    {{ file_box(file) }}
{% endfor %}

Macro source code

{% macro file_box(file) %}
    {% from "@macros/icon.twig" import icon %}

    {% set defaultIconPath = '/assets/img/file_extensions' %}
    {% set extensionsWithCustomIcons = ['doc', 'docx', 'jpg', 'pdf', 'png', 'txt', 'xls', 'jpeg'] %}

    <div class="file-box">
        <a class="file-box__header" href="{{ file.url.relative }}" download="{{ file.name }}">
            <img
                class="file-box__extension-icon"
                src="{{ file.iconPath|default(defaultIconPath) }}/icon-{{ (file.extension in extensionsWithCustomIcons) ? file.extension : 'generic' }}.webp"
                alt="File icon"
            />
            <span class="file-box__title">
                {{ file.name }}
                {{ icon('icon-download', {
                    size: 's',
                    title: translate('Download icon'),
                    classNames: ['file-box__download-icon']
                }) }}
                <span class="file-box__size">{{ file.size.humanReadable }}</span>
            </span>
        </a>

        {% if file.description %}<p class="file-box__description">{{ file.description }}</p>{% endif %}
    </div>
{% endmacro %}