Ассоциативные многомерные массивы для страницы товара с кнопкой предзаказа
Доброго времени суток, я являюсь полным нубом в JS, но возникла необходимость разбираться в боевых условиях. На 3-й день понял что не справлюсь сам и решил отписаться тут, может что-то подскажете.
Есть массив имеющий вид: список товаров -> общее описание, и в общем описании строка с вторичным массовом технических характеристик, количество которых может отличаться
var cmodels = {
"id1" : {
"Название" : "",
"Описание" : "",
"Изображение" : "",
"Цена" : "",
"Param" : {
"ТХ1" : "",
"ТХ2" : "",
"ТХ3" : "",
"ТХ4" : "",
"ТХ5" : ""
}
},
Изначально я хотел делать массив в виде список->товар->значение с обработчиком. Но такой вариант не прокатил потому что там где переменная ттх отсутствовала мне выдавало текст с надпистью undefined, что логично. теперь я хочу чтоб ТТХ были отдельным массивом считываемым полностью внутри массива основного.
//Массив начало//
var cmodels = {
"idcmodels1" : {
"Название" : "",
"Описание" : "<p></p>",
"Изображение" : "",
"Цена" : "",
"ТТХ1" : "<li></li>",
"ТТХ2" : "<li></li>",
"ТТХ3" : "<li></li>",
"ТТХ4" : "<li></li>",
"ТТХ5" : "<li></li>"
}
};
//Массив конец//
//Вывод в консоль//
console.log(cmodels);
//Вывод на страницу//
var out = '';
for (var key in cmodels)
{
out+= '<h5>'+cmodels[key].Название+'</h5>';
out+= '<p>'+cmodels[key].Описание+'</p>';
out+= '<p>'+cmodels[key].Цена+'</p>';
out+= '<ul>';
out+= '<img" src="';
out+= cmodels[key].Изображение;
out+= '">';
out+= cmodels[key].ТТХ1;
out+= cmodels[key].ТТХ2;
out+= cmodels[key].ТТХ3;
out+= cmodels[key].ТТХ4;
out+= cmodels[key].ТТХ5;
}
document.getElementById('out').innerHTML = out;
.Ещё нужно иметь возможность резать массив чтоб можно было вставить обработчик в 2 блока и вывести часть товара в одной половине экрана и часть в другой, чтото типа var cmodelsfirst = cmodels.slice(1, 3); или если подскажите как можно-ли вызвать данные частично через for или while по ключу (может есть какая то комбинация как в php). for ($row = 0; $row < 4; $row++) { foreach($cmodels[$row] as $key => $value) {} }; также нужно добавить в список кнопку с id товара по которой будет открываться блок фиксированный в центре экрана с формой обратной связи и описанием товара автоматом вставляемого в эту форму и отсылаемого на почту чтото типо этого но тут тоже непонятка как вставить именно нужные данные в div по id и главное как грамотно это прописать
window.onload= function() {
document.getElementById('toggler').onclick = function() {
openbox('box', this);
return false;
};
};
function openbox(id, toggler) {
var div = document.getElementById(id);
if(div.style.display == 'block') {
div.style.display = 'none';
toggler.innerHTML = '<i class="fa fa-bars fa-2x"
aria-hidden="true"></i>';
}
else {
div.style.display = 'block';
toggler.innerHTML = '<i class="fa fa-times fa-2x"
aria-hidden="true"></i>';
}
}
Вообщем если не сложно или кто-то сталкивался с подобным киньте упрощённый пример или подскажите что можно почитать в этом направлении. Заранее благодарен. |
Цитата:
|
Mikael86,
:write:
"Param": [{
title: "",
content: ""
}, {
title: "",
content: ""
}, {
title: "",
content: ""
}, {
title: "",
content: ""
}]
|
А что даст дополнительная квадратная скобка во вторичном массиве?
Есть одна мысль, проверю её отпишусь с результатом, но проблемма грамотного обработчика осталась. Если что выложу что получиться. И по поводу изучения баз данных это хорошо, но я так понимаю MySql это больше по PHP и нагружает сервер, а если делать через JS то нагрузка на комп пользователя, да и в JS привязать вывод окна заказа с товаром. К тому же как я говорил учу в бою, по ночам, после основной работы которая с программированием абсолютно не совместима, времени мало чтоб полноценно читать, хотелось бы короткий ответ с примерами. |
Цитата:
И в JS нет ассоциативных массивов. |
Решил через PHP и плагин JS magnificPopup
По итогам на данный момент имеем массив вида
$cmodels = array(
array(
"Название" => '',
"Описание" => '<p></p>',
"Изображение" => '',
"Цена" => '',
"ТТХ1" => '<li></li>',
"ТТХ2" => '<li></li>',
"ТТХ3" => '<li></li>',
"ТТХ4" => '<li></li>',
"ТТХ5" => '<li>Цветной дисплей/li>',
"CmodelsId" => 'CmodelsId1'
),
);
И обработчик корявый и обьёмный, но рабочий
for ($row = 4; $row < 10; $row++) {
foreach($cmodels[$row] as $key => $value)
{
$counter = 1;
echo '<div class="row">' ;
echo '<div class="col-1"></div>' ;
echo '<div class="col-10">' ;
echo '<center>' . '<h5>' . $cmodels[$row]["Название"] . '</h5>' . '</center>';
echo '<p>' . $cmodels[$row]["Описание"] . '</p>';
echo '</div>';
echo '<div class="col-1"></div>' ;
echo '<div class="col-12">' ;
echo '<p>' . $cmodels[$row]["Цена"] . '</p>';
echo '<ul>';
echo '<img class="RightImg30" src="'; echo $cmodels[$row]["Изображение"]; echo '">';
echo $cmodels[$row]["ТТХ1"]; echo $cmodels[$row]["ТТХ2"]; echo $cmodels[$row]["ТТХ3"];
echo $cmodels[$row]["ТТХ4"]; echo $cmodels[$row]["ТТХ5"]; echo $cmodels[$row]["ТТХ6"];
echo $cmodels[$row]["ТТХ7"]; echo $cmodels[$row]["ТТХ8"]; echo $cmodels[$row]["ТТХ9"];
echo $cmodels[$row]["ТТХ10"]; echo $cmodels[$row]["ТТХ11"]; echo $cmodels[$row]["ТТХ12"];
echo $cmodels[$row]["ТТХ13"]; echo $cmodels[$row]["ТТХ14"]; echo $cmodels[$row]["ТТХ15"];
echo $cmodels[$row]["ТТХ16"]; echo $cmodels[$row]["ТТХ17"]; echo $cmodels[$row]["ТТХ18"];
echo $cmodels[$row]["ТТХ19"]; echo $cmodels[$row]["ТТХ20"]; echo $cmodels[$row]["ТТХ21"];
echo $cmodels[$row]["ТТХ22"]; echo '</ul>';
echo '<a class="BuyButton popup-with-zoom-anim" href="#'; echo $cmodels[$row]["CmodelsId"]; echo '">открыть</a>';
echo '</div>';
echo '</div>';
echo '<div id="'; echo $cmodels[$row]["CmodelsId"]; echo '" class="popup-window zoom-anim-dialog mfp-hide">' ;
echo '<center><h4>'; echo $cmodels[$row]["Название"]; echo '</h4></center>';
echo '<ul>';
echo '<img class="RightImg30" src="'; echo $cmodels[$row]["Изображение"]; echo '">';
echo $cmodels[$row]["ТТХ1"]; echo $cmodels[$row]["ТТХ2"]; echo $cmodels[$row]["ТТХ3"];
echo $cmodels[$row]["ТТХ4"]; echo $cmodels[$row]["ТТХ5"]; echo $cmodels[$row]["ТТХ6"];
echo $cmodels[$row]["ТТХ7"]; echo $cmodels[$row]["ТТХ8"]; echo $cmodels[$row]["ТТХ9"];
echo $cmodels[$row]["ТТХ10"]; echo $cmodels[$row]["ТТХ11"]; echo $cmodels[$row]["ТТХ12"];
echo $cmodels[$row]["ТТХ13"]; echo $cmodels[$row]["ТТХ14"]; echo $cmodels[$row]["ТТХ15"];
echo $cmodels[$row]["ТТХ16"]; echo $cmodels[$row]["ТТХ17"]; echo $cmodels[$row]["ТТХ18"];
echo $cmodels[$row]["ТТХ19"]; echo $cmodels[$row]["ТТХ20"]; echo $cmodels[$row]["ТТХ21"];
echo $cmodels[$row]["ТТХ22"]; echo '</ul>';
echo '<div class="SeparateRow"></div>';
echo '<form id="form">';
echo '<div class="container"><div class="row">';
echo '<div class=" col-md-12 col-lg-4">';
echo '<input type="text" name="nameBuyform" required="required" placeholder="Как к вам обращаться"/>';
echo '</div><div class=" col-md-12 col-lg-4">';
echo '<input type="text" name="phoneBuyform" required="required" placeholder="Ваш телефон"/>';
echo '</div><div class=" col-md-12 col-lg-4">';
echo '<input type="text" name="mailBuyform" required="required" placeholder="Адресс электронной почты"/>';
echo '<input type="submit" value="Заказать звонок"/>';
echo '</div>';
echo '</div></div>';
echo '</form>';
echo '</div>';
$counter ++;
if ($counter>1) break; //количество товаров
}
}
Для того чтоб вызывать всплывающие окна использовано В Head сайта <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha256-PZLhE6wwMbg4AB3d35ZdBF9HD/dI/y4RazA3iRDurss=" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha256-P93G0oq6PBPWTP1IR8Mz/0jHHUpaWL0aBJTKauisG7Q=" crossorigin="anonymous"></script> Так же небольшая стилизация css контейнера всплывающего окна и скрипт инициализатор под обработчиками массивов
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: true,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
$('.popup-with-move-anim').magnificPopup({
type: 'inline',
fixedContentPos: true,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
});
PHP как и JS ток начал учить, так что за кривизну кода не бейте. Осталось вживить в этот конструктив форму обратной связи с данными для обратной связи и передачей полного описания товара поставщику, но вдруг кому то пригодиться в таком виде. |
Mikael86,
В PHP циклы пока не изобрели еще? Хорошо что не начал его изучать ;) |
Цитата:
|
Nexus,
echo $cmodels[$row]["ТТХ1"]; echo $cmodels[$row]["ТТХ2"]; echo $cmodels[$row]["ТТХ3"];
echo $cmodels[$row]["ТТХ4"]; echo $cmodels[$row]["ТТХ5"]; echo $cmodels[$row]["ТТХ6"];
echo $cmodels[$row]["ТТХ7"]; echo $cmodels[$row]["ТТХ8"]; echo $cmodels[$row]["ТТХ9"];
echo $cmodels[$row]["ТТХ10"]; echo $cmodels[$row]["ТТХ11"]; echo $cmodels[$row]["ТТХ12"];
echo $cmodels[$row]["ТТХ13"]; echo $cmodels[$row]["ТТХ14"]; echo $cmodels[$row]["ТТХ15"];
echo $cmodels[$row]["ТТХ16"]; echo $cmodels[$row]["ТТХ17"]; echo $cmodels[$row]["ТТХ18"];
echo $cmodels[$row]["ТТХ19"]; echo $cmodels[$row]["ТТХ20"]; echo $cmodels[$row]["ТТХ21"];
echo $cmodels[$row]["ТТХ22"];
Я вот про это. Тут явно повторяющийся код. |
Цитата:
|
| Часовой пояс GMT +3, время: 08:59. |