Обновление шаблона до движка версии 7+

Если ваш шаблон разрабатывался для версии Moguta.CMS ниже v 6.9.31 , то информация приведенная ниже может быть вам полезна.

Содержание:

Внимание! Приведенная на данной странице инструкция не может претендовать на абсолютную истину, поскольку в каждом шаблоне может быть индивидуальный код. Данная инструкция больше подходит для шаблонов, созданых на основе дефолтного шаблона Moguta.CMS. Чтобы применить данные инструкции к вашему шаблону, вам необходимы минимальные знания PHP и HTML кода. Поэтому если у вас таких знаний нет, то рекомендуем обратиться к веб-мастерам.


Добавление размерной сетки

1. Через любой FTP-клиент или файловый менеджер на хостинге зайдите в корневую папку вашего сайта;
2. Перейдите в папку /mg-templates/moguta/layout ;
3. Скопируйте файлы layout_filter.php и layout_prop_filter.php и вставьте их в папку layout нужного вам шаблона;
4. Откройте файл layout_variant.php в папке layout вашего шаблона и найдите строку:

<?php if(!empty($data['blockVariants'])){?>

5. перед ней вставьте следующий код:

<?php 
MG::setSizeMapToData($data);
$style = '';
if (MG::getSetting('printVariantsInMini') != 'true' && 
  (MG::get('controller')=="controllers_catalog" || MG::get('controller')=="controllers_index" || MG::get('controller')=="controllers_group")
  ) {
  $style = "style='display:none'";
}
?>


6. В тег <div class="block-variants "> вставьте <?php echo $style; ?>, так чтобы получилось: 

<div class="block-variants" <?php echo $style; ?>


7. Сразу после строки <table class="variants-table"> вставьте:

<?php if($data['sizeMap'] != '') { 
      echo '<div class="sizeMap-row">';
      $color = '';
      
      $countColor = 0;
      foreach ($data['sizeMap'] as $item) {
        MG::loadLocaleData($item['id'], LANG, 'property_data', $item);
        if($item['type'] == 'color') {
          $countColor++;
          $color .= '<div class="color" data-id="'.$item['id'].'" style="background-color:'.$item['color'].';" title="'.$item['name'].'"></div>';
          $colorName = $item['pName'];
        }
      }

      if(($color != '')&&($countColor>1)) {
        echo '<div class="color-block"><span>'.$colorName.':</span>';
        echo $color;
      }
      
      $size = '';
      foreach ($data['sizeMap'] as $item) {
        MG::loadLocaleData($item['id'], LANG, 'property_data', $item);
        if($item['type'] == 'size') {
          $size .= '<div class="size" data-id="'.$item['id'].'">'.$item['name'].'</div>';
          $sizeName = $item['pName'];
        }
      }
      if($size != '') {
        echo '<div class="size-block"><span>'.$sizeName.':</span>';
        echo $size;
      }
      echo '</div></div>';
    } ?>


8. Внутрь тега <tr>, который находится сразу после строчки

<?php foreach ($data['blockVariants'] as $variant) :?>

добавьте:

 class="c-variant__row variant-tr <?php echo !$j++ ? 'active-var' : ''?>" <?php if($data['sizeMap'] != '') echo "style='display:none;'" ?> data-color="<?php echo $variant['color'] ?>" data-size="<?php echo $variant['size'] ?>" 
 data-count="<?php echo $count; ?>"

должно получиться так:

 <tr class="c-variant__row variant-tr <?php echo !$j++ ? 'active-var' : ''?>" 
               <?php if($data['sizeMap'] != '') echo "style='display:none;'" ?>
               data-color="<?php echo $variant['color'] ?>" data-size="<?php echo $variant['size'] ?>" 
               data-count="<?php echo $count; ?>">



9. А если в вашем шаблоне есть <tr> после строки:

<?php if ($variant['activity'] === "0" || $variant['count'] == 0): ?>


то добавьте в него:

class="<?php echo !$j++ ? 'active-var' : ''?>" <?php if($data['sizeMap'] != '') echo "style='display:none;'" ?> 
data-color="<?php echo $variant['color'] ?>" data-size="<?php echo $variant['size'] ?>"  
data-count="<?php echo $variant['count']; ?>"


должно получиться так:

<tr class="<?php echo !$j++ ? 'active-var' : ''?>" <?php if($data['sizeMap'] != '') echo "style='display:none;'" ?> 
data-color="<?php echo $variant['color'] ?>" data-size="<?php echo $variant['size'] ?>"  
data-count="<?php echo $variant['count']; ?>">



10. В style.css вашего шаблона добавьте:

.sizeMap-row span{
    font-size: 14px;
    font-weight: bold;
}
.sizeMap-row .size{
    display: inline-block;
    min-width: 31px;
    height: 31px;
    margin: 10px 5px 5px 0;
    padding: 4px;
    cursor: pointer;
    text-align: center;
    border: 2px solid #656060;
}
.sizeMap-row .size.active,.sizeMap-row .color.active{
    border-color: #333!important;
}
.sizeMap-row .size,.sizeMap-row .color{
    border-radius: 20px;
    box-sizing: border-box;
    background: #ffffff;
    color: #000;
}
.sizeMap-row .color{
    display: inline-block;
    min-width: 31px;
    height: 31px;
    margin: 10px 5px 5px 0;
    padding: 5px;
    cursor: pointer;
    text-align: center;
    border: 2px solid #e6e6e6;
}
.sizeMap-row .color{
    background: -webkit-linear-gradient(top left, rgba(255,255,255,.25), rgba(0,0,0,.125));
    background: -o-linear-gradient(top left, rgba(255,255,255,.25), rgba(0,0,0,.125));
    background: linear-gradient(to bottom right, rgba(255,255,255,.25), rgba(0,0,0,.125));
}
.sizeMap-row .color, .sizeMap-row .size, .c-filter .color-filter .cbox{
    -webkit-transition: all .4s;
         -o-transition: all .4s;
            transition: all .4s;           
}
.sizeMap-row .color:hover, .sizeMap-row .size:hover {
    border-color: #333;
}
.color-block > *{
    vertical-align: middle;
}
.size-block > span,.color-block > span{
    display: inline-block;
    min-width: 60px;
    margin-right:5px;
}
.size.inactive:before {
    left: -2px;
    top: 47%;
    content: '';
    width: 117%;
    height: 1px;
    position: absolute;
    background: #4a4848;
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
}
.size.inactive {
    background: #eaeaea;
    color: #817f7f;
    position: relative;

.mg-filter .color-filter span.value-name{
    display: none;
}

.mg-filter .color-filter {
    display: inline-block;
}
.filter-form .color-filter .cbox {
    min-width: 25px;
    max-width: 25px;
    min-height: 25px;
    max-height: 25px;
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    background: -webkit-linear-gradient(135deg,rgba(255,255,255,.25),rgba(0,0,0,.125));
    background: -o-linear-gradient(135deg,rgba(255,255,255,.25),rgba(0,0,0,.125));
    background: linear-gradient(-45deg,rgba(255,255,255,.25),rgba(0,0,0,.125));
}
.filter-form .color-filter label:hover .cbox{
    -webkit-box-shadow: 0 0 0px 3px #d9d9d9;
            box-shadow: 0 0 0px 3px #d9d9d9;
}
.filter-form .color-filter label [type="checkbox"]:checked ~ .cbox {
    -webkit-box-shadow: 0 0 0px 3px #333333;
            box-shadow: 0 0 0px 3px #333333;
}
.filter-form .mg-filter .mg-filter-item ul .color-filter label {
    line-height: 1.2;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.filter-form .mg-filter .mg-filter-item ul .color-filter label [type='checkbox'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}



Добавление поддержки мультиязычности

1. Через любой FTP-клиент или файловый менеджер на хостинге зайдите в корневую папку вашего сайта;
2. Перейдите в папку /mg-templates/moguta/layout ;
3. Скопируйте файлы layout_btn_more.php, layout_btn_compare.php, layout_btn_buy.php, layout_count_product.php (Если их нет в вашем шаблоне), а также все файлы с приставкой payment_ и скопируйте их в папку /layout  вашего шаблона;
4. Вернитесь в папку /mg-templates/moguta/ ;
5. Найдите и скопируйте папку /locales ;
6. Перейдите обратно в папку /mg-templates, откройте папку шаблона, в который вы хотите добавить локализацию и вставьте в неё папку /locales ;
7. Откройте файл default.php из папки /locales;
8. Далее вам потребуется поочерёдно открывать все php файлы из папок /layout и /views и заменять все статично-прописанные тексты шаблона на переводы из локализации.

Например, открываете файл /views/registration.php, который отвечает за страницу регистрации пользователя. Видите там первый статичный текст:

<h1 class="new-products-title">Регистрация</h1>


Находите в файле /locales/default.php запись с текстом «Регистрация»:

'registrationTitle' => 'Регистрация'


Первая часть «registrationTitle» - это название переменной локализации, которая нам понадобиться далее.
Снова возвращаемся к файлу registration.php и вместо текста «Регистрация» вставляем конструкцию: 

<?php echo MG::get('locale')['registrationTitle']; ?>


registrationTitle  — это переменная локализации, которую вы нашли в файле /locales/default.php

В результате, вместо:  

<h1 class="new-products-title">Регистрация</h1>


Должно получиться:

<h1 class="new-products-title"><?php echo MG::get('locale')['registrationTitle']; ?></h1>


Сохраните файл registration.php и переходите на страницу регистрации на вашем сайте, если ничего не 'поехало' и в заголовке странице всё также написано «Регистрация», то вы всё сделали правильно;

Аналогичным образом нужно заменить все прописанные в шаблоне тексты в файлах из папок /layout и /views  на переменные локализации из файла /locales/default.php ;

Что делать, если в файле локали default.php отсутствует нужная переменная

1. Если в файле default.php не нашлось переменной с нужным вам текстом, тогда пролистайте файл до конца, найдите последнюю строку с переменной и сразу после неё вставляете собственную, например:

'newVariable' => 'Моя новая переменная локализации',


newVariable — это любое, придуманное вами, название переменной на латинице, а Моя новая переменная локализации — это нужный вам текст, который будет выводить данная переменная;

2. Дальше созданную вами переменную, нужно будет скопировать и вставить аналогичным образом в другие, нужные вам файлы локализации, например english.php, где вместо русского варианта «Моя новая переменная локализации» пропишите английский вариант текста, например «My new variable»;

Созданная вами переменная может быть использована также, как любая другая, например:

<?php echo MG::get('locale')['newVariable']; ?>


Перевод названий кнопок "Купить", "Сравнить" и "Подробнее"

1. В папке /layout вашего шаблон откройте файл layout_property.php;

2. Найдите код выводящий на страницу кнопку "Купить", он выглядит примерно так:

<a class = "<?php echo $data['classForButton'] ?>" href = "<?php echo SITE.'/catalog?inCartProductId='.$data['id'] ?>" data-item-id="<?php echo $data['id'] ?>">
<?php echo $data['titleBtn']; ?>
</a>
<input type="submit" name="buyWithProp" onclick="return false;" style="display:none">


3. Замените весь этот код на одну строчку:

<?php echo  MG::layoutManager('layout_btn_buy', $data); ?>


4. Найдите кнопку "Сравнить", она выглядит примерно так:

<a href="<?php echo SITE.'/compare?inCompareProductId='.$data['id'] ?>" data-item-id="<?php echo $data['id'] ?>" class="addToCompare" >
<?php echo MG::getSetting('buttonCompareName'); ?>
</a>


5. Замените весь этот код на одну строчку :

<?php echo  MG::layoutManager('layout_btn_compare', $data); ?>


Векторный логотип сайта в формате SVG

SVG изображение не будет показываться на странице, если не указать ему размер. Соответственно, если у вас на сайте не показывается SVG-логотип, который вы загрузили через админку сайта, то в большинстве случаев это решается с помощью добавления в файл стилей кода:

.logo-block img {
    width: 100%;
    max-width: 300px;
}


Добавление выпадающих списков для выбора языка и валюты

  1. Из папки /mg-core/layout/ скопируйте файлы layout_language_select.php и layout_currency_select.php;
  2. Вставьте их папку layout вашего шаблона;
  3. Добавьте в файле вашего шаблона template.php в верстку шапки

<?php layout('language_select'); ?> <!-- Для выбора языка -->
<?php layout('currency_select'); ?> <!-- Для выбора валюты -->


Добавление информации об остатках на складах в карточку товара и на страницу оформления заказа

  1. Через любой FTP-клиент или файловый менеджер на хостинге зайдите в корневую папку вашего сайта;
  2. Перейдите в папку /mg-templates/moguta/layout;
  3. Скопируйте файлы layout_storage_info.php и layout_order_storage.php и вставьте их в папку /layout  вашего шаблона;
  4. Далее нужно будет добавить два этих лайаута на страницу товара и страницу оформления заказа:

Добавление складов на страницу товара:

1. Перейдите в папку /views вашего шаблона, откройте файл product.php;
2. Найдите там строку:

<?php echo $data['propertyForm'] ?>


3. И перед ней вставьте:

<?php echo MG::layoutManager('layout_storage_info', $data); ?>


4. В файл style.css добавьте:

tr.sklad{
    border-bottom: 1px dotted #dadada;
}
.sklad p span {
    font-size: 13px;
    display: block;
    color: #b5b5b5;
}
.sklad p{
    margin: 0;
    padding: 0;
    color: #524d4d;
}
tr.sklad td:nth-child(2) {
    text-align: right;
    white-space: nowrap;
}


5. Перейдите на страницу товара, если перед кнопкой добавления товара в корзину появилась информация о количестве единиц товара на разных складах, то вы сделали всё правильно;


Добавление складов на страницу оформления:

1. Перейдите в папку /views вашего шаблона, откройте файл order.php;
2. Найдите блок с классом .delivery-date:

<div class="delivery-date"> 
...
</div>

3. После закрывающего тега </div> вставьте следующую строчку кода:

<?php MG::checkProductOnStorage(); ?> 


4. В style.css вашего шаблона добавьте стили:

.order-storage label [disabled] + span {
    text-decoration: line-through;
    color: #525252;
}
.order-storage input[name="storage"] {
    margin-right: 7px;
}
.c-order__title {font-weight: bold;}
.order-storage p.st-error, .order-storage label{
    font-size: 13px;
    margin: 5px 0;
    display: block;
}
.order-storage p.st-error {
    color: red;
}
.order-storage.c-form {
    margin-bottom: 15px;
}

5. Перейдите на страницу оформления заказа и убедитесь, что информация о складах появились на странице;

Добавление дополнительных полей в оформление заказа

1. Через любой FTP-клиент или файловый менеджер на хостинге зайдите в корневую папку вашего сайта;
2. Перейдите в папку mg-templates/moguta/layout;
3. Скопируйте файл layout_op_fields.php и вставьте их в папку /layout нужного вам шаблона;
4. Перейдите в файл /views/order.php вашего шаблона;
5. Найдите тег:

<ul class="form-list">

- это тег списка в котором отображаются все поля для ввода данных в оформлении заказа, такие как email, телефон, адрес и тд.;
6. Найдите место куда бы вы хотели вставить дополнительные поля, например после поля для ввода адреса:

<li><textarea class="address-area" name="info"><?php echo $_POST['info'] ?></textarea></li>


7. и после него вставьте код:

<?php layout('op_fields'); ?>


8. В style.css добавьте:

li.c-order__list--item.c-order__radiobutton label {
    display: block;
    margin-bottom: 10px;
}
li.c-order__list--item.c-order__checkbox label {
    margin: 10px 0;

}
.wrapper li.c-order__list--item label input[type="checkbox"], .wrapper li.c-order__list--item label input[type="radio"]{
    width: unset;
}  


Добавление группированных характеристик

  1. Через любой FTP-клиент или файловый менеджер на хостинге зайдите в корневую папку вашего сайта;
  2. Перейдите в папку mg-core/layout;
  3. Скопируйте файл layout_prop_string.php и вставьте его в папку /layout нужного вам шаблона;
  4. Перейдите в файл /views/product.php вашего шаблона;
  5. Пролистайте ниже и найдите блок:

    <ul class="product-tabs">

  6. В нём каждый блок <li> - это вкладка, первой обычно идёт вкладка "Описание товара", потом "Комментарии" и тд. Соответственно нам нужно вставить в нужное место такую же вкладку <li> с текстом, например "Характеристики товара". Допустим мы хотим добавить второй вкладкой после описания, тогда после первого <li>......</li> вставляем:

    <?php if(!empty($data['stringsProperties'])): ?>
         <li><a href="#tab_property">Характеристики товара</a></li>
    <?php endif; ?>

    или, если предполагается локализация:

    <?php if(!empty($data['stringsProperties'])): ?>
         <li><a href="#tab_property"><?php echo lang('productCharacteristics'); ?></a></li>
    <?php endif; ?>

  7. Пролистайте чуть ниже и найдите блок

    <div class="product-tabs-container">

    Внутри него каждый <div> - это содержание вкладки, точно также сначала обычно описание товара, потом комментарии и тд.
    Мы решили характеристики вставить второй вкладкой после описания, так что находим строку:

    <div id="tab1" itemprop="description"><?php echo $data['description'] ?></div>

    И после неё вставляем:

    <?php if(!empty($data['stringsProperties'])): ?>
        <div id="tab_property">
               <?php layout('property',$data);?>                            
        </div>
    <?php endif; ?>

  8. В style.css добавьте:

    .prop-string .prop-item{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 15px 0;
        color: #333;
        font-size: 16px;
        list-style: none;
        position: relative;
        border-bottom: 2px dotted #000;
    }
    ul.prop-string {
        padding: 0;
    }
    .prop-string .prop-name {
        max-width: 90%;
        padding-right: 5px;
        display: inline-block;
    }
    .prop-string .prop-spec {
        float: right;
        width: 55%;
        padding-left: 5px;
        z-index: 1;
    }
    .prop-string .prop-spec, .prop-string .prop-name, .prop-string .prop-unit{
        -webkit-transition: all .4s;
        -o-transition: all .4s;
        transition: all .4s;
        margin-bottom: -8px;    
        color: #333;
        background: #fff;
    }
    .prop-string .name-group{
        position: relative;
        margin: 15px 0;
        color: #333;
        font-size: 16px;
        font-weight: 600;
        list-style: none;
    }
    .prop-string .prop-item:hover span{
        color: #5b3f97; /* Цвет строки при наведении */
    }
    .prop-string .prop-item{
        cursor: text;
    }

Характеристики добавлены.

Исправление появления слова "array" в примененных фильтрах

  1. Заходим в папку layout вашего шаблона;

  2. Открываем файл layout_apply_filter.php;

  3. Внутри тега с классом "apply-filter-item-value" находим строку:

    <?php echo $value; ?>  

  4. Заменяем её на:

    <?php echo $value['name']; ?>

Слово "array" больше не будет появляться в примененных фильтрах.

При удалении слова "array" из применённых фильтров появляется белый экран

 
  1. Заходим в папку layout вашего шаблона;

  2. Открываем файл layout_apply_filter.php;

  3. Находим строку:

     <input name="<?php echo $property['code'] . "[" . $cell . "]" ?>" value="<?php echo $property['values'][$cell] ?>" type="hidden"/> 

  4. И заменяем ее на:

    <input name="<?php echo $property['code'] . "[" . $cell . "]" ?>" value="<?php echo $property['values'][$cell]['val'] ?>" type="hidden"/>

Белый экран больше не будет появляться.

Добавление recAPTCHA при оформлении заказа


  1. Чтобы включить рекапчу при оформлении заказа откройте файл config.ini;
  2. Найдите строчку CAPTCHA_ORDER = 0;
  3. Исправьте 0 на 1;
  4. Откройте файл order.php в папке views;
  5. Для добавления рекапчи на страницу оформления заказа - в файле views/order.php найдите строку:

    <?php if ($data['captcha']) { ?>

  6. Измените ее на:

    <?php if ($data['captcha'] && !$data['recaptcha']) { ?>

  7. и добавить после блока капчи рекапчу:

    <?php if ($data['recaptcha']) { ?>
        ///контейнер от капчи///
           <?php echo MG::printReCaptcha(); ?>
       ///контейнер от капчи///
    <?php } ?>

  8. Должно получиться так:

    <?php if ($data['captcha'] && !$data['recaptcha']) { ?>
       <div class="checkCapcha" style="display:inline-block">
           <img src="captcha.html" width="140" height="36">
           <div class="capcha-text"><?php echo lang('captcha'); ?><span class="red-star">*</span>
           </div>
           <input type="text" name="capcha" class="captcha">
       </div>
    <?php } ?>
    <?php if ($data['recaptcha']) { ?>
       <div class="checkCapcha" style="display:inline-block">
           <?php echo MG::printReCaptcha(); ?>
       </div>
    <?php } ?>