Код в js файле
Тут счётчик щитает количество товара
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("order_form");
const nameInput = document.getElementById("name");
const phoneInput = document.getElementById("phone");
const deliveryInput = document.getElementById("delivery");
const submitButton = document.querySelector(".form-btn");
const sizeInputs = document.querySelectorAll('input[name="product_size"]');
const articulInput = document.querySelector('input[name="product_articul"]');
// валидация
function validateInputs() {
const isNameValid = validateInputLength(nameInput, 3, 20); // неменьше 3 и не больше 20 символов
const isPhoneValid = validateInputLength(phoneInput, 17, 17); // при достижении 17 сымволов с учётом маски
const isDeliveryValid = validateInputLength(deliveryInput, 3, 100); // неменьше 3 и не больше 100 символов
return isNameValid && isPhoneValid && isDeliveryValid;
}
// функция валидации
function validateInputLength(input, minLength, maxLength) {
const valueLength = input.value.trim().length;
return valueLength >= minLength && valueLength <= maxLength;
}
// функция доступа кнопки, если валидация по всем полям проходит, кнопка отправки доступна
function toggleButtonState() {
submitButton.disabled = !validateInputs();
submitButton.style.backgroundColor = submitButton.disabled ? "#ea392cbd" : "";
}
// функция окрашивания бордера инпута, если валидация по какомуто полю не проходит рамка окрашивается в касный цвет
function setInputError(input, isError) {
if (isError) {
input.classList.add("input-error");
} else {
input.classList.remove("input-error");
}
}
// функция проверки длинны внесённых сымволов
function handleInputValidation(input, minLength, maxLength) {
const valueLength = input.value.trim().length;
setInputError(input, valueLength < minLength || valueLength > maxLength);
}
function handleInputChange(event) {
toggleButtonState();
const { target } = event;
console.log("target === nameInput", target === nameInput);
if (target === nameInput) {
handleInputValidation(nameInput, 3, 20);
} else if (target === phoneInput) {
handleInputValidation(phoneInput, 17, 17);
} else if (target === deliveryInput) {
handleInputValidation(deliveryInput, 3, 100);
}
}
[nameInput, phoneInput, deliveryInput].forEach((input) => {
input.addEventListener("input", handleInputChange);
});
// в случае с радыо кнопками
sizeInputs.forEach(function (sizeInput) {
// Проверка при загрузке страницы
if (sizeInput.checked) {
updateArticul(sizeInput.value);
}
// Функция передачи артикулов в keyCRM при изменении выбора размера
sizeInput.addEventListener("change", function () {
updateArticul(this.value);
});
});
function updateArticul(selectedSize) {
let articul;
switch (selectedSize) {
case "XS": // значение из атрибута value инпута для сравнения
articul = "leg-pu-fl-XS"; //<= меняем артикул
break;
case "S":
articul = "leg-pu-fl-S"; //<= меняем артикул
break;
case "M":
articul = "leg-pu-fl-M"; //<= меняем артикул
break;
case "L":
articul = "leg-pu-fl-L"; //<= меняем артикул
break;
case "XL":
articul = "leg-pu-fl-XL"; //<= меняем артикул
break;
case "XXL":
articul = "leg-pu-fl-XXL"; //<= меняем артикул
break;
default:
articul = "";
break;
}
articulInput.value = articul;
}
// функция предотвращает перезнаправление на фаил php после отправки + выводит сообщение успезха или не успеха
form.addEventListener("submit", function (event) {
event.preventDefault();
const formData = new FormData(form);
const xhr = new XMLHttpRequest();
xhr.open("POST", "send.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
window.location.href = "success.html";
} else {
alert("Помилка відправки форми. Будьласка спробуйте пізнійше.");
}
}
};
xhr.send(new URLSearchParams(formData));
form.reset();
});
toggleButtonState();
});
Код в php файле
Скрипт отправки заявки на сервис
<?php
$data = [
"source_id" => 19, // до якого джерела в KeyCRM додавати замовлення
"buyer" => [
"full_name"=> $_POST['name'], // ПІБ покупця
"email"=> $_POST['email'], // email покупця
"phone"=> $_POST['phone'] // номер телефону покупця
],
"shipping" => [
"shipping_address_city"=> $_POST['address_city'], // місто покупця
"shipping_receive_point"=> $_POST['address_street'], // вулиця, номер дому або відділення Нової Пошти
"shipping_address_country"=> $_POST['address_country'], // країна
"shipping_address_region"=> $_POST['address_region'], // область/штат/регіон
"shipping_address_zip"=> $_POST['address_zip'] // індекс
],
"products"=> [
[
"price"=> $_POST['product_price'], // ціна продажу
"quantity"=> $_POST['product_quantity'], // кількість проданого товару
"name"=> "Флісовий костюм в рубчик", // назва товару
"sku"=> $_POST['product_articul'], // артикул
"picture"=> 'http://suppressors.space/img/advantages-img-1.jpg',// картинка передається тільки URL
"properties"=>[
[
"name"=> "Color",//название лейбла в СРМ
"value"=> $_POST['product_color']//передаём цвет из инпута
],
[
"name"=> "Size",
"value"=> $_POST['product_size']
]
]
]
]
];
$data_string = json_encode($data);
// Ваш унікальний API ключ KeyCRM
$token = '';
// отправляем на сервер
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://openapi.keycrm.app/v1/order");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS,$data_string);
curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
"Content-type: application/json",
"Accept: application/json",
"Cache-Control: no-cache",
"Pragma: no-cache",
'Authorization: Bearer ' . $token)
);
$result = curl_exec($ch);
curl_close($ch);