Статьи

5 простых техник, чтобы превратить ваш сайт nopCommerce из базового в блестящий

Август 25, 2017

NopCommerce предлагает отличную современную тему из коробки, которая была разработана, чтобы сделать любой сайт интернет-магазина профессиональным, изысканным и нетронутым. Существует огромное увеличение использования нескольких мобильных устройств; веб-сайт должен быть оптимизирован для смартфонов, планшетов, настольных компьютеров, браузеров игровых приставок и телевизоров с большим экраном … этот список можно продолжить. Интерфейс интернет-магазина должен быть видимым и удобным на всех устройствах и во всех разрешениях. Тема по умолчанию nopCommerce предлагает чистый и современный адаптивный дизайн.

Многие владельцы магазинов предпочитают использовать nopCommerce из коробки, поскольку он поставляется с отличной удобной для пользователя темой. Но, в то же время, есть много владельцев магазинов, которые не предпочитают использовать тему по умолчанию. Зачем? Причина довольно проста — если бы каждый владелец магазина или веб-разработчик использовал одну и ту же тему по умолчанию, то все сайты магазинов, основанные на nopCommerce , выглядели бы совершенно одинаково. 

Для того, чтобы ваш сайт отличался от других сайтов, вы должны использовать некоторые настройки, которые изменят внешний вид вашего интернет-магазина.

1. Изменить цвет фона нижнего колонтитула в nopCommerce

Перейдите по адресу: Nop.Web \ Themes \ DefaultClean \ Content \ css \ styles.css

Откройте таблицу стилей «styles.css» и найдите следующее:

.footer {
    background-color: #eee;
    text-align: center;
}

Как мы видим в коде CSS, цвет фона упоминается как «#eee». Теперь мы можем просто поиграть с разными цветами и изменить цвет фона нижнего колонтитула.

Давайте изменим его на «аква»:

/*********** FOOTER ***********/

.footer {
    background-color: aqua;
    text-align: center;
}

Вот результат:

Теперь давайте изменим его на «darkorange»:

/*********** FOOTER ***********/

.footer {
    background-color: darkorange;
    text-align: center;
}

Вот результат:

2. Измените таблицу стилей CSS с языком в nopCommerce

Временами разработчикам / дизайнерам nopCommerce приходится реализовывать разную компоновку для каждого языка (если на сайте магазина установлено несколько языков). Это требование, безусловно, имеет смысл, потому что в разных языках длина слов / предложений может быть разной. Таким образом, если ваш макет соответствует содержимому одного языка, изменение языка сайта магазина может создать некоторые проблемы с макетом сайта.

Давайте рассмотрим пример: у  вас есть страница просмотра с некоторым содержанием. Вы хотели бы изменить некоторые стили в зависимости от выбранного языка.

Что вам нужно знать:  вам нужно узнать идентификаторы двух языков, которые установлены на сайте вашего магазина. Вы можете получить идентификатор непосредственно из базы данных SQL Server.

Два языка:  английский и французский

Теперь, если у вас на сайте магазина установлены две разные темы для каждого языка, перейдите в папку содержимого темы и добавьте соответствующую таблицу стилей CSS (для каждой темы) в следующем месте:

Если ваши языковые идентификаторы следующие:

— Английский: 1
— Французский: 2

Вы должны включить этот код на странице просмотра:

var workingLanguageId = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Id;

if (workingLanguageId == 1)
{
  Html.AppendCssFileParts(string.Format("/Themes/{0}/Content/css/styles_English.css", themeName));
}
else if (workingLanguageId == 2)
{
  Html.AppendCssFileParts(string.Format("/Themes/{0}/Content/css/styles_French.css", themeName));
}

As long as you have the respective CSS files in the correct location, each style sheet will be used depending on the selected language.

3. Add Content to the Top Header in nopCommerce

We all have seen that many websites post content like address, phone number, and social media links in the top header. This design strategy is quite useful in presenting your information to online users right away.

Many online stores like to post their contact information in the top header so that customers get access to that information from any page with the top header visible. This way, online customers do not have to spend time searching for the «contact» or «about us» page.

You can use the top header section for posting content like:
– Customer service phone number
– Store address
– Customer service email address
– Live chat button
– Social media links

Today, we will go over the process of adding this content to the top header in nopCommerce.

Go to: Views \ Shared \ Header.cshtml

Open “Header.cshtml” file and find this code:

<div class="header">
    @Html.Widget("header")
    <div class="header-upper">
        <div class="header-selectors-wrapper">

            @Html.Action("TaxTypeSelector", "Common")

            @Html.Action("CurrencySelector", "Common")

            @Html.Action("LanguageSelector", "Common")

            @Html.Widget("header_selectors")
        </div>
        <div class="header-links-wrapper">
            @Html.Action("HeaderLinks", "Common")
            @Html.Action("FlyoutShoppingCart", "ShoppingCart")
        </div>
    </div>
    <div class="header-lower">
        <div class="header-logo">
            <a href="@Url.RouteUrl("HomePage")">
                <img title="" alt="@storeName" src="@Url.Content(logoPath)">
            </a>
        </div>
        <div class="search-box store-search-box">
            @Html.Action("SearchBox", "Catalog")
        </div>
    </div>
</div>

You can adjust the position of the custom content as per your design requirements. But in this example, we will post custom content at the very top of the header.

Let’s try to add some text right “above” this:
<div class=”header-links-wrapper”>

So, the code should look something like this:

<div class="header">
    @Html.Widget("header")
    <div class="header-upper">
        <div class="header-selectors-wrapper">

            @Html.Action("TaxTypeSelector", "Common")

            @Html.Action("CurrencySelector", "Common")

            @Html.Action("LanguageSelector", "Common")

            @Html.Widget("header_selectors")
        </div>

        <!--START: Custom Text-->
        <div id="customheadercontent" style="font-size: 15px; color: #0B2F3A; float: left; height: 46px; line-height: 46px;">
            123 Street, City, State 11111 (Customer Service #: 000-000-0000 )
        </div>
        <!--END: Custom Text-->
        <div class="header-links-wrapper">
            @Html.Action("HeaderLinks", "Common")
            @Html.Action("FlyoutShoppingCart", "ShoppingCart")
        </div>
    </div>
    <div class="header-lower">
        <div class="header-logo">
            <a href="@Url.RouteUrl("HomePage")">
                <img title="" alt="@storeName" src="@Url.Content(logoPath)">
            </a>
        </div>
        <div class="search-box store-search-box">
            @Html.Action("SearchBox", "Catalog")
        </div>
    </div>
</div>

Make sure to save your changes and go to the public store to see your custom content on the top header like this:

4. Add a Background Color to News Titles on the Homepage in nopCommerce

Many developers/web designers are always looking to improve or add something new to the website layout/design that makes the content of the site stand out. nopCommerce’s homepage (out of the box) offers 3 of the latest news posts on the homepage. Adding some background color to the titles will certainly make it look more attractive and it will easily catch your customer’s attention.

This is the default layout/design of the homepage news posts: 

In order to add background color, open the stylesheet of your default theme: Nop.Web/Themes/DefaultClean/Content/css/styles.css

In your “styles.css”, find this:

.post-title,
.news-title {
    display: inline-block;
    padding: 20px 10px;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
}

Now, let’s separate it first like this so that any changes that we are making to news title does not affect anything else on the website.

.post-title {
    display: inline-block;
    padding: 20px 10px;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
}


.news-title {
    display: inline-block;
    padding: 20px 10px;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
}

Now, simply add your styling to the news-title class as per your requirements. In this example, we are using “skyblue” color and 300px width like this:

.news-title {
    display: inline-block;
    padding: 20px 10px;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
    background-color:skyblue;
    width:300px;
}

That’s all! Now save your changes and see the result on your homepage. It should look something like this:

5. Change Background Color of Top Menu in nopCommerce 

First off, let’s go over the code from where the top menu options (links) are coming from.

If you look into: Nop.Web/Views/Catalog/TopMenu.cshtml

You will find this the <ul> (unordered list):

<ul class="top-menu">
    @Html.Widget("header_menu_before")
    @{
        var rootCategories = Model.Categories.Where(x => x.IncludeInTopMenu).ToList();
    }
    @foreach (var category in rootCategories)
    {
        @RenderCategoryLine(category, 0, false)
    }
......
..........
............
..................

So, all the links in the top menu are coming from this <ul> tag. But this <ul> tag is actually inside another DIV that makes the top menu bar. So, in order to change the color of the top menu, we need to look into that.

Go to: Nop.Web/Views/Shared/_Root.cshtml

When you open the “_Root.cshtml” file, you will find that “top menu” is under “header-menu” DIV like this:

<div class="header-menu">
        @Html.Action("TopMenu", "Catalog")
    </div>

So, all we have to do is find this class in the CSS stylesheet, which is right here: Themes/DefaultClient/Content/css/styles.css

Now, look for this code:

/*** NAVIGATION ***/


.header-menu {
    position: relative;
    z-index: 5;
    width: 980px;
    margin: 0 auto 30px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 25px 0;
    text-align: center;
}

You can easily add different background colors (or even images) as per your requirement(s) like this:

.header-menu {
    position: relative;
    z-index: 5;
    width: 980px;
    margin: 0 auto 30px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 25px 0;
    text-align: center;
    background-color:#F4FA58;
}

(Note: I have added this background-color:#F4FA58;)

Here is the result:

37
Share: