Форум Сайтостроение Веб-строительство

Данные со страницы в телеграм

I
На сайте с 13.07.2018
Offline
0
iyul
520

Прошу помощи , подсказки для решения моей задачи.

Сделать хочу что бы не только Имя и Телефон приходило в телеграмм ,Но и выбранные позиции отправлялись тоже. то-есть данные которые меняет js в product.html .

я не нашел решение самостоятельно

В низу все коды для понимания всей картины. Спасибо

Имеется 2 файла html, index.php(весь сайт) и product.html(блоки для вывода, для js)

Строение product.html 

<li data-selection="colors" class="builder-step first-load">

	<section class="cd-step-content">

		<header>

			<h1>Select Color</h1>

			<span class="steps-indicator">Step <b>2</b> of 4</span>

		</header>

		

		<ul class="cd-product-previews">

			<li class="selected"><img src="img/product01_col01.jpg" alt="Product Preview" class="product-preview"></li>

			<li><img src="img/product01_col02.jpg" alt="Product Preview" class="product-preview"></li>

			<li><img src="img/product01_col03.jpg" alt="Product Preview" class="product-preview"></li>

		</ul>



		<ul class="cd-product-customizer">

			<li data-content="White - $0" data-price="0" class="selected"><a data-color="white" href="#0">White - $0</a></li>

			<li data-content="Mineral Grey - $550" data-price="550"><a data-color="grey" href="#0">Mineral Grey - $550</a></li>

			<li data-content="Orange Metallic - $550" data-price="550"><a data-color="orange" href="#0">Orange Metallic - $550</a></li>

		</ul>

	</section>

</li>



<li data-selection="accessories" class="builder-step first-load">

	<section class="cd-step-content">

		<header>

			<h1>Accessories</h1>

			<span class="steps-indicator">Step <b>3</b> of 4</span>

		</header>



		<ul class="accessories-list options-list">

			<li class="js-option" data-price="1080">

				<p>BMW Charging Station</p>



				<span class="price">$1.080</span>

				

				<div class="check"></div>

			</li>



			<li class="js-option" data-price="1895">

				<p>BMW Maintenance Program Upgrade</p>

				

				<span class="price">$1.895</span>



				<div class="check"></div>

			</li>



			<li class="js-option" data-price="975">

				<p>1 Year BMW Maintenance Program Upgrade</p>



				<span class="price">$975</span>

				

				<div class="check"></div>

			</li>

		</ul>

	</section>

</li>



<li data-selection="summary" class="builder-step first-load">

	<section class="cd-step-content">

		<header>

			<h1>Summary</h1>

			<span class="steps-indicator">Step <b>4</b> of 4</span>

		</header>

		

		<ul class="summary-list">

			<li>

				<h2>Model</h2>



				<img src="img/product01_col01.jpg" alt="Alfa Romeo Giulietta" class="product-preview">

				

				<h3>BMW i3</h3>

				

				<p>

					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit saepe facilis hic, unde, numquam vel. Blanditiis sed laboriosam ratione nulla atque molestias at explicabo aperiam reprehenderit culpa nihil, quis totam cupiditate dolores in quisquam magnam inventore nobis, rem adipisci eveniet illum.	

				</p>

			</li>



			<li data-summary="colors">

				<h2>Color</h2>

				

				<span class="summary-color">

					<em class="color-swatch" data-color="red"></em>

					<em class="color-label">Red Passion</em>

				</span>

			</li>



			<li data-summary="accessories">

				<h2>Accessories</h2>



				<ul class="summary-accessories">

					<li>

						<p>Uconnect 6.5" colour touchscreen radio navigation sytem with Bluetooth &amp; DAB ($1050)</p>

					</li>



					<li>

						<p>Audio &amp; telephone controls on steering wheels ($750)</p>

					</li>

				</ul>

			</li>

		</ul>

	</section>

</li>

Имеется JS отвечающий за выборы и в конце изменениеи product.html где показывает общий выбор.

Строение js кусок отвечающий за замену product.html 

	ProductBuilder.prototype.createSummary = function b() {

		var self = this;

		this.steps.each(function(){

			//this function may need to be updated according to your builder steps and summary

			var step = $(this);

			if( $(this).data('selection') == 'colors' ) {

				//create the Color summary

				var colorSelected = $(this).find('.cd-product-customizer').find('.selected'),

					color = colorSelected.children('a').data('color'),

					colorName = colorSelected.data('content'),

					imageSelected = $(this).find('.cd-product-previews').find('.selected img').attr('src');

				

				self.summary.find('.summary-color').find('.color-label').text(colorName).siblings('.color-swatch').attr('data-color', color);

				self.summary.find('.product-preview').attr('src', imageSelected);

			} else if( $(this).data('selection') == 'accessories' ) {

				var selectedOptions = $(this).find('.js-option.selected'),

					optionsContent = '';



				if( selectedOptions.length == 0 ) {

					optionsContent = '<li><p>No Accessories selected;</p></li>';

				} else {

					selectedOptions.each(function(){

						optionsContent +='<li><p>'+$(this).find('p').text()+'</p></li>';

					});

				}



				self.summary.find('.summary-accessories').children('li').remove().end().append($(optionsContent));

			}





		});

Так же стоит кнопка обратной связи для приема заказа в телеграм 

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

if (!empty($_POST['name']) && !empty($_POST['phone'])){

  if (isset($_POST['name'])) {

    if (!empty($_POST['name'])){

  $name = strip_tags($_POST['name']);

  $nameFieldset = "Имя пославшего:";

  }

}

if (isset($_POST['phone'])) {

  if (!empty($_POST['phone'])){

  $phone = strip_tags($_POST['phone']);

  $phoneFieldset = "Телефон: ";

  }

}

if (isset($_POST['theme'])) {

  if (!empty($_POST['theme'])){

  $theme = strip_tags($_POST['theme']);

  $themeFieldset = "тема: ";

  }

}



$token = "";

$chat_id = "-1";

$tokenvk = "";

$vk_id = "";

$arr = array(

  $nameFieldset => $name,

  $phoneFieldset => $phone,

  $themeFieldset => $theme,

);

foreach($arr as $key => $value) {

  $txt .= "<b>".$key."</b> ".$value."%0A";

};



$sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");

if ($sendToTelegram) {

 

  echo '<p class="success">Спасибо за отправку вашего сообщения!</p>';

    return true;

} else {

  echo '<p class="fail"><b>Ошибка. Сообщение не отправлено!</b></p>';

}

} else {

  echo '<p class="fail">Ошибка. Вы заполнили не все обязательные поля!</p>';

}

} else {

header ("Location: /");

}

/*** PHP CODE ***/

/****************/

$prxy       = 'https://217.61.108.24:80'; // адрес:порт прокси

$prxy_auth = 'auth_user:auth_pass';       // логин:пароль для аутентификации

/****************/

$ch  = curl_init();

curl_setopt_array ($ch, array(CURLOPT_URL => $sendToTelegram, CURLOPT_RETURNTRANSFER => true)); 

/********************* Код для подключения к прокси *********************/

    curl_setopt($ch, CURLOPT_PROXYTYPE, CURLPROXY_SOCKS5);  // тип прокси 

    curl_setopt($ch, CURLOPT_PROXY,  $prxy);                 // ip, port прокси

    curl_setopt($ch, CURLOPT_PROXYUSERPWD, $prxy_auth);  // авторизация на прокси

    curl_setopt($ch, CURLOPT_HEADER, false);                // отключение передачи заголовков в запросе 

    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);            // возврат результата в качестве строки

    curl_setopt($ch, CURLOPT_POST, 1);                      // использование простого HTTP POST

    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);        // отмена проверки сертификата удаленным сервером

/***********************************************************************/

$result = curl_exec($ch);  // DIGITAL RESISTANCE!

curl_close($ch);

?>
webiumpro
На сайте с 20.03.2017
Offline
39
webiumpro
#1

Добавьте в форму скрытое поле, а в js-файле, который меняет product.html, добавьте метод добавления нужных вам позиций в это скрытое поле. В php вам останется просто к имени и телефону добавить еще значение из этого поля

Копирование лендингов. Разработка на фреймворке сервисов. Создание сайтов (/ru/forum/994418)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий