Life Journey

 In this example, I will add   manufacturAid attribute which does not exist in OOB ProductData/ProductWSDTO class A. Update Your XXXXws-beans.xml file to add below entries.  1. Add bean definition to add additional field on OOB ProductData   < bean class ="de.hybris.platform.commercefacades.product.data.ProductData" > < property name ="manufacturerAid" type ="java.lang.String" > < description > MFG Part# </ description > </ property > </ bean > 2. Add bean definition to add additional field on OOB ProductWsDTO < bean class ="de.hybris.platform.commercewebservicescommons.dto.product.ProductWsDTO" > < property name ="manufacturerAid" type ="java.lang.String" > < description > MFG Part# </ description > </ property > </ bean > B. update field mapping in dto-level-mappings-v2-spring.xml file < bean parent ="fieldSetLevelMapping...

 Override OOB mini cart component: see the highlighted part in yellow. I have created separate module called BDIMiniCartModule and ConfigModule.withConfig to override the component .  Here MiniCartComponent is OOB component and BDIMinicartComponent is Custom component. Two other components are created for displaying  list of cart items and cart item.(BDIMiniCartitemListComponent, BDIMinicartItemComponent) Do not forget to include/import custom module( BDIMiniCartModule  )  in app.moduel.ts file. import  {  CommonModule  }  from   '@angular/common' ; import  {  NgModule  }  from   '@angular/core' ; import  {  RouterModule  }  from   '@angular/router' ; import  {    ConfigModule ,  I18nModule ,    UrlModule }  from   '@spartacus/core' ; import  {  CartSharedModule ,  IconModule ,  ItemCounterModule ,  MediaModule  }...

add new attribute in OOB product UI model and  OOC product model. declare   module   '@spartacus/core'  {    interface   Product  {      newattributename ?:  string ;   }    namespace   Occ  {      interface   Product {        newattributename ?:  string ;     }   }

Follow below steps to override OOB Spartacus footer component: 1. Create custom footer component typescript file( Test FooterNavigationComponent ). copy the content/code from OOB FooterNavigationComponent file and paste it in custom component import  {  ChangeDetectionStrategy ,  Component  }  from   '@angular/core' ; import  {  CmsNavigationComponent  }  from   '@spartacus/core' ; import  {  CmsComponentData ,  NavigationNode  }  from   '@spartacus/storefront' ; import  {  Observable  }  from   'rxjs/internal/Observable' ; import  {  map  }  from   'rxjs/operators' ; @ Component ({    selector :   'app-bdifooter-navigation' ,    templateUrl :   './bdifooter-navigation.component.html' ,    changeDetection : ChangeDetectionStrategy . OnPush }) export   class  Test FooterNavigationComponent   ...