/
MageSuiteFrontend

MageSuiteFrontend

https://github.com/magesuite/frontend

This module provides the backend code and helpers for frontend modifications of Magento features placed in theme-creativeshop.

Installation

This module is a part of MageSuite metapackage

composer require "creativestyle/magesuite-frontend" ^3.0.0

Admin settings

Some functionalities from the module are placed in:

Product Listing Sort Direction

Stores -> Configuration -> Catalog -> Catalog -> Storefront

Google optimize

Stores -> Configuration -> Sales -> Google Api -> Google Optimize

Show "Print order" button in customer area

Stores -> Configuration -> Sales-> Sales

Custom URL redirection type

Stores -> Configuration -> MageSuite -> SEO -> Category

Options:

  • No

  • Temporary (302)

  • Permanent (301)

Backend

TODO - BE documentation and review of documentation is needed

Frontend

 

Helpers

MageSuite\Frontend\Helper\Product

MageSuite\Frontend\Helper\Order

MageSuite\Frontend\Helper\Category

MageSuite\Frontend\Helper\Store

MageSuite\Frontend\Helper\Customer

MageSuite\Frontend\Helper\Review

 

Some of the templates can be outdated and not used. In some placed outdated methods and magento code cam be used. The module should be reviewed and refactored.

 

Magesuite logo in admin panel

MageSuite logo is added next to new features in the admin panel.

In magesuite-frontend/view/adminhtml/layout/default.xml layout

<css src="MageSuite_Frontend::css/cs-logo.css" /> <link src="MageSuite_Frontend::js/cs-logo.js" />

In order to display MageSuiyte logo add cs-csfeature__logo class, f.e:

<field id=""> <label></label> <source_model></source_model> <frontend_class>cs-csfeature__logo</frontend_class> </field>

Print order button in User Area

If Show "Print order" button in customer area swicther is set to Yes the print order button is displayed in the User Area..

Template:

magesuite-frontend/view/frontend/templates/order/info/buttons.phtml

WYSIWYG Font Size

Extends the MageSuite Frontend module. Adds a Font Size select to every WYSIWYG (HugeRTE) editor.

Let editors give any element a headline font size (e.g. an <h2> rendered at the h1 size) by picking from a predefined list - instead of typing a raw pixel value. The chosen size is applied as a CSS class (.h1-.h6), so it stays responsive and driven by the theme's size scale rather than a hardcoded value that breaks across breakpoints.

The class is the single source of truth for the size; the editor only tags the block (no in-editor size preview).

Frontend

Each headline rule also matches its class, in theme-creativeshop:

theme-creativeshop/src/components/typography/typography.scss

h1, .h1 { @include headline($level: $font-size_headline-1); } // … through h6, .h6

Editor

Admin-side, in magesuite-frontend:

  • view/adminhtml/requirejs-config.js - registers a mixin over the core adapter mage/adminhtml/wysiwyg/tiny_mce/tinymceAdapter.

  • view/adminhtml/web/js/wysiwyg/font-size-adapter-mixin.js - adds the size formats and the csfontsize toolbar button to the editor settings.

  • view/adminhtml/web/js/wysiwyg/font-size-plugin.js - the Font Size menu button (levels + Clear font size). Applies the class to the nearest block; the button label reflects the active level. The level list lives here and is the extension point.

Each level is { title, className }. className must match a frontend class.

Extending per project

Change the H1–H6 sizes

Override $font-size_headline-* (or the CSS custom properties they map to) in the project theme — the classes follow automatically. No JS change.

Add new levels

Add a plain-object RequireJS mixin over the plugin in the project module, appending to the exported levels. Each new level needs a matching frontend class.

Example - teaser sizes (customization-project + theme-project):

1. Frontend class - theme-project/src/components/typography/typography.scss

.teaser-large { @include headline($level: $font-size_teaser-large); } .teaser-small { @include headline($level: $font-size_teaser-small); }

2. Register the mixin - customization-project/view/adminhtml/requirejs-config.js

const config = { config: { mixins: { 'MageSuite_Frontend/js/wysiwyg/font-size-plugin': { 'Creativestyle_CustomizationProject/js/wysiwyg/font-size-plugin-ext': true } } } };

3. Append the levels - customization-project/view/adminhtml/web/js/wysiwyg/font-size-plugin-ext.js

define(['mage/translate'], function ($t) { 'use strict'; return function (fontSize) { fontSize.levels = [ ...fontSize.levels, { title: $t('Teaser large'), className: 'teaser-large' }, { title: $t('Teaser small'), className: 'teaser-small' } ]; return fontSize; }; });

The plugin exports levels (extend/replace) and toolbarItem.