1. Home
  2. Getting Started
  3. (Optional): Adapt the assistant or filter design

(Optional): Adapt the assistant or filter design

The assistant and filter design fits the Miele styleguide and should, therefore, work well within the Miele brand corner.

Current assistant design:

Current filter design:

The design is available in your zoovu backend account and can be used as it is. All changes you wish to make to the original design need to be discussed with and approved by your contact at Miele.

These designs are available in your zoovu account and can be used in their current state. Any changes you wish to make to the current designs must be discussed with and approved by your contact at Miele.

The zoovu designs (buyers-guide-sds and product-lister-page-sds) are based on Angular JS. (Note – you should be familiar with this framework before you work on any design changes!) Changes can be made within the Tab “Web  Design” in the zoovu backend (explained below).

Any changes required need only be applied once to the design. The design is then applied universally to all available assistants and filters in your zoovu account which have the same design assigned.

Note – design changes are only visible in open drafts. All changes can be tested within a draft of one assistant/ one filter, however, If you would like to apply the changes to all assistants and filters, you need to create new drafts for each assistant/ filter and publish as live again. 

The designs are named “buyers-guide-sds” and “product-lister-page-sds” and contain different file types. (CSS; HTML; JS-runtime; Locale; Config) – you can view these files by clicking on the file directory arrows on the left of the screen while inside the Web Design tab.

Once you click on a web-design file in the left directory, it will open in the editor window on the right.

Recommendation: Please keep the original JS and CSS files in place (advisor.js and style.css) – as these files are compressed and complex to maintain. We recommend that you add new files for the changes you need (right-click on a folder,  create new file). You can then simply overwrite where you wish to make an update.

Note: Each file will be locked at the beginning, as it refers back to the original Miele account. If you wish to make an edit,  you will need to unlock it. Right-click on the file you wish to use and select “Copy from reference”. Keep in mind that by unlocking the file, you are also disassociating it from its original reference and any further changes on that original file/designs (for example bugfixes) will not be reflected in your assistant copy anymore.

How you implement design changes largely depend on the specific changes you wish you make. Therefore it is not possible to provide detailed descriptions for all cases however below are some standard changes explained.

Note: Screenshots have been made on Windows 10 with Chrome Version 50.0.2661.94 m with the web-developer tool- bar active (Toggle with F12 or right-click on some element and „inspect“  – Strg+Shift+I).

CSS design changes:

Open the assistant in your browser and inspect the element you wish to change. In the example below it is the style of the colored “Next” button:

When inspecting the element you will see the #smrt42-advisor-wrapper .smrt42-button-colored selector. To change this element, you can create a new CSS file within the folder (note: the order of the files are important – so your new one should come after the styles.css) and simply overwrite the styles for this selector. 

This technique is recommended for all changes to the CSS styles.

Upload new graphics/sprites/fonts:

If you wish to use your own brand graphics and fonts in the assistant and filter web-design, you will need to upload them in the “Resources” tab first (right-click => upload OR via drag and drop into the directory). You can also update any existing resources in this section.

After you have uploaded the assets, go back to the “Web  Design” tab.  From here you can take the placeholder URL for the specific font/sprite. Simply click on the “Resources“ register-tab with the grey background, select either  „Fonts“ or „Sprites“ and then an overlay will pop up. There you’ll see all of your uploaded graphics/fonts. Now, click into the URL part and copy the placeholder string for use in your CSS. This placeholder will be translated into a timestamped URL when you pregenerate the assistant.

Example placeholder for sprites:

$smartSprite/sprites/415/origin/shadow-repeat-y.jpg

Example placeholder for fonts:

$smartFont/fonts/415/origin/helvetica-neue-lt.ttf

Important: Always use the placeholder inside your CSS and  HTML and not the absolute URL to the image. This will ensure that you can continue to make future updates as the absolute URL is timestamped and thus will not resolve if used.

Sidenote:

As soon as you are done with your changes we recommend to replace every existing graphic/font from the “root” design with either a copy of said graphic/font or your own graphic (upload in Resources section).

The reason for this is that in your design copy there is still a path to the graphics of the root design. If the graphics/fonts change in the root  design, they will also change in your copy.  If you want to avoid this you will need to work with your own resources. 

Therefore every occurrence in CSS with another number than your customer-specific sprites $smartSprite/ sprites/415/… or $smartFont/fonts/415/… should be replaced by the graphics you uploaded. You will find the number of your customer sprites in the placeholder URL you copied.

Note: if you upload a new graphic and the sprite position is different than the original graphic, you will need to change the background positions, etc. in the styling.

HTML:

It is also possible to change the HTML of the assistant and filters (via the HTML folder in web-design). It is based on a custom angularJS implementation, but it is fine to simply move or edit elements here as long as you possess some basic knowledge of angularJS.

Updated on October 14, 2019

Was this article helpful?

Related Articles