Если ваш шаблон разрабатывался для версии 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 lang('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 ;
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-логотип, который вы загрузили через админку сайта, то в большинстве случаев это решается с помощью добавления в файл стилей кода:
.logo-block img {
width: 100%;
max-width: 300px;
}
<?php layout('icons'); ?> <!-- Подключение svg иконок -->
<div class="selects">
<?php layout('language_select'); ?> <!-- Для выбора языка -->
<?php layout('currency_select'); ?> <!-- Для выбора валюты -->
</div>
4. Вы также можете добавить следующее правило для каждой цветовой схемы:
.selects svg {
fill: #*Цвет*;
}
5. В файл стилей style.css добавьте:
svg.icon.icon--flag, svg.icon.icon--currency {
position: relative;
top: 2px;
}
svg:not(:root) {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
overflow: hidden;
max-width: 100%;
max-height: 100%;
pointer-events: none;
}
[class*='icon--'] {
width: 1em;
height: 1em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
fill: #000;
}
.selects {
display: inline-block;
}
.selects select {
width: 20px;
background-color: transparent;
border: none;
}
Добавление складов на страницу товара:
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;
}
Пролистайте ниже и найдите блок:
<ul class="product-tabs">
В нём каждый блок <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; ?>
Пролистайте чуть ниже и найдите блок
<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; ?>
В 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;
}
Характеристики добавлены.
Заходим в папку layout вашего шаблона;
Открываем файл layout_apply_filter.php;
Внутри тега с классом "apply-filter-item-value" находим строку:
<?php echo $value; ?>
Заменяем её на:
<?php echo $value['name']; ?>
Слово "array" больше не будет появляться в примененных фильтрах.
Заходим в папку layout вашего шаблона;
Открываем файл layout_apply_filter.php;
Находим строку:
<input name="<?php echo $property['code'] . "[" . $cell . "]" ?>" value="<?php echo $property['values'][$cell] ?>" type="hidden"/>
И заменяем ее на:
<input name="<?php echo $property['code'] . "[" . $cell . "]" ?>" value="<?php echo $property['values'][$cell]['val'] ?>" type="hidden"/>
Белый экран больше не будет появляться.
Для добавления рекапчи на страницу оформления заказа - в файле views/order.php найдите строку:
<?php if ($data['captcha']) { ?>
Измените ее на:
<?php if ($data['captcha'] && !$data['recaptcha']) { ?>
и добавить после блока капчи рекапчу:
<?php if ($data['recaptcha']) { ?>
///контейнер от капчи///
<?php echo MG::printReCaptcha(); ?>
///контейнер от капчи///
<?php } ?>
Должно получиться так:
<?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 } ?>
В файле views/order.php найдите строку:
<?php echo MG::numberFormat($delivery['cost']); ?><?php echo ' ' . $data['currency']; ?>
И замените на:
<span class="deliveryPrice"> <?php echo MG::numberFormat($delivery['cost']); ?></span><?php echo ' ' . $data['currency']; ?>
В файле views/order.php найдите строку:
<label data-delivery-date="<?php echo $delivery['date']; ?>">
И замените на:
<label data-delivery-date="<?php echo $delivery['date']; ?>" data-delivery-intervals='<?php echo $delivery["interval"]; ?>'>
После блока с выбором даты доставки с классом "delivery-date" добавьте блок с интервалами доставки:
<div class="delivery-interval" style="display:none;">
<div class="delivery-text">Время доставки:</div>
<select name="delivery_interval"></select>
</div>