Magento 2 base theme for sharing features across multiple themes

Overview

MASE2 Optimus theme

About and purpose

Optimus is a free and home-made Magento 2 theme, developed by Studio Emma . Its purpose is providing a starting point for the development of our own client projects. It's a solid base to extend the Magento 2 Blank theme with functionality & styling without breaking future upgrades. It is continuously being worked on, both refined and expanded. All added changes and new features are extends; we try to stay away from overrides until there is absolutely no other way possible.

It comprises of the following:

  • module-core (separate composer install) with several helper functions which can be of use throughout your own client theme.
  • module-optimus (separate composer install) which stands in for our example content pages at [rooturl]/content. More on that later.
  • theme-frontend-optimus (separate composer install) which is the actual front-end theme and works together with the two above.

Optimus works with Magento 2, starting from the initial 2.0.0 BETA all the way up to the current 2.1.2 release.

Demo

Demo available with a list of extra features. (Note: this is a base theme and it is does not look pretty by itself.)

Module-core

This module contains a lot of handy helper functions:

  • getCurrentStore() : returns the current store
  • getLocale() : returns the current locale
  • getCurrentCategory() : returns the current category
  • getParentCategory() : returns the parent category of the current category
  • getCurrentProduct: returns the current product, if available
  • getBackUrl() : returns the back url value when browsing products or categories
  • isLoggedIn() : return boolean if user is or is not logged in
  • getCurrentCustomer() : if logged in, returns current customer object
  • getCurrentCustomerGroup() : if logged in, returns current customer group object

Module-optimus

This module contains the necessary files in order to build the example content pages. After you installed Optimus, navigate to [rooturl]/content. These pages were setup to give you a visual overview of all of our content-related changes. This includes basic layout (titles, lists, quotes, ...), page/section layouts (grids, sections, structures ...), interaction elements (accordeons, FAQs, toggles, ...), reusable classes, specific contentblocks, images and videos, ...

Theme-frontend-optimus

This module contains the front-end theme itself. We divide our work into two main sections:

  • Changes: Extends the blank theme with changes to its functionality, styling and technologies according to our experience throughout the years.
  • New features: Extends the blank theme with new features that are of interest to most our clients. These can easily activated/deactivated when needed.

Technicalities

  • The theme inherits from the Magento Blank theme.
  • The theme itself is declared in theme.xml. This file is a necessity for all Magento 2 themes and contains information about inheritance.
  • The composer.json file contains the dependency information required for this theme.

Installation

The modules are intended to be installed using composer. If you do not have composer installed (check by entering the command "composer --help" into your terminal), please install it using the following commands:

curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer

After installing composer, use the following commands to install Optimus to your Magento 2 installation:

composer require studioemma/magento2-theme-optimus

After installing "Studio Emma Mase 2 Optimus" theme, you can verify that the installation succeeded by going to the Magento 2 back-end and navigating to Content -> Design -> Themes. If it listed there, you should be happy.

Normally, this theme will never be set as a the main theme for a client, but to set this theme for development purposes on the storefront, go to: Content -> Design -> Configuration and set the Optimus theme on the Store View you wish to use. Do not forget to flush the cache afterwards.

Using Optimus as the base theme for your own client theme

A client project will inherit from the Optimus theme. To do this, set the theme.xml of your own client's theme inside the client's package to inherit from Studioemma/optimus.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd">
    <title>Own client name - Own theme name</title>
    <parent>Studioemma/optimus</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Because of the Magento 2 inheritance system, we had to create an additional _extend-custom.less file per module. This means that all of your client theme, module-specific, styling should be added in this file!

An example. You want to edit the footer for your client theme:

  • Add the "Magento_Theme" folder inside your app/design/frontend/ClientPackage/ClientTheme/ folder structure
  • Add the web/css/source folder structure inside your newly created "Magento_Theme" folder
  • Create the _extend-custom.less file inside the newly created "source" folder
  • Make changes in this file
  • Watch your Grunt process this file using the "grunt watch" command in the webroot of your box.
  • Reload the front, your changes should be visible
  • It is possible though that Grunt won't pick up your newly created file. In this case, simply stop watching and re-watch using, again, the "grunt watch" command. Re-save the file and Grunt should pick it up.

Configuring grunt (development purposes only)

You need to configure Grunt in order to work with your theme and pick up the Optimus files too, open /dev/tools/grunt/configs/themes.js and put in a new config for your theme like in our example below. Only replace the items between curly brackets {{item}}.

{{themename}}: {
    area: 'frontend',
    name: '{{themepackage}}/{{themefolder}}',
    locale: 'en_US',
    files: [
        'css/optimus-m',
        'css/optimus-l',
        'css/styles-m',
        'css/styles-l',
        'css/print',
        'css/email',
        'css/email-inline'
    ],
    dsl: 'less'

Next : run the following command that generate symlinks to the .less files that are watched by grunt (see command below) when you edit the source .less files (see next command). You need to re-run this command every time files are added/deleted.

bin/magento dev:source-theme:deploy --theme=vendor/theme --locale=en_US css/styles-m css/optimus-m css/styles-l css/optimus-l css/print css/email css/email-inline

Run grunt watch in the webroot of your box.

grunt watch

Upgrading Magento 2

Normally, no problems should rise when upgrading Magento 2 to a new release. If they do, please let us know.

Changes in Optimus extended from the Magento 2 Blank theme

As discussed, we divide Optimus specific work into two sections:

  • Changes: Extends the blank theme with changes to its functionality, styling and technologies according to our experience throughout the years.
  • New features: Extends the blank theme with new features that are of interest to most our clients. These can easily activated/deactivated when needed

Changes

  • Removed breadcrumbs for screens smaller than 768px
  • Added a mobile pager (< select >) on category pages instead of default pager for screens smaller than 768px
  • The grid on category pages falls back to one column for screens smaller than 480px
  • Product actions (add to cart, add to wishlist, add to compare) have been added back to the category grid/list on screens smaller than 640px
  • Changed required form elements's colour from red to the default text colour, removed right align of labels
  • Removed all Paypal and other marketing callouts
  • Changed the way the review action breaks down on category listview on screens smaller than 768px
  • The wishlist in the left column has been rearranged so that the product image and product description are now placed below each other instead of the 50/50 column view
  • Made several changes to account section to improve usability
  • Page zoom has been added to touch devices
  • Added a home link (text + icon) to the main navigation
  • Adjusted the print stylesheet to focus on the real necessary content
  • The empty state wishlist & compare blocks will not be shown if they have no items inside of them

New features

  • Added our own grid system (called _colm.less) in both regular and mixin flavours
  • The contact page now includes a static block with identifier "contact-us-info" for contact info. You have to create this static block in the back-end.
  • Added all necessary favicons and touch icons to head
  • Modernizr library has been added to default head for usage
  • Added a whole bunch of show/hide classes based on viewport width. See /content/responsive
  • Added a "Go to products" link on the cart page on screens smaller than 480px
  • Hid the "Clear shopping cart" button on the cart page
  • PDP + Cart page: Quantities from 1 to 5 are shown in a selectbox. If the user wants to add even more to his cart, he can select the "More" option in the selectbox. The selectbox will then be hidden and replaced by a regular textinput.
  • Added social sharing options to PDP
  • Adjusted the complete footer section through layout XML.
    • 4 columns:
      • Column 1: Sitemap (level 1 categories)
      • Column 2: Static block
      • Column 3: Static block
      • Column 4: Newsletter block and social sharing block
    • Full width payment icons
    • Full width copyright + address
  • Made it possible to change the view of the additional product detail blocks on the PDP. The file _sections.less explains what you have to do to:
  • have the desktop view display these blocks as an accordion instead of tabs
  • have the desktop view display these blocks without any UI modification
  • Header has a new top row of USPs, derived from static block "store-usp"
  • Added a static block "product_info_stock" on the PDP next to the "Add to cart" action. You have to create this static block in the back-end.
  • Added the language block to the footer on screens smaller than 768px
  • Added an SVG loading animation to the regular search in the header after submitting the search form
  • Added the Font Awesome library
  • The checkout success page now includes a static block with identifier "checkout-success". You have to create this static block.
  • Added Flex Slider library. See /content/images
  • Added possibility to make the header sticky. Edit the default.xml file in Magento_Theme/layout; see comments.
  • Added a new layout handle: 1 column - wide. This will have your content expand to viewport edge. You can choose this layout when editing a page in the back-end. This new option will be selectable from the layout dropdown.
  • Added own icon font library:
.myicon {
    font-family: 'optimus-icons';
    content: 'a';
}

Markdown preferences pane

Comments
  • Grunt less:theme - NameError: variable @media-common is undefined

    Grunt less:theme - NameError: variable @media-common is undefined

    When I try and pass this theme through grunt it fails with the following error:

    >> NameError: variable @media-common is undefined in pub/static/frontend/vendor/theme/en_GB/css/source/_optimus-lib.less on line 6, column 9:
    >> 5 
    >> 6 & when (@media-common = true) {
    >> 7
    Warning: Error compiling pub/static/frontend/vendor/theme/en_GB/css/_optimus.less Use --force to continue.
    
    Aborted due to warnings.
    
    opened by phillipmeyer 7
  • Store USP block duplicating after resizing window

    Store USP block duplicating after resizing window

    The .store-usp is duplicating after resizing the window multiple times.

    schermafbeelding 2018-12-29 om 12 11 55

    This is probably caused in the responsive-optimus.js by prepending the .store-usp block when switching to mobile and desktop.

    opened by gjportegies 2
  • Catalog not showing on fresh install

    Catalog not showing on fresh install

    I just installed the theme and the catalog(Popular products) and the ads(picture slideshow) seems to be missing. I can see the stock product when i use the default magento theme, but if i switch to optimus, nothing is shown.

    opened by sabatmonk 2
  • var/www/test.com/html/vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php:93

    var/www/test.com/html/vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php:93

    hello, I installed this theme some error, The default luma theme is OK。

    PHP 7.0.19 nginx 1.13

    Fatal error: Uncaught Error: Class 'StudioEmma\Core\Helper\Store' not found in /var/www/test.com/html/vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php:93 Stack trace: #0 /var/www/test.com/html/vendor/magento/framework/ObjectManager/Factory/Compiled.php(88): Magento\Framework\ObjectManager\Factory\AbstractFactory->createObject('StudioEmma\\Core...', Array) #1 /var/www/test.com/html/vendor/magento/framework/ObjectManager/ObjectManager.php(71): Magento\Framework\ObjectManager\Factory\Compiled->create('StudioEmma\\Core...') #2 /var/www/test.com/html/vendor/magento/framework/View/TemplateEngine/Php.php(122): Magento\Framework\ObjectManager\ObjectManager->get('StudioEmma\\Core...') #3 /var/www/test.com/html/app/design/frontend/Studioemma/optimus/Magento_Theme/templates/html/opengraph/general.phtml(3): Magento\Framework\View\TemplateEngine\Php->helper('StudioEmma\\Core...') #4 /var/www/test.com/html/vendor/magento/framework/View/TemplateEngine/Php.php(59): include('/var/www/test.c...') #5 /var/www/test.com/html in /var/www/test.com/html/vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php on line 93

    opened by patrickpeng2091 2
  • Upload an og-image for a cms page via the backend

    Upload an og-image for a cms page via the backend

    It would be nice to upload an og-image for a cms page via the admin. Currently there are only og-images provided for products and categories.

    It will need to be done in the optimus module off course.

    enhancement 
    opened by Quinten 1
  • Links in header account menu do not have a discernible name

    Links in header account menu do not have a discernible name

    When the text of the account menu links is hidden and only a user icon is shown the links no longer have a discernible name.

    This can easily be prevented by giving the links a title attribute.

    opened by Quinten 0
  • Render category and product image as opengraph images

    Render category and product image as opengraph images

    See how it is done for cms-pages. No need for a new upload button in the backend: use the normal category and product image. There is already some code for the category in the theme, rewrite it if necessary. Extend the Block/Opengraph/General.phpclass in the Optimus module, the way it is done for Block/Opengraph/Page.php

    enhancement 
    opened by Quinten 1
  • Make thumbnail version of the category listing

    Make thumbnail version of the category listing

    Make a thumbnail version of Magento_Catalog/templates/navigation/category-listing.phtml

    Note: issue #13 has to be completed first

    Note 2: I already made one for a client once probably, so ask me before starting this issue.

    enhancement 
    opened by Quinten 1
  • Refactor category listings

    Refactor category listings

    The code in Magento_Catalog/templates/navigation/category-listing-two-levels.phtml and Magento_Catalog/templates/navigation/category-listing.phtml is kinda duplicate and spaghetti. Some of the logic can be moved to the new block class StudioEmma\Optimus\Block\Navigation in the Optimus module. So we can create all kinds of templates from it. The number of levels could then also be a parameter.

    refactor 
    opened by Quinten 1
  • Create a page content/design

    Create a page content/design

    It would be nice to have a page content/design, where all the elements that can be styled with variables from the _theme.less are present. Like buttons, messages, headings, links, tooltips, form-elements, menus, breadcrumbs, blocks, panels, ... Some are already present on content/basic, but there should be two different pages: one for the admin that uses the cms and one for the frontend developer.

    enhancement 
    opened by Quinten 0
Releases(v1.1.5)
Twitter Bootstrap base theme for Magento

Magento Bootstrap This is an adaption of the Twitter Bootstrap framework for the Magento Commerce system. PLEASE NOTE THIS IS A WORK IN PROGRESS Insta

Casper Valdemar Poulsen 84 Oct 31, 2022
Smd tags - A Textpattern CMS plugin for unlimited, structured taxonomy across content types.

smd_tags Tag articles, images, files and links with stuff, then use the public-side tags to display the lists, filter or find related content. Feature

Stef Dawson 4 Dec 26, 2022
Foundation 3 Framework for Magento 1.7. Foundation styles and libraries. Magento Responsive theme. Off-canvas Left-Right sidebar columns for mobile.

Magento Foundation 3 Framework Zurb Foundation 3 framework for Magento 1.7. Magento Foundation 3 Version 1.3.0. Demo page: http://magendation.internet

Nando Boronat 62 Apr 1, 2022
Magento 2 Blog Extension is a better blog extension for Magento 2 platform. These include all useful features of Wordpress CMS

Magento 2 Blog extension FREE Magento 2 Better Blog by Mageplaza is integrated right into the Magento backend so you can manage your blog and your e-c

Mageplaza 113 Dec 14, 2022
MageVagrant - Vagrant/Chef base box for running Magento

MageVagrant MageVagrant is a complete LAMP development environment for Magento. Specially created for the Magento Developer's Guide book. Features Aut

null 59 Sep 28, 2021
Laravel Plans is a package for SaaS apps that need management over plans, features, subscriptions, events for plans or limited, countable features.

Laravel Plans Laravel Plans is a package for SaaS apps that need management over plans, features, subscriptions, events for plans or limited, countabl

ángel 2 Oct 2, 2022
WordPlate is a wrapper around WordPress. It makes developers life easier. It is just like building any other WordPress website with themes and plugins. Just with sprinkles on top.

WordPlate is simply a wrapper around WordPress. It makes developers life easier. It is just like building any other WordPress website with themes and plugins. Just with sprinkles on top.

WordPlate 1.7k Dec 24, 2022
A collection of experimental block-based WordPress themes.

Frost An experimental block theme for designers, developers, and creators. About Frost is a Full Site Editing theme for WordPress that extends the inc

Fahim Murshed 0 Dec 25, 2021
🚀 Font Awesome Icons ⚐ for Hyvä Themes

Awesome Hyvä by JaJuMa Awesome Hyvä extension by JaJuMa allows to use Font Awesome 5 icons as SVGs on Magento 2 sites using Hyvä Themes. The module in

JaJuMa GmbH 7 Dec 2, 2022
Developer-friendly framework heavily inspired by Laravel and based on Timber and Wpemerge solutions for WordPress themes development with Bedrock folder structure

Lightweight Brocooly (Brocket) Improved Controllers, Middleware and Routers, but slightly less powerful Container Open beta. Package in development Cr

Ihar Aliakseyenka 3 Mar 4, 2022
BreadBooru is a light, quick, and easy to setup imageboard with themes, images, and video support

BreadBooru a bad imageboard, that has nothing to do with (dan/gel)booru, and yet still has booru in the name BreadBooru is a light, quick, and easy to

bread 2 Jan 22, 2022
Vite integration for WordPress plugins and themes development.

Vite for WordPress Vite integration for WordPress plugins and themes development. Usage Let's assume we have this plugin files structure: my-plugin/ ├

Dzikri Aziz 48 Jan 2, 2023
A tool that allows to quickly export data from Magento 1 and Magento 2 store and import it back into Magento 2

Simple Import / Export tool A tool that allows to quickly export data from Magento 1 and Magento 2 store and import it back into Magento 2. Table data

EcomDev B.V. 51 Dec 5, 2022
Simple free responsive (fluid) Magento theme

Please note: This theme is no longer under active development Magento Responsive Theme The GPMD responsive Magento theme is a simple fluid base theme

GPMD 61 Dec 30, 2021
A great Start for your next Magento Theme's local.xml file

Magento-local.xml-Template A Great Start for your next Magento Theme's local.xml file - <?xml version="1.0"?> <layout> <!-- Add/Remove Items From H

Bryan Littlefield 36 Apr 19, 2021
Rocket Web Prime theme based on Magento Blank that includes our most common customizations.

RW Prime - Magento 2 boilerplate theme RW Prime theme is based on Magento Blank and includes our most common customizations that we make on the majori

Rocket Web FED 37 Aug 8, 2022
SASS based version of Magento 2 Blank theme

Magento 2 - Blank theme - SASS version SASS based version of Magento 2 Blank theme, which aims to be as close to the core code as possible. Installati

SNOW.DOG 384 Dec 5, 2022
Mobile detect change theme and redirect based on device type. Magento 2 module.

Magento 2 Mobile Detect Theme Change Magento 2 Mobile detect system can be used to load different themes base on the client device (desktop, tablet, m

EAdesign 27 Jul 5, 2022