Web

Раздел о Веб разработке и продвижении

В связи с популярностью LandingPage последнее время, люди массово ломанулись их делать.

Про их эффективность - это отдельная тема. Но на днях ко мне обратились люди с просьбой доработать их страничку, в частности добавить возможность отправки файла со страницы.

Их web-дизайнер категорически отказался это делать. Как выяснилось, для таких страничек есть замечательный инструмент Adobe Muse. (Да Adobe как всегда идет в ногу со временем!) В нем присутствует куча готовых фенечек и дизайнер без знания css, html, php и чего бы то ни было еще быстро и недорого клепает странички.

Там есть готовые формы обратной связи, но вот незадача, поставить галочку напротив пункта "отправить файл" нельзя. Его там попросту нет!

Что же делать? А нужно просто залезть в код и немножко поправить ручками ;)


Итак:

 1) Находим в файле index.html место где описывается форма, тегом <form>

Выглядит примерно так:

         <form class="form-grp clearfix grpelem" id="widgetu633" method="post" enctype="multipart/form-data" action="scripts/form-u633.php"><!-- none box -->
          <div class="fld-grp clearfix grpelem" id="widgetu639" data-required="true"><!-- none box -->
           <span class="fld-input NoWrap actAsDiv rounded-corners clearfix grpelem" id="u642-4" data-ice-editable="html" data-ice-options="disableImageResize,none" data-muse-uid="U642"><!-- content --><input class="wrapped-input" type="text" spellcheck="false" id="widgetu639_input" name="custom_U639" tabindex="1"/><label class="wrapped-input fld-prompt" id="widgetu639_prompt" for="widgetu639_input"><span class="actAsPara">Ваше имя</span></label></span>
          </div>
          <input class="submit-btn NoWrap grpelem" id="u634-17" type="submit" value="" tabindex="4"/> <!--state-based BG images -->
         </form>

красным выделил важный момент. Тот файл куда будет отправлен SUBMIT (кнопка отправить). Нам этот файл понадобится попозже.

2) Вставляем перед <input class> с типом "submit" поле для прикрепления файла:

<input class="fld-input NoWrap actAsDiv" id="u634-file" name="userfile" type="file">


в итоге получается так:

         <form class="form-grp clearfix grpelem" id="widgetu633" method="post" enctype="multipart/form-data" action="scripts/form-u633.php"><!-- none box -->
          <div class="fld-grp clearfix grpelem" id="widgetu639" data-required="true"><!-- none box -->
           <span class="fld-input NoWrap actAsDiv rounded-corners clearfix grpelem" id="u642-4" data-ice-editable="html" data-ice-options="disableImageResize,none" data-muse-uid="U642"><!-- content --><input class="wrapped-input" type="text" spellcheck="false" id="widgetu639_input" name="custom_U639" tabindex="1"/><label class="wrapped-input fld-prompt" id="widgetu639_prompt" for="widgetu639_input"><span class="actAsPara">Ваше имя</span></label></span>
          </div>
          <input class="fld-input NoWrap actAsDiv" id="u634-file" name="userfile" type="file">
          <input class="submit-btn NoWrap grpelem" id="u634-17" type="submit" value="" tabindex="4"/> <!--state-based BG images -->
         </form>

3) В этом же файле "index.html" ближе к концу есть строки со скриптами виджетов. Так как у нас ID формы id="widgetu633", то ищем строку:

Muse.Utils.initWidget('#widgetu633', function(elem) { new WebPro.Widget.Form(elem, {validationEvent:'submit',errorStateSensitivity:'high',fieldWrapperClass:'fld-grp',formSubmittedClass:'frm-sub-st',formErrorClass:'frm-subm-err-st',formDeliveredClass:'frm-subm-ok-st',notEmptyClass:'non-empty-st',focusClass:'focus-st',invalidClass:'fld-err-st',requiredClass:'fld-err-st',ajaxSubmit:true}); })

Обращаем внимание на последнюю настройку: ajaxSubmit:true, ставим ее в false (отключаем отправку с использованием AJAX) иначе будут проблемы с чтением файла. В итоге должна получиться строка:

Muse.Utils.initWidget('#widgetu633', function(elem) { new WebPro.Widget.Form(elem, {validationEvent:'submit',errorStateSensitivity:'high',fieldWrapperClass:'fld-grp',formSubmittedClass:'frm-sub-st',formErrorClass:'frm-subm-err-st',formDeliveredClass:'frm-subm-ok-st',notEmptyClass:'non-empty-st',focusClass:'focus-st',invalidClass:'fld-err-st',requiredClass:'fld-err-st',ajaxSubmit:false}); })

4) правим index.css в папке css. Добавляем стили к нашему новому полю чтобы оно органично смотрелось на форме. У меня получилось так:

#u634-file
{
    z-index: 457;
    min-height: 48px;
    width: 270px;
    position: relative;
    margin-right: -10000px;
    margin-top: 40px;
    left: 150px;
}

5) Находим в папке SCRIPTS наш скрипт (в пункте 1 выделял красным) который обрабатывает нажатие кнопки отправить. В нашем случае это файл: form-u633.php

И дополняем функцию emailFormSubmission()

после строки $message = cleanupMessage($message);

добавляем код:

    $un        = strtoupper(uniqid(time()));
    $head     = 'From: Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.' . PHP_EOL .'X-Mailer: Adobe Muse 2014.0.30 with PHP/' . phpversion() .'/'. PHP_OS . PHP_EOL;
    $head  .= "Mime-Version: 1.0\n";
    $head  .= "Content-Type:multipart/mixed; charset=utf-8; ";
    $head  .= "boundary=\"----------".$un."\"\n\n";


    $body   = "------------".$un."\nContent-Type:text/html; charset=utf-8;\n";
    $body   .= "Content-Transfer-Encoding: 8bit\n\n".$message."\n\n";
    foreach($_FILES as $value)
    {
        if(!empty($value['tmp_name']))
        {
            $body   .= "------------".$un."\n";
            $body   .= "Content-Type: ".$value['type'].";";
            $body   .= "name=\"".basename($value['name'])."\"\n";
            $body   .= "Content-Transfer-Encoding:base64\n";
            $body   .= "Content-Disposition:attachment;";
            $body   .= "filename=\"".basename($value['name'])."\"\n\n";
            $body   .= chunk_split(base64_encode(file_get_contents($value['tmp_name'])))."\n";
        }
    }
    
    /*
    $sent = @mail($to, $subject, $message, $headers);
    */
    
    $sent = @mail($to, $subject, $body, $head);

 

ВАЖНО! Не забыть поправить строку отправки у нас переменная $message меняется на $body

ВСЕ! Проверяйте, должно работать.


 

Дополнение для Muse 2016 от 21.04.2016:

(спасибо Александру Юстусу и Наталье Слепцовой за присланные проекты из Adobe Muse 2016)

В новой версии Adobe Muse, код отправки e-mail'a вынесен в отдельный файл form_process.php, соответственно пятый пункт будет выглядеть так:

Находим в папке SCRIPTS файл form_process.php. В нем правим функцию email_form_submission.

Комментируем строчки:

$headers = get_email_headers($to, $form_email);

$sent = @mail($to, $subject, $message, $headers);

И добавляем вместо них код (заключил между комментариями /*kuzevich.ru*/)

В итоге функция должна выглядеть так:

function email_form_submission($form) {
if(!defined('PHP_EOL'))
define('PHP_EOL', '\r\n');


$form_email = ((array_key_exists('Email', $_REQUEST) && !empty($_REQUEST['Email'])) ? cleanup_email($_REQUEST['Email']) : '');

$to = $form['email']['to'];
$subject = $form['subject'];
$message = get_email_body($subject, $form['heading'], $form['fields'], $form['resources']);

/*
$headers = get_email_headers($to, $form_email);

$sent = @mail($to, $subject, $message, $headers);*/

/*kuzevich.ru*/
$un = strtoupper(uniqid(time()));
$head = 'From: ' . $form['email']['from'] . PHP_EOL .'X-Mailer: Adobe Muse 2014.0.30 with PHP/' . phpversion() .'/'. PHP_OS . PHP_EOL;
$head .= "Mime-Version: 1.0\n";
$head .= "Content-Type:multipart/mixed; charset=utf-8; ";
$head .= "boundary=\"----------".$un."\"\n\n";


$body = "------------".$un."\nContent-Type:text/html; charset=utf-8;\n";
$body .= "Content-Transfer-Encoding: 8bit\n\n".$message."\n\n";
foreach($_FILES as $value)
{
if(!empty($value['tmp_name']))
{
$body .= "------------".$un."\n";
$body .= "Content-Type: ".$value['type'].";";
$body .= "name=\"".basename($value['name'])."\"\n";
$body .= "Content-Transfer-Encoding:base64\n";
$body .= "Content-Disposition:attachment;";
$body .= "filename=\"".basename($value['name'])."\"\n\n";
$body .= chunk_split(base64_encode(file_get_contents($value['tmp_name'])))."\n";
}
}

$sent = @mail($to, $subject, $body, $head);
/*kuzevich.ru*/

if(!$sent)
die(get_form_error_response($form['resources']['failed_to_send_email']));

$success_data = array(
'redirect' => $form['success_redirect']
);

echo get_form_response(true, $success_data);
}

Вот теперь все ;)

На всякий случай прикрепляю сам исправленный файл form_process.php

 

Все что написано касается именно megamenu. Про то как раскрасить стандартное меню - легко найти в интернете, например тут.

Чтобы выделить пункт меню в megamenu, нам нужно ему так же присвоить собственный класс (Менеджер меню: Редактирование пункта меню), но в Mega Menu Params (LeoTheme)->Additional class

Например задаем имя класса "about", сохраняем.


Далее идем на FTP: /templates/leo_store/css/menu открываем файл mega.css и добавляем в него строчку #menusys_mega .about .menu-title {color: #F00;}

Сохраняем.

Чистим в админке кеш сайта, обновляем страницу, наш пункт меню должен покраснеть.

Четверг, 05 декабря 2013 10:21

Долго грузится сайт на Joomla

Автор

Разбирался вчера с сайтом, который стал очень медленно открываться. Беглый анализ показал высокую загруженность памяти сервера.

Т.е. что то активно работает. Раньше такого не было. Просмотр в phpMyAdmin показал что таблица k2_comments весит >500мб Ж8-0.

Оказалось что в компоненте k2 разрешено комментирование. Без каптчи, без премодерирования, без регистрации. При том, что во всех категориях k2 комментарии выключены. Соответственно они в базе копились, а на сайте не отображались. После переключения в "K2 Параметры" в глобальных настройках комментариев настройку в положение выключено - сайт прекрасно заработал!

P.S. не оставляйте возможностей спам-ботам!

Понедельник, 16 сентября 2013 12:10

Нестандартные шрифты в шаблоне joomla

Автор

Столкнулся с иностранным шаблоном для Joomla в котором использованы красивые но нестандартные шрифты без кириллицы, внедренные с помощью @font-face.

Пришлось дорабатывать. Покажу на примере шрифта Lobster, он красивый и бесплатный.


Алгоритм действий такой:


1. Ищем такой же шрифт (или похожий) с кириллицей. (файл ttf).

2. С помощью webfont generator генерируем наш web kit и скачиваем его. При генерации ставьте режим Expert и в настройках (Custom Subsetting) ставьте нужные языки (обыно это English и Cyrillic) иначе можете потерять русский язык. В полях Character Type и Unicode Tables отмечаем галочками все пункты (при желании можно что то и не отмечать, но нам нужно чтобы 100% работало!).

3. Распаковываем полученный архив, файлы .eot, .ttf, .svg, .woff копируем в папку со шрифтами на сервере.

4. Из файла stylesheet.css берем стиль шрифта и копируем в наш css шаблона (у меня это fonts.css).

5. Во всех css файлах меняем (при необходимости) старое название шрифта на новое. В моем случае это был Lobster13Regular, а стал lobster_1.4regular.

6. (опционально) если на сайте ничего не поменялось, то, возможно, в настройках стоит кэширование css - просто почистите кэш (Сайт-Обслуживание-Очистить весь кэш) и попробуйте еще раз.