Brief Introduction to Electronics and Apparel Sites provided by hybris Commerce Accelerator

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.
• 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.

1. Open Google Chrome (note: I am using Windows, but I’d assume features is similar in Mac OS X)
2. On your keyboard, hit F12, this will display a new panel at the bottom of your screen.
   
3. 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:
   
    
4. 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
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
6. 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:

1. Download and install Firefox add-on User Agent Switcher
2. 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.
3. 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:

1. Go to C:WindowsSystem32
2. Right click on Notepad.exe and select Run as Administrator
   
   
3. Say Yes to the User Access Control message.
4. In Notepad, click File -> Open
5. In the File Name field enter C:WindowsSystem32Driversetc and click Open
   
6. Select All Files from the right lower right side of the screen –
   
7. Select HOSTS and click Open
   
8. 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:
   

9. Save the file
10. Close all browser windows
11. You can now access the stores using the following URLs.

• http://apparel-uk.local:9001/yacceleratorstorefront
• http://apparel-de.local:9001/yacceleratorstorefront
• http://electronics.local:9001/yacceleratorstorefront
• http://powertools.local:9001/yb2bacceleratorstorefront