г. Владимир, пр. Ленина 15а, офис 413


8 (904) 259-97-29
(ватсапп, вайбер, телеграмм)

пн-пт: с 09.00-18.00
e-mail: info@pavelsonar.net

 

Сегодня я расскажу, как сделать подобное тому, что вы видите на скрине. Итак, данный скрин снят с сайта http://ru-xiaomi.com/ - джумла и джумшоппинг последних версий на 19.10.2016 . Сам интернет-магазин дополнен различными платными плагинами и аддонами, о которых я расскажу позднее.

Приступим

Переходим в файл product_default.php - вашего шаблона джумшоппинг ( /components/com_jshopping/templates/шаблон/product/ ) и вставляем в нужное место форму:

  1. <div class="formclick">
  2. <h4>Купить в один клик<br><span>(укажите свой телефон)</span></h4>
  3. <form id="click-form">
  4. <input type="text" name="name" id="sendphone" placeholder="+7 (012) 345-67-89"/>
  5. <input name="url" id="url" type="hidden" value="<?php echo "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];?>"/>
  6. <input name="urlName" id="urlName" type="hidden" value="<?php print $this->product->name?>"/>
  7. <input type="submit" value="Купить в один клик" class="clickbutton"/>
  8. </form>
  9. </div>

Затем добавляем сразу после формы скрипт маски для поля:

Предварительно скачиваем и подключаем в head шаблона файлы https://github.com/digitalBush/jquery.maskedinput или http://digitalbush.com/projects/masked-input-plugin/

  1. <script>
  2. //Код jQuery, установливающий маску для ввода телефона элементу input
  3. //1. После загрузки страницы, когда все элементы будут доступны выполнить...
  4. $(function(){
  5. //2. Получить элемент, к которому необходимо добавить маску
  6. $("#sendphone").mask("+7 (999) 999-99-99");
  7. });
  8. </script>

и сам скрипт заказа:

  1. <script>
    //инициализируем класс кнопки клика
    $(".clickbutton").click(function(e){
    e.preventDefault();
    //илициализируем id поля телефон
    if ($("#sendphone").val() == '') return false;
    var p = $(e.target).parent();
    //добавляем файл обработчик отправки на почту и поля
    $.post("/click.php", {phone:$("#sendphone").val(),product:$("#urlName").val(),url:$("#url").val()}, function(msg){
    $(p).html($("<p />").addClass("successClicked").text(msg))
    },"html");
    return false;
    })
    </script>

Все это добавляем в файл. А сам обработчик отправки выкладываем в корне

Обработчик я думаю не составит для вас труда ;)

Установка на ваш сайт - 500 рублей

Рекомендую отличный хостинг