Shopping

Prior to customizing the Shopping Web portal you should make a backup of any files you are going to change. This typically would include the Images directory, _LayoutBase.cshtml, ShoppingWebString.resx and custom.css (changes to these are described below).

Some main images used in the Shopping Web portal can be customized by replacing the files in the following directory:

<INSTALLDIR>\Shopping\WebSite\Shopping\Assets\Uploads\Images

For example to change the company logo displayed at the top of the interface you would replace logo.png in that directory with your own.

If you want to change other graphic elements of the interface you would make changes to the files in the following directory:

<INSTALLDIR>\Shopping\WebSite\Shopping\Assets\UI\Images

<INSTALLDIR>\Shopping\WebSite\Shopping\Assets\Images

<INSTALLDIR>\Shopping\WebSite\ShoppingAPI\GlobalResources

You can modify the items contained in headers and footers in the Shopping Web portal by making changes to _LayoutBase.cshtml in the following directory:

C:\Program Files (x86)\1E\Shopping\WebSite\Shopping\Views\Shared

To modify the contents of the header, change the contents of the header tag:

<header role="banner">
        <h1 id="logo">
                <a href="@Url.Action(MVC.Home.ActionNames.Index, MVC.Home.Name)">
                        <img src="@Url.Content("~/Assets/Uploads/Images/logo.png")" /></a>
                <span style="position: absolute; top: 2px; left: 80px; font-weight: bold">Shopping</span>
        </h1>
        @RenderSection("Login", required: false)
</header>

To modify the contents of the footer, change the contents of the footer tag:

<footer role="contentinfo">
        &copy; 1E.
</footer>

The starting point for finding out if text can be customized is to search for the text in the ShoppingWebStrings.resx in the following folder:

C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI\GlobalResources

Here you can change the values for particular named data. For example, to change the text used for the AdminHeading property, edit the Value contained in the data tag where the name is AdminHeading:

<data name="AdminHeading" xml:space="preserve">
        <value>Administration</value>
</data>

After making a change to the ShoppingWebStrings.resx file, you must perform an IIS reset before the changes can be seen in the Shopping Web portal.

The custom.css file, is where any user modifications to styles are made. It is found in:

C:\Program Files (x86)\1E\Shopping\WebSite\Shopping\Assets\css\custom.css

To modify an element in the Shopping Web portal, add an entry for the style. For example, to change the colors of the tabs, in custom.css, modify:

/* To change the background and text colour of the tabs */
// Current Selected tab 
aside[role="complementary"] ul.tabs li a.current
        {
                background-color: #CC33CC;
                color: red;
        }
// Text colour of the tab hovered on 
aside[role="complementary"] ul.tabs li a:hover
       {
                color: #006CEB; 
    }
//Background colour of the unselected tab(S) 
aside[role="complementary"] ul.tabs li a
        {
        background: #888888 ;
    }

To change the background color of the administration menu, modify:

aside[role="complementary"] nav#administration ul li
{
        background: #D2D2D2;
}

To customize the appearance of the footer, modify:

footer[role="contentinfo"]
{
        background: #323232;
        -webkit-box-shadow: rgba(0,0,0,0.2) 2px 2px 10px;
        -moz-box-shadow: rgba(0,0,0,0.2) 2px 2px 10px;
        box-shadow: rgba(0,0,0,0.2) 2px 2px 10px;
        color: #969696;
        font-size: 11px;
        padding: 12px 8px;
        z-index: 999;
        position: fixed;
        bottom: 0;
        min-width: 996px;
        width: 99.9%;
}

To change the button properties, modify:

.btn-normal, form input[type=submit], form input[type=button]
{
        background: #180000 ;
        border: solid 2px #FF0000 ;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        color: #33FF33;
        font-family: Arial,sans-serif;
        font-size: 10px;
        font-weight: bold;
        padding: 5px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        width: 3px;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: background-color;
        -moz-transition-property: background-color;
        -o-transition-property: background-color;
        transition-property: background-color;
}

To hide ratings and reviews, modify:

/* on the tile view hide the ratings and reviews also the price */
ul.tiles li.tile .rating-review-price {
    display: none !important;
}
/* on the list view hide the ratings and reviews */
.rating-review {
    display: none !important;
}

/* on the detail page hide the ratings and reviews*/
.rating-and-reviews  {
    display: none !important;
}

/* on the detail page hide the ratings and reviews section*/
.review-container {
    display: none !important;
}
  
/* hide the price on the grid/list view */
.price {
    display: none !important;
}

However, if price is required while ratings and reviews are not, break out the individual elements from:

ul.tiles li.item .rating-review-price {
    display: none !important;
}

as this is all inclusive of price,

You can hide the cost of the application by editing two CSS files:

More details on modifying the Shopping Web Portal styles can be found in this example custom.css file. This contains a number of custom styles with comments that describe which parts of the interface they affect.

/* All customizations go here */
dl.details dt {
    width: 160px;
}

.btn-normal, form input[type=submit] {
    width: auto;
    /*min-width: 100px;*/
}
/*This makes dropwown text black*/
form .custom-select select option {
    color: black;
}

/*Ensures collapse categories does not overlap with the tabs*/
aside[role="complementary"] ul.tabs {
    top: 98px;
}

/*Sets category default colour*/
aside[role="complementary"] nav > ul > li {
    background: transparent;
}

.item:hover {
    z-index: 0;
}

.makeRed {
    color: red;
}

.single-select {
    border: 1px solid #323232;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    height: 200px;
    width: 100%;
}

.page-start {
    font-size: 14px;
    font-weight: bold;
    width: 672px;
    margin-bottom: 10px;
}

    .page-start input[type="submit"] {
        margin-right: 10px;
    }

fieldset.select-user .form-column {
    float: left;
    min-width: 298px;
}



/*
p.alert, div.alert {
  background: #e6e6e6;
  border: 2px solid #ff4e12;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px;
  padding: 16px 60px;
  position: relative;
  text-transform: uppercase;
}
*/

.slider .slide-next,
.slider .slide-prev {
    /*background: white url(../UI/Images/IcoLeftRight.png) 0 0 no-repeat;*/
    display: block;
    height: 40px;
    position: absolute;
    text-indent: -9999px;
    top: 100px;
    width: 40px;
    z-index: 9;
}

.item .front,
.item .back {
    background: white;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    display: block;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    /*-webkit-transition-delay: 0.6s;
  -moz-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;*/
    width: 100%;
}

ul#list.tabular li span {
    float: left;
    line-height: 36px;
    padding: 0;
}

fieldset.find-user {
    position: relative;
    width: 672px;
}

.btn-shopper {
    width: 65px;
}

section#product header div.details {
    width: 100%;
}


aside[role="complementary"] nav ul li span.toggle-item {
    background-position: left;   
    line-height: 18px;
    padding:0 12px;
    }

ul#list{
    margin: auto;
    /* width: 716px; */
}
    

section.content-wrapper {
     margin: 20px 0;
}

ul#tiles li.item img {
    bottom: 40px;
}

.slide {
    cursor: pointer;
}

.btn-shopper-orderStatus {
    font-weight: bold; 
    text-transform: uppercase
}

.btn-application-content {
    
}
.btn-application-newcontent {
    
}
/* make style changes similar to .btn-application-text-branchAdmin*/
.btn-application-text {
    color: white;
}
/* make style changes similar to .btn-application-text*/
.btn-application-text-branchAdmin{
    color: white;
}

/* New Customizations*TO change Logo or 'Shopping' text across webiste 
// Replace the image at the following location and text accorindgly as mentioned in _LayoutBase.cshtml file 
<h1 id="logo">
                <a href="@Url.Action(MVC.Home.ActionNames.Index, MVC.Home.Name)">
                <img src="@Url.Content("~/Assets/Uploads/Images/logo.png")" /></a>
                <span style="position: absolute; top: 2px; left: 80px; font-weight: bold">Shopping</span>
</h1>
*/


                
/* To change the background and text colour of the tabs  
// Current Selected tab 
aside[role="complementary"] ul.tabs li a.current
        {
                background-color: #CC33CC;
                color: red;
        }
// Text colour of the tab hovered on 
aside[role="complementary"] ul.tabs li a:hover
       {
                color: #006CEB; 
    }
//Background colour of the unselected tab(S) 
aside[role="complementary"] ul.tabs li a
        {
        background: #888888 ;
    }
*/

        
/* To change the background colour of left navigation menu (except few labels from the admin menu) 
aside[role="complementary"] nav
  {
    background: #00CDCD; 
 }
*/


 /* To change background colour of help label in left navigation menu (this is different label on the menus hence it needs to be changed seperately 
 aside[role="complementary"] #sidebar-bottom
    {
      background: #33FFFF;
    }
 */
 
 

/* Change the background colour of 'home' and other missing labels on Admin menu 
  aside[role="complementary"] nav ul li a
    {
       background-color: #666666; 
                
    }
*/

                
/* To change colour of the application tile header  
ul#tiles li.item .back h2
    {
        background: #33FFFF;
  }
*/ 
  

/* Change button properties for any request item 
.btn-normal, form input[type=submit], form input[type=button]
                {
                background: #33FFFF ;
                font-size: 10px;
                text-transform: uppercase;
                }
*/
/* All the text changes can be done in webstrings resource file. IIS reset is required */

You can inspect the elements of the Shopping Web Portal using a suitable browser, most browsers have tools for inspecting the styles used for web pages.

The general procedure is to:

Applications appear in the portal as either a grid or list. You can set the default view mode in the Web Application settings in the Shopping Admin Console.

The Shopping Application name appears in the Portal header next to the logo It also appears in the title bar of the browser, The name can be changed in the Web Application settings in the Shopping Admin Console, and can be blank.

Also known as the User Splash Message. The Shopping Web Welcome screen page describes how to enable or disable the splash message and edit the text.

Savings so far page describes how to enable or disable this feature.

The currency setting in the Web Application settings in the Shopping Admin Console, affects Savings so far and each Shopping application in the Shopping Web Portal.

Modifying Shopping help describes the default help files and how you can edit and add your own.