Инструкция по ручному обновлению MobiSite 1.2

18 января 2016

Инструкция по ручному обновлению темы дизайна MobiSite, v.1.2.

  • Вывод стикеров для товаров.

1.1) Магазин - Витрина - Шаблоны. В файле list-thumbs.html найти строку

<a class="link_product" href="{$p.frontend_url}" title="{$p.name}">

и добавить после нее

{$badge_html = $wa->shop->badgeHtml($p.badge)}
{if $badge_html}
<div class="corner top right">{$badge_html}</div>
{/if}

1.2) Магазин - Витрина - Шаблоны. В файле product.html найти строку

<div class="product-gallery">

и добавить после нее

<div class="corner top right">{$wa->shop->badgeHtml($product.badge)}</div>

1.3) Магазин - Витрина - Шаблоны. В файле webasyst.shop.css найти код между следующими строками

/* Product badges 
----------------- */
... 
/* Category 
----------- */

и полностью заменить его на такой

.badge { background: #a1fcff; position: absolute; top: 0; left: 0; z-index: 20; }
.badge span { color: #000; font-weight: bold; z-index: 1983; font-size: 20px; text-align: center; overflow: visible; line-height: 1em; display: block; padding: 10px 15px; }
.badge.new { background: #ff4; color: #000; }
.badge.low-price { background: #ffc2e3; color: #300; }
.badge.bestseller { background: #74ff30; color: #030; }
.product-gallery .badge span { font-size: 32px; }
.bestsellers .badge span { font-size: 24px; }
  • Стилизация плагина "Бренды с картинками".

1.1) Магазин - Витрина - Шаблоны. В файле home.html найти строку

<!-- plugin hook: 'frontend_homepage' -->

и добавить перед ней

{if class_exists('shopProductbrandsPlugin')}
    {$brands = shopProductbrandsPlugin::getBrands()}
    {if $brands}
    <div id="brands_block">
        <h1>Популярные бренды <a class="see_all" href="{$wa->getUrl('/frontend/brands')}">Смотреть все</a></h1>
        <div class="brands_list">
        {foreach $brands as $b name=b}
        {if $b.image || $b.summary}
        <a title="{$b.name}" href="{$b.url}">
            {if $b.image}
            <div class="img">
                <img alt="{$b.name}" title="{$b.name}" src="{$wa_static_url}wa-data/public/shop/brands/{$b.id}/{$b.id}{$b.image}">
            </div>
            {/if}
            <span>{$b.summary}</span>
        </a>
        {/if}
        {/foreach}
        </div>
    </div>
    {/if}
{/if}

1.2) Магазин - Витрина - Шаблоны. Добавить в конец файла mobisite.shop.css следующий код

/* Brands
------------------- */
#page.info_page .brand { display: inline-block; vertical-align: top; width: 44%; margin: 0 2% 30px; text-align: center; }
#page.info_page .brand a { display: block; position: relative; height: 90px; }
#page.info_page .brand img { max-width: 100%; max-height: 100%; position: absolute; display: inline; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
#page.info_page .brand + br { display: none; }#brand-page .brand { padding: 20px 4%; }
#brand-page .brand img { max-width: 300px; margin: 0 15px 15px 0; }
#brand-page .sub-categories a { display: block; }
#brand-page .sub-categories a + br { display: none; }
#brands_block { padding: 20px 4%; position: relative; }
#brands_block h1 { font-size: 40px; margin: 0px 0px 20px; }
#brands_block .see_all { position: absolute; right: 20px; top: 33px; font-size: 18px; font-weight: normal; }
.brands_list a { display: inline-block; vertical-align: bottom; width: 48%; margin-bottom: 15px; text-decoration: none; }
.brands_list a:nth-child(2n+1) { margin-right: 2%; }
.brands_list .img { position: relative; height: 90px; margin-bottom: 4px; }
.brands_list img { max-width: 100%; max-height: 100%; position: absolute; display: inline; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.brands_list span { display: block; text-align: center; color: #777; }

1.3) Магазин - Витрина - Шаблоны. В файле search.html найти код

<h1 class="search-title breadcrumb main_title">
    {$title}
</h1>

и заменить его на такой

{if strpos($wa->currentUrl(false), '/brand/') !== false}
<div id="brand-page">
    <h1 class="search-title breadcrumb main_title">
        {$title}
    </h1>
    <!-- filtering by product features -->
    {if !empty($filters)}
    <div id="filter_block">
        <div class="filters_title">Подбор по параметрам</div>
        {if waRequest::isXMLHttpRequest() && waRequest::get('page', 1) == 1}
        <link href="{$wa_static_url}wa-content/css/jquery-ui/base/jquery.ui.slider.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="{$wa_static_url}wa-content/js/jquery-ui/jquery.ui.core.min.js?v{$wa->version(true)}"></script>
        <script type="text/javascript" src="{$wa_static_url}wa-content/js/jquery-ui/jquery.ui.widget.min.js?v{$wa->version(true)}"></script>
        <script type="text/javascript" src="{$wa_static_url}wa-content/js/jquery-ui/jquery.ui.mouse.min.js?v{$wa->version(true)}"></script>
        <script type="text/javascript" src="{$wa_static_url}wa-content/js/jquery-ui/jquery.ui.slider.min.js?v{$wa->version(true)}"></script>
        {/if}
        <div class="filters{if !empty($theme_settings.ajax_filters)} ajax{/if}">
            <form method="get" action="{$wa->currentUrl(0,1)}" data-loading="{$wa_parent_theme_url}img/loading16.gif">
                {foreach $filters as $fid => $filter}
                    <div class="filter-param">
                        {if $fid == 'price'}
                            {$c = $wa->shop->currency(true)}
                            <h5>[`Price`]</h5>
                            <div class="slider">
                            [`from`] <input type="text" class="min" name="price_min" {if $wa->get('price_min')}value="{(int)$wa->get('price_min')}"{/if} placeholder="{floor($filter.min)}">
                            [`to`] <input type="text" class="max" name="price_max" {if $wa->get('price_max')}value="{(int)$wa->get('price_max')}"{/if} placeholder="{ceil($filter.max)}"> {$c.sign}
                            </div>
                        {else}
                            <h5>{$filter.name|escape}</h5>
                            {if $filter.type == 'boolean'}
                                <label><input type="radio" name="{$filter.code}"{if $wa->get($filter.code)} checked{/if} value="1"> [`Yes`]</label>
                                <label><input type="radio" name="{$filter.code}"{if $wa->get($filter.code) === '0'} checked{/if} value="0"> [`No`]</label>
                                <label><input type="radio" name="{$filter.code}"{if $wa->get($filter.code, '') === ''} checked{/if} value=""> [`Any`]</label>
                            {elseif isset($filter.min)}
                            {$_v = $wa->get($filter.code)}
                            <div class="slider">
                            [`from`] <input type="text" class="min" name="{$filter.code}[min]" placeholder="{$filter.min}" {if !empty($_v.min)}value="{$_v.min}"{/if}>
                            [`to`] <input type="text" class="max" name="{$filter.code}[max]" placeholder="{$filter.max}" {if !empty($_v.max)}value="{$_v.max}"{/if}>
                            {if !empty($filter.unit)}
                                {$filter.unit.title}
                                {if $filter.unit.value != $filter.base_unit.value}<input type="hidden" name="{$filter.code}[unit]" value="{$filter.unit.value}">{/if}
                            {/if}
                            </div>
                            {else}
                            {foreach $filter.values as $v_id => $v}
                                <label>
                                    <input type="checkbox" name="{$filter.code}[]" {if in_array($v_id, (array)$wa->get($filter.code, array()))}checked{/if} value="{$v_id}"> {$v}
                                </label>
                            {/foreach}
                            {/if}
                        {/if}
                    </div>
                {/foreach}
                {if $wa->get('sort')}<input type="hidden" name="sort" value="{$wa->get('sort')|escape}">{/if}
                {if $wa->get('order')}<input type="hidden" name="order" value="{$wa->get('order')|escape}">{/if}
                <input type="submit" class="gray" value="[`Filter products`]">
            </form>
        </div>
    </div>
    {/if}
{else}
    <h1 class="search-title breadcrumb main_title">
        {$title}
    </h1>
{/if}

1.4) В этом же файле в конце добавить код

{if strpos($wa->currentUrl(false), '/brand/') !== false}
</div>
{/if}
  • Адаптация навигации для использования на корпоративных сайтах (приложение "Сайт").

Сайт - Дизайн - Шаблоны. В файле page.html найти код

<h1 class="breadcrumb main_title" itemprop="name">{$page.name}</h1>
{$subpages = $wa->site->pages($page.id)}
{if $subpages}
    <ul class="sub-links">
        {foreach $subpages as $p}
            <li><a href="{$p.url}">{$p.name}</a></li>
        {/foreach}
    </ul>
{/if}

и заменить его на такой

{if $wa->currentUrl() == $wa_app_url}
    {$root_pages = $wa->site->pages()}
    {if $root_pages}
    <div id="catalog">
        {foreach $root_pages as $r}
            {if $r.url != $wa_app_url && !isset($r.hidden)}
            <div class="category">
                <a href='{$r.url}'>{$r.name|escape}</a><i class="fa fa-angle-right"></i>
            </div>
            {/if}
        {/foreach}
    </div>
    {/if}
{else}
    <div class="breadcrumbs" id="catalog" itemprop="breadcrumb">
        <div class="category breadcrumb">
            <i class="fa fa-angle-left"></i><a href="{$wa_app_url}">Главная</a>
        </div>
        {if !empty($breadcrumbs)}
        {foreach $breadcrumbs as $breadcrumb}
            <div class="category breadcrumb">
                <i class="fa fa-angle-left"></i><a href="{$breadcrumb.url}">{$breadcrumb.name|escape}</a>
            </div>
        {/foreach}
        {/if}
        <div class="subcategory">
            <h1 class="breadcrumb main_title" itemprop="name">{$page.name|escape}</h1>
        </div>
        {$subpages = $wa->site->pages($page.id)}
        {if $subpages}
                {foreach $subpages as $p}
                    {if !isset($p.hidden)}
                    <div class="subcategory">
                        <a href="{$p.url}">{$p.name|escape}</a><i class="fa fa-angle-right"></i>
                    </div>
                    {/if}
                {/foreach}
        {/if}
    </div>
{/if}
  • Увеличение кнопки удаления товара в корзине.

1.1) Магазин - Витрина - Шаблоны. В файле mobisite.shop.css найти код

#shopping_cart .cart_item .info {
  padding: 18px 3%;
  width: 62%;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

и строку width: 62%; заменить на width: 58%;

1.2) В этом же файле найти код

#shopping_cart .cart_item .info .item-remove {
  position: absolute;
  top: 5px;
  right: 0;
}

строку right: 0; заменить на right: -10px;

1.3) В этом же файле найти код

#shopping_cart .cart_item .info .item-remove a {
  color: #929292;
}

и добавить после него

#shopping_cart .cart_item .info .item-remove .fa {
    font-size: 1.5em;
}
  • Исправление бага, при котором в карточке товара в случае с несколькими артикулами не отображается наличие, если есть несколько складов.

Магазин - Витрина - Шаблоны. В файле product.js в нескольких местах найти такие части кода

"div.stocks div"

и заменить каждую на такой

"div.stocks > div"
  • Изменить цвет неактивной кнопки "В корзину" в карточке товара.

Сайт - Дизайн - Шаблоны. В файле mobisite.css найти код

input[type="button"],
input[type="submit"],
button,
.button {
  font: 24px Arial, sans-serif;
  color: #fff;
  padding: 5px 15px 7px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  cursor: pointer;
  -webkit-appearance: none;
}

и добавить после него

input[type="button"]:disabled,
input[type="submit"]:disabled,
button:disabled,
.button:disabled {
  color: #999;
  background: #eee;
}
  • Исправление бага с шириной списка заказов в личном кабинете.

Магазин - Витрина - Шаблоны. В файле my.orders.html в начало добавить код

<style>
    table.table { width: 100%; }
    table.table td { font-size: 0.55em; }
</style>

Здесь же найти код

<td class="nowrap">
    <a href="{$o.url}" class="bold">
        {$o.id_str}
    </a>
</td>
<td class="nowrap">
    <span class="nowrap order-status" style="{$o.state->getStyle(1)}">
        {$o.state->getName()}
    </span>
</td>

и заменить его на такой

<td class="nowrap">
    <a href="{$o.url}" class="bold">{$o.id_str}</a>
    <span class="nowrap order-status" style="display: block; margin-top: 5px; {$o.state->getStyle(1)}">
        {$o.state->getName()}
    </span>
</td>

__