Magelia WebStore

  • Summary

Elegant responsive design template that automatically adapts to smartphones, tablets and desktops.

Go mobile! An elegant responsive design e-commerce template that automatically adapts to smartphones, tablets and desktops. This template will help you jumpstart your Yourcegid Retail WebStore project. Simply adapt the colors and background image to personalize the website to your colors.


Yourcegid Retail WebStore - Responsive design template - Homepage

Warning! This template works with Yourcegid Retail WebStore Community Edition (3.0+) but some pages are better rendered if you use a Yourcegid Retail WebStore Professional or Enterprise Edition because of the use of Content types only available in these editions.

Take 2 minutes to install this FREE responsive design template

Get the Responsive Template?

To get the Responsive design template, simply click here and you will get the VSIX file :
DOWNLOAD THE RESPONSIVE TEMPLATE

Preview

To simply browse a demo website based on the responsive design tempalte:
Browse a responsive site based on this template

Resize When browsing the responsive design template, do not forget to resize the screen size in order to see how the website automatically gracefully adapts content to tablets or smartphones screen sizes.

Technical Requirements and Information

Technical requirements

The responsive design website template requires:
- a running instance of Yourcegid Retail WebStore version 3.0 or above (download here) .
- Visual Studio 2013 or above,
- NuGet package manager

Warning! Please check that your environment meets these requirements because you would not be able to open the vsix file in Visual Studio and run it properly without NuGet package manager.

Additional technical information

The following framework has also been used to create the responsive demo template : Microsoft ASP.NET Web Optimization, which is based on WebGrease and optimize CSS and Javascript.

When the environment is set to Production (release mode), these tools will compress the code of the CSS and js files in order to reduse the size of those files.
WebGrease will also group together the various CSS files in one single file and groupe the js files in two files : one file for the common js files and another one for css files dedicated to defined pages.

Template installation and configuration

The following technical installation procedure assumes that you already have access to the Visual Studio 2012 or 2013 development environment and to a running instance of Yourcegid Retail WebStore. NuGet package manager must be installed on your environment and activated.

In order to install the responsive template, simply double-click on the vsix package that you downloaded and create a new Yourcegid Retail WebStore Project in Visual Studio.

Yourcegid Retail WebStore Store Front Installation Guide

Once you click on the "OK" button and all dependencies resolved by Nuget package manager a services and store configuration window will show up :

Services and store

Using the services path textbox you will be able to specify the path of the Yourcegid Retail WebStore instance services your frontend will rely on.
If you access the Yourcegid Retail WebStore administration console via the following URL: http://localhost/admin, the services path will have as its value http://localhost/admin/services.

Once the configuration window is able to reach services all configured sellers and stores will be listed. Please select the on you want to use with your responsive front end.

During your developments you may need to change the store or services used by the front end application, to do so, use the Package Manager Console of Visual Studio and enter the following command (Reset-MageliaClientConfiguration) :

Reset-MageliaClientConfiguration

This command will display the services and store configuration window described above and allows you to modify these parameters.

Please note that this window manages parameters that are stored in the web.config file located at the root level of the front end application project :

<magelia>
      <!--see http://www.magelia.org to get help on how to modify theses value -->
      <webStoreClient servicesPath="http://localhost/admin/services" storeId="dcafd470-b122-11e0-a00b-0800200c9a66" />
</magelia>

Visualizing the Site

We have configured the settings at the web.config level, now we just need to run the project.
Yourcegid Retail WebStore Store Front Installation Guide

The demo site will then display.

Template Customization

Customizing the Responsive Design Template
The demo responsive website is based on a template that enables you to fully customize the graphic layout to your needs. The name of the template is mentioned in the web.config configuration file as follows :

<yosemite theme="Blank" contactEmailAddress="developers@magelia.eu">

In the following configuration the theme that is being used is "blank". This corresponds to the solution's « Themes » folder.
Tree

The demo website comes up with a « Blank » theme that looks like this :
Magelia - ResponsiveStoreFront - Skeleton

In order to switch to another theme, simply replace the value of the « Themes » attribute with the name of an existing theme.
For example, if we replace the « Blank » value with « Fun» in the web.config, the website will apply the fun theme and look like this :

<yosemite theme="Fun" contactEmailAddress="developers@magelia.eu">

The demo website is now displayed with the « Fun » theme:
Magelia Responsive StoreFront

Create your own theme
In order to create your own theme, simply duplicate and edit an existing theme. We suggest that you customize the Blank theme, which is more basic than the fun theme.


In the Solution, go the Themes folder and select a folder (Blank or fun).
Then, right-click on this folder and select Copy and then paste
The folder has been created, rename it as « MyNewTheme » for example :

New Themes

Simply modify the web.config in order to link the new theme.

<yosemite theme="MyNewTheme" contactEmailAddress="developers@magelia.eu">

The new theme has been created and customizing this theme will be the next step.

Stylesheets

Please notice that the existing themes ( « Blank » and « Fun») use a similar organization in termes of CSS, as you can see in the "Views" folder. Each stylesheet corresponds to one view, which eases collabarative work on the project. We suggest you to use that organization for the themes that you will create in the future.

Overriding views
It is possible to override views of a theme in order to edit the view without changing the underlying code. We will provide here an example of how to override a view.

First, create a folder named "Views" at the root of your theme's folder then copy-paste the web.config file that is located in the Magelia.WebStore.Yosemite.Web/Views as shown in the image below :

Yourcegid Retail WebStore Responsive StoreFront

Then, create the same folder structure as the Magelia.WebStore.Yosemite.Web/Views folder in order to override views.
In the screen below, you can see that the view Themes/Fun/Views/Shared/branding.cshtml has been created in order to edit the header of the demo website :
Yourcegid Retail WebStore Responsive StoreFront

The following changes have been made to the branding.cshtml files

<hgroup>
    <h1>@Html.ActionLink("My new WebStore Header", "Index", new { controller = "Home" })</h1>
    <h2>@Html.ActionLink("You can change everything in your theme", "Index", new { controller = "Home" })</h2>
</hgroup>

If you make the same changes, the site should now lokks like this:
Yourcegid Retail WebStore Responsive StoreFront

Displaying prices including or not including taxes

Depending on countries habits, prices are displayed with or without taxes. It is easy to edit the web.config file in order to define for a given list of countries if the prices should be displayed taxes included.

To do so, proceed as follows :
- add « country » in the « taxDisplaying » node

Here is an example of the code that will display prices taxes included for France :

<taxDisplaying>
    <country code="fr" display="true" />
</taxDisplaying>

The « code » attributes must match a country code corresponding to the code ISO-2 naming convention list available here . The list of the country codes is also available from the Yourcegid Retail WebStore administration console from the menu Platform Settings > Countries > Column ISO-2 code :
Yourcegid Retail WebStore Taxes

The « display » atribute can have the values « True » or « False ». Default value is « False », therefore, there is no need to list the countries that displays prices without taxes.

Cache Management
Three levels of Cache can be defined in the web.config :

<caches default="medium">
  <cache name="short" duration="00:00:30" />
  <cache name="medium" duration="00:05:00" />
  <cache name="long" duration="01:00:00" />
</caches>

The following table lists the features that use each cache level
Ce tableau détaille les fonctionnalités qui utilisent les différents niveaux de cache:

Cache Level Scope Description
Short • Products availability • Available quantities for products
Medium (default) • Catalogs (and categories)
• Product page
• Products names
• Up/Cross-Selling
• Brands
• Banners (homepage / category page)
• Content page
• Currency
• Content blocks (in basket, checkout, etc.)
• Secret Question
• All active catalogs for a store (including categories)
Long • Regions (Countries / cultures)) • Countries availmable for the website


"Number of products per page

The number of products displayed per page can also be defined in the web.config.
Default configuration is :

<productLists>
  <allowedPageSizes allowAll="true">
    <size value="2" />
    <size value="5" />
    <size value="10" />
    <size value="20" default="true" />
    <size value="50" />
  </allowedPageSizes>
</productLists>

The different numbers displayed in the listbox of the number of products per page are defined in the « allowedPageSizes » parameter . the default number of items to display per page can be defined by the « default » attribute set to true.
Here is the list that will be displayed buy the above defined parameters :
List

Please notice that the "All" value is automatically added thanks to the «allowAll» attribute of the « allowedPageSizes » node.
Simply set to false the value of the «allowAll» attribute if you do not wish to provide that possibility.

Graphic elements and icons

In order to facilitate the customization of the graphic elements and icons, Magelia provided the graphic files sources (Photoshop PSD format). You can easily edit the colors of the graphic elements to adapt it to your own taste.


Graphic elements are built using the sprites method. This technology relies on a single file to store multiple images, positioned next to eachother, The images are then called by the stylesheet using the position of the image, as defined in the background-property position.

Sprite 1 Sprite 2

This process reduces the use of javascript in order to pre-load images, and offers a faster user experience when the state of an image changes (mouse-overn on-click, etc.). This allows also to reduce the page load time.

The responsive design website relies on 9 sprites that group icons by family. Changing colors is easy using basic graphic skills (to change the colors, or adding colors to an element. We did our best to provide easy to understand names.

You are now familiar with the Yourcegid Retail WebStore responsive template. We hope that you will have as much pleasure using and customizing this template as we did creating it. Please let us know how you did and use the Contact-us to give us the URLs of you sites that use this template.