0 Пользователей и 1 Гость просматривают эту тему.
  • 9 Ответов
  • 685 Просмотров
*

Gedonist

  • Захожу иногда
  • 15
  • 0
Доброго дня!

Есть такая задача: существует форма расчёта стоимости продукта в зависимости от параметров. Форма не только считает стоимость, но и может добавить в таблицу несколько продуктов, а в таблице подсчитывается общий итог всего заказа. Всё это я реализовывал на Joomla 3 без всяких плагинов, лишь на JS и jQuery. Теперь есть задача: полученную таблицу результатов отправлять менеджеру по электронной почте.
Т.е. посетитель приходит на сайт, рассчитывает стоимость, добавляет один или несколько продуктов в заказ, после чего заполняет поля "имя" и "обратный адрес", нажимает кнопку "заказать". После этого менеджеру на e-mail приходит таблица с заказом.

Как работает расчёт и добавление в таблицу можно посмотреть здесь
Спойлер
[свернуть]


Думаю, сторонний плагин здесь уже не поможет. Как реализовать данный функционал минимальными усилиями? можно ли как-то всю таблицу записать в виде HTML в переменную, а затем отправить эту переменную средствами jmail? Плагин по этому поводу писать крайне не хочется, я бы ограничился куском php прям в статье, если это возможно..
*

darkghost

  • Практически профи
  • 2100
  • 95
Re: Отправить форму расчёта на email
« Ответ #1 : 24.07.2015, 15:26:25 »
Если логически, то хорошо бы привентить переменные и потом уже текстовым файлом отправлять. Но не видя кода тяжело что-то говорить. Тем более, если использовалось -- лишь на JS и jQuery --- даже и не знаю, что и сказать, посоветовать. Ведь данные, стоимость выводятся только на странице 
*

bolonia

  • Давно я тут
  • 203
  • 25
Re: Отправить форму расчёта на email
« Ответ #2 : 24.07.2015, 15:43:44 »
Я бы сделал через модуль. Посмотри как сделан мой модуль, вот исходники:
https://github.com/birdkiwi/mod_simplecallback
Тебе нужно заменить содержимое JS, поменять шаблон. Переименовать и добавить поля для отправки на Email.
Правда ничего сложного тут нет. Если ты на jQuery сделал калькулятор, то и тут разберешься.
Бесплатный модуль обратного звонка / обратной связи для J3: http://joomlaforum.ru/index.php?topic=309065.0
*

Gedonist

  • Захожу иногда
  • 15
  • 0
Re: Отправить форму расчёта на email
« Ответ #3 : 24.07.2015, 17:21:56 »
Но не видя кода тяжело что-то говорить.
Ну, за кодом-то дело не станет..

JS
Код
function updateOrder(){
 
var numWidth = parseCount( document.getElementById("width").value);
var numHeight = parseCount( document.getElementById("height").value);

var resPrint = calcCurt(numHeight, numWidth);

if (checkFreez()){
  labelPrice1.value = resPrint[0];
}
  else {
    labelPrice1.value = resPrint[1];
  }

labelOb.value = resPrint[2];
labelV.value = resPrint[3];
 
}

function checkFreez(){
 
  if (document.getElementById("freez").checked)
  return 1;

  else return 0;
 
}

function getParam(num){
 
  var curType = [];
  curType[0]=["2x200,40%",0.2,0.16,162,172,80,0.0015,0.5];
  curType[1]=["2С…200,80%",0.2,0.12,162,172,80,0.0015,0.5];
  curType[2]=["3С…300,27%",0.3,0.26,295,305,85,0.003, 1];
  curType[3]=["3С…300,53%",0.3,0.22,295,305,85,0.003, 1];
  curType[4]=["3С…300,86%",0.3,0.18,295,305,85,0.003, 1];
  curType[5]=["4С…400,20%",0.4,0.36,445,480,90,0.006, 2];
  curType[6]=["4С…400,40%",0.4,0.32,445,480,90,0.006, 2];
  curType[7]=["4С…400,60%",0.4,0.28,445,480,90,0.006, 2];

  return curType[num];
}


function calcCurt(height, width){
 
  var greb = 380;
  var mont = 370;
 
  makeType(height);
  typeN = getType();
  curType = getParam(typeN);
  var polos = (width-curType[1])/curType[2]+1;
  if (polos<0)polos = 0;
  var poloso = Math.ceil(polos);
  var pogm = height * poloso;
  if (pogm<0)pogm = 0;
  var pogm1=0;
  if (pogm<50)
           pogm1=pogm;
        else {
             if (pogm<100)
                pogm1=50+(poloso-Math.floor(50/height))*height;
               
             else
                pogm1=100+(poloso-Math.floor(100/height))*height;
        }   
  var pogm2 = Math.ceil(pogm1);
  if (pogm2<0)pogm2 = 0;
  var price1 = pogm2 * curType[3];
  var price2 = pogm2 * curType[4];
  var gprice = greb * width;
  var plastPrice = curType[5] * poloso;
  var mprice = mont * width;
  var finalPrice1 = mprice + plastPrice + gprice + price1;
  var finalPrice2 = mprice + plastPrice + gprice + price2;
 
  var obTotal = Math.round(((curType[6] * pogm2)+(width*0.005))*100.0)/ 100.0;
 
  var vTotal = Math.round(((curType[7] * pogm2)+(width * 1.5))*100)/ 100.0;
   
  var result = [finalPrice1,finalPrice2, obTotal, vTotal];
 
  return result;
}

function makeType(height) {
 
  var radio = 0;
 
if (height>0 && height<=2.5){
 
  if (!document.getElementById("case1")){
    clearType();
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'id', 'case1');
    radio.setAttribute( 'value', '0');
tmp = document.getElementById("curType");
    tmp.appendChild( radio );
tmp.appendChild(document.createTextNode("2x200,40%"));

    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'value', '1');
    radio.setAttribute( 'defaultChecked', 'true');
radio.setAttribute( 'Checked', 'true');
    tmp.appendChild( radio );
tmp.appendChild(document.createTextNode("2С…200,80%"));
  }
}
 
  else if (height <= 3.2 && height > 2.5) {
   
    if (!document.getElementById("case2")){
     
    clearType();
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'id', 'case2');
    radio.setAttribute( 'value', '2');
tmp = document.getElementById("curType");
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("3С…300,27%"));
     
   
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'value', '3');
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("3С…300,53%"));
   
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'value', '4');
    radio.setAttribute( 'defaultChecked', 'true');
radio.setAttribute( 'Checked', 'true');
    tmp.appendChild( radio );
tmp.appendChild(document.createTextNode("3С…300,86%"));
  }
    }
 
  else if (height <= 4 && height > 3.2) {
   
    if (!document.getElementById("case3")){
     
clearType();
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'id', 'case3');
    radio.setAttribute( 'value', '3');
tmp = document.getElementById("curType");
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("3С…300,53%"));
   
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'value', '4');
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("3С…300,86%"));
     
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'value', '5');
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("4С…400,20%"));

     
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'value', '6');
    radio.setAttribute( 'defaultChecked', 'true');
radio.setAttribute( 'Checked', 'true');
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("4С…400,40%"));
  }
    }

else if (height <= 5 && height > 4) {
   
    if (!document.getElementById("case4")){
     
clearType();
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'id', 'case4');
      radio.setAttribute( 'value', '3');
tmp = document.getElementById("curType");
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("3С…300,53%"));
   
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'value', '4');
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("3С…300,86%"));
     
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'value', '6');
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("4С…400,40%"));

     
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'defaultChecked', 'true');
radio.setAttribute( 'Checked', 'true');
    radio.setAttribute( 'value', '7');
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("4С…400,60%"));
  }
    }
 
    else if (height > 5) {
   
    if (!document.getElementById("case5")){
     
    clearType();
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'id', 'case5');
    radio.setAttribute( 'value', '5'); 
tmp = document.getElementById("curType");
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("4С…400,20%"));
     
   
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'value', '6');
   
     
    tmp.appendChild( radio );

      tmp.appendChild(document.createTextNode("4С…400,40%"));
   
    radio = document.createElement('input');
radio.setAttribute( 'type', 'radio');
radio.setAttribute( 'name', 'Ztype');
    radio.setAttribute( 'value', '7');
    radio.setAttribute( 'defaultChecked', 'true');
radio.setAttribute( 'Checked', 'true');
    tmp.appendChild( radio );
    tmp.appendChild(document.createTextNode("4С…400,60%"));
  }
    }
 
  var inputs = document.getElementsByName("Ztype");
  var input_len = inputs.length;
  for (var i = 0; i < input_len; i++) {
    inputs[i].onclick = updateOrder;
}
 
}

function getType () {
 
  var inputs = document.getElementsByName("Ztype");
  var selectedValue = -1;
  var input_len = inputs.length;
  for (var i = 0; i < input_len; i++) {
    if (inputs[i].checked)
    {
        selectedValue = inputs[i].value;
        break;
    }
}
 
  return selectedValue;
 
}

     
function parseCount(countString) {
        num = +countString;

        return num;
      }

     
function clearType() {
       
       tmp = document.getElementById("curType");
        while (tmp.firstChild) {
   
    tmp.removeChild(tmp.firstChild);
}
 
     
      }

function calcTotal(id) {
 
  var prices = document.getElementsByClassName(id);
 
  var prices_len = prices.length;
  var total=0;
  for( var i = 0; i < prices_len; ++i )
    total += parseCount(prices[i].innerHTML);
 
  return total;
 
}




function Add2Table() {
 
  jQuery.noConflict();
  jQuery("#zakazDiv").show('slow');
  var type = getParam(getType());
  var moroz = checkFreez();
  if (!checkFreez()) moroz = "РґР°";
  else
    moroz = "нет";
 
 
  jQuery( "<tr><td>"+width.value+"</td><td>"+height.value+"</td><td>"+type[0]+"</td><td>"+moroz+"</td><td class=\"priceTd\">"+labelPrice1.value+"</td><td class=\"VTd\">"+labelV.value+"</td><td class=\"OTd\">"+labelOb.value+"</td></tr>" ).insertBefore( "#zakaz > tbody > tr:last" );
 

document.getElementById ( "itogo" ).innerHTML = (calcTotal("priceTd") + " СЂСѓР±.");
 
document.getElementById ( "totalV" ).innerHTML = (calcTotal("VTd")+ "РєРі.");
 
document.getElementById ( "totalO" ).innerHTML = (calcTotal("OTd")+ "Рј. РєСѓР±.");
 
}


HTML
Код
<h2>Калькулятор стоимости завес ПВХ:</h2>
<div class="calc_form_div">
<form class="calc_form" action="" oninput="updateOrder()">
<div class="left_half">
<ul>
<li>
<legend>Исходный данные:</legend>
</li>
<li><label for="width">Ширина проёма (м.):</label> <input id="width" type="number" name="width" /></li>
<li><label for="height">Высота проёма (м.):</label> <input id="height" type="number" name="height" /></li>
<li><legend>Параметры доставки:</legend></li>
<li>Вес завесы: <output id="labelV" name="labelV" for="width height">0</output> кг.</li>
<li>Объём завесы:  <output id="labelOb" name="labelOb" for="width height">0</output> м3</li>
<li><br/></li>
</ul>
</div>
<div class="right_half">
<ul>
<li>
<legend>Результаты:</legend>
</li>
<li>
<p>Тип плёнки, нахлёст: <span id="curType" class="curType"></span></p>
</li>
<li>
<p>Вид завесы: <span class="curType"><input type="radio" name="freezType" value="0" defaultchecked="true" checked="true" id="freez" onclick = "updateOrder()">Обычная<input type="radio" name="freezType" value="1" onclick = "updateOrder()">Морозостойкая</span>
</p>
</li>
<li>
<p>Стоимость завесы: <span class="result"> <output for="width height" name="labelPrice1" id="labelPrice1">0</output> руб.</span></p>
</li>
<li>
<br />
</li>
<li> <a href="javascript://" class="btn btn-primary fright" onclick="Add2Table();"> Добавить в заказ</a><br/></li>
</ul>
</div>
</form>
</div>
<div id="zakazDiv">
  <table border=1 id="zakaz">
  <caption>Ваш заказ:</caption>
    <tr>
      <th>Ширина:</th>
      <th>Высота:</th>
      <th>Тип плёнки, нахлёст:</th>
      <th>Морозостойкость:</th>
      <th>Цена:</th>
      <th>Вес:</th>
      <th>Объём:</th>
     </tr>
  <tr>
     
      <th colspan="2">Общая стоимость заказа:</th>
      <th id="itogo">0</th>
      <th>Общий вес:</th>
      <th id="totalV">0</th>
      <th>Общий объём:</th>
      <th id="totalO">0</th>
   
      </tr>
  </table>

  <a href="javascript://" id="delButton" onclick="location.reload();" class="pull-right btn btn-primary fright">Удалить заказ </a> </div>
Таблица до того, как в неё добавляются записи, скрыта через CSS
*

Gedonist

  • Захожу иногда
  • 15
  • 0
Re: Отправить форму расчёта на email
« Ответ #4 : 24.07.2015, 17:34:57 »
Я бы сделал через модуль. Посмотри как сделан мой модуль, вот исходники:
https://github.com/birdkiwi/mod_simplecallback
Тебе нужно заменить содержимое JS, поменять шаблон. Переименовать и добавить поля для отправки на Email.
Правда ничего сложного тут нет. Если ты на jQuery сделал калькулятор, то и тут разберешься.

Вообще, изначально у меня была как-раз такая мысль - посмотреть, как сделан мой callback модуль и сделать также. Смотрел код mod_callback, но твой значительно совершеннее. Меня смущает два момента. Во-первых я с этим засяду надолго. Ничего особенно сложного, конечно. Не сложнее, чем написать модуль для Joomla ;) но прежде, чем засяду это делать, хочу убедиться в том, что нет простого решения на 3-5-7 строчек кода..

Второй момент. Информация содержится в таблице, а не в полях ввода. Т.е. в полях ввода может остаться только один товар, а по факту в заказе их может быть два десятка.
*

Gedonist

  • Захожу иногда
  • 15
  • 0
Re: Отправить форму расчёта на email
« Ответ #5 : 24.07.2015, 18:04:58 »
Строго говоря, думаю я смогу написать код php, который соберёт значения из таблицы и отправит их на e-mail. Но пока обычная вставка кода php в тело статьи ничего не даёт - он не выполняется. Это какая-то защита Joomla?
Я пробовал добавлять волшебное слово defined( '_JEXEC' ) or die( 'Restricted access' );
безрезультатно
*

bolonia

  • Давно я тут
  • 203
  • 25
Re: Отправить форму расчёта на email
« Ответ #6 : 25.07.2015, 09:46:58 »
Для таких вещей есть Sourcerer: http://extensions.joomla.org/extension/sourcerer
Бесплатный модуль обратного звонка / обратной связи для J3: http://joomlaforum.ru/index.php?topic=309065.0
*

Gedonist

  • Захожу иногда
  • 15
  • 0
Re: Отправить форму расчёта на email
« Ответ #7 : 28.07.2015, 12:03:52 »
Для таких вещей есть Sourcerer: http://extensions.joomla.org/extension/sourcerer
Спасибо за наводку - помогло.
Следующая проблема в том, как передать данные в php обработчик. На сколько я понял, в скрипт обычно передаются значения полей формы. Можно ли заставить php считать данные за HTML таблицы на сайте? навскидку приходит в голову только создание средствами JS невидимых input`ов c нужными данными... но это выглядит как-то коряво.
*

bolonia

  • Давно я тут
  • 203
  • 25
Re: Отправить форму расчёта на email
« Ответ #8 : 28.07.2015, 15:49:05 »
Спасибо за наводку - помогло.
Следующая проблема в том, как передать данные в php обработчик. На сколько я понял, в скрипт обычно передаются значения полей формы. Можно ли заставить php считать данные за HTML таблицы на сайте? навскидку приходит в голову только создание средствами JS невидимых input`ов c нужными данными... но это выглядит как-то коряво.


Через jQuery сохранить полностью таблицу в input. И отправлять ее как HTML-код. Письмо тоже в HTML должно быть.
Бесплатный модуль обратного звонка / обратной связи для J3: http://joomlaforum.ru/index.php?topic=309065.0
*

Gedonist

  • Захожу иногда
  • 15
  • 0
Re: Отправить форму расчёта на email
« Ответ #9 : 11.09.2015, 13:54:21 »
Задачу решил, тему можно закрывать.
Сначала хотел с помощью Soucerer`а сделать две страницы: одну с формой, другую - обработчик формы, а дальше задача решается классически, средствами php, вне зависимости от Joomla. Но пришлось бы либо долго заморачиваться с проверками и безопасностью, либо оставить всё в совсем топорном виде на свой страх и риск, поэтому я всё же решил действовать средствами Joomla.

Свой компонент писать тоже довольно долго - нужно глубоко разбираться, решил воспользоваться готовым - Chronoform. Добавил простую форму с контактными данными и одним скрытым полем. После заполнения таблицы, собираю её через js и запихиваю в скрытое поле таким образом:
Код
function putTable(){
      var iHTML = document.getElementById("zakaz").innerHTML;
    document.getElementById("orderTable").value = '<table>'+iHTML+'</table>';
    }
Дальше форма отправляется на емайл средствами chronoform (т.е. средствами joomla). Там есть встроенные проверки, в том числе на валидность введённых данных. Можно также записывать данные в sql таблицу (только пока не понял, чем её удобно просматривать, не phpMyAdmin`ом же...)
Компонент ставится бесплатно, но просит оформить подписку за деньги. При оформлении подписки появляется возможность перегружать данные в документы Google и, может быть, убрать копирайт.
Я пока убрал копирайт средствами CSS. Для существующих на сегодня задач одна пару-тройку скрытых индексируемых ссылок на сайте проблемой не являются.
Способов "лечения" пятой версии ChronoForms не нашел.
Спасибо всем за советы!



Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как вставить капчу на сайт в форму входа?

Автор kost757

Ответов: 3
Просмотров: 196
Последний ответ 04.08.2017, 21:53:45
от Septdir
Добавить Checkbox в форму регистрации

Автор hazyin

Ответов: 13
Просмотров: 768
Последний ответ 02.08.2017, 22:24:22
от Мук
Как поставить цель с Яндекс.Метрика на форму и на кнопку модуля Fox Contact? Joomla 3.3.6?

Автор Mariyam09

Ответов: 1
Просмотров: 266
Последний ответ 21.07.2017, 16:51:23
от Besa
AcyMailing enterprise. Как повторно отправить рассылку, не открывшим предыдущую?

Автор Redd1

Ответов: 0
Просмотров: 108
Последний ответ 18.07.2017, 18:12:22
от Redd1
Не могу на сайте найти где редактировать форму

Автор HolySong

Ответов: 6
Просмотров: 293
Последний ответ 18.07.2017, 09:43:28
от SeBun