Показать сообщение отдельно
  #6 (permalink)  
Старый 14.03.2018, 22:49
Аспирант
Отправить личное сообщение для Mikael86 Посмотреть профиль Найти все сообщения от Mikael86
 
Регистрация: 01.02.2018
Сообщений: 33

Решил через 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.
Ответить с цитированием