SCA Development – knowledgebase JJ

Extension / Theme / Customization

Before starting the development or customization analyze the requirement properly to make sure it won’t affect the other customization. Make note of all the records associated with the customization if there are any.
If there are any backend functionalities make sure to reduce the service call happening in the background. We can make use of Cache while developing for loading faster. Backbone is providing “Backbone.CachedModel”.
For the customization, if there are internal IDs for the records or for the fields, we can store them in one place and use them throughout our customization. Like we create a library.js. Sample file is added below

Avoid using static IDs when developing, instead, configure them using a library file or config record. As was said previously, we can create a library file and use the variables from that common file so that we only have to update the variables where they are being used.

Specifying the variable names Even if styles are used, a proper style guide can greatly speed up development and debugging. You can become ready for changes to the website’s appearance by using the correct naming. We can eliminate the styling based on each element by utilizing the same class name for elements that frequently share features. This is more like reuse. Unwanted styles are also a major impact on the performance of the website, and the less code we write, the faster it will be.
Sass relies greatly on keywords that eliminate repetitive tasks. Perhaps the most important of them is @extend, which extends the styles that apply to a previously given selector to the current ruleset. This enables you to create shared structures for your elements and molecules and then expand on them for your classes as necessary. Example

.my-button {

@extend .button-primary;

@extend .button-medium;

margin: 15px;

} here will have the same styling as of the button-primary and the margin:15px will take over the existing style for the margin.

Avoid ‘long syntax’. The Sass compiler is happy for you to break up rule sets that have multiple selectors onto new lines. It improves readability, for example:

.my-class,

.my-other-class {

}

Before extending a view, file or update any template make sure we don’t have existing functionality by SCA.

For example if new need to show any notification on the site we can make use of showMessage() instead of updating the template and view file

We can use the events which are mentioned in the doc for our customisation like beforeOptionSelection, afterOptionSelection, beforeQuantityChange

we can use must minimize core customization and utilize the Frontend Extensibility API offered by NetSuite so that our customization is independent of other customizations. https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html

We should reduce down the number of extensions. The number of times the same file needs to be customized can be decreased. If we are developing an extension for the PDP page maintain a single folder and do the customization on the subfolder. The sample folder structure is given below. In this we have a common extension that have different functionality in cart, pdp. In this case we have parent folder and sub folders assoicated with the funtioanlty

If we are using a search, build the search in NetSuite and use the search id to run the search on the customizations, so that we can do the updates on the search instead modifying the code.

When we activate an extension, all the files get minified and added to a single file that is loaded on the website; if we remove it, we decrease the size of the file, which will reflect on the website. Remove all the unnecessary files from the extension. For example, if we are not using a config file, remove that section from the extension.
Make an update or customize based on the idea that cookie and session storage may only be accessible until the user clears or closes the browser tab. Don’t utilize them to store information that is essential for your functionality.
It is necessary to number the manifest in accordance with the modifications to prevent other domains of the same website from breaking.

For example, we need extension only in domain A not in domain B we update the extension to a new version and use that version in domain A

Keep a common config tab for the fields we created on the extension/customization on the configuration record. All the new fields and tabs should come under that. Prepare a document for the custom fields on the config record, it should include the use of that field, and path. Sample is shown below

SEO Best Practices

SEO is one of the key factors in the performance of a site, NetSuite Itself provides options for updating the SEO attributes. Item records are having a field for adding Meta details with them we can make use of that if you are adding an image to the NetSuite Alt tag is mandatory, also we can add meta keywords, attributes, page titles, Header, and additional scripts to the <head> and through our SMT page.

Optimize your JavaScript and use minimal AJAX calls to shorten the time it takes to generate the page HTML. The optimized site can help improve ranking on search results pages because faster-loading sites are ranked higher than slower sites.
Image Size is also a key factor in SEO we can use the Image Resizing option for the images on the website which can be updated on the website config record, so we can specify the width and height of the respective sections, like if we have a thumbnail and we can specify them in the template so the image will be resized to that size which reduces the size that is rendered in the website, if we have 40kb size of the main image we can reduce its size to approx. 10kb
Utilize the dev-tools to analyze the page’s performance. A performance reviewer is available in-house at Chrome. By examining accessibility, best practices, SEO, and progressive web apps, Google Lighthouse provides a complete view of your page experience. Do regular checks on the page while developing.

Leave a comment Cancel reply