Question & Answer
Question
How so you change the pickable item information display in CustomerPickUp screen in IBM Sterling Store Web UI such that everything falls in one line?
Cause
You want to accommodate more results per page while at the same time minimizing the need to scroll.
Answer
Currently in ootb Sterling store web implementation, the pickable item details for each item are displayed at block level i.e each detail is displayed in a new line. This increases the space occupied by one single result. The same can be made to fall in one line by altering the css in the desired manner. This would ensure lesser space occupied by a single item and hence increasing the default page size would still require limited scrolling.
For example –
In CustomerPickup screen, the widget with uId as pickableQuantityLabelDetails, is currently using css class blockComponent. If you see this blockComponent class' definition in desktop.css file under <INSTALL_DIR>/repository/eardata/wsc/war/wsc/resources/css folder, its defined as below -
.comapps .blockComponent {
display: block;
}
You can change this style definition as per your requirements.
To do this, you've two options
- One way is to override the oob blockComponent style definition with your own definition as below. In this case, the changes would reflect in all other widgets which are using this css class.
- The other option is to change the css class definition only for the concerned widgets, from default blockComponent to (say) customInlineComponent, and then define this CustomInlineComponent in a new css file as per the product css customization guidelines.
For details, refer to 'Changing css style in Sterling web Store' link shared at the bottom.
Please note that since changing the css class definition for ootb widgets is not allowed, you may need to disable the ootb widgets and create custom widgets with similar specifications and then provide necessary styling. The new css may look somewhat like this –
.customInlineComponent {
display: inline;
}
NOTE: all css mentioned here are only for reference. You should define them based on your specific styling needs.
Related Information
Was this topic helpful?
Document Information
Modified date:
16 June 2018
UID
swg21987630