Тренировка с формой обратной связи

На самом деле эта страница не является страницей обратной связи. Здесь я проводил и провожу тестирование формы обратной связи, которую после всех проверок и доработок переношу на сайт реальной компании, для которой она и разрабатывалась. Это форма-калькулятор, работающая при помощи PHP, JS (jQuery), AJAX и дополненная библиотекой FPDF для создания PDF файла, содержащего данные, введённые пользователем, при помощи PHP. Ещё к странице была прикручена reCaptcha гугла. Прикручена была руками, т.к. форма самописная, а вообще, при использовании какого-нибудь CF7, для облегчения задачи можно поставить для него расширение, которое в пару кликов добавит reCaptcha к нужной форме и не придётся изучать инструкции гугла. Так же, для удобства эксплуатации, многие данные для формы задаются через админку при помощи замечательного плагина ACF. Всего в процессе работы формы используется четыре файла:

1. Файл шаблона страницы, который содержит саму форму и рекаптчу,
2. Файл для проверки рекаптчи recaptchalib.php,
3. Файл-обработчик запроса формы, который отправляет письмо и возвращает ответ пользователю, а также, при необходимости, передаёт данные из формы в файл, который создаёт PDF отчёт,
4. Файл, который создаёт отчёт в виде PDF файла.

Checkboxes and bowser’s Back Button

Работая над сайтом с фильтром продуктов я столкнулся с багом: при нажатии на кнопку “назад” в браузере я попадал на предыдущую страницу с фильтром, но все отмеченные в фильтре чекбоксы с текущей страницы переносились на предыдущую, хотя этого быть не должно. Я столкнулся с этой проблемой только в Firefox, но, как пишут другие люди, это встречается и во всех других браузерах.

Чтобы браузер не переносил отмеченные чекбоксы при нажатии на кнопку “Назад”, к чекбоксу нужно добавить параметр autocomplete=”off”

<input type="checkbox" name="checkbox" autocomplete="off" />

Ответ я нашёл вот тут.

Тут могла быть ваша реклама.

Woocommerce orders table columns

// Add new columns (or reorder columns)
add_filter( 'manage_edit-shop_order_columns', 'custom_shop_order_column', 20 );
function custom_shop_order_column($columns) {
    $reordered_columns = array();

    foreach( $columns as $key => $column){
        $reordered_columns[$key] = $column;
        if( $key ==  'column_id' ){ // column_id - id of the column after which you want to place the new column.
        // It can be an already existing column, then in this way you can change the order of the columns
            $reordered_columns['new_column_id'] = __( 'New Column Title','textdomain');
        }
        if( $key ==  'other_column_id' ){
            $reordered_columns['other_new_column_id'] = __( 'Other New Column Title','textdomain');
        }
    }
    return $reordered_columns;
}

// Add content for new columns
add_action( 'manage_shop_order_posts_custom_column' , 'custom_orders_list_column_content', 20, 2 );
function custom_orders_list_column_content( $column, $post_id ) {
    switch ( $column ) {
        case 'other_column_id' :
            $payment_method = get_post_meta( $post_id, '_payment_method', true ); // get peyment method for example
            if(!empty($payment_method))
                echo $payment_method
            break;
    }
}

Тут могла быть ваша реклама.

Listen element content changes

var someElement = document.querySelector('.some-class');
if(window.addEventListener) {
  // Normal browsers
  someElement.addEventListener('DOMSubtreeModified', someFunction, false);
} else if(window.attachEvent) {
  // IE
  someElement.attachEvent('DOMSubtreeModified', someFunction);
}
async function someFunction() {
  // Do something if someElement content change
}

Тут могла быть ваша реклама.

Колонки и содержимое

ul {
  column-count: 4;
}
li {
  -webkit-column-break-inside: avoid;
            page-break-inside: avoid; /* Makes effect only in Firefox */
                 break-inside: avoid; /* IE10+, Opera 11.1—12.1 */
}

Пример без стилей для <li>:

• • Item 1
  • Item 2
  • Item 3
  • Item 4
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8

Пример со стилями для <li>:

• • Item 1
  • Item 2
  • Item 3
  • Item 4
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8

Тут могла быть ваша реклама.

Cookies functions

Функции для записи/удаления/получения значений cookie по имени:

function set_cookie(name, value) {
    document.cookie = name +'='+ value +'; Path=/;';
}

function delete_cookie(name) {
    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

function get_cookie(name) {
    let cookie = {};
    document.cookie.split(';').forEach(function(el) {
        let [key,value] = el.split('=');
        cookie[key.trim()] = value;
    });
    return cookie[name];
}

Тут могла быть ваша реклама.

replaceAll vs replace

Функция replaceAll не работает в старых версиях Safari, вместо неё можно использовать replace с регулярным выражением. Пример:

var string = 'some text for test';
if (string.indexOf('te') != -1) { // если подстрока 'te' есть в строке string
    /* string = string.replaceAll('te', ' '); */
    string = string.replace(/te/g, ' '); // /substring/g
    console.log(string);
}
// Выведет 'some xt for st' в консоль.

Тут могла быть ваша реклама.

file_get_contents здорового человека

file_get_contents не закрывает соединение по умолчанию, из-за чего можно перегрузить сервер одним единственным запросом. Чтобы этого избежать, нужно добавить header к запросу, как показано ниже:

$context = stream_context_create(array('http' => array('header'=>'Connection: close\r\n')));
$response = file_get_contents("http://www.something.com/somepage.html",false,$context);

Тут могла быть ваша реклама.

Share WordPress Posts or Pages via Email link

Просто вставить этот код в шаблон страницы:

<a href="mailto:type email address here?subject=I wanted to share this post with you from <?php bloginfo('name'); ?>&body=<?php the_title('','',true); ?>&#32;&#32;<?php the_permalink(); ?>" title="Email to a friend/colleague" target="_blank">Share via Email</a>

Тут могла быть ваша реклама.

Detect mobile iOS

Меняем событие ‘click’ на ‘touchstart’ для мобильных на iOS, т.к. последний не реагирует на событие ‘click’:

function iOS() {
	return [
		'iPad Simulator',
		'iPhone Simulator',
		'iPod Simulator',
		'iPad',
		'iPhone',
		'iPod'
	].includes(navigator.platform)
	// iPad on iOS 13 detection
	|| (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

var click = 'click';
if (iOS()) {
	click = 'touchstart';
}

Тут могла быть ваша реклама.