In my previous blog, Link to online references and a guide to setup your own local environment, I briefly introduced the Electronics Store. This is one of 4 preconfigured websites (not including another Cellular Phone website that is part of the Telcos package, more on that in a later blog) built into the hybris Commerce Accelerator. These websites were built to showcase the awesome power of the hybris Commerce Platform. In this article I will provide you a brief introduction into the 3 websites, how to access each site and finally, how to improve the URL through a simple modification of your “hosts” file.
As mentioned, after successfully building and starting your local environment, the hybris Commerce Accelerator automatically deploys 4 web sites. Below is the name of each and how to access them:
- Electronics Store: http://localhost:9001/yacceleratorstorefront?site=electronics&clear=true
- Comes with 4 languages and multiple Currencies
- Yup that’s right, one of hybris’s many great features is ability to support multiple languages and currencies (called localization) in same site, saving valuable time in product and site maintenance. More on that in a future blog.
- Comes with 4 languages and multiple Currencies
- Power Tools Store: http://localhost:9001/yb2bacceleratorstorefront?site=powertools&clear=true
- Supports multiple languages but single currency.
- This is also an example of a B2B store and capabilities of B2B where as the other stores are B2C
- Apparel Store – UK: http://localhost:9001/yacceleratorstorefront?site=apparel-uk&clear=true
- Apparel Store – Germany: http://localhost:9001/yacceleratorstorefront?site=apparel-de&clear=true
- Two apparel sites are exact same except due to different countries one is localized to UK and the other for Germany
All the above sites also supports mobile versions. The templates are not responsive or fluid design though but this does not mean you cannot access them on your desktop through the mobile emulator, and here is how!
Google Chrome
If you prefer Google Chrome (like me :-)) here are the steps to switch from desktop to the Mobile Emulator.
- Open Google Chrome (note: I am using Windows, but I’d assume features is similar in Mac OS X)
- On your keyboard, hit F12, this will display a new panel at the bottom of your screen.
- In this panel, locate an icon that looks like a smartphone and click on it, this will result in adding a bunch of wacky elements to your window as shown below:
- Go to the top of the wacky elements, and locate the menu Device. Select which device you want to sample with. Personally as a fan of Apple iPhone, I usually select Apple iPhone 5
- Now enter the URL of one of your stores. NOTE: whenever you want to enter into the Mobile Emulator mode of a site in Google Chrome, make sure you include the following parameter at the end of your URL: &clear=true. If your URL does not include any parameters already (meaning the URL does not contain a question mark ?) change the command to ?clear=true
- The store should now successfully open in Mobile version.
Firefox
Unlike Google Chrome, Firefox does not have a mobile emulator built in. It does have a Responsive UI emulator, but since the templates are not based on Screen Resolution but device, we need a OS emulator instead. The following is my recommendation:
- Download and install Firefox add-on User Agent Switcher
- Restart Firefox. Now open the menu Tools, if you do not see this menu, hit Alt on keyboard, then select Default User Agent and select iPhone 3.0.
- Enter URL for one of the stores and you should see mobile version of that store.
You will notice the available User Agent list is very small. If you want a crazy amount of options, checkout this forum post, that contains a link to an XML you can import into your User Agent Switcher for a ton of more options.
How to simplify the URLs
Now that we know how to access each store both from Desktop and Mobile perspective, let’s make those URLs a little easier to manage and remove the requirement of using URL parameters which has many limitations. As mentioned in the Quick Installation Guide by hybris, we can modify the hosts file on your local computer to generate new URLs. Here are the steps:
- Go to C:WindowsSystem32
- Right click on Notepad.exe and select Run as Administrator
- Say Yes to the User Access Control message.
- In Notepad, click File -> Open
- In the File Name field enter C:WindowsSystem32Driversetc and click Open
- Select All Files from the right lower right side of the screen –
- Select HOSTS and click Open
- At the bottom of the file enter:
127.0
.
0.1
apparel-uk.local apparel-de.local electronics.local powertools.local
Example file is shown below:
- Save the file
- Close all browser windows
- You can now access the stores using the following URLs.
Awesome simplified infos on basic configurations. With serious dearth of available information on official hybris site, this is really helpful in hetting someone started on hybris.
Thanks.
LikeLike
Hi I am using 5.6 but http://localhost:9001/yb2bacceleratorstorefront?site=powertools&clear=true showing page does not exist any idea??
LikeLike
Hi Manish, hmm not sure, have not tried 5.6 just yet… let me take a look and get back to you later.
LikeLike
I have done the configurations as explained. But still I can’t access http://apparel-uk.local:9001/yacceleratorstorefront. What would be the reason ?
LikeLike
Hi! sorry for delay. Finally dug into this and in 5.6, hybris made big changes in deployment of their sample scenarios. please see my new blog seen here – https://hybrisblank.wordpress.com/2015/10/28/deploying-hybris-sample-sites-in-version-5-6-and-greater/
Thanks for your reading!
Jeff
LikeLike
Hi Jeff,
Thanks for useful information on hybris. I am new to hybris and creating a hybris site. I have a problem in hybris and I think you can help me. I want to search products in hybris by uploading similar images. How can I do this. Please let me know if you have some idea on this.
Thanks.
Tanuj
LikeLike
Hello Tanujkool, do you mean you want to execute a search similar to what Google has where you can search by image and see all pages that contain similar images?
LikeLike
Hi ,
Where can i find API/SERVICE in the frontend
or
How to add service to the frontend.
LikeLike
Sadly I do not have access to the binaries anymore to assist. Sorry! Best of luck with Hybris, it truly is a top-notch eCommerce platform!
LikeLike
Thanks Jeff , it’s an awesome Blog !
Could you please give the link to access to SAP Hybris commerce -OMS ?
Thank you
LikeLike
Sorry, SAP (just like hybris before being folded in) is a pretty closed off community and I am no longer apart of it.
LikeLike
hi jeff , how to remove storefront and language from url
LikeLike
Sadly I do not have access to the binaries anymore to assist. Sorry! Best of luck with Hybris, it truly is a top-notch eCommerce platform!
LikeLike