Contact Info¶
The contact-info module is used to display contact information such as 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¶
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 (optional) 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.
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
textLogoName¶
string (optional) The text logo to display. If not provided, the default shop name from the shop settings will be used.
showPhone¶
int If set to 1, the phone number and working hours will be displayed.
showEmail¶
int If set to 1, the email address 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.
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 %}
<address class="contact-info__wrapper">
{% if moduleConfig.shouldDisplayHeading == 1 %}
<{{ 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: shopInfo.name ?: "",
title: shopInfo.name,
class: 'contact-info__logo-img',
fetchpriority: 'high'
}
},
[
{
src: moduleConfig.logo.paths.original,
type: moduleConfig.logo.format
}
]
)}}
</a>
{% elseif moduleConfig.logoType == 'text' %}
<h5 class="contact-info__logo-text">
{{ moduleConfig.textLogoName ?: shopInfo.name }}
</h5>
{% endif %}
</div>
<div class="contact-info">
{% if moduleConfig.showPhone == 1 and phone|length > 0 %}
<div class="contact-info__details">
{{ icon('icon-phone', { classNames: ['contact-info__details-icon'] }) }}
<div>
<p class="contact-info__details-phone">
<a href="tel:{{ phone }}" class="contact-info__link">{{ 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'] }) }}
<div>
<p class="contact-info__details-email">
<a href="mailto:{{ email }}" class="contact-info__link">{{ 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
},
{
"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
}
]
}
]
}
]