Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.03.2018, 00:24
Интересующийся
Отправить личное сообщение для Mikael86 Посмотреть профиль Найти все сообщения от Mikael86
 
Регистрация: 01.02.2018
Сообщений: 17

Ассоциативные многомерные массивы для страницы товара с кнопкой предзаказа
Доброго времени суток, я являюсь полным нубом в 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, 13.03.2018 в 00:32.
Ответить с цитированием
  #2 (permalink)  
Старый 13.03.2018, 08:53
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,151

Сообщение от Mikael86
подскажите что можно почитать в этом направлении
Может подойти любая книга по роектированию БД...
Ответить с цитированием
  #3 (permalink)  
Старый 13.03.2018, 09:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,059

Mikael86,

"Param": [{
    title: "",
    content: ""
}, {
    title: "",
    content: ""
}, {
    title: "",
    content: ""
}, {
    title: "",
    content: ""
}]
Ответить с цитированием
  #4 (permalink)  
Старый 13.03.2018, 18:25
Интересующийся
Отправить личное сообщение для Mikael86 Посмотреть профиль Найти все сообщения от Mikael86
 
Регистрация: 01.02.2018
Сообщений: 17

А что даст дополнительная квадратная скобка во вторичном массиве?

Есть одна мысль, проверю её отпишусь с результатом, но проблемма грамотного обработчика осталась. Если что выложу что получиться.

И по поводу изучения баз данных это хорошо, но я так понимаю MySql это больше по PHP и нагружает сервер, а если делать через JS то нагрузка на комп пользователя, да и в JS привязать вывод окна заказа с товаром. К тому же как я говорил учу в бою, по ночам, после основной работы которая с программированием абсолютно не совместима, времени мало чтоб полноценно читать, хотелось бы короткий ответ с примерами.

Последний раз редактировалось Mikael86, 13.03.2018 в 18:29.
Ответить с цитированием
  #5 (permalink)  
Старый 13.03.2018, 18:56
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,642

Сообщение от Mikael86
но я так понимаю MySql это больше по PHP и нагружает сервер
То есть есть все делать на клиенте, то и запроса к базе не будет? Вы в любом случае будете тревожить базу. Но только MySQL не сможет вам выдать готовое дерево, если вы этого хотите. Но зато он может подготовить данные в виде, которое позволит получить дерево на клиенте меньшей кровью.

И в JS нет ассоциативных массивов.
Ответить с цитированием
  #6 (permalink)  
Старый 14.03.2018, 22:49
Интересующийся
Отправить личное сообщение для Mikael86 Посмотреть профиль Найти все сообщения от Mikael86
 
Регистрация: 01.02.2018
Сообщений: 17

Решил через 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, 14.03.2018 в 22:54.
Ответить с цитированием
  #7 (permalink)  
Старый 14.03.2018, 23:25
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,393

Mikael86,
В PHP циклы пока не изобрели еще?
Хорошо что не начал его изучать
Ответить с цитированием
  #8 (permalink)  
Старый 15.03.2018, 00:18
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,585

Сообщение от j0hnik
В PHP циклы пока не изобрели еще?
Тс же использует "for" и "foreach"...
Ответить с цитированием
  #9 (permalink)  
Старый 15.03.2018, 00:34
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,393

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"];


Я вот про это. Тут явно повторяющийся код.
Ответить с цитированием
  #10 (permalink)  
Старый 15.03.2018, 06:03
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,642

Сообщение от j0hnik
В PHP циклы пока не изобрели еще?
PHP намного богаче инструментарием обработки данных, а уж табличных тем более. Но эти портянки не следствие бедности ЯП, такое можно было бы наблюдать и на клиенте, и не потому, что JS беден, а потому, что не думали надо представлением данных.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
Обмен сообщениями между js загруженной страницы и расширением для браузера prihod Events/DOM/Window 6 11.12.2011 20:51