Skip to content

Store Disabled

The store_disabled module is used to render the announcement containing information that the store is currently disabled.

Configuration parameters

announcement

string The announcement about the store being currently disabled

shouldDisplayHeading

boolean If set to true a heading will be displayed above the announcement

headingContent

string Content of the heading if it's displayed

headingLevel

string Section level of a header describing the size of the element. You can read more about heading elements here. We provide the following levels for the heading in this module:

  • h2
  • h3
  • h4
  • h5
  • h6

Module source code

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

{% set shopOffInfo = ObjectApi.getShopOffInformation() %}
{% set announcement = moduleConfig.announcement ?: shopOffInfo.offInformation %}
{% set storeDisabledImagePath = '/assets/img/icons/store_disabled.svg' %}

{% set imgProperties = {
    src: storeDisabledImagePath,
    alt: announcement,
    id: "store-disabled__image-#{moduleInstance}",
    class: 'store-disabled__image',
    decoding: 'async',
    lazy: true,
    srcset: "#{storeDisabledImagePath} 200w, #{storeDisabledImagePath} 232w",
    sizes: "(max-width: 768px) 200px, 232px"
} %}

<div class="store-disabled">
    {{
        image({
            img: imgProperties,
            picture: {
                class: 'image_block mb-xs-4 mb-md-6'
            }
        })
    }}

    {% if moduleConfig.shouldDisplayHeading and moduleConfig.headingContent %}
        {%
            set headingLevel = moduleConfig.headingLevel
                ? moduleConfig.headingLevel
                : 'h4'
        %}

        <{{ headingLevel }}
            class="header header_{{ headingLevel }} store-disabled__header mb-xs-3"
        >
            {{ moduleConfig.headingContent }}
        </{{ headingLevel }}>
    {% endif %}

    <p class="store-disabled__announcement">
        {{ announcement }}
    </p>
</div>

Macros reference

Used styles

Module configuration schema

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "#### Related settings in the admin panel%s- disabling the store and changing the announcement content in the [store status settings](%s)",
                    "placeholderValues": [
                        "\n",
                        "\/admin\/config"
                    ]
                }
            },
            {
                "type": "checkbox",
                "name": "shouldDisplayHeading",
                "label": "Display heading",
                "defaultValue": 0,
                "children": [
                    {
                        "type": "text",
                        "name": "headingContent",
                        "label": "Module heading content",
                        "isRequired": true,
                        "supportsTranslations": true,
                        "relations": [
                            {
                                "parentName": "shouldDisplayHeading",
                                "parentValueToActionsMap": [
                                    {
                                        "value": 0,
                                        "actions": ["setHiddenAndOptional", "setDisabled"]
                                    },
                                    {
                                        "value": 1,
                                        "actions": ["setVisibleAndRequired", "setAvailable"]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "type": "select",
                        "name": "headingLevel",
                        "label": "Heading level",
                        "hint": "The numbers 2 to 6 indicate the hierarchy of headings, with H2 being the most important and H6 being the least. Module titles are H2 headers. H1 is reserved for the page title. If you need to add a page title, use the \"Page title\" module.",
                        "defaultValue": "h4",
                        "options": {
                            "isWithSearch" : 0,
                            "selectOptions": [
                                { "key": "h2", "label": "H2" },
                                { "key": "h3", "label": "H3" },
                                { "key": "h4", "label": "H4" },
                                { "key": "h5", "label": "H5" },
                                { "key": "h6", "label": "H6" }
                            ]
                        },
                        "relations": [
                            {
                                "parentName": "shouldDisplayHeading",
                                "parentValueToActionsMap": [
                                    {
                                        "value": 0,
                                        "actions": ["setHidden", "setDisabled"]
                                    },
                                    {
                                        "value": 1,
                                        "actions": ["setVisible", "setAvailable"]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "type": "textarea",
                "name": "announcement",
                "label": "Announcement content",
                "labelDescription": "Leave blank to display the announcement from the store status settings",
                "supportsTranslations": true
            }
        ]
    }
]