Backbone view not found/visible in SCA

Question

I've overridden the ItemDetails module and I've added a new view it. But now when I run my SCA Mont Blanc website locally the website fails to load (I get a white screen) and the following error in the browser console - fails to load my view I added.

Failed to load resource: the server responded with a status of 404 (Not Found) ItemDetails.PBT.View.js

What do I need to do to add a new view to a overridden module?

What I have done:

• Create the view file in modules/mymodules/ItemDetailsOverrides@1.0.0/Javascript . The view (and filename) name is ItemDetails.PBT.View I have also created a simple template for the view in the templates folder.
• Added my module override to distro.json in the modules dictionary. Note the original ItemDetails is still included in the file aswell
• Include my new view in modules/mymodules/ItemDetailsOverrides@1.0.0/Javascript/ItemDetails.View.js both in the dependencies and in the function as a parameter.
• In ns.package.json I have specified that I am overridding the modules/suitecommerce/ItemDetailsOverrides@2.1.0/Javascript/ItemDetails.View.js with modules/mymodules/ItemDetailsOverrides@1.0.0/Javascript/ItemDetails.View.js .

What else do I need to do?? Specific answers would be greatly appreciated.

Answer 1

The 404 error could be caused by several reasons:

1- If you are overriding a view you can't require it since it doesn't exist anymore.

2- Is ItemDetailsOverrides part of suitecommerce modules or are you trying to override modules/suitecommerce/ItemDetails@2.1.0/Javascript/ItemDetails.View.js ?

3- Did you add the view to the javascript dependencies in the distro.json ?

4- If you are "extending" the original ItemDetails.View.js in your module there's no need to override it (Probably you will need to change the name to something like ItemDetails.View.Extended). You can work with the ItemDetails.View prototype and add/redefine properties and methods:

_.extend(ItemDetailsView.prototype, {
    title: 'My new item details view'
})