STEPS For Setup

1. Help URL
http://javainsimpleway.com/hybris-b2b-installation/

2. hybrisserver.bat debug

We can see the hac at https://localhost:9002/hac. We can do following things inside hac:-

 Platform/Initialization
 Platform/Update
 Console/Scripting Language
 Console/FlexibleSearch- select {unit} from {PMProduct} where {code} = '1001400'
 Console/ImpEx Import and Export

We have to enable the back office and store Front

3. Recipe has to be installed for non –developers( I mean when there were no extensions needed for customizing the lookup or when
there are only a need of standard extensions, no custom extension, then we require install.bat to happen else not needed.)
STEPS
4. Navigate to the “< HYBRIS_BIN_DIR >/platform “ directory.- Set ant environment by entering the following command

• On Windows : setantenv.bat

5. ant all
6. Set below things in local.properties in hybris/config folder
mykey=myvalue
initialpassword.admin=nimda
cronjob.timertask.loadonstartup=false -> This is used to stop cronjobs running repeatedly in console
hac.webroot=/hac -> ?(Need to check)

7. Run the ant modulegen command and modify

the input.name and input.package parameters as per project requirement

• input.module parameter : Configures the modulegen task to use the accelerator module.
• input.name value : Indicates the prefix that is added to the new extensions generated by modulegen.
• input.package value : Defines the default Java package prefix.
• input.template parameter : Defines how to use the default Hybris configuration

Or run below command after changes:

<!--Run the modulegen command-->

ant modulegen -Dinput.module=accelerator -Dinput.name=mystore -Dinput.package=com.kb -Dinput.template=develop

8. After running the ant modulegen command successfully, open the ” localextensions.xml ” file located in
“< HYBRIS_HOME >/hybris/config” folder.
9. Add the new extensions generated by modulegen to the “localextensions.xml” file

<extension name="mystorefulfilmentprocess"/>
<extension name="mystorecockpits"/>
<extension name="mystorecore"/>
  <extension name="mystorefacades"/>
      <extension name="mystoretest"/>
      <extension name="mystoreinitialdata"/>
      <extension name="mystorestorefront"/>

10. As instructed in the console output, remove the following extensions which are present in your “localextensions.xml” file

yacceleratorcore
yacceleratorfacades
yacceleratorstorefront
yacceleratorinitialdata
yacceleratortest
yacceleratorcockpits
yacceleratorfulfilmentproces

Note: for 1905 version

Remove instore,mcc,virtualjdbc,report cockpit

11. Ant all

12. ant addoninstall -Daddonnames="b2bacceleratoraddon" -DaddonStorefront.yacceleratorstorefront="trainingstorefront"
13. ant addoninstall -Daddonnames="commerceorgaddon" -DaddonStorefront.yacceleratorstorefront="trainingstorefront"
14. ant initialize
15. ant all
16. ant startSolrServer
17. hybrisserver.bat debug
18. Open This portal- Backoffice
https://localhost:9002/backoffice
19. Open this link –Store front
https://localhost:9002/trainingstorefront/?site=powertools
Items.xml

After adding Any attribute- System Update must be done in hac Port with Platform/update. Only after system update, we can make
use of Model Class in Controller/Façade etc.

Populator.java

Items.xml -> Model-> Populator -> Façade-> service->Controller

ImpEX
After loading the data in items.xml, I have to load the ImpEX(Load the data into BackOffice).
Remove
Flex Search

Hybris Item Query and returns list of objects

 Usage of query in java class

FLOW DIAGRAM
CONTROLLER

FAÇADE – a. Populator b. Convertor

↕

Service

DAO

Items.xml -> Model

FACADES

The hybris commercefacades extension provides a suite of facades (check Façade at: -

https://www.tutorialspoint.com/design_pattern/facade_pattern.htm) that make up a unified multichannel storefront API which can be used by
multiple front-ends. The facade's responsibility is to integrate existing business services(Service layer- Check above Diagram) from the full range
of the hybris extensions and expose a Data object (POJO) response adjusted to meet the storefront requirements.

Convertor and Populator

https://hybrisinstructive.blogspot.com/2017/12/converters-and-populators-in-hybris.html
Approach

The outline approach should be:

 No concrete Converters should be written, all converters should be Spring configured only and should use the AbstractConverter base class.
 No Populator should be called directly in code, Converters should be Spring injected and used.
 All conversion logic should exist in Populators and these should be well-encapsulated and independent.
 Why do we need them?
In most applications we need to create a subset of data from a larger data structure. For e.g:- we might have a customer table in the
database that has 100 fields but we might only need only 10 of them (with some logic applied to them) to display on the UI. Your
model object (source) is that larger data structure (that has all the data from the database) and let’s call the subset of data that your
screen needs the target data structure  the DTO (Data Transfer Object). We call it the target because we are trying to convert from
the source (Model) to the target (DTO). So using converters and populations we are trying to create a target DTO by converting a
source Model object using Populators to populate the DTO. 

The below diagram depicts a high level view of what we are trying to accomplish.

Implementation

The typical flow of program execution within SAP Commerce is this.

Controller —> Facades —> Services —> DAO

Converters and Populators exist in the Facade layer.From the

diagram above you might be thinking where do converters fit in?

Converters provide a uniform interface for the facade to invoke all

the Populators configured for that Converter.The below diagram
captures the high level flow of how Converters trigger Populators
and how the DTO is sent to the Facades.
We will follow along using an example from CMS facades.

The particular example we will pick is responsible for serving responsive images using the ResponsiveMediaFacade. This facade is called by a
controller SimpleResponsiveBannerComponentController.

The facades instantiate a model object either by calling the Services layer (for most cases) or by instantiating the model directly. After which,
the facade then calls the Converter which returns the DTO that the controller requires for the UI.

Before starting on implementing this you need to have an idea of what data your Storefront requires and from which model object(s) you will
need to get that data and also identify if there are any existing Converters that you can extend and modify/add existing Populators.

The following are the steps on how to define converters and Populators.

1. Define a Converter in *facades-spring.xml.

When defining a Converter we need to specify what our target object is. In other words, the DTO that we want our Converter to build.

In our example:-

<bean id="responsiveMediaContainerConverter" parent="abstractPopulatingConverter">

<property name="targetClass" value="java.util.ArrayList"/>
<property name="populators">
<list merge="true">
<ref bean="responsiveMediaContainerPopulator" />
</list>
</property>
</bean>

The Populators property has several ways that allows for injecting either

a. Single Populator

b. List of Populators

c. Merge Populators to an already defined Converters

d. Add and remove Populators to a Converter.

SAP Commerce calls these configurable/modifiable Populators.

2. Define and Develop all the Populators.

a. Definition

<bean id="responsiveMediaContainerPopulator"
class="de.hybris.platform.acceleratorfacades.device.populators.ResponsiveMediaContainerPopulator">
<property name="imageConverter" ref="responsiveImageConverter"/>
</bean>

Note that in this particular the responsiveMediaContainerPopulator needs another Converter to do its job.

b. Development

All Populators implement the Populator<SOURCE, TARGET> interface and implement the populate method.

The populate method can be as simple as getting and setting values from the Model object (Source) to the target (DTO) or calling Services to get
additional data or calling other convertors to get another DTO.

public void populate(final MediaContainerModel source, final List<ImageData> target) throws ConversionException
{
populateImages(source, target, ImageDataType.GALLERY); //GALLERY by default
}

3. Create a Facade that has a reference to the Convertor.

<alias name="defaultResponsiveMediaFacade" alias="responsiveMediaFacade"/>

<bean id="defaultResponsiveMediaFacade" class="de.hybris.platform.acceleratorfacades.device.impl.DefaultResponsiveMediaFacade">
<property name="mediaContainerConverter" ref="responsiveMediaContainerConverter"/>
</bean>

4. Call the convertors convert or convertAll method inside the Facade.

Here we call the converters covert method or the convertAll which invokes all the populators defined for that convertor in sequence.

public List<ImageData> getImagesFromMediaContainer(final MediaContainerModel mediaContainerModel)

{
return getMediaContainerConverter().convert(mediaContainerModel);
}

In our example this is being done in the getImagesFromMediaContainer. Hopefully this gave you better idea not only how to implement this
pattern but also on the reasons behind why SAP Commerce uses this pattern.

Assignment
Step 1. Stop the server and
Step 2. Add attributes in Items.xml

Step 3. Ant All in CMD at hybris\bin\platform path

Step 4. Check whether the ModelClass has generated or not?

Step 4. Restart the server- Hybrisserver.bat debug

Step 5. Go HAC page and update in Platform page.

a.
b.

c.

Day 3.
CronJobs

- Just like a batch jobs

Caching

Caching Level

1. Attribute level
2. Item Level
Cluster

Different Servers and one DB

Service Layer
Java Changes- Ant All

Items.xml Changes- Ant clean all

Property Changes like Local.properties- Just restart the hybris

Implementing Service
Overriding the default service
Overiding defaultImportService to pmDefaultImportService

CONFIGURE THE SERVICE

Lifecycle of a model
Interceptors Overview
Preferred way is of line no. 22. ProductModel pm=modelService.create(ProductModel.class);

At line 29, When we do save, Prepare and validate interceptor will be called before saving. Any Modification/Update operation can also be
done in prepared Interceptor before saving the model into database.

Description =Name+Code+sequence

Line 33, Validate Interceptor will be used for mandatory values like if code is null, it will be handled here.

We can also create custom Interceptor.

We need two important two things

1. Custom Interceptor name- Here CatalogPrepareInterceptor

2. Mapping- Here prepareCatalogMapping

POJO
Populators in Code

<bean id="trainingProductPopulator"
    class="org.training.facades.populators.TrainingPopulator"></bean>
   
     <bean parent="modifyPopulatorList">
        <property name="list" ref="productConverter"/>
        <property name="add" ref="trainingProductPopulator"/>
    </bean>

/**
 *
 */
package org.training.facades.populators;

 
import de.hybris.platform.commercefacades.product.data.ProductData;
import de.hybris.platform.converters.Populator;
import de.hybris.platform.core.model.product.ProductModel;
import de.hybris.platform.servicelayer.dto.converter.ConversionException;
 

/**
 * @author muhammad.ayzaz
 *
 */
public class TrainingProductPopulator implements Populator<ProductModel, ProductData>
{
 
    /*
     * (non-Javadoc)
     *
     * @see de.hybris.platform.converters.Populator#populate(java.lang.Object, java.lang.Object)
     */
    @Override
    public void populate(final ProductModel source, final ProductData target) throws ConversionException
    {
        // XXX Auto-generated method stub
        System.out.print("Call is here");
 
        System.out.print("Call ends");
        target.setMobile(source.getMobileNumber());
 
 
    }
 
}
 
Items.xml
<itemtype code="Product" extends="Product"
autocreate="false" generate="false">
<description>Demo training product.</description>
<attributes>
<attribute qualifier="mobileNumber"
type="localized:java.lang.String">
<description>mobile number for Training
Products</description>
<modifiers />
<persistence type="property" />
</attribute>
</attributes>
</itemtype>
===training bean fascade xml======
<bean
class="de.hybris.platform.commercefacades.product.data.ProductData">
<property name="mobile" type="String" />
</bean>
-----training bean springxml

<bean id="trainingProductPopulator"
class="org.training.facades.populators.TrainingProductPopulator"></bean>

<bean parent="modifyPopulatorList">
<property name="list" ref="productConverter"/>
<property name="add" ref="trainingProductPopulator"/>
</bean>
 
POPULATOR Implementation
/**
*
*/
package org.training.facades.populators;

import de.hybris.platform.commercefacades.product.data.ProductData;
import de.hybris.platform.converters.Populator;
import de.hybris.platform.core.model.product.ProductModel;
import de.hybris.platform.servicelayer.dto.converter.ConversionException;

/**
* @author amarnath
*
*/
public class TrainingProductPopulator implements Populator<ProductModel, ProductData>
{

/*
* (non-Javadoc)
*
* @see de.hybris.platform.converters.Populator#populate(java.lang.Object, java.lang.Object)
*/
@Override
public void populate(final ProductModel source, final ProductData target) throws ConversionException
{
// XXX Auto-generated method stub
System.out.print("Call is here");
System.out.print("Call ends");
target.setMobile(source.getMobileNumber());

 
JSP Implementation

Next Step:- Go To StoreFront

1. Copy the Product Id on any PDP Page

2. Go to Backoofice in Catalog/Products
And search the copied Id in the search bar and click on Online One.
Go to Administration block and find using ctrl+f- attribute added= mobileNumber and save.

Go to storefront and refresh the page.

Commerce

Need of Solr-
- Solr is defacto search engine, document search. Most ecommerce used solr as json based query..
- The disadvantage is that it does not have access control.

Need to work

How to search and map data for extraction from Solr.

Address Verification

Pincode Verification, Validating the addresses- External Api. Most common used Address verification is Avalara.

HOP- Hosted Order Page (When the payment is done, there must be a host page where you go to a host page like payment provider
page.)

SOP-(Silent Order Page)- The Main Page will internally being integrated in the Main Page with No host page.

Reporting- Report Cockpit is used.

CIS- Commerce Integration Services like Address Verification, This is important.

OMS- Order management system- Order Lifecycle is maintained with separate licencing contest.
Product Bundling- Two Products are managed to provide services to customer.
One Store has multiple sites. However will be same with multiple sites.

Store and Site Configuration in Backoffice.

Store is available in Base Commerce
How does the ttax calculated?

India, The site is taken from 3rd party make use of it.
Catalog-1. Product Cataog 2. Content Catalog
Cart and Order

All the attributes of cart and order will be available in eclipse.

Depends upon the warehouse.
Product Service, Stock Service, and Other Services.
CRONJOBs
Ant all

Restart the server

Update the HAC with Check of Essential Data Too

Check cronjob-
select {code} from {servicelayerjob} where {code} = 'TrainingCronJob'

INSERT_UPDATE CronJob; code[unique=true];job(code);singleExecutable;sessionLanguage(isocode)

;TrainingCronJob;TrainingCronJob;false;de

INSERT_UPDATE Trigger;cronjob(code)[unique=true];cronExpression

;TrainingCronJob;5 * * ? * *
Backoffice
CheckOut

Assignment Link: - https://www.stackextend.com/hybris/understand-the-b2c-checkout-flow-in-hybris/

SEO
[2:56 PM] Aman Anand

productVolumePricesProvider

[2:59 PM] Aman Anand

For Stock - > ProductStockLevelStatusValueProvider

[3:03 PM] Aman Anand

ant startSolrServer

https://localhost:8983/solr

[3:03 PM] Aman Anand

solrserver

[3:03 PM] Aman Anand

server123
Commerce Detailed View Links

PaymentTypeCheckoutStepController
PaymentTypeFormValidator
DeliveryAddressCheckoutStepController
DeliveryMethodCheckoutStepController
ChooseDeliveryMethodPage
ChooseDeliveryMethodPage.jsp
DefaultCommerceDeliveryModeStrategy
SummaryCheckoutStepController.java
GuidKeyGenerator
CartPageController
CommercePriceService.java Interface
DefaultCommercePriceService
CommerceStockService
DefaultDiscountService
DefaultTaxService
productVolumePricesProvider
ProductStockLevelStatusValueProvider

SOLR

https://localhost:8983/solr

solrserver
server123
productSearchFacade
DefaultSolrProductSearchService
SolrSearchRequestResponsePopulator
http://techhybris.com/sap-hybris-customizing-solr-search-queries/

https://hybrismart.com/apache-solr-search-in-sap-hybris/

http://javainsimpleway.com/

 ecommercecandles hybris

CMSSiteFilter
1905
https://help.sap.com/viewer/3fb5dcdfe37f40edbac7098ed40442c0/1905/en-US

SimpleResponsiveBannerComponentController
ProductAddToCartComponentModel
productaddtocartcomponent.jsp
addtocartaction.jsp
AddToCartController
addtocartpopup.jsp

WCMS
Site Component
Cms- are the component like here as cockpit, lib and core . We can create a new or extend existing cms.
Different components

Separate Screen for Commerce- CMS Cockpit

Hierarchical Structure
Content slots only where we have put component
CMS Restrictions
Banner
Backoffice

Login To CMS Cockpit

https://192.168.3.127:9002/cmscockpit/index.zul
Through Impex

Checkout Hands On
PROMOTIONs
Go to façade code and find the promotion data is set in product façade.

Cart Level or Product Level Promotion 1905

PROMOTION Rule
Assignment

1. Showing Customer details in Store Front- Steps

a. Main Aim should be to find the Target(*Data.java) and Source(*Model.java)
b. Go to Store Front and Copy Out the last Url

c. Find the Url in Eclipse and Search using ctrl+h

d. Go to Controller and Find the Façade Layer calling.

Note: - You will check there are two methods define which are used for GET and POST condition.

There are two Façade also, On which userFacade is having Titles and CustomerFacade has Other Attributes.

Thus, Open the Implementation on customerFacade.getCurrentCustomer(); using ctrl+Click

Left.
It will go to interface Class. Open the Implementation of getCurrentCustomer() from the Down.

It will be redirected to below class.

You will get to know the Data and Model defined for the same.

Thus MODEL- USERMODEL

And TARGET- CUSTOMERDATA.

e. Create the Items.xml to create changes for Model.

f. Do ant all and Check the updated in UserModel.java

g. Change the trainingfacades-spring.xml and define the attribute for UserData(Target)

trainingfacades-spring.xml

h. Do Ant all and create a populator in façade layer

You can see that we can set and get the custom Value because it has been updated in Data.java and Model.java
file.

i. Making changes for showing only attribute in PDP page. We need to do some changes in
controller for Form Page.
j. Get Model Form added for customValue in .java file using setter and Getter and do ant all.

k. Add the changes in controller and set in the form.

l. Make changes in JSP page. How to find JSP has been explained below.

m. Make sure you add the field name in base_en.properties.

Till now, You can do all ant all and update in hac and see the attribute in PDP page But to make some more
changes like to do Get and POST functionality.
n. Now, for GET and POST we need to make changes in GET and POST Method and Also create
some Interface classes and extend those in custom Classes.
o. For Get is already done. For POST add the below code.
p. FAÇADE LAYER: -Open the implementation of update profile in Façade.

--------------

The above are product implemented.

Similarly implement the same and Create a custom Façade(Interface and class) and do the implementation for
the same in Façade Layer.
Note: The Interface has extended the Product Interface and the Method updateProfile has same method
definition Structure as of the Product Interface(Check in the Product Interface)

void updateProfile(CustomerData customerData) throws DuplicateUidException

Also code the Implementation Layer by Extending the Parent Façade Class and Implementing custom Interface
also do Initialize i.e making Has A relationship of Service Class.

Note It has extended the Product Façade class and Implemented the Custom Façade Interface.

Also code for the implementation of Service Class as done in the Product By see how the Product has
implemented.

q. SERVICE LAYER: -It will call the Service Interface Layer and then Implementation.

The below same code must be used in the interface of Custom Definition Layer.
Similarly define your own Interface extending the Parent Interface and Implement the class by implementing
this custom Interface and extending product Class.
Note add your attribute wherever required.

Note It has extended the Product Service class also and extended Interface.

r. Define the beans in respective spring.xml

Alternate way:

Just Call your own Façade in controller and define the same
Just make changes in Façade Layer.

Do ant all, hybris start and update.

2. Checkout Assigment Link- https://www.stackextend.com/hybris/understand-the-b2c-checkout-flow-in-

hybris/

3. Promotion in Product Page

4. Promotion Rule using Back Office
5. Changing Image from Back Office
6. How to show data in Back office from Impex? Like Promotions.impex to populate data in Promotion Rules.
7. Product PDP Page adding attribute.
HOW to find jsp page:-

1. Go to Page select the Page Title

2. Go to eclipse do ctrl +h and paste the page title and in properties file.
Copy the text above and paste it in ctrl+ h with .jsp ,.tag file.
To Make Changes for Attribute Field Name in the PDP Page:

Search the Existing Value using f12 and copy the label name.
Search the same in Project

Make changes in the Properties file and add your changes.

After Refresh

Check Out
Search
Why I was getting server error in FB Storefront?

Note: - Whenever You trigger the storefront, The first Java File triggered is CMSSiteFilter.

Now, We have to debug it by putting sysout in the code.

Now below screenshot is getting the cmsSiteModel and it will check in if else whether it is Null or has any channel
issue(B2B or B2C).

We can check the channel in BackOffice in Channel

And configure it to B2B.

Hence it will be resolved.

Also To show the Price Tags in Storefront.

Go to BackOffice and

Enable ExternalPricing to True.

PLACEMAKERS FB CORE Changes

1. We will have the Json file and we will trigger the same in Postman by importing the file in postman.
2. Import the Json request file into Postman from local place.

The Page will load as Below:

Request

Response

{
    "TransactionId": "79d30f2f63e54751b769d6cd47207632",
    "Branch": {
        "BranchId": "473",
        "Products": [
            {
                "Sku": "280002fgf7adgdagdha",
                "Description": "",
                "Barcode": "",
                "UnitOfMeasure": "",
                "StatusCode": "",
                "StockMessage": "",
                "Quantity": "0",
                "Code": "2",
                "Message": "Invalid Sku"
            },
            {
                "Sku": "2800050",
 "Description": "GIB STANDARD 3600X1200 10MM WALLBOARD",
                "Barcode": "9416463115402",
                "UnitOfMeasure": "ST",
                "StatusCode": "3",
                "StockMessage": "Ring Branch for Availability",
                "Quantity": "0",
                "Code": "0",
                "Message": ""
            }
        ]
    },
    "ServiceResult": {
        "Code": 2,
        "Message": "Some of the Skus are not valid"
    }
}
3. Now our task is to convert the Json String into Java for response and request.

You can see above that: -

TransactionId- String

Branch- Java Class which has Branch Id (String)and Products(Java which has Skus,Unit measure,Description, etc as string ).

Service Result: - Also a Java which has Code and Message as String.

4. Let us name the Request as: PMSyncStockRequest.java and similarly for Response (PMSyncStockResponse.java).

5. The Other Beans will be named and are shown as below: -

ACEServiceResult.java

ACEStockBranchResponse.java

ACEStockProductInfoResponse.java

PMSyncStockRequest.java

PMSyncStockResponse.java

ACEConnection.java –For testing the Request.

6. Copy the Json String here and Paste

Also Change the URL: -

7. Run As Java Application

Code=200 and Message =Ok.

8. Till Now Only Request is checked. We have to make changes for Response and convert the response seen above from Json String to
Java String.

For That we will create two more Java file.

a. AceStockUtil.java- This will handle all the functionality for JSon String.
e.g. constructDynamicJsonInput –Preparing the request by concatenating the SKUs(List of Searches Units by
converting them from list to Array of String.) with Other Values like Branch Id and Txn Id.
final PMSyncStockRequest request = new PMSyncStockRequest(BRANCH_ID, TXN_ID,
convertToStringArray(skus));

And mapping the Data into Json String.

jsonStr = mapper.writeValueAsString(request);
Also Reading the Json Response.

b. StockService.java(For complete Testing).

This is the actual Testing Java Class which has main method with sending List of products (Here Stocks as SKUs). Also It will have all the urls
Linked to Requests.(Shown Below)

It has methods such as: -

fetchProductStockMap : -Will Call the readJson() with executeDynamicProductStock(obj, products). And

also return constructMapFromAceResponse(response).

executeDynamicProductStock:- It will have the actual execution with Calling of the client and returning the string of response.
constructMapFromAceResponse: - It will construct the response into Map and return
back.

and Getters and Setters of AceStockUtil and OKHttpClient.

After Doing Just run the Stock Service and you will be able to see the Response.

INTEGRATING THE SAME IN HYBRIS.

1. First Make changes in Controller.

2. Create a method for performing and setting Solr Data into Target.

3.
Note: - Everything will be same replicating in Hybris only The data we are Hardcoding has to be changed in to local.properties.

Map the above data in PMAceProductStockService.java: -

Also in Controller, we have to add one Boolean Value to checkStock is enabled.

To get the method – getExternalStockEnabled(). We have to add the variable in fbcore-

items.xml.

Ant all

Also Add the changes in fbcore-items.xml

Ant all and hybrisserver.bat debug and hac-update.

Open Back Office.

Integrating the stock into PDP Page.

Like Below:
One Small Correction:-

While Testing the data fetched from search were a string data and has some decimal values. Because of which, I was getting exception.

Below is the correction.

ADDING THE STCK IN PLP PAGE.

Searchresultsgridcomponent.jsp
productListerGridItem.tag

BackOffice
Adding Bearer Token from HAC

Go to Platform/configuration

Search the Token:-

Copy the key from Local.properties.

Adding Custom Attribute in PLP Page using Solr
Step 1. Adding Attribute in Items.xml

Step 2. Adding the Populator in trainingFacade-spring.xml

Step 3. Adding the Variable in trainingFacade-beans.xml

Step 4. Creating a populator extending SearchResultProductPopulator

Step 5. Adding the same changes in tag file

Step 6. Do the impex for below two queries

Step 7. Ant all and update

Step 8.

Do the following Things :- Take any product id from storefront and add the value here mobile Number
BackOffice-> Catalogs->Products

Under Administration
Go to Backoffice->System->Search and Navigation -> Indexed Types-> Select Powertools Product Type-
>Index Properties and Add the custom Attribute

Like below
Go inside facet Search Configuration of Search and Navigation category only and add refresh index
After update hac

Go to solr page

Write below query code with product id and execute the query
Find your changes in the result by ctrl+f =mobileNumber and see the change which has been done in
backOffice.
Once it is coming you can see the same in the PLP page for same Product Id.

WCMS(Web Content Management System) Architecture:-

http://javainsimpleway.com/wcms-overview/

https://help.sap.com/viewer/86dd1373053a4c2da8f9885cc9fbe55d/1905/en-US/
4cf11877c72143419a948f06943c62d3.html

http://hybrisdeepdive.com/index.php/2018/06/16/details-of-page-slots-components-and-content-
slots/

http://javainsimpleway.com/adding-new-cms-component/
In Brief about WCMS

http://www.hybriscx.com/sap-hybris/sap-hybris-how-to-create-a-new-page-wcms/

GIT HUB:-

git config --global user.email "[email protected]"

 
git config --global user.name "Aman Anand"
 
Create a new branch:
git checkout -b feature_branch_name
 

Delete Remote branch

git push origin --delete feature/acepriceintegration
 
Edit, add and commit your files.
Push your branch to the remote repository:
 
git push -u origin feature_branch_name

WCMS – Part of hybris platform which facilitate to create manage and render website content.
Components are basically Areas on JSP for adding the dynamic contents. (Dynamic content in
the context of HTML and the World Wide Web refers to website content that constantly or
regularly changes based on user interactions, timing and other parameters that determine
what content is delivered to the user.). At top level we have page templates.  Page
template contains multiplepage slots. Page slots contains multiple components and then
each component can contain multiple content slots.

A cms component consists of three elements interact with one another : Model, JSP
and Controller.

 Model : identify the component with a uid, name, catalog version and also holds
the inputs to be sent to the JSP.
 JSP : is the template of the component, describe the look and feel of it.
 Controller : is the mediator between the Model and the JSP, inputs are sent
from the Model to the JSP with the help of it.
SMART EDIT

https://hybrismart.com/2019/04/14/smartedit-a-deep-dive-into-technical-aspects-of-the-new-cms-
personalizationcapabilities/

Without Smart Edit

With Smart Edit

Key Components
Modes of Smart Edit

https://help.sap.com/viewer/86dd1373053a4c2da8f9885cc9fbe55d/1905/en-US/
6fd6968e127f4acdba68eaac672e18fa.html

Content Catalogs in Smart Edit

https://help.sap.com/viewer/86dd1373053a4c2da8f9885cc9fbe55d/1905/en-US/
dffe44f9de0b414b80c7163f54f96514.html

Procedure

https://help.sap.com/viewer/86dd1373053a4c2da8f9885cc9fbe55d/1905/en-US/
8927a5e262e04f3aa1f4ede0051ffc5b.html

Assignment Adding a new custom Component:-

https://hybrisinstructive.blogspot.com/2018/12/custom-component-in-hybris.html

ProductCarouselComponentController.java
productcarouselcomponent.jsp
http://javainsimpleway.com/how-to-add-new-custom-cms-component-type-to-a-page-in-hybris/
Workflow of Adding a New Custom Component

Core

1. Adding the custom Attribute in items.xml(fbcore\resources\fbcore-items.xml)

Cmd- Ant All

Service- NA

Façade- NA

Controller

Create a new Custom Controller (fbstorefront\web\src\com\fb\storefront\controllers\cms\CustomSelectComponentController.java)

JSPs

1. Create a custom JSP under:-

fbstorefront\web\webroot\WEB-INF\views\responsive\cms\customselectcomponent.jsp
2. Add below component into the Home Page jsp using CMS Tags at fbstorefront\web\webroot\WEB-INF\views\responsive\pages\
layout\landingLayout2Page.jsp

CMD- Ant All

HAC- Update and Impex the custom Component

# -----------------------------------------------------------------------

# [y] hybris Platform

# Copyright (c) 2018 SAP SE or an SAP affiliate company. All rights reserved.

# This software is the confidential and proprietary information of SAP

# ("Confidential Information"). You shall not disclose such Confidential

# Information and shall use it only in accordance with the terms of the

# license agreement you entered into with SAP.

# -----------------------------------------------------------------------

$contentCatalog=placemakersContentCatalog
$contentCatalogName=placemakers Content Catalog

$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Online])
[default=$contentCatalog:Online]

$productCatalog=placemakersProductCatalog

$productCatalogName=placemakers Product Catalog

$productCV=catalogVersion(catalog(id[default=$productCatalog]),version[default='Staged'])[unique=true,default=$productCatalog:Staged]

$picture=media(code, $contentCV);

$image=image(code, $contentCV);

$media=media(code, $contentCV);

$page=page(uid, $contentCV);

$contentPage=contentPage(uid, $contentCV);

$product=product(code, $productCV)

$category=category(code, $productCV)

$siteResource=jar:com.fb.initialdata.constants.FbInitialDataConstants&/fbinitialdata/import/sampledata/contentCatalogs/$contentCatalog

$productResource=jar:com.fb.initialdata.constants.FbInitialDataConstants&/fbinitialdata/import/sampledata/productCatalogs/
$productCatalog

$jarResourceCms=jar:com.fb.initialdata.constants.FbInitialDataConstants&/fbinitialdata/import/sampledata/cockpits/cmscockpit

$addonExtensionName=b2bacceleratoraddon

$medias=medias(code, $contentCV);

$mediaContainer=media(qualifier, $contentCV);

$siteUid=placemakers

# Language

$lang=en

INSERT_UPDATE CustomSelectComponent;
$contentCV[unique=true];uid[unique=true];name;selectVar1[lang=$lang];selectVar2[lang=$lang];&componentRef;

;;customSelectComponent;Custom Select Component;"Redmi note 5 pro";"Redmi note 6 pro";customSelectComponent

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(&componentRef)

;;customSelectContentSlot;Custom Select Component slot;true;customSelectComponent

INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true]
[default='homepage'];contentSlot(uid,$contentCV)[unique=true]

;;customSelectContentslotforpage-Homepage;CustomSelectSlotName;;customSelectContentSlot

STOREFRONT
CART CUSTOMIZATION

Look Like- https://projects.invisionapp.com/share/VZUT1ACTY7R#/screens/397166106_Shopping_Cart

Git diff modifiedfilepath

git commit -m "Changes for Team Invite Dash Board | On Behalf of Mohinder"

Amarnath@RCBAN0103 MINGW64 /d/Hybris_old/PM.Ecommerce1905 (customWCMS)

$ git commit -m "Changes for Team Invite Dash Board | On Behalf of Mohinder"
[customWCMS dfe093f] Changes for Team Invite Dash Board | On Behalf of Mohinder
5 files changed, 479 insertions(+)
create mode 100644
custom/fb/fbinitialdata/resources/fbinitialdata/import/sampledata/contentCatalogs/
placemakersContentCatalog/fbdashboard/cms-content-Invite.impex
create mode 100644
custom/fb/fbstorefront/web/src/com/fb/storefront/controllers/pages/
PMTeamsComponentController.java
create mode 100644
custom/fb/fbstorefront/web/src/com/fb/storefront/forms/PMInviteForm.java
create mode 100644
custom/fb/fbstorefront/web/webroot/WEB-INF/views/responsive/pages/invite/
inviteLayoutPage.jsp
COMMANDS

1. git status
2. git branch
3. git pull origin feature/dashboard
4. git add {path}
5. git diff {modified Values in path} – to check the modified changes
6. git commit -m "Changes for Team Invite Dash Board | On Behalf of Mohinder"
7. git push origin feature/dashboard

Creation of new Page Template

Steps:-

1. The Page should look like: -

2. Create the form under fbfront
3. Create the impex for page template

4. Create the controller

5. Create the JSP

6. Ant all, start hybris and update hac
7. Run the impex with Catalog Version with Staged and Either Synchronize it using backoffice or Run the impex with Online Catalog
version too.
8. Open the website and find the Link Component INVITE on the dashboard and also Can click which will take you to invite Page.
BREADCRUMs FOR Invite Section