Frontend Customizations - examples
In order to give MageSuite developers a better overview of frontend workflow, settings, and possibilities of customization examples from child themes are listed below.
Â
- 1 Background for image teaser slide
- 2 Button new type
- 3 Filters - make filters horizontal
- 4 Filters - move filters into offcanvas
- 5 Hover effect on tile - add the second image on hover
- 6 Change scenario for navigation flyout teaser
- 7 Add SKU (or other custom elements) on a product tile
- 8 Add a special variant for image teaser
- 9 Place an additional element below mobile navigation in offcanvas
- 10 Show search input on the desktop as a dropdown
- 11 Integrate self-hosted fonts
- 12 Change category links component mobile layout from dropdown to scrollable list
- 13 Share icons for PDP
Background for image teaser slide
Add the possibility to set solid, custom background instead of an image in the image-teaser based components.
Storefront
Admin panel
Â
Add custom tab and background field to teaser admin CC configurator
<vars module="MageSuite_ContentConstructor">
<var name="teaser">
<var name="tabs">
<var name="3">
<var name="label">Custom</var>
<var name="content">
<var name="fields">
<var name="0">
<var name="label">Background color</var>
<var name="type">color</var>
<var name="model">background_color</var>
</var>
</var>
</var>
</var>
</var>
</var>
</vars>
Detailed documentation of custom fields: Custom Fields
Â
Add background template
Create MageSuite_ContentConstructorFrontend/templates/component/image_teaser/slide_elements/hotspots/before_content.phtml
in a child theme.
<?php
$slide = $block->getSlide();
$backgroundColor = $slide->getBackgroundColor();
?>
<?php if (isset($backgroundColor)): ?>
<div class="cs-image-teaser__background" style="background: <?= $backgroundColor ?>;"></div>
<?php endif; ?>
To learn about other slide hotspots check:k magesuite-content-constructor-frontend/view/frontend/templates/component/image_teaser/slide_elements/hotspots
folder
List of hotspots:
after_content
after_slide-wrapper
after_text-content
before_content
before_slide-wrapper
before_text-content
Â
Add styles
Add scss in a child theme components/image-teaser/image-teaser.scss
@import '~Creativeshop/components/image-teaser/image-teaser';
.#{$ns}image-teaser {
&__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
Button new type
Add new styles for buttons.
Â
Define a name and add styles
Define the new button type: extra-cta
and add its styles.
Add components/button/hook.scss
Some button styles ar global and are applied to all types of button, f.e:
display: inline-block; font-size: $button_font-size; font-weight: $button_font-weight; text-align: $button_text-align; position: relative; line-height: $button_line-height; margin: 0; text-transform: $button_text-transform;
Check common variables in theme-creativeshop/src/components/button/mixin.scss
Â
Override variables to change button type
If a button has defined button type variable override in order to apply new styles, f.e:
Â
Style new button
Â
Filters - make filters horizontal
The optional scenario for magesuite filters is to set them horizontally, above the toolbar and products.
Storefront
Â
In order to introduce horizontal filters the layout must be changed to 1column
and left column must be placed below or under the main column. Add the following changes in XML files:
src/Smile_ElasticsuiteCatalog/layout/catalog_category_view_type_layered.xml
src/Smile_ElasticsuiteCatalog/layout/catalogsearch_result_index.xml
Â
Although the behavior (vertical/horizontal position) of filters basically is set by page layout, it is also possible to force horizontal or vertical styling for any page layout. Check force_sidebar_filters_style
and force_horizontal_filters_style
variables in etc/view/xml
file in order to learn more.
Â
Styling
In theme-creativeshop/src/components/aftersearch-nav/aftersearch-nav.scss
there are plenty of variables that can help with styling of horizontal filters.
Pay attention to the below variables, that help to set the desired number of rows and columns on tablet, laptop, and desktop breakpoint
Filters - move filters into offcanvas
The common design pattern is to move the filter into offcanvas on mobile. theme-creativeshop offers a built-in possibility to move filters into offcanvas on mobile and/or desktop. (However, desktop offcanvas filters are very rarely used)
Storefront
Â
Display offcanvas toggle button and enable offcanvas filters:
etc/view.xml
Â
Do not collapse filters
the standard behavior of magesuite filters on mobile is to collapse the whole filters section:
In order to show filters in offcanvas set is_collapsible_mobile
variable in:
Smile_ElasticsuiteCatalog/layout/catalog_category_view_type_layered.xml
Smile_ElasticsuiteCatalog/layout/catalogsearch_result_index.xml
Â
Styling
There are a couple of variables for the toggle button that can be adjusted. components/toolbar/toolbar.scss
Offcanvas filters styles are placed in components/offcanvas-filters
There are some variables that can be adjusted in order to achieve the desired look&feel of the child project:
Â
Hover effect on tile - add the second image on hover
Many projects request to add a hover effect on tile that shows another product image (f.e. the back of the product).
Â
Add a template for the second image on the tile
In MageSuite_ProductTile/layout/product_tile.xml
add a template with the second image:
Â
Add styling
Change scenario for navigation flyout teaser
The navigation teaser scenario can be changed to any available image teaser scenario.
In order to learn about configuration options check theme-creativeshop/src/MageSuite_Navigation/layout/default.xml
Â
Add SKU (or other custom elements) on a product tile
In order to add an extra element to the product tile create a template and add it to the product tile XML:
src/MageSuite_ProductTile/layout/product_tile.xml
Read more in MageSuite_productTile module documentation: ProductTile
Add a special variant for image teaser
Sometimes there is a need to style some image teasers in a special way. Thanks to the custom fields an admin editor can mark some teasers as special variants (see Custom Fields ) and a frontend developer can style them based on a custom class.
Storefront
Admin panel:
Â
Add special variant custom fields
Â
Style component that is wrapped in a container with and extra modifier
components/image-teaser/image-teaser.scss
Styles example:
Â
In order to hide a custom field in a specific component configuration hide them with styles, f.e.
The CSS class of a custom field follows the pattern: .cc-input--[name]
Styles for CC configurator must be placed in a module, not in the child theme, f.e. under the following path:
customization-[project]/magesuite-custom-content-constructor-components/custom-components-configurator.scss
Â
Place an additional element below mobile navigation in offcanvas
The common design pattern is to place some elements like my account icon or language switcher below mobile navigation. In the theme-creativeshop icons are placed in the header or mobile, but there is an easy way to move them into offcanvas if there is a such design requirement. It is also possible to place other, custom elements in mobile offcanvas navigation.
Storefront
Offcanvas drawer template hotspots
In the MageSuite_Navigation/templates/offcanvas/drawer.phtml
template serevral hotspots are prepared:
They can be used in order to place inside them some new elements f.e. static block:
Â
Show search input on the desktop as a dropdown
By default in MageSuite above defined breakpoint search input is visible as a normal header element (layer), by default between the logo & user nav.
The other possible option is to place search input below header - in the same way as on mobile.
In order to change this behavior in src/config/variables.scss
file of your there set the following variable:
Â
Integrate self-hosted fonts
To provide self-hosted, preloaded fonts, define specific arguments in fonts
XML block.
Step 1: provide (in
local_fonts
) CSS file in which custom @font-face rules are defined. Example:
Step 2: provide (in
local_fonts_file
) paths to fonts.Example:
Step 3: Define custom fonts rules in CSS file defined in first step. Example:
Another possibility for font-display
is optional
. It is used in some of the project, and it’s working, BUT in this case block period is extremely short (~3s). In this case, user’s connection speed might be a determining factor, where slower connections are less likely to receive custom font.
To avoid CLS while using font-display: swap;
consider using fallback font: https://web.dev/articles/css-size-adjust (https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Poppins ). Example of implementation in projects: https://gitlab.creativestyle.pl/toys4fun/theme-toys4fun/-/merge_requests/343.
Change category links component mobile layout from dropdown to scrollable list
Example:
Â
In order to introduce a scrollable list for the category links component override the following files in your theme:
src/MageSuite_ContentConstructorFrontend/templates/component/category_links.phtml
remove initialisation of collapsible widget:
data-mage-init='{"collapsible":{"mediaQueryScope":"(max-width: 767px)"},"ccCategoryLinks":{}}'
remove dropdown trigger:
cs-category-links__subtitle | cs-category-links-dropdown__trigger
src/components/category-links/index.ts
In order to avoid including not used styles remove
import 'components/category-links/category-links-dropdown.scss';
import. Leave only importcomponents/category-links/category-links.scss';
import
Â
In etc/view.xml
file decide how many items should be shown in the component. To always show every subcategory, which was selected in the admin panel, use a high number, f.e.
The following CSS can be helpful in order to make a native scroll on a list with subcategory items. use it in src/components/category-links/category-links.scss
file.
Â
Share icons for PDP
The following code can be an inspiration when you have to add share icons on PDP.
.Example:
Files:
sharing.phtml
catalog_product_view.xml
share.ts
Styles according to the project design