Custom Preview Sizes and Default Overrides in SuiteCommerce

TL;DR Opening

You can now enable custom preview sizes in SuiteCommerce by modifying the CMS adapter file, allowing for specific dimensions beyond the default options. This feature empowers developers to create a more tailored experience for site previews based on unique business needs.

How to Enable Custom Preview Sizes

If you need to preview your site with specific dimensions that are not pre-set, you can easily add custom preview sizes to the adapter file. Additionally, you have the option to override the default sizes so that only your specified dimensions are selectable.

Code Sample for Custom Sizes

Here's a sample code snippet demonstrating how to set up various custom preview sizes for desktop, tablet, and phone devices:

1var setup = { // Config values the adapter can give the CMS on startup.
2   // Screen size preview override/extension
3   screen_preview: {
4      override_defaults: false,
5         sizes: {
6            desktop: [{
7               name: 'XL',
8               width: 2000,
9               height: 3000
10            }, {
11               name: 'XXL',
12               width: 3000,
13               height: 4000
14            }, {
15               name: 'Portrait',
16               width: 768,
17               height: 1024
18            }],
19               tablet: [{
20               name: 'Huge',
21               width: 1300,
22               height: 2000
23            }],
24            phone: [{
25               name: 'Massive',
26               width: 1400,
27               height: 2400
28            }]
29                  }
30               }
31            };

It's crucial to note that, when defining sizes for tablets and phones, Site Management Tools (SMT) ensures the width is always greater than the height. If you inadvertently set a larger height than width, SMT will automatically adjust it to maintain that rule, although this does not apply to desktop dimensions.

Overriding Default Sizes

If you prefer to display only your custom preview sizes without any default options, set the override_defaults flag to true in the CMS adapter. This ensures that users will only see custom dimensions in the dropdown list. Conversely, keeping this flag set to false will allow both default and custom sizes to appear.

Summary

To enable custom preview screen sizes or eliminate default options, you should modify the CMS adapter file to include your custom screens along with the appropriate setting for the override_defaults flag.

Who This Affects

• Developers wanting customized site preview experiences.
• Site Administrators managing dimensions and configurations in Site Management Tools.

Key Takeaways

• Custom preview sizes can enhance the user experience in SuiteCommerce.
• SMT enforces width > height for tablets and phones to maintain usability.
• Custom dimensions can replace default sizes when configured correctly.