Добавление элемента в инфоблок AJAX, без компонента с использованием API 1С-Битрикс, а так же загрузка изображений анонса, детальной страницы, свойства и доп изображения элемента множественное свойство типа файл
Для вызова формы в всплывающем окне в /bitrix/templates/Ваш_шаблон/header.php подключаем bootstrat.js и bootstrap.css, (bootstrat.js и bootstrap.css) можно кастомизировать и подключить то, что отвечает за вызов диалоговой окна и стили формы
Создаем форму добавления элемента и добавляем например /bitrix/templates/Ваш_шаблон/footer.php
//Кнопка для вызова формы в всплывающем окне
<button data-toggle="modal" data-target="#add-product-modal" class="btn_blue add-ad">Разместить объявление</button>
<div id="add-product-modal" class="modal fade add-product-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"></span></button>
<h4 class="modal-title">Разместить свое объявление</h4>
</div>
<div class="modal-body">
<div class="message error hide"></div>
<form id="add-product-form" enctype="multipart/form-data">
<fieldset class="form-group">
<label>Заголовок</label>
<input type="text" name="name" class="form-control" maxlength="255" placeholder="Например, продажа вещей">
</fieldset>
<fieldset class="form-group">
<label>Подробное описание</label>
<textarea name="description" class="form-control" rows="3" placeholder="Описание..."></textarea>
</fieldset>
<fieldset class="form-group">
<div class="upload-div">
<label>Главное фото товара(jpg, png, gif)</label>
<label>
<input type="file" name="image">
</label>
</div>
<div>
<label>Дополнительные фото(jpg, png, gif)</span></label>
<span>
<input type="file" name="more_photos[]">
<input type="file" name="more_photos[]">
<input type="file" name="more_photos[]">
</span>
</div>
</fieldset>
<fieldset class="form-group">
<label for="formGroupInput">Ваши контакты</label>
<div class="contact-icons">
<div class="icon-phone"></div>
<div class="icon-email"></div>
<div class="icon-skype"></div>
</div>
<input type="text" name="phone" class="form-control input-phone" placeholder="Укажите телефон">
<input type="text" name="email" class="form-control input-email hide" placeholder="Укажите Email">
<input type="text" name="skype" class="form-control input-skype hide" placeholder="Укажите Skype">
</fieldset>
<div class="modal-footer">
<fieldset class="form-group">
<div>
<button type="submit" class="btn_blue sale-submit">Разместить объявление</button>
</div>
</fieldset>
</div>
</form>
</div>
</div>
</div>
</div>
- Создаем папку в шаблоне нашего сайта /bitrix/templates/Ваш_шаблон/js/
- в /bitrix/templates/Ваш_шаблон/js/ создаем файл main.js для наших js скриптов
- в шапке нашего шаблона /bitrix/templates/Ваш_шаблон/header.php подключаем jquery библиатеку и наш main.js
- в /bitrix/templates/Ваш_шаблон/main.js пишем код javascript добавлении элемента
$(document).ready(function(){
$('#add-product-form .submit').click(function(e){
var formData = new FormData($('#add-product-form')[0]); //используем FormData для загрузки изображении аноса детальной страницы и дополнительные фото элемента
$.ajax({
type: 'POST',
url: '/ajax/add_product.php',
data: formData, // если загрузка файлов не нужно, можем место formData написать так $('#add-product-form').serialize()
dataType: 'json',
async: false,
cache: false,
contentType: false,
processData: false,
success: function(result){
if (result.status) {
$(".add-product-modal .message").html(result.message);
$(".add-product-modal .message").removeClass("hide");
if (result.status=='success'){
$(".add-product-modal .message").removeClass("error");
$(".add-product-modal .message").addClass("success");
$('#add-product-form')[0].reset();
}
}
}
});
e.preventDefault();
return false;
});
});
- В корне сайта создаем папку с именем ajax
- в эту папку создаем файл add_product.php и здесь пишем наш код добавления элемента
<?php
define("NO_KEEP_STATISTIC", true);
define("NOT_CHECK_PERMISSIONS", true);
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
?>
<?
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
if( !empty($_REQUEST['name']) and !empty($_REQUEST['description']) ){
CModule::IncludeModule('iblock');
$el = new CIBlockElement;
$PROP = array();
$PROP['PHONE'] = $_POST['phone']; //Свойства могут быт разные это для пимера
$iblock_id = 6;
$section_id = false;
if($_POST['section_id']>0){ $section_id = $_POST['section_id'];}
for($i = 0; $i < count($_FILES["more_photos"]['name']); $i++){
$file = Array('name' => $_FILES["more_photos"]['name'][$i],
'size' => $_FILES["more_photos"]['size'][$i],
'tmp_name' => $_FILES["more_photos"]['tmp_name'][$i],
'type' => $_FILES["more_photos"]['type'][$i]
);
$arFiles[] = array('VALUE' => $file, 'DESCRIPTION' => '');
}
$PROP['MORE_PHOTOS'] = $arFiles; //Передаем массив файлов для для свойства MORE_PHOTOS (доп. фото элемента)
$arFields = Array(
"DATE_CREATE" => date("d.m.Y H:i:s"), //Передаем дата создания
"CREATED_BY" => $GLOBALS['USER']->GetID(), //Передаем ID пользователя кто добавляет
"IBLOCK_SECTION_ID" => $section_id, //ID раздела ели есть
"IBLOCK_ID" => $iblock_id, //ID информационного блока
"PROPERTY_VALUES"=> $PROP, // Передаем массив значении для свойств
"NAME" => strip_tags($_REQUEST['name']),
"ACTIVE" => "Y", //поумолчанию делаем активным или ставим N для отключении поумолчанию
"PREVIEW_TEXT" => mb_substr(strip_tags($_REQUEST['description']), 0, 100), //отрезаем лишнее и ограничиваем до 100 символов
"DETAIL_TEXT" => strip_tags($_REQUEST['description'], '<br></br><p>'), //отрезаем лишнее
"PREVIEW_PICTURE" =>$_FILES['image'], //изображение для анонса
"DETAIL_PICTURE" => $_FILES['image'] //изображение для детальной страницы
);
if($ID = $el->Add($arFields)){
$result['status'] = 'success';
$result['message'] = 'Элемент успешно добавлена';
}
else{
$result['status'] = 'error';
$result['message'] = $el->LAST_ERROR;
}
}else{
$result['status'] = 'error';
$result['message'] = 'Все поля обязательны для заполнения';
}
echo json_encode($result); //передаем результат формата JSON
}
?>