Sticky Mobile Bars¶
Availability: All contexts
The sticky_mobile_bars integration module renders a set of sticky bars fixed to the bottom of the screen on mobile devices. It conditionally renders up to three independent slots depending on the active context and module configuration:
- Sticky navigation bar — displayed on all contexts except the shopping cart summary. Contains configurable icons for the menu, search, user account, and shopping cart.
- Sticky buy button — displayed only on product and product bundle contexts. Shows the "Add to cart" button and the InPost Pay button.
Visible only on mobile phones (below 576px), hidden on sm breakpoint and above. See Responsiveness for all breakpoints.
Configuration parameters¶
isStickyNavEnabled¶
int If set to 1, the sticky navigation bar is displayed at the bottom of the screen on all pages except the shopping cart summary.
isMenuEnabled¶
int If set to 1, shows the hamburger menu icon inside the sticky navigation bar. Requires isStickyNavEnabled to be enabled.
isSearchEnabled¶
int If set to 1, shows the search icon inside the sticky navigation bar. Requires isStickyNavEnabled to be enabled.
isUserAccountEnabled¶
int If set to 1, shows the customer account icon inside the sticky navigation bar. Requires isStickyNavEnabled to be enabled.
isCartEnabled¶
int If set to 1, shows the shopping cart icon inside the sticky navigation bar. Requires isStickyNavEnabled to be enabled.
isStickyBuyButtonEnabled¶
int If set to 1, the sticky "Add to cart" button is displayed at the bottom of the screen on product pages.
isStickyTotalAndPayEnabled¶
int If set to 1, the sticky cart summary (total price and checkout button) is displayed at the bottom of the screen on the shopping cart summary page.
Module source code¶
{% from "@macros/main_navigation_mobile.twig" import main_navigation_mobile %}
{% from "@macros/basket_preview.twig" import basket_preview %}
{% from "@macros/search.twig" import search %}
{% from "@macros/user_menu.twig" import user_menu %}
{% from "@macros/product_actions.twig" import product_actions %}
{% from "@macros/inpost_pay_button.twig" import inpost_pay_button %}
{% set isSearchFocusTrapFixEnabled = ObjectApi.getFeatureFlag("dev_search_focus_trap_fix").isEnabled ? true : false %}
<sticky-mobile-bars class="sticky-mobile-bars hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only" lazy>
{% if moduleConfig.isStickyBuyButtonEnabled and (_context_id == 2 or _context_id == 3) %}
<div class="sticky-mobile-bars__buy-button" slot="buy-button">
{{
product_actions({
productId: product_id,
instanceId: moduleInstance,
shouldDisplayAddToBasketButton: true,
shouldDisplayAddToFavouritesIcon: true
})
}}
{{ inpost_pay_button(product_id) }}
</div>
{% endif %}
{% if moduleConfig.isStickyNavEnabled and _context_id != 30 %}
<nav class="sticky-mobile-bars__menu sticky-menu" slot="nav">
{% if moduleConfig.isMenuEnabled %}
<div class="sticky-menu__item">
{{ main_navigation_mobile() }}
</div>
{% endif %}
{% if moduleConfig.isSearchEnabled %}
<div class="sticky-menu__item">
{{ search({
instaceId: moduleInstance,
isSearchFocusTrapFixEnabled
}) }}
</div>
{% endif %}
{% if moduleConfig.isUserAccountEnabled %}
<div class="sticky-menu__item">
{{ user_menu({ instanceId: moduleInstance }) }}
</div>
{% endif %}
{% if moduleConfig.isCartEnabled %}
<div class="sticky-menu__item">
{{ basket_preview(moduleConfig|merge({ instanceId: moduleInstance, sheet: "1" })) }}
</div>
{% endif %}
</nav>
{% endif %}
{% if moduleConfig.isStickyTotalAndPayEnabled and _context_id == 30 %}
<div class="sticky-mobile-bars__total-and-pay" slot="total-and-pay">
<total-and-pay></total-and-pay>
</div>
{% endif %}
</sticky-mobile-bars>
Macros reference¶
Webcomponents reference¶
Module configuration schema¶
[
{
"state": "unfolded",
"label": "General settings",
"elements": [
{
"type": "header",
"name": "headerMobileDevices",
"label": "Mobile",
"options": {
"icon": "phone"
}
},
{
"type": "checkbox",
"name": "isStickyNavEnabled",
"label": "Sticky navigation menu (all pages)",
"hint": "As you scroll through the page, the navigation menu bar will stick to the bottom of the browser. The exception is the Product Page, where the menu only appears when the user scrolls up.",
"defaultValue": 1,
"children": [{
"type": "checkbox",
"name": "isMenuEnabled",
"label": "Show Menu icon",
"defaultValue": 1,
"relations": [
{
"parentName" : "isStickyNavEnabled",
"parentValueToActionsMap" : [
{
"value" : 0,
"actions" : ["setHidden"]
},
{
"value" : 1,
"actions" : ["setVisible"]
}
]
}
]
}, {
"type": "checkbox",
"name": "isSearchEnabled",
"label": "Show Search icon",
"defaultValue": 1,
"relations": [
{
"parentName" : "isStickyNavEnabled",
"parentValueToActionsMap" : [
{
"value" : 0,
"actions" : ["setHidden"]
},
{
"value" : 1,
"actions" : ["setVisible"]
}
]
}
]
}, {
"type": "checkbox",
"name": "isUserAccountEnabled",
"label": "Show Customer account icon",
"defaultValue": 1,
"relations": [
{
"parentName" : "isStickyNavEnabled",
"parentValueToActionsMap" : [
{
"value" : 0,
"actions" : ["setHidden"]
},
{
"value" : 1,
"actions" : ["setVisible"]
}
]
}
]
}, {
"type": "checkbox",
"name": "isCartEnabled",
"label": "Show Shopping cart icon",
"defaultValue": 1,
"relations": [
{
"parentName" : "isStickyNavEnabled",
"parentValueToActionsMap" : [
{
"value" : 0,
"actions" : ["setHidden"]
},
{
"value" : 1,
"actions" : ["setVisible"]
}
]
}
]
}]
},
{
"type": "checkbox",
"name": "isStickyBuyButtonEnabled",
"label": "Sticky \"Add to cart\" button (Product page)",
"hint": "As you scroll through the page, the \"Add to cart\" button will stick to the bottom of the browser.",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "isStickyTotalAndPayEnabled",
"label": "Sticky cart summary (Shopping Cart/Step 2)",
"hint": "As you scroll through the shopping cart page, the purchase total and checkout button will stick to the bottom of the browser.",
"defaultValue": 1
}
]
}
]