Contact Info¶
Availability: All contexts
The contact-info module is used to display contact information such as address, phone numbers, email addresses, and working hours on a website. It provides a configurable header and options to include an image or logo.
Configuration parameters¶
shouldDisplayHeading¶
int If set to 1 the header will be displayed.
textHeader¶
string Text content of a header.
levelHeader¶
string Section level of a header describing the size and importance of the element in a given context. You can read more about heading elements here. We provide the following levels for the header module:
h2h3h4h5h6
shouldDisplayUnderline¶
int If set to 1 the header underline will be displayed.
logoType¶
radioThe type of logo to display. Possible values are:text: Displays a text logo. The text content can be set using thetextLogoNameparameter. IftextLogoNameis not provided, the default shop name from the shop settings will be used.logo: Displays an image logo. The image properties can be set using thelogoparameter.none: No logo will be displayed.
textLogoName¶
string (optional) The text logo to display. If not provided, the default shop name from the shop settings will be used.
logo¶
imagerepresents an object with the following properties:widthfloat type, represents the width of the imageheightfloat type, represents the height of the imagefile_namestring type, represents the name of the image fileuploaded_filestring type, represents the name of the uploaded image file
logoAlt¶
string (optional) Alternative text for the logo.
showAddress¶
int If set to 1, the address will be displayed.
address¶
string (optional) The address to display. If not provided, the default shop address from the shop settings will be used.
showPhone¶
int If set to 1, the phone number and working hours will be displayed.
phone¶
string (optional) The phone number to display. If not provided, the default phone number from the shop settings will be used.
workingHours¶
string (optional) The working hours to display.
showEmail¶
int If set to 1, the email address will be displayed.
email¶
string (optional) The email address to display. If not provided, the default email address from the shop settings will be used.
Module source code¶
{% from "@macros/image.twig" import image %}
{% from "@macros/icon.twig" import icon %}
{% set shopInfo = ObjectApi.getShopInfo() %}
{% set shopUrls = ObjectApi.getShopUrls() %}
{% set hasUnderline = moduleConfig.shouldDisplayUnderline == 1 %}
{% set phone = moduleConfig.phone ?: shopInfo.phoneNumber %}
{% set email = moduleConfig.email ?: shopInfo.email %}
{% set shopAddressLines = shopInfo.addressLine1 %}
{% if shopInfo.addressLine2 %}
{% set shopAddressLines = shopAddressLines ~ "\n" ~ shopInfo.addressLine2 %}
{% endif %}
{% set shopAddress = shopAddressLines ~ "\n" ~ shopInfo.zipCode ~ " " ~ shopInfo.city %}
{% set address = moduleConfig.address ?: shopAddress %}
<address class="contact-info__wrapper">
{% if moduleConfig.shouldDisplayHeading == 1 and moduleConfig.levelHeader %}
<{{ moduleConfig.levelHeader }} class="contact-info__header header header_{{ moduleConfig.levelHeader }} {% if hasUnderline %} header_underline {% endif %}">
<span {% if hasUnderline %} class="header_highlight" {% endif %}>
{{ moduleConfig.textHeader }}
</span>
</{{ moduleConfig.levelHeader }}>
{% endif %}
<div class="contact-info__logo-section">
{% if moduleConfig.logoType == 'logo' and moduleConfig.logo %}
<a href="{{ shopUrls.mainPageUrl }}">
{{
image({
img: {
src: moduleConfig.logo.paths.original,
width: moduleConfig.logo.width,
height: moduleConfig.logo.height,
alt: "#{moduleConfig.logoAlt ?: shopInfo.name} - #{translate('home page')}",
title: moduleConfig.logoAlt ?: shopInfo.name,
class: 'contact-info__logo-img',
fetchpriority: 'high'
}
},
[
{
src: moduleConfig.logo.paths.original,
type: moduleConfig.logo.format
}
]
)}}
</a>
{% elseif moduleConfig.logoType == 'text' %}
<span class="h5 contact-info__logo-text">
{{ moduleConfig.textLogoName ?: shopInfo.name }}
</span>
{% endif %}
</div>
<div class="contact-info">
{% if moduleConfig.showAddress == 1 and ( moduleConfig.address or shopAddressLines ) %}
<div class="contact-info__details">
{{ icon('icon-map-pin', { classNames: ['contact-info__details-icon'], ariaHidden: 'true' }) }}
<p class="contact-info__details-address">
<span class="sr-only">{{ translate('Address') }}: </span>
{{ address|nl2br }}
</p>
</div>
{% endif %}
{% if moduleConfig.showPhone == 1 and phone|length > 0 %}
<div class="contact-info__details">
{{ icon('icon-phone', { classNames: ['contact-info__details-icon'], ariaHidden: 'true' }) }}
<div>
<p class="contact-info__details-phone">
<a href="tel:{{ phone }}" class="contact-info__link link link_secondary link_no-underline" aria-label="{{ translate('Phone') }} {{ phone|split('')|join(' ') }}">{{ phone }}</a>
</p>
{% if moduleConfig.workingHours %}
<p class="contact-info__details-working-hours">
{{ moduleConfig.workingHours }}
</p>
{% endif %}
</div>
</div>
{% endif %}
{% if moduleConfig.showEmail == 1 and email|length > 0 %}
<div class="contact-info__details">
{{ icon('icon-mail', { classNames: ['contact-info__details-icon'], ariaHidden: 'true' }) }}
<div>
<p class="contact-info__details-email">
<a href="mailto:{{ email }}" class="contact-info__link link link_secondary link_no-underline" aria-label="{{ translate('E-mail') }} {{ email }}">{{ email }}</a>
</p>
</div>
</div>
{% endif %}
</div>
</address>
<script type="application/ld+json">
{
"@context": [
"http://schema.org/",
{ "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
],
"@id": "{{ shopInfo.id }}",
"name": "{{ shopInfo.name }}",
"legalName": "{{ shopInfo.name }}",
"url": "{{ shopUrls.mainPageUrl.absolute }}",
"email": "{{ email }}",
"telephone": "{{ phone }}"
}
</script>
Used ObjectApi methods¶
Used macros¶
Used styles¶
Module configuration schema¶
[
{
"label": "General settings",
"state": "unfolded",
"elements": [
{
"name": "infobox",
"type": "infobox",
"options": {
"type": "blank",
"message": "#### Related settings in the admin panel%s- setting the [store name](%s), default [phone number and email address](%s)",
"placeholderValues": [
"\n",
"\/admin\/config",
"\/admin\/config\/company"
]
}
},
{
"name": "shouldDisplayHeading",
"type": "checkbox",
"label": "Display heading",
"supportsTranslations": true,
"defaultValue": 0,
"children": [
{
"name": "textHeader",
"type": "text",
"relations": [
{
"parentName": "shouldDisplayHeading",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHiddenAndOptional",
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setVisibleAndRequired",
"setAvailable"
]
}
]
}
],
"label": "Module heading content",
"supportsTranslations": true
},
{
"name": "levelHeader",
"type": "select",
"hint": "The numbers 2 to 6 indicate the hierarchy of headings, with H2 being the most important and H6 being the least. H1 is reserved for the page title. If you need to add a page title, use the \"Page title\" module.",
"relations": [
{
"parentName": "shouldDisplayHeading",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHidden",
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setVisible",
"setAvailable"
]
}
]
}
],
"options": {
"isWithSearch": 0,
"selectOptions": [
{
"key": "h2",
"label": "H2"
},
{
"key": "h3",
"label": "H3"
},
{
"key": "h4",
"label": "H4"
},
{
"key": "h5",
"label": "H5"
},
{
"key": "h6",
"label": "H6"
}
]
},
"label": "Heading level",
"defaultValue": "h2"
},
{
"name": "shouldDisplayUnderline",
"type": "checkbox",
"relations": [
{
"parentName": "shouldDisplayHeading",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHidden",
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setVisible",
"setAvailable"
]
}
]
}
],
"label": "Add underline below the heading",
"defaultValue": 0
}
]
},
{
"name": "logoType",
"type": "radio",
"options": {
"radioOptions": [
{
"key": "text",
"label": "text"
},
{
"key": "logo",
"label": "graphic"
},
{
"key": "none",
"label": "none"
}
]
},
"label": "Company logo:",
"supportsTranslations": true,
"defaultValue": "text"
},
{
"name": "textLogoName",
"type": "text",
"relations": [
{
"parentName": "logoType",
"parentValueToActionsMap": [
{
"value": "text",
"actions": [
"setVisible",
"setAvailable"
]
},
{
"value": "logo",
"actions": [
"setHidden",
"setDisabled"
]
},
{
"value": "none",
"actions": [
"setHidden",
"setDisabled"
]
}
]
}
],
"label": "Text logo",
"labelDescription": "Leave blank to display the store name",
"supportsTranslations": true
},
{
"name": "logo",
"type": "imageUpload",
"relations": [
{
"parentName": "logoType",
"parentValueToActionsMap": [
{
"value": "text",
"actions": [
"setHiddenAndOptional",
"setDisabled"
]
},
{
"value": "logo",
"actions": [
"setVisibleAndRequired",
"setAvailable"
]
},
{
"value": "none",
"actions": [
"setHiddenAndOptional",
"setDisabled"
]
}
]
}
],
"options": {
"requireImageSize": true,
"allowedExtensions": [
"webp",
"svg",
"jpeg",
"jpg",
"png",
"gif"
]
},
"label": "Graphic logo",
"supportsTranslations": true
},
{
"type": "text",
"name": "logoAlt",
"label": "Alternative image description (\"alt\")",
"hint": "The logo alternative text should include the company or store name. This text is read aloud by assistive technology for visually impaired users and is also analyzed by search engines.",
"supportsTranslations": true,
"labelDescription": "Leave blank to display the store name",
"relations": [
{
"parentName": "logoType",
"parentValueToActionsMap": [
{
"value": "text",
"actions": [
"setHidden",
"setDisabled"
]
},
{
"value": "logo",
"actions": [
"setVisible",
"setAvailable"
]
},
{
"value": "none",
"actions": [
"setHidden",
"setDisabled"
]
}
]
}
]
},
{
"name": "showAddress",
"type": "checkbox",
"label": "Display address",
"supportsTranslations": true,
"defaultValue": 1,
"children": [
{
"name": "address",
"type": "textarea",
"relations": [
{
"parentName": "showAddress",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHidden",
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setVisible",
"setAvailable"
]
}
]
}
],
"label": "Address",
"labelDescription": "Leave blank to display the default address",
"supportsTranslations": true
}
]
},
{
"name": "showPhone",
"type": "checkbox",
"label": "Display phone number",
"supportsTranslations": true,
"defaultValue": 1,
"children": [
{
"name": "phone",
"type": "text",
"relations": [
{
"parentName": "showPhone",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHidden",
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setVisible",
"setAvailable"
]
}
]
}
],
"label": "Phone number",
"labelDescription": "Leave blank to display the default phone number",
"supportsTranslations": true
},
{
"name": "workingHours",
"type": "text",
"relations": [
{
"parentName": "showPhone",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHidden",
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setVisible",
"setAvailable"
]
}
]
}
],
"label": "Customer service hotline hours",
"supportsTranslations": true
}
]
},
{
"name": "showEmail",
"type": "checkbox",
"label": "Display e-mail address",
"supportsTranslations": true,
"defaultValue": 1,
"children": [
{
"name": "email",
"type": "text",
"relations": [
{
"parentName": "showEmail",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHidden",
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setVisible",
"setAvailable"
]
}
]
}
],
"label": "E-mail address",
"labelDescription": "Leave blank to display the default e-mail address",
"supportsTranslations": true
}
]
}
]
}
]