У вас не указан путь к файлам "form2js.js" и "json2.js". Данные файлы должны быть загружены в разделе Сайт -> Редактор шаблонов. Сами файлы должны быть в последствии подключены в шаблоне "HTML" перед строкой
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
в итоге должно получится
<script type="text/javascript" src="{ASSETS_JS_PATH}form2js.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}json2.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
далее в файл стилей main.css необходимо добавить код
#city {
width: 25em;
}
#log {
height: 200px;
width: 600px;
overflow: auto;
}
после этого в файл main.js необходимо добавить код
/**
* автокомплит
* подтягиваем список городов ajax`ом, данные jsonp в зависмости от введённых символов
*/
$(function() {
$("#city").autocomplete({
source : function(request, response) {
$.ajax({
url : "http://api.cdek.ru/city/getListByTerm/jsonp.php?callback=?",
dataType : "jsonp",
data : {
q : function() {
return $("#city").val()
},
name_startsWith : function() {
return $("#city").val()
}
},
success : function(data) {
response($.map(data.geonames, function(item) {
return {
label : item.name,
value : item.name,
id : item.id
}
}));
}
});
},
minLength : 1,
select : function(event, ui) {
//console.log("Yep!");
$('#receiverCityId').val(ui.item.id);
}
});
/**
* ajax-запрос на сервер для получения информации по доставке
*/
$('#cdek').submit(function() {
var formData = form2js('cdek', '.', true, function(node) {
if(node.id && node.id.match(/callbackTest/)) {
return {
name : node.id,
value : node.innerHTML
};
}
});
var formDataJson = JSON.stringify(formData);
// console.log(JSON.stringify(formData));
document.getElementById('testArea').innerHTML = 'Отправляемые данные: <br />' + JSON.stringify(formData, null, ' ');
$.ajax({
url : 'http://api.cdek.ru/calculator/calculate_price_by_jsonp.php',
jsonp : 'callback',
data : {
"json" : formDataJson
},
type : 'GET',
dataType : "jsonp",
success : function(data) {
console.log(data);
if(data.hasOwnProperty("result")) {
document.getElementById('resArea').innerHTML = 'Цена доставки: ' + data.result.price + '<br />Срок доставки: ' + data.result.deliveryPeriodMin + ' - ' + data.result.deliveryPeriodMax + 'дн. ' + '<br />Планируемая дата доставки: c ' + data.result.deliveryDateMin + ' по ' + data.result.deliveryDateMax + '<br />id тарифа, по которому произведён расчёт: ' + data.result.tariffId + '<br />';
if(data.result.hasOwnProperty("cashOnDelivery")) {
document.getElementById('resArea').innerHTML = document.getElementById('resArea').innerHTML + 'Ограничение оплаты наличными, от (руб): ' + data.result.cashOnDelivery;
}
} else {
for(var key in data["error"]) {
// console.log(key);
// console.log(data["error"][key]);
document.getElementById('resArea').innerHTML = document.getElementById('resArea').innerHTML+'Код ошибки: ' + data["error"][key].code + '<br />Текст ошибки: ' + data["error"][key].text + '<br /><br />';
}
}
}
});
return false;
});
});
после этого останется в создаваемую страницу вставить оставшийся код
<h3>Расчёт стоимости доставки СДЭК</h3>
<label for="city">Город-получатель: </label>
<div class="ui-widget" style="display: inline-block;"><input aria-autocomplete="list" aria-haspopup="true" autocomplete="off" class="ui-autocomplete-input" id="city" role="textbox" /></div>
<form action="" id="cdek" method="GET">
<!-- Версия API -->
<input hidden="" name="version" value="1.0" />
<!-- Планируемая дата доставки (ГГГГ-ММ-ДД) -->
<input hidden="" name="dateExecute" value="2012-07-27" />
<!-- Для получения логина/пароля (в т.ч. тестового) обратитесь к разработчикам СДЭК -->
<!-- <input name="authLogin" value="authLoginString" hidden /> -->
<!-- <input name="secure" value="secureString" hidden /> -->
<!-- Город-отправитель, Новосибирск -->
<input hidden="" name="senderCityId" value="270" />
<!-- Город-получатель -->
<input hidden="" id="receiverCityId" name="receiverCityId" value="" />
<!-- id тарифа, Посылка склад-дверь -->
<input hidden="" name="tariffId" value="137" />
<!-- Используется для задания списка тарифов с приоритетами, подробнее см. документацию. -->
<!-- <input name="tariffList[0].priority" value="1" hidden /> -->
<!-- <input name="tariffList[0].id" value="137" hidden /> -->
<!-- <input name="tariffList[1].priority" value="2" hidden /> -->
<!-- <input name="tariffList[1].id" value="136" hidden /> -->
<!-- режим доставки, склад-дверь -->
<!-- <input name="modeId" value="3" hidden /> -->
<!-- Вес места, кг. -->
<input hidden="" name="goods[0].weight" value="0.3" />
<!-- Длина места, см. -->
<input hidden="" name="goods[0].length" value="10" />
<!-- Ширина места, см. -->
<input hidden="" name="goods[0].width" value="7" />
<!-- Высота места, см. -->
<input hidden="" name="goods[0].height" value="5" />
<!-- Вес места, кг.-->
<input hidden="" name="goods[1].weight" value="0.1" />
<!-- объём места, длина*ширина*высота, метры кубические -->
<input hidden="" name="goods[1].volume" value="0.001" />
<input type="submit" value="Посчитать" />
</form>
<pre>
<code id="testArea">
</code>
</pre>
<code id="resArea"> </code>
<ul aria-activedescendant="ui-active-menuitem" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" style="z-index: 1; top: 0px; left: 0px; display: none;">
</ul>
1
Ярослав 196 (06 Май 2014 - 12:45) писал:
