Ассоциативные многомерные массивы для страницы товара с кнопкой предзаказа
Доброго времени суток, я являюсь полным нубом в 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, время: 11:50. |