Frontend Customizations - examples

Owned by Marta Siewierska-Stańczak
Last updated: Oct 10, 2024 by Patrycja Niestrój
22 min read

In order to give MageSuite developers a better overview of frontend workflow, settings, and possibilities of customization examples from child themes are listed below.

 

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/hotspotsfolder

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:

  1. src/MageSuite_ContentConstructorFrontend/templates/component/category_links.phtml

    1. remove initialisation of collapsible widget: data-mage-init='{"collapsible":{"mediaQueryScope":"(max-width: 767px)"},"ccCategoryLinks":{}}'

    2. remove dropdown trigger: cs-category-links__subtitle | cs-category-links-dropdown__trigger

  2. src/components/category-links/index.ts

    1. In order to avoid including not used styles remove import 'components/category-links/category-links-dropdown.scss'; import. Leave only import components/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