Добавить функцию пользовательского перенаправления на страницу благодарности woocommerce

Posted Posted in Советы / рекомендации
add_action('after_setup_theme', 'woocommerce_support');
        function woocommerce_support()
        {
          add_theme_support('woocommerce');
        }


        add_filter('woocommerce_cart_item_name', 'add_excerpt_in_cart_item_name', 10, 3);
        function add_excerpt_in_cart_item_name($item_name,  $cart_item,  $cart_item_key)
        {
          $excerpt = wp_strip_all_tags(get_the_excerpt($cart_item['product_id']), true);
          $style = ' style="font-size:14px; line-height:normal;"';
          $excerpt_html = '
        <p name="short-description" class="product-description"' . $style . '>' . $excerpt . '</p>';

          return $item_name . $excerpt_html;
        }
        add_action( 'woocommerce_get_return_url', 'trueroman_redirect_to_thank_you_2', 90, 2 );
 
        function truemisha_redirect_to_thank_you_2( $thank_you_url, $order ) {
         
          // it would be nice to check the status of the order, do not redirect fake orders
          if( $order->has_status( 'failed' ) ) {
            return $thank_you_url;
          }
         
          return site_url( '/thanks?id='.$order->get_id() );
       
        }

Автоматическое обновление корзины при изменении количества

Posted Posted in Советы / рекомендации
add_action('wp_head', function () {

?><style>
    .woocommerce button[name="update_cart"],
    .woocommerce input[name="update_cart"] {
      display: none;
    }
  </style><?php

        });

        add_action('wp_footer', function () { ?>
  <script>
    jQuery(function($) {
      let timeout;
      $('.woocommerce').on('change', 'input.qty', function() {
        if (timeout !== undefined) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
          $("button[name='update_cart']").removeAttr("disabled");
          $("[name='update_cart']").trigger("click"); // trigger cart update
        }, 1000); // 1 second delay, half a second (500) seems comfortable too
      });
    });
  </script>
<?php

        });

Минимальный заказ товара woocommerce

Posted Posted in Советы / рекомендации
/**
 * For cart
 */
add_filter('woocommerce_cart_item_quantity', 'trueroman_min_kolvo_cart', 20, 3);

function truemisha_min_kolvo_cart($product_quantity, $cart_item_key, $cart_item)
{

  $product = $cart_item['data'];
  $min = 0;

  if (567 === $product->get_id()) { // товар с ID 500
    $min = 1;
  }

  return woocommerce_quantity_input(
    array(
      'input_name'   => "cart[{$cart_item_key}][qty]",
      'input_value'  => $cart_item['quantity'],
      'max_value'    => $product->get_max_purchase_quantity(),
      'min_value'    => $min,
      'product_name' => $product->get_name(),
    ),
    $product,
    false
  );
}

Автоматически добавлять товар в корзину при посещении woocommerce

Posted Posted in Советы / рекомендации
/**
 * Automatically add product to cart on visit
 */
add_action('template_redirect', 'add_product_to_cart');
function add_product_to_cart()
{
  $simple_product_id = 567;


  if (!is_admin()) {
    $product_id = 567; //replace with your own product id
    $found = false;


    //check if product already in cart
    if (sizeof(WC()->cart->get_cart()) > 0) {
      foreach (WC()->cart->get_cart() as $cart_item_key => $values) {
        $_product = $values['data'];
        if ($_product->get_id() == $product_id)
          $found = true;
      }
  
        // товар с ID 27 в корзине
        // if product not found, add it
   
        if (!$found) 
          WC()->cart->add_to_cart($product_id);
        } else {
          // if no products in cart, add it
          WC()->cart->add_to_cart($product_id);
        
    
    }
  }
}

Как включить редактор Gutenberg в продуктах WooCommerce

Posted Posted in Советы / рекомендации
add_filter( 'use_block_editor_for_post_type', 'art_enable_rest_for_product', 10, 2 );
add_filter( 'woocommerce_taxonomy_args_product_cat', 'art_show_in_rest_for_product', 10, 1 );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'art_show_in_rest_for_product', 10, 1 );
add_filter( 'woocommerce_register_post_type_product', 'art_show_in_rest_for_product', 10, 1 );

/**
 * Включение редактора Gutenberg для товаров
 *
 * @sourcecode https://onmywaystudio.net/
 *
 * @param  bool   $can_edit
 * @param  string $post_type
 *
 * @return bool
 *
 * @author        Roman Petrovich
 * @testedwith    WC 3.9
 */
function art_enable_rest_for_product( $can_edit, $post_type ) {

	if ( 'product' === $post_type ) {
		$can_edit = true;
	}

	return $can_edit;
}

/**
 * Включение поддержки REST для товаров
 *
 * @sourcecode https://onmywaystudio.net/
 * @param  array $args
 *
 * @return mixed
 *
 * @author        Roman Petrovich
 * @testedwith    WC 3.9
 */
function art_show_in_rest_for_product( $args ) {

	$args['show_in_rest'] = true;

	return $args;
}

Разрешения проверки остальных Woocommerce

Posted Posted in Советы / рекомендации
REST-API WOOCOMERCE

add_filter( 'woocommerce_rest_check_permissions', 'my_woocommerce_rest_check_permissions', 90, 4 ); function my_woocommerce_rest_check_permissions( $permission, $context, $object_id, $post_type ){ return true; }

редирект со страницы на страницу

RewriteCond %{QUERY_STRING} ^_route_=login/$
RewriteRule ^(.*)$ https://onmywaystudio.net/? [R=301,L]

Отображение страниц только авторизованным пользователям wordpress

Posted Posted in Советы / рекомендации
function prefix_redirect_function() {
if ( is_page(552 , 554) && !is_user_logged_in() ) { // 42 это ID
// редирект на главную:        wp_redirect( home_url() );
// или так на url:
// wp_redirect( ‘http://www.example.com’, 301 );exit;
    }
}
.page-id-296 .zip-check {display:none}

Установите файл cookie и закройте всплывающее окно после отправки формы Contact Form 7.

Posted Posted in Советы / рекомендации
<?php
// As is this will check if the form is in a popup, if so set a cookie and close after 5 seconds.

// Copy everything below this line.
function custom_cf7_scripts() { ?>
	<script type="text/javascript">
		var wpcf7Elm = document.querySelector('.wpcf7');

		wpcf7Elm.addEventListener('wpcf7submit', function (event) {
			var $form = $(event.target),
				$popup = $form.parents('.pum');

			if (!$popup.length) {
				return;
			}
			
			$popup.trigger('pumSetCookie');

			setTimeout(function () {
				$popup.popmake('close');
			}, 5000);
		}, false);
	</script><?php
}

add_action( 'wp_footer', 'custom_cf7_scripts' );

Платежный виджет Liqpay

Posted Posted in Советы / рекомендации
$liqpay = new LiqPay($public_key, $private_key);
$html = $liqpay->cnb_form(array(
'action'         => 'pay',
'amount'         => '1',
'currency'       => 'USD',
'description'    => 'description text',
'order_id'       => 'order_id_1',
'version'        => '3'
));

Payment with splitting the amount to several recipients. This parameter specifies a JSON array with payment splitting rules. When using the split_rules parameter, there is one debit from the client and several credits to the recipients. The acquiring fee is charged to each store in the split_rules array . Example JSON string 

[
  {
    "public_key": "i000000001",
    "amount": 1,
    "commission_payer": "sender",
    "server_url": "https://server1/callback"
  },
  {
    "public_key": "i000000002",
    "amount": 2,
    "commission_payer": "receiver",
    "server_url": "https://server2/callback"
  }
]
Sender settings
sender_address NEWOptionalStringSender’s address
sender_cityOptionalStringSender’s city
sender_country_codeOptionalStringCountry code of the sender. Digital ISO 3166-1 code
sender_first_nameOptionalStringName of the sender
sender_last_nameOptionalStringSender’s last name
sender_postal_codeOptionalStringPostal code of the sender
Secure payment options
letter_of_creditOptionalStringTo enable the acceptance of payments by letter of credit, pass the parameter with the value 1
letter_of_credit_dateOptionalStringLetter of credit expiration date in the following format : 2015-03-31 00:00:00 UTC .
Regular payment options
subscribeOptionalStringRegular payment. Possible values 1
subscribe_date_startOptionalStringDate of first payment. The time must be specified in the following format : 2015-03-31 00:00:00 UTC . If an expired date is specified, the subscription will be activated from the current date of receipt of the request
subscribe_periodicityOptionalStringPeriodicity of withdrawal of funds. Possible values :
month – once a month year – once a year
Options for payment in 1 click
customerOptionalStringThe unique identifier of the client on the merchant’s website. When transferring the parameter, LiqPay remembers the client’s payment details and his identifier – further payment can be made in 1 click. The maximum length is 100 characters . ( When using the parameter for <b>Masterpass 1 click</b>, the valid phone number of the payer is transferred in this field )
recurringbytokenOptionalStringAllows you to generate the payer’s card_token , which you will receive in the callback request to server_url . card_token allows you to make payments without entering the details of the payer’s card, using the token payment API – that is, in 1 click. To receive a card_token , you must pass the following values ​​in the request : 1
customer_user_idOptionalStringUser ID in the merchant system, transmitted at each user payment (must not match customer , used for payment using the <b>Masterpass 1 click</b> wallet )
Other parameters
daeOptionalStringLong entry Detail Addenda .
The dae parameter is a JSON string to which the base64 function has been applied . JSON can contain the following parameters :
 
{
  "airLine": "Avia", // абревіатура авіакомпанії, max 4 символів.
  "ticketNumber": "ACSFD12354SA", // номер квитка, max 15 символів. 
  "passengerName": "John Doe", // ім'я пасажира, max 29 символів.
  "flightNumber": "742", // номер рейсу, max 5 цифр.
  "originCity": "DP", // код міста/аеропорту вильоту, max 5 символів.
  "destinationCity": "NY", // код міста/аеропорту призначення, max 5 символів.
  "departureDate": "100514" // дата вильоту в форматі YYMMDD, max 6 цифр.
}

Исправление распространенной ошибки jQuery в WordPress

Posted Posted in Советы / рекомендации
wp_enqueue_script( 'tt-mobile-menu', get_template_directory_uri() .

'/js/mobile-menu.js', array('jquery'), '1.0', true );

jQuery(document).ready(function()

{

jQuery(#selector) ...

});

(function($) {

// Use $() inside of this function

$(#selector) ...

})(jQuery);
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>

Как скрыть сообщения или страницы от администратора WordPress

Posted Posted in Советы / рекомендации
function true_hide_pages_from_admin( $query ) {
	global $pagenow;
	if( is_admin() && 'edit.php' == $pagenow && 'page' == get_query_var('post_type') ){
		// в качестве 'page' в условии можно указать любой произвольный тип постов
		$query->set( 'post__not_in', array(300,271) ); 
		// через запятую прописываем ID страниц, которые хотим скрыть
	}
	return $query;
}
 
add_action( 'pre_get_posts' ,'true_hide_pages_from_admin' );
function true_hide_posts_from_admin( $query ) {
	global $pagenow;
	if( is_admin() && 'edit.php' == $pagenow ){
		$query->set( 'post__not_in', array(9,54) ); 
		// через запятую указываем ID постов или страниц, которые хотим скрыть
	}
	return $query;
}
 
add_action( 'pre_get_posts' ,'true_hide_posts_from_admin' );
function true_hide_all( $query ) {
	$query->set( 'post__not_in', array(300,271) ); 
	return $query;
}
 
add_action( 'pre_get_posts' ,'true_hide_all' ); 

Изменить фото в URL

Posted Posted in Советы / рекомендации
<meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:image" content="https://onmywaystudio.net/wp-content/uploads/2018/05/cropped-download-1-1.png;" />
<meta property="og:image:secure_url" content="https://onmywaystudio.net/wp-content/uploads/2018/05/cropped-download-1-1.png"; />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="" />

Добавление согласия с Политикой конфиденциальности WooCommerce

Posted Posted in Советы / рекомендации
// Добавление чекбокса
add_action( 'woocommerce_review_order_before_submit', 'truemisha_privacy_checkbox', 25 );
 
function truemisha_privacy_checkbox() {
 
	woocommerce_form_field( 'privacy_policy_checkbox', array(
		'type'          => 'checkbox',
		'class'         => array( 'form-row' ),
		'label_class'   => array( 'woocommerce-form__label-for-checkbox' ),
		'input_class'   => array( 'woocommerce-form__input-checkbox' ),
		'required'      => true,
		'label'         => 'Принимаю <a href="' . get_privacy_policy_url() . '">Политику конфиденциальности</a>',
	));
 
}
 
// Валидация
add_action( 'woocommerce_checkout_process', 'truemisha_privacy_checkbox_error', 25 );
 
function truemisha_privacy_checkbox_error() {
 
	if ( empty( $_POST[ 'privacy_policy_checkbox' ] ) ) {
		wc_add_notice( 'Ваш нужно принять политику конфиденциальности.', 'error' );
	}
 
}
// Добавление чекбокса
add_action( 'woocommerce_register_form', 'truemisha_registration_privacy_checkbox', 25 );
 
function truemisha_registration_privacy_checkbox() {
 
	woocommerce_form_field(
		'privacy_policy_reg',
		array(
			'type'          => 'checkbox',
			'class'         => array( 'form-row' ),
			'label_class'   => array( 'woocommerce-form__label-for-checkbox' ),
			'input_class'   => array( 'woocommerce-form__input-checkbox' ),
			'required'      => true,
			'label'         => 'Принимаю <a href="' . get_privacy_policy_url() . '">Политику конфиденциальности</a>',
		)
	);
 
}
 
// Валидация
add_filter( 'woocommerce_registration_errors', 'truemisha_registration_privacy_checkbox_error', 25 );
 
function truemisha_registration_privacy_checkbox_error( $errors ) {
 
	if( is_checkout() ) {
		return $errors;
	}
 
	if ( empty( $_POST[ 'privacy_policy_reg' ] ) ) {
		$errors->add( 'privacy_policy_reg_error', 'Ваш нужно принять политику конфиденциальности.' );
	}
 
	return $errors;
 
}

Доступность продукта в Woocommerce

Posted Posted in Советы / рекомендации
add_action( 'woocommerce_before_shop_loop_item_title', 'my_sold_out_loop' );
 
function my_sold_out_loop() {
    global $product;
 
    if ( !$product->is_in_stock() ) {
        echo '<span class="soldout">Нет в наличии</span>';
    }
}

add_action( 'woocommerce_before_single_product_summary', 'my_sold_out_loop' );

span.soldout {
padding: 3px 7px;
background: #7b1616;
color: white;
font-size: 13px;
}
add_filter( 'woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
function wcs_custom_get_availability( $availability, $_product ) {  
    if ( $_product->is_in_stock() ) {
        $availability['availability'] = __('Available!', 'woocommerce');
    }
    if ( ! $_product->is_in_stock() ) {
        $availability['availability'] = __('Sold Out', 'woocommerce');
    }
    return $availability;
}
    if ( $product->is_in_stock() ) {
        echo '<div class="stock" >' . $product->get_stock_quantity() . ' в наличии</div>';
    } else {
        echo '<div class="out-of-stock" >Нет в наличии</div>';
    }
function my_stock_loop() {
    global $product;
    if ( $product->is_in_stock() ) {
        echo '<div class="stock" >' . $product->get_stock_quantity() . ' в наличии</div>';
    } else {
        echo '<div class="out-of-stock" >Нет в наличии</div>';
    }
}
add_action( 'woocommerce_after_shop_loop_item_title', 'my_stock_loop' );
add_filter( 'woocommerce_get_price_html', 'my_price_html', 100, 2 );
function my_price_html( $price, $product ){
  global $product;
  $return_string = $price;
  if ( $product->stock_status == 'outofstock' ) {
  	  $return_string = $price .' &nbsp;(Нет в наличии)';
     }
  return $return_string; 	
}
add_filter( 'woocommerce_product_subcategories_hide_empty', 'hide_empty_categories', 10, 1 );
function hide_empty_categories ( $hide_empty ) {
    $hide_empty  =  FALSE;
    // You can add other logic here too
    return $hide_empty;
}
add_filter( 'woocommerce_product_subcategories_hide_empty', 'show_empty_categories', 10, 1 );
function show_empty_categories ( $show_empty ) {
    $show_empty  =  TRUE;
    // You can add other logic here too
    return $show_empty;
}

Добавить поле в профиль пользователя wordpress и woocommerce

Posted Posted in Советы / рекомендации
function my_user_contactmethods($user_contactmethods){
    $user_contactmethods['phone'] = 'Телефон';
    return $user_contactmethods;
}
add_filter('user_contactmethods', 'my_user_contactmethods');

<p class="form-row form-row-wide">
        <label for="phone">Phone</label>
        <input type="text" class="input-text" name="phone" id="phone" value="<?php echo esc_attr( $user->phone ); ?>" />
    </p>
    
    $phone  = ! empty( $_POST[ 'phone' ] ) ? $_POST[ 'phone' ] : '';
  $user->phone = $phone;

Описание категории продуктов Woocommerce под продуктами

Posted Posted in Советы / рекомендации

Для того, чтобы отображать описание категории товаров Woocommerce внизу страницы – под товарами, необходимо добавить в файл functions.php темы следующий код:

remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );

add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 100 );
function woocommerce_taxonomy_archive_description() {
    if ( is_tax( array( 'product_cat', 'product_tag' ) ) && get_query_var( 'paged' ) == 0 ) {
        $description = wpautop( do_shortcode( term_description() ) );
        if ( $description ) {
            echo '<div class="term-description">' . $description . '</div>';
        }
    }
}

Сортировка записей WordPress по времени создания и пользовательскому полю AFC

Posted Posted in Советы / рекомендации
add_action('pre_get_posts', 'my_pre_get_posts', 10, 1);

function my_pre_get_posts($query) {

    if ($query->is_main_query() && !is_admin()) { 
        $query->set('meta_key', 'sorting'); // сортировка по произвольному полю
        $query->set('orderby', 'meta_value_num');
        $query->set('order', 'ASC'); // порядок сортировки
    }
    $query->set('meta_query', $meta_query);
}
function postSorting() {
    $todays_date = current_time('Ymd');
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => '4',
        'paged' => $paged,
        'meta_query' => array(
            'relation' => 'AND',
            'sorting_clause' => array(
                'key' => 'sorting',
                'type' => 'numeric',
                'value' => array(0, 100),
                'compare' => 'BETWEEN',
                
            ),
            'date' => array(
                'date_clause' => array(
                    'key' => 'date',
                    'compare' => '<=',
                    'value' => $todays_date,
                ),
                'time_clause' => array(
                    'key' => 'time',
                    'compare' => 'EXISTS',
                ),
            )
        ),
        'orderby' => array(
            'sorting_clause' => 'ASC',
            'date_clause' => 'ASC',
            'time_clause' => 'ASC',
        ),
    );
 
    $query = new WP_Query( $args );

    //вывод цикла...

    // сброс
    wp_reset_postdata();
}

Процентная скидка на всю корзину без купона в WooCommerce

Posted Posted in Советы / рекомендации

Фиксированная процентная скидка на всю корзину в WooCommerce
Итак, начнем с самой простой скидки – фиксированной. В нем скидка будет применена ко всей корзине в итоге, без лишних действий со стороны пользователя.

Скрипт скидки:

function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	$discount = $cart->subtotal * 0.05; // 0.05 - это 5%
	
	$cart->add_fee('Фиксированная скидка в 5% ', -$discount);

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Вы вставляете его в конец файла functions.php, который находится в папке вашей темы.

Фиксированная (применяется, когда в корзине есть определенные товары) процентная скидка на всю корзину в WooCommerce
Второй вариант фиксированной скидки — это скидка, которая применяется в зависимости от того, какие товары (или наборы товаров) находятся в корзине.

Скрипт для применения скидки при наличии определенного товара в корзине:

function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	$array_product_id = [];

	foreach($cart->get_cart() as $cart_item) {

		$array_product_id[] = $cart_item['product_id'];
	
	}

	if(in_array(6, $array_product_id)) { // Если в корзине есть товар с ID = 6

		$discount = $cart->subtotal * 0.05; // 0.05 - это 5%

		$cart->add_fee('Фиксированная скидка в 5% за выбор акционного товара ', -$discount);

	}

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Скрипт для применения скидки при наличии одного из товаров в корзине:


function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	$array_product_id = [];

	foreach($cart->get_cart() as $cart_item) {

		$array_product_id[] = $cart_item['product_id'];
	
	}

	if(in_array(6, $array_product_id) || in_array(7, $array_product_id)) { // Если в корзине есть товар с ID = 6 или ID = 7

		$discount = $cart->subtotal * 0.05; // 0.05 - это 5%

		$cart->add_fee('Фиксированная скидка в 5% за выбор акционного товара ', -$discount);

	}

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Скрипт для применения скидок на определенные товары в корзине:


function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	$array_product_id = [];

	foreach($cart->get_cart() as $cart_item) {

		$array_product_id[] = $cart_item['product_id'];
	
	}

	if(in_array(6, $array_product_id) && in_array(7, $array_product_id)) { // Если в корзине есть товары с ID = 6 и ID = 7

		$discount = $cart->subtotal * 0.05; // 0.05 - это 5%

		$cart->add_fee('Фиксированная скидка в 5% за выбор акционных товаров ', -$discount);

	}

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Тот, который вам нужен, вы вставляете внизу файла functions.php, который находится в папке вашей темы. Если вы используете вариативные товары, то в коде «product_id» нужно заменить на «variation_id».

Фиксированная (применяется при наличии товаров из определенных категорий в корзине) процентная скидка на всю корзину в WooCommerce
Здесь, как вы уже поняли, в отличие от предыдущего варианта, для применения скидки проверяется не сам товар, а категория, в которой он находится.

Скрипт для применения скидки при наличии в корзине товара из определенной категории


function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	foreach($cart->get_cart() as $cart_item) {

		if(has_term(16, 'product_cat', $cart_item['product_id'])) { // Если в корзине есть товар из категории с ID = 16

			$discount = $cart->subtotal * 0.05; // 0.05 - это 5%

			$cart->add_fee('Фиксированная скидка в 5% за выбор товара из акционной категории ', -$discount);

			break;

		}
	
	}

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Скрипт для применения скидки при наличии товара в корзине из одной категории:


function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	foreach($cart->get_cart() as $cart_item) {

		if(has_term([16, 23], 'product_cat', $cart_item['product_id'])) { // Если в корзине есть товар из категории с ID = 16 или ID = 23

			$discount = $cart->subtotal * 0.05; // 0.05 - это 5%

			$cart->add_fee('Фиксированная скидка в 5% за выбор товара из акционной категории ', -$discount);

			break;

		}
	
	}

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Скрипт для применения скидки при наличии товара в корзине из определенных категорий:


function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	foreach($cart->get_cart() as $cart_item) {

		if(has_term(16, 'product_cat', $cart_item['product_id']) && has_term(23, 'product_cat', $cart_item['product_id'])) { // Если в корзине есть товар из категории с ID = 16 и ID = 23

			$discount = $cart->subtotal * 0.05; // 0.05 - это 5%

			$cart->add_fee('Фиксированная скидка в 5% за выбор товара из акционных категорий ', -$discount);

			break;

		}
	
	}

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Скрипт для применения скидки при наличии в корзине товаров из определенных категорий:


function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	$one_category = false; // Товар из первой категории
	$two_category = false; // Товар из второй категории

	foreach($cart->get_cart() as $cart_item) {

		if(has_term(16, 'product_cat', $cart_item['product_id'])) { // Если в корзине есть товар из категории с ID = 16

			$one_category = true;

		}

		if(has_term(23, 'product_cat', $cart_item['product_id'])) { // Если в корзине есть товар из категории с ID = 23

			$two_category = true;

		}
	
	}

	if($one_category && $two_category) { // Если в корзине есть товары из категорий с ID = 16 и ID = 23

		$discount = $cart->subtotal * 0.05; // 0.05 - это 5%

		$cart->add_fee('Фиксированная скидка в 5% за выбор товаров из акционных категорий ', -$discount);

	}

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Тот, который вам нужен, вы все равно вставляете внизу файла functions.php, который находится в папке вашей темы.

Фиксированная (в зависимости от выбранного способа доставки) процентная скидка на всю корзину в WooCommerce
Помимо того, что мы можем привязать скидку к конкретному товару или, например, его категории, так же просто можно организовать скидку на выбранный способ доставки.

Скрипт для применения скидки при выборе конкретного способа доставки:


function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	global $woocommerce;

	$delivery_name = '';
	$delivery_selected = [];
	$available_methods = $woocommerce->shipping->get_packages();

	if(isset($woocommerce->session)) {

		$delivery_selected = $woocommerce->session->get('chosen_shipping_methods');

	}

	foreach($available_methods as $method) {
		
		foreach($delivery_selected as $delivery) {
			
			if(isset($method['rates'][$delivery])) {

				$delivery_name = $method['rates'][$delivery]->label;

				break;

			}
		
		}

	}

	if($delivery_name == 'Самовывоз') {

		$discount = $cart->subtotal * 0.05; // 0.05 - это 5%

		$cart->add_fee('Фиксированная скидка в 5% за самовывоз ', -$discount);

	}

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Скрипт для применения скидки при выборе одного из указанных способов доставки:


function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	global $woocommerce;

	$delivery_name = '';
	$delivery_selected = [];
	$available_methods = $woocommerce->shipping->get_packages();

	if(isset($woocommerce->session)) {

		$delivery_selected = $woocommerce->session->get('chosen_shipping_methods');

	}

	foreach($available_methods as $method) {
		
		foreach($delivery_selected as $delivery) {
			
			if(isset($method['rates'][$delivery])) {

				$delivery_name = $method['rates'][$delivery]->label;

				break;

			}
		
		}

	}

	if($delivery_name == 'Самовывоз' || $delivery_name == 'СДЭК') {

		$discount = $cart->subtotal * 0.05; // 0.05 - это 5%

		$cart->add_fee('Фиксированная скидка в 5% за выбранный способ доставки ', -$discount);

	}

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Тот, который вам нужен, вы вставляете внизу файла functions.php, который находится в папке вашей темы.

Динамическая (переменная в зависимости от суммы) процентная скидка на всю корзину в WooCommerce
В отличие от вышеупомянутых вариантов с фиксированной скидкой, здесь задача немного усложняется. Мы привяжем нашу скидку к ценовому диапазону. И, например, когда человек заказал товаров на сумму от 1000 до 10 000, мы дадим ему одну скидку, а выше – другую.

Реализация будет выглядеть так:


function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	$woo_current_price = $cart->subtotal; // Текущая итоговая сумма
	
	if($woo_current_price >= 1000 && $woo_current_price <= 10000) {
	
		$discount = $cart->subtotal * 0.03; // 0.03 - это 3%
		$cart->add_fee('Скидка в 3% за заказ на сумму от 1 000 до 10 000 рублей ', -$discount);
		
	} elseif($woo_current_price > 10000) {
	
		$discount = $cart->subtotal * 0.05; // 0.05 - это 5%
		$cart->add_fee('Скидка в 5% за заказ на сумму более 10 000 рублей ', -$discount);
	
	}

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Вы также вставляете его в самый низ файла functions.php, который находится в папке вашей темы.

Динамическая (меняющаяся в зависимости от общего количества товаров) процентная скидка на всю корзину в WooCommerce
Здесь, как вы поняли из заголовка, мы будем рассчитывать скидку не на сумму, как мы это сделали во втором варианте, а на количество товаров в корзине.

Выполнение:


function woo_discount_total(WC_Cart $cart) {

	if(is_admin() && !defined('DOING_AJAX')) {
	
		return;
		
	}

	$woo_count_item = $cart->get_cart_contents_count(); // Количество товаров в корзине
	
	if($woo_count_item >= 10 && $woo_count_item <= 50) {
	
		$discount = $cart->subtotal * 0.03; // 0.03 - это 3%
		$cart->add_fee('Скидка в 3% за заказ включающий в себя от 10 до 50 товаров ', -$discount);
		
	} elseif($woo_count_item > 50) {
	
		$discount = $cart->subtotal * 0.05; // 0.05 - это 5%
		$cart->add_fee('Скидка в 5% за заказ включающий в себя более 50 товаров ', -$discount);
	
	}

}

add_action('woocommerce_cart_calculate_fees' , 'woo_discount_total');

Включить проверку поля телефона в woocommerce

Posted Posted in Советы / рекомендации
// Custom validation for Billing Phone checkout field 
add_action('woocommerce_checkout_process', 'custom_validate_billing_phone'); 
function custom_validate_billing_phone() { 
    $is_correct = preg_match('^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$', $_POST['billing_phone']); 
    if ($_POST['billing_phone'] && !$is_correct) { 
     wc_add_notice(__('The Phone field should be <strong>between 6 and 20 digits</strong>.'), 'error'); 
    } 
}

jQuery не определен в WordPress

Posted Posted in Советы / рекомендации

Шаг 1: Включение библиотеки jQuery

Когда вы просматриваете код, убедитесь, что jQuery включен и загрузится перед сценарием. Даже jQuery следует скачивать только один раз. Если он загружается несколько раз, это приведет к проблеме.

Если он не включен, передайте его как третий аргумент в вашей функции wp_enqueue_script() следующим образом:

wp_enqueue_script( 'tt-mobile-menu', get_template_directory_uri() .

'/js/mobile-menu.js', array('jquery'), '1.0', true );

Шаг 2: Структура файла JavaScript

Во-вторых, вы убедитесь, что ваш JavaScript начнется следующим образом:

jQuery(document).ready(function()

{

jQuery(#selector) ...

});

(function($) {

// Use $() inside of this function

$(#selector) ...

})(jQuery);

Шаг 3. Убедитесь, что jQuery загружен

Иногда возникают проблемы, потому что jQuery не загружается, хотя включено. Итак, чтобы убедиться, что jQuery загружен, скопируйте URL-адрес со сценария src и вставьте его в новую вкладку браузера. Например: если сценарий src такой:
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>

Скрытие полей заказа в зависимости от выбранного способа доставки WooCommerce

Posted Posted in Советы / рекомендации

Шаг первый. Добавление формы полей в сниппет


WooCommerce имеет такой функционал фрагментов, что к ним можно добавить нужный html и отобразить в нужном месте. Итак, добавляем фрагмент

Код был изменен. Предыдущий фрагмент подойдет, но если магазин использует личный кабинет, то возникнут проблемы. Поскольку эта форма подключена в файле checkout / form-billing.php, правильнее использовать следующий код

/**
 * Добавляем часть формы к фрагменту
 *
 * @sourcecode    https://wpruse.ru/woocommerce/hiding-fields-on-chosen-delivery/
 *
 * @param $fragments
 *
 * @return mixed
 *
 * @sourcecode    https://wpruse.ru/woocommerce/hiding-fields-on-chosen-delivery/
 * @author        Artem Abramovich
 * @testedwith    WC 5.5
 */
function awoohc_add_update_form_billing( $fragments ) {

	$checkout = WC()->checkout();

	parse_str( $_POST['post_data'], $fields_values );

	ob_start();

	echo '<div class="woocommerce-billing-fields__field-wrapper">';

	$fields = $checkout->get_checkout_fields( 'billing' );

	foreach ( $fields as $key => $field ) {
		$value = $checkout->get_value( $key );

		if ( isset( $field['country_field'], $fields[ $field['country_field'] ] ) ) {
			$field['country'] = $checkout->get_value( $field['country_field'] );
		}

		if ( ! $value && ! empty( $fields_values[ $key ] ) ) {
			$value = $fields_values[ $key ];
		}

		woocommerce_form_field( $key, $field, $value );
	}

	echo '</div>';

	$fragments['.woocommerce-billing-fields__field-wrapper'] = ob_get_clean();

	return $fragments;
}

add_filter( 'woocommerce_update_order_review_fragments', 'awoohc_add_update_form_billing', 99 );

Шаг второй. Удаление ненужных полей

Предполагается, что способы доставки настроены. Например, созданы два метода. Теперь вам нужно указать желаемый идентификатор способа доставки. Самый простой способ – посмотреть исходный код

Выбранные строки являются идентификаторами. Теперь достаточно сделать чек и, если мы получим желаемый способ доставки, удалим лишние поля.

/**
 * Скрываем поля для бесплатного способа доставки
 *
 * @param $fields
 *
 * @return mixed
 *
 * @sourcecode    https://wpruse.ru/woocommerce/hiding-fields-on-chosen-delivery/
 * @author        Artem Abramovich
 * @testedwith    WC 5.5
 */
function awoohc_override_checkout_fields( $fields ) {

	// получаем выбранные методы доставки.
	$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );

	// проверяем текущий метод и убираем не ненужные поля.
	if ( false !== strpos( $chosen_methods[0], 'free_shipping' ) ) {
		unset(
			$fields['billing']['billing_company'],
			$fields['billing']['billing_address_1'],
			$fields['billing']['billing_address_2'],
			$fields['billing']['billing_city'],
			$fields['billing']['billing_postcode'],
			$fields['billing']['billing_state'],
			$fields['billing']['billing_phone'],
			$fields['billing']['billing_email']
		);
	}

	return $fields;
}

add_filter( 'woocommerce_checkout_fields', 'awoohc_override_checkout_fields' );

Шаг третий. Обновление страницы

Все работает, кроме обновления страницы. Давайте добавим немного магии ajax, поскольку вся обработка полей на странице оформления заказа выполняется через ajax.

/**
 * Прелоад при переключении доставки
 *
 * @sourcecode    https://wpruse.ru/woocommerce/hiding-fields-on-chosen-delivery/
 * @author        Artem Abramovich
 * @testedwith    WC 5.5
 */
function awoohc_add_script_update_shipping_method() {

	if ( is_checkout() ) {
		?>
		<!--Скроем поле Страна. Если успользуется поле Страна, то следцет убрать скрытие-->
		<style>
			#billing_country_field {
				display: none !important;
			}
		</style>

		<!--Выполняем обновление полей при переключении доставки-->
		<script>
			  jQuery( document ).ready( function( $ ) {
				  $( document.body ).on( 'updated_checkout updated_shipping_method', function( event, xhr, data ) {
					  $( 'input[name^="shipping_method"]' ).on( 'change', function() {
						  $( '.woocommerce-billing-fields__field-wrapper' ).block( {
							  message: null,
							  overlayCSS: {
								  background: '#fff',
								  'z-index': 1000000,
								  opacity: 0.3
							  }
						  } );
					  } );
				  } );
			  } );
		</script>
		<?php
	}
}

add_action( 'wp_footer', 'awoohc_add_script_update_shipping_method' );

Код подключается к хуку wp_footer, при желании его можно поместить в отдельный файл. Код был протестирован на стандартной теме StoreFront. Все должно работать правильно.

Причем обновление полей тоже происходит не после обновления способов доставки, а параллельно с этим обновлением

Замена знака валюты на буквы Woocommerce

Posted Posted in Советы / рекомендации

Открываем файл WordPress темы  functions.php и добавляем в него фильтр для woocommerce (ВНИМАНИЕ!!! Код приведенный ниже добавляем в конец файла functions.php ):

 

add_filter( 'woocommerce_currencies', 'add_my_currency' );

function add_my_currency( $currencies ) {

$currencies['UAH'] = __( 'Українська гривня', 'woocommerce' );

return $currencies;

}

add_filter('woocommerce_currency_symbol', 'add_my_currency_symbol', 10, 2);

function add_my_currency_symbol( $currency_symbol, $currency ) {

switch( $currency ) {

case 'UAH': $currency_symbol = 'грн'; break;

}

return $currency_symbol;

}

Установка платформы Orchid – Панель администратора Laravel

Posted Posted in Советы / рекомендации

 


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

Создать проект

Примечание. Если у вас уже установлена ​​Laravel, вы можете пропустить этот шаг.

Будучи пакетом для фреймворка, вы должны сначала установить Laravel. Это можно сделать с помощью инструмента управления зависимостями Composer, выполнив composer create-projectкоманду в своем терминале:

$ composer create-project laravel/laravel orchid-project "8.*" --prefer-dist

Для получения дополнительной информации о том, как установить Laravel, следуйте Официальному руководству по установке Laravel .

У тебя нет Composer? Его легко установить, следуя инструкциям на странице загрузки .

Он создаст новый orchid-projectкаталог, загрузит зависимости и сгенерирует ведущие каталоги и файлы, необходимые для начала работы. Другими словами, установите новый проект фреймворка.

Не забудь

  • Набор «CHMOD -R о + ш» права на storageи bootstrap/cacheкаталоги
  • Отредактируйте .envфайл

Примечание. Если вы только что установили Laravel, вам может потребоваться сгенерировать ключ с помощью командыphp artisan key:generate

Добавить зависимость

Перейдите в каталог созданного проекта и выполните команду:

$ composer require orchid/platform

Примечание. Вам также необходимо создать новую базу данных, обновить .envфайл учетными данными и добавить URL-адрес вашего приложения в переменную APP_URL.

Установка платформы

Примечание. При установке app/Models/Userмодель перезапишется .

Запустите процесс установки, выполнив команду:

php artisan orchid:install

Создать пользователя

Чтобы создать пользователя с максимальными разрешениями, вы можете выполнить следующую команду с именем пользователя, адресом электронной почты и паролем:

php artisan orchid:admin admin admin@admin.com password

Запустить локальный сервер

Если вы не установили сервер (Nginx, Apache и т. Д.) Для запуска проекта, вы можете использовать встроенный сервер:

php artisan serve

Откройте браузер и перейдите в http://localhost:8000/admin. Если все работает, вы увидите страницу входа в панель управления. Позже вы можете остановить сервер, нажав Ctrl + Cв терминале.

Примечание. Предположим, ваша среда выполнения использует другой домен (например, orchid.loc). В этом случае панель администратора может быть недоступна. Вам необходимо указать свой домен в файле config/platform.phpили .envфайле конфигурации . Это позволяет сделать панель администратора доступной в другом домене или субдомене, например platform.example.com.

Издательские ресурсы

По умолчанию статические файлы (css / js) доставляются через маршруты приложений. Это лучший баланс между конфигурацией и отслеживанием изменений, но вы можете указать веб-серверы для распространения. Для этого вам нужно запустить команду, которая создает символическую ссылку в общедоступном каталоге. Используйте его только в том случае, если на вашем веб-сервере возникли проблемы :

php artisan orchid:link

Проблемы, возникшие при установке? Возможно, у кого-то уже была эта проблема https://github.com/orchidsoftware/platform/issues. Если нет, вы можете отправить сообщение или попросить о помощи .

Обновление

Находясь в каталоге проекта, используйте Composerдля обновления пакета:

composer update orchid/platform --with-dependencies

Примечание. Вы также можете обновить все свои зависимости, перечисленные в composer.jsonфайле, запустив composer update.

 

Установка ext-dom PHP7

Posted Posted in Советы / рекомендации

Прежде всего, прочтите предупреждение! Он говорит, что не запускайте composer от имени root ! Во-вторых, вы, вероятно, используете Xammp на своем локальном компьютере, который по умолчанию имеет необходимые библиотеки php.

Но на вашем сервере вам не хватает ext-dom . php-xml имеет все необходимые связанные пакеты. Таким образом, вы можете просто установить его, запустив:

sudo apt-get update
sudo apt install php-xml

Скорее всего, вам тоже не хватает mbstring . Если вы получите сообщение об ошибке, установите этот пакет также с:

sudo apt-get install php-mbstring

Тогда беги:

composer update
composer require cviebrock/eloquent-sluggable

Для тех, кто хочет установить ext-dom на php 7.1 и выше, выполните эту команду:

sudo apt install php-xml

Как вставить шорткод в PHP

Posted Posted in Советы / рекомендации

Специально для тех, кто и так все знает, а просто ищет быстрый ответ, как вставить шорткод в шаблон wordpress или на другой движок, то вот, пожалуйста, используйте этот код:

<?php echo do_shortcode( ‘[your_shortcode]’ ); ?>

Однако не забывайте про пунктуацию! Кавычки в вашем шорткоде и в php коде должны быть разными.

Т.е., если в вашем шаблоне сайта на wordpress, вы используете такой же шорткод, но с двумя кавычками внутри ( [«…»] ), и в вашем php-коде вы также используете двойные кавычки ( «[…]» ), то нужно одни из них поменять на одинарные. Именно из-за таких мелких причин часто не работают шорткоды в wordpress.

Показать пароль по значку

Posted Posted in Советы / рекомендации
<div class=»password»>
<input type=»password» id=»password-input» placeholder=»Введите пароль» name=»password» value=»123456″>
<a href=»#» class=»password-control»></a>
</div>
<style type=»text/css»>
.password {
width: 300px;
margin: 15px auto;
position: relative;
}
#password-input {
width: 100%;
padding: 5px 0;
height: 30px;
line-height: 40px;
text-indent: 10px;
margin: 0 0 15px 0;
border-radius: 5px;
border: 1px solid #999;
font-size: 18px;
}
.password-control {
position: absolute;
top: 11px;
right: 6px;
display: inline-block;
width: 20px;
height: 20px;
background: url(https://snipp.ru/demo/495/view.svg) 0 0 no-repeat;
}
.password-control.view {
background: url(https://snipp.ru/demo/495/no-view.svg) 0 0 no-repeat;
}
</style>

<script src=»https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js»></script>
<script>
$(‘body’).on(‘click’, ‘.password-control’, function(){
if ($(‘#password-input’).attr(‘type’) == ‘password’){
$(this).addClass(‘view’);
$(‘#password-input’).attr(‘type’, ‘text’);
} else {
$(this).removeClass(‘view’);
$(‘#password-input’).attr(‘type’, ‘password’);
}
return false;
});
</script>

Создать таб вкладки для карточки товара WooCommerce

Posted Posted in Советы / рекомендации

Описание
Этот плагин расширяет возможности WooCommerce, позволяя владельцам магазинов добавлять собственные вкладки к товарам. Вкладки отображаются на страницах отдельных продуктов справа от вкладки «Описание» по умолчанию.

Отдельные вкладки продуктов управляются на экране редактирования продукта WooCommerce и могут быть добавлены для каждого продукта. Вы также можете создавать сохраненные вкладки и при необходимости добавлять их к нескольким продуктам. Вкладки можно легко добавлять, удалять и менять местами.

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

Custom Product Tabs for WooCommerce

 

Скрыть виджеты WordPress на мобильном устройстве

Posted Posted in Советы / рекомендации

Самый простой способ – использовать Widget Options Plugin который можно скрыть виджеты на мобильных и других устройствах. Он бесплатный в репозитории: https://wordpress.org/plugins/widget-options/.

Ниже можно увидеть опции

Редирект после успешного заказа товара в магазине

Posted Posted in Советы / рекомендации

Редирект можно сделать добавив этот код в function.php вашей темы.

add_action( 'template_redirect', 'woo_custom_redirect_after_purchase' );
function woo_custom_redirect_after_purchase() {
    global $wp;
    if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) {
        wp_redirect( 'URL куда будем делать редирект' );
        exit;
    }
}

Теперь можно просто создать страницу “спасибо за заказ” и оформить как угодно.

Install Symfony Framework

Posted Posted in Советы / рекомендации

Создание проекта

 

Чтобы создать новый Symfony проект, основанный на одном из официальных шаблонов, нужно запустить команду:

 

$ symfony new [--full | --demo] <path-to-project>

 

По умолчанию используется минимальный шаблон skeleton. Чтобы установить website-skeleton нужно запустить команду с опцией --full. Соответственно, для установки demo проекта необходимо запускать команду с опцией --demo.

 

Под капотом symfony new выполняет команду composer create-project, затем инициализирует новый Git репозиторий и сразу создаёт Initial commit.

 

symfony new

 

Локальный сервер

 

Для запуска сервера достаточно в корне приложения запустить команду

 

$ symfony serve

 

symfony serve

 

она проанализирует доступные SAPI на используемой машине и выберет лучший вариант из существующих, пользуясь следующими приоритетами: на первом месте PHP FPM, дальше PHP CGI и в конце PHP CLI. Список доступных SAPI можно посмотреть командой:

 

$ symfony local:php:list

 

symfony local:php:list

 

После этого команда запустит сервер, который будет доступен по адресу 127.0.0.1 и подберёт свободный порт начиная с 8000.

 

По умолчанию сервер запускается в интерактивном режиме. Мы сразу видим логи сервера и приложения, но наш терминал заблокирован. Сервер можно запустить в режиме демона. Для этого нужно добавить опцию -d при запуске команды symfony serve.

 

Логи можно будет посмотреть, запустив команду:

 

$ symfony server:log

 

также можно посмотреть статус запущеного сервера используя команду:

 

$ symfony server:status

 

чтобы остановить запущенный сервер используется команда:

 

$ symfony server:stop

 

UPD: Раньше для запуска сервера мы использовали пакет symfony/web-server-bundle. С появлением Symfony CLI этот пакет становится не очень актуальным, так как он умеет только запускать сервер, используя PHP CLI SAPI и не поддерживает HTTPS, доменные имена, PHP FPM SAPI и прочее.

 

Поддержка TLS

 

Некоторые сторонние сервисы или библиотеки требуют отправлять запросы, используя HTTPS протокол. Symfony CLI предоставляет возможность очень легко настроить поддержку TLS, установив дополнительные компоненты, с помощью следующей команды:

 

$ symfony server:ca:install

 

symfony server:ca:install

 

после чего достаточно перезапустить ваш браузер и вуаля — поддержка TLS настроена! Запускаете сервер командой symfony serve и можно перейти на сайт по HTTPS протоколу.

 

Мне не совсем нравится открывать все проекты по адресу https://127.0.0.1:8000 или https://localhost:8000, а вам? Это приносит свои неудобства: если запущено несколько проектов одновременно — нужно запоминать на каком порту какой проект работает; при перезапуске сервера порты могут меняться и т.п.

 

Symfony CLI решает и этот вопрос! Он предоставляет для нас proxy-сервер, с помощью которого можно создавать красивые доменные имена. Для этого нужно привязать к нашему проекту желаемое домменое имя с помощью команды:

 

$ symfony proxy:domain:attach <domain-name>

 

symfony proxy:domain:attach

 

таким образом домен demo-project.com привязался к директории с проектом. Далее нам нужно запустить proxy-сервер командой:

 

$ symfony proxy:start

 

symfony proxy:start

 

Мы запустили proxy-сервер в режиме демона и он доступен у нас по адресу http://127.0.0.1:7080, можем открыть его в браузере:

 

symfony proxy server

 

где увидим список доменов, пути к проектам в файловой системе и статус сервера для каждого проекта. На данном скриншоте видно то, что все сервера находятся в статусе Stopped, то есть они пока не запущены. Следующим шагом нам нужно добавить этот proxy-сервер в настройки ОС

 

macOS Proxy Config

 

На этом настройка proxy-сервера заканчивается, далее нужно запустить сервер уже известной нам командой symfony serve. Помимо IP-адреса с портом мы увидим наше доменное имя, по которому можем перейти в браузере! Ко всем доменным именам добавляется постфикс .wip.

 

symfony serve

 

То есть в случае использования proxy-сервера flow запуска проекта немного меняется:

 

  1. Запускаем proxy-сервер
    $ symfony proxy:start
  2. Запускаем сервер для приложения
    $ symfony serve

 

Для завершения работы с проектом “зеркалируем” действия, описанные выше:

 

  1. Останавливаем сервер
    $ symfony server:stop
  2. Останавливаем proxy-сервер
    $ symfony proxy:stop

 

Для упрощения данных операций рекоммендую использовать утилиту GNU Make.

 

Переключение версий PHP

 

Если вы используете разные версии PHP на разных проектах, вы наверняка сталкивались с проблемой переключения между версиями. Было бы здорово иметь какой-то автоматический инструмент для этого, не так ли? Symfony CLI умеет решать и эту проблему! Вам достаточно создать файл .php-version в корне проекта и в качестве содержимого указать желаемую версию.

 

$ echo "7.2" > .php-version

 

php-version

 

Как видно на скриншоте выше, Symfony CLI прочитал файл .php-version и запустил сервер, используя версию, указанную в этом файле.

 

Так же Symfony CLI предоставляет нам обёртку над PHP CLI, которая тоже учитывает версию PHP, указанную в файле .php-version. То есть если вам нужно вызывать консольные скрипты, например bin/console — используйте её.

 

$ symfony php

 

symfony php

 

Для удобства можно создать алиас для этой команды, чтобы сэкономить время и избежать ошибок в написании команды. К примеру, я создал для себя алиас sphp:

 

$ echo "alias sphp='symfony php'" >> ~/.bash_profile && source ~/.bash_profile

 

Symfony CLI предоставляет аналогичную обёртку для Composer, поэтому с ним у вас также не возникнет никаких проблем. Для удобства можно создать алиас и для этой обёртки. У меня это scomposer:

 

$ echo "alias scomposer='symfony composer'" >> ~/.bash_profile && source ~/.bash_profile

 

Проверка на уязвимые пакеты

 

В качестве бонуса Symfony CLI предоставляет команду для проверки на наличие уязвимых composer-пакетов в вашем проекте. Больше не прийдётся устанавливать в проект зависимость Symfony Security Checker. Так же официальная документация говорит о том, что версия встроенная в Symfony CLI работает оптимальнее за счёт того, что она не делает HTTP запросы на официальный API. Запустить проверку можно командой:

 

$ symfony security:check

 

symfony security:check

Установить Laravel на Ubuntu

Posted Posted in Советы / рекомендации

Системные Требования

Ваша система должна удовлетворять следующим требованиям, чтобы иметь возможность запускать последнюю версию Laravel:

  • PHP> = 7.1.3 с OpenSSL, PDO, Mbstring, Tokenizer, XML, Ctype и JSON PHP Extensions.
  • Composer – менеджер пакетов на уровне приложений для PHP.

Установка предварительных условий

Во-первых, убедитесь, что вы обновили исходники вашей системы и существующие пакеты программного обеспечения, используя следующие команды.

$ sudo apt-get update 
$ sudo apt-get upgrade

Установка LAMP Stack на Ubuntu

Затем настройте запущенную среду LAMP (Linux, Apache, MySQL и PHP), если у вас уже есть, вы можете пропустить этот шаг или установить LAMP stack, используя следующие команды в системе Ubuntu.

$ sudo apt-get install python-software-properties
$ sudo add-apt-repository ppa:ondrej/php
$ sudo apt-get update
$ sudo apt-get install apache2 libapache2-mod-php7.2 mysql-server php7.2 php7.2-xml php7.2-gd php7.2-opcache php7.2-mbstring php7.2-mysql

Хотя репозиторий Ubuntu по умолчанию имеет PHP, но всегда рекомендуется иметь сторонний репозиторий для более частых обновлений.

Если вы хотите, вы можете пропустить этот шаг и придерживаться стандартной версии PHP из репозитория Ubuntu.

Установка Composer на Ubuntu

Теперь нам нужно установить Composer (менеджер зависимостей для PHP) для установки необходимых зависимостей Laravel, используя следующие команды.

# curl -sS https://getcomposer.org/installer | php
# mv composer.phar /usr/local/bin/composer
# chmod +x /usr/local/bin/composer

Установка Laravel на Ubuntu

После установки Composer теперь вы можете загрузить и установить последнюю версию Laravel из официального репозитория git в каталоге Apache /var/www.

$ cd /var/www
$ git clone https://github.com/laravel/laravel.git
$ cd /var/www/laravel
$ sudo composer install

После завершения установки Laravel установите соответствующие разрешения для всех файлов, используя следующие команды.

$ chown -R www-data.www-data /var/www/laravel
$ chmod -R 755 /var/www/laravel
$ chmod -R 777 /var/www/laravel/storage

Настройка ключа шифрования

Теперь создайте файл окружения для вашего приложения, используя предоставленный пример файла.

$ cp .env.example .env

Laravel использует ключ приложения для защиты пользовательских сеансов и других зашифрованных данных.

Поэтому вам нужно сгенерировать и установить ключ приложения в случайную строку, используя следующую команду.

$ php artisan key:generate

После того, как ключ был сгенерирован, откройте файл конфигурации .env и обновите требуемые значения.

Кроме того, убедитесь, что APP_KEY правильно установлен в файле конфигурации, сгенерированный в приведенной выше команде.

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:AFcS6c5rhDl+FeLu5kf2LJKuxGbb6RQ/5gfGTYpoAk=
APP_DEBUG=true
APP_URL=http://localhost

Создать базу данных для Laravel

Возможно, вам также понадобилось создать базу данных MySQL для вашего проекта приложения Laravel, используя следующие команды.

$ mysql -u root -p
mysql> CREATE DATABASE laravel;
mysql> GRANT ALL ON laravel.* to 'laravel'@'localhost' IDENTIFIED BY 'secret_password';
mysql> FLUSH PRIVILEGES;
mysql> quit

Теперь откройте файл конфигурации .env и обновите настройки базы данных, как показано ниже:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=laravel
DB_PASSWORD=secret_password

Настройка Apache для Laravel

Теперь перейдите в конфигурационный файл виртуального хоста по умолчанию в Apache /etc/apache2/sites-enabled/000-default.conf и обновите общедоступный каталог DocumentRoot в Laravel, как показано ниже:

$ nano /etc/apache2/sites-enabled/000-default.conf

Теперь измените конфигурацию виртуального хоста по умолчанию со следующим содержимым, а также обязательно замените yourdomain.tld на доменное имя вашего веб-сайта, как показано ниже:

<VirtualHost *:80>
ServerName yourdomain.tld
ServerAdmin webmaster@localhost
DocumentRoot /var/www/laravel/public
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /var/www/laravel>
AllowOverride All
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

После внесения вышеуказанных изменений не забудьте перезагрузить изменения конфигурации Apache, перезапустив службу, используя следующую команду:

$ sudo service apache2 restart

Доступ к приложению Laravel

Наконец, получите доступ к вашему приложению Laravel из браузера, используя следующий URL-адрес.

http://yourdomain.tld
или
http://your-ip-address

Adobe Flash reaches end of life

Posted Posted in Советы / рекомендации

Adobe’s once-ubiquitous Flash Player, a browser-based runtime for displaying rich media content on the Internet, has reached the end of the road, with the company having made the final scheduled release of the technology for all regions outside mainland China.

The final release was made on December 8. Adobe will no longer support Flash Player after this month; Flash content will be blocked from running in Flash Player beginning on January 12, 2021.

Adobe advises all users to immediately uninstall Flash Player to protect their systems. In release notes, Adobe thanked customers and developers who have used the technology and created content leveraging it during the last two decades. An end-of-life general information page has been posted.

Adobe announced in July 2017 that it would discontinue Flash Player at the end of this year. Flash technology succumbed to perceptions of it as proprietary technology in an era when standards-based technologies such as HTML5 began to gather momentum. Adobe cited WebGL and WebAssembly as now-viable alternatives.

Flash sustained a critical blow when Apple declined not to support it on the iPhone and iPad mobile devices. Additionally, security issues plagued Flash, and major browser vendors began moving away from the technology. Video content site YouTube backed away from Flash in 2015, opting for HTML5.

By giving three years’ advance notice, Adobe hoped to provide enough time for developers, designers, businesses, and others to migrate their Flash content to new standards. The timing of the Flash end-of-life was coordinated with major browser vendors.

Mozilla Firefox boosts JavaScript performance

Posted Posted in Советы / рекомендации

Firefox users can expect improved JavaScript performance in the Firefox 83 browser, with the Warp update to the SpiderMonkey JavaScript engine enabled by default.

Also called WarpBuilder, Warp improves responsiveness and memory usage and speeds up page loads by making changes to JiT (just-in-time) compilers. Optimizing JiT is changed to rely solely on the CacheIR simple linear bytecode format, specifically, CacheIR data collected by the baseline tiers. The new architecture leveraged in the browser also is described as being more maintainable and unlocking additional SpiderMonkey improvements.

Firefox 83 was published in beta October 20 and is scheduled to be released November 17. Warp has been shown to be faster than Ion, SpiderMonkey’s previous optimizing JiT, including a 20 percent improvement on Google Docs load time. Other JavaScript-intensive websites such as Netflix and Reddit also have shown improvement.

Basing Warp on CacheIR enabled removal of code throughout the engine that was needed to track global type inference data used by IonBuilder, resulting in speedups. Although IonBuilder and WarpBuilder both produce Ion MIR, an intermediate representation used by the optimizing JiT back end, IonBuilder had a lot of complex code not needed in WarpBuilder. Warp also can do more work off-thread and needs fewer recompilations. Plans call for continued optimizations on Warp, which at present is slower than Ion on some synthetic benchmarks.

Warp has replaced the front end — the MIR building phase — of the IonMonkey JiT. Plans call for removing the old code and architecture, which is likely to happen in Firefox 85. Additional performance and memory usage improvements are anticipated as a result. Mozilla also will continue to incrementally optimize the back end of the IonMonkey JiT, as Mozilla believes there is still room for improvement for JavaScript-intensive workloads. Also in development is a tool for web developers and Mozilla to explore CacheIR data for a JavaScript function.

Angular, React, Vue: JavaScript frameworks

Posted Posted in Советы / рекомендации

Figure 1 describes how state manifestation is handled without such frameworks. Figure 2 describes how it is handled with the frameworks.

Figure 1. Without data binding

dev ui data binding smIDG
Figure 1.

Figure 2. With data binding via Angular, React, and Vue

web ui data binding smIDG
Figure 2.

Components

The frameworks also align in being component-based. This is not a new idea: Each area of the user interface is represented by a component. The code in the component determines what is displayed and how the view behaves. Bundling state-driven data binding into components delivers the critical advantage to all three frameworks that makes them superior in complex interfaces to what went before.

Industry adoption profiles

Now we will take a look at the presence of each framework in the industry, to get a look at the level of adoption and viability. What I mean here is, when you choose a framework for a new project, or decide on which framework to learn, you want to be sure you are adopting a framework that is going to be successful over the long term.

Figure 3 looks at the number of watchers each framework has on Stack Overflow. A few things are clear from this chart. All three frameworks have a strong presence on Stack Overflow, although Vue is far behind with just over 50,000 watchers. ReactJS has a commanding lead, which has increased over the past year.

Figure 3. Stack Overflow Watchers

so watchers large

IDG

Figure 3.

Figure 4 looks at GitHub stars. Here Angular takes last place, lagging far behind. Interestingly, Vue is in the lead, and well ahead of React, indicating a great deal of curiosity (if not actual use) in the project. In each case, over the last year, the frameworks have shown increasing interest at about the same rate.

Figure 4. GitHub Stars

github stars large

IDG

Figure 4.

GitHub stars tend to reflect people’s theoretical interest in a project. Figure 5 looks at weekly NPM downloads, which is an indicator of active, practical use of the projects.

Popularity take-away

Each of these frameworks appears to have enough up-take to be long-term viable. React’s popularity means it is easier to find developers who know it, and easier to find employers that are hiring for it.

Figure 5. NPM downloads (weekly)

npm weekly large

IDG

Figure 5.

The fact that leaps out in Figure 5 is that the actual active use of frameworks goes to ReactJS by a landslide. React has almost twice as many weekly downloads as the other two frameworks combined. It’s no surprise that React is the most in-use framework, but it’s notable just how significant its lead is.

Technical comparison

You’ve seen how the frameworks are conceptually similar, and had a look at their relative presence in the industry. Now let’s have a look at their technical aspects.

Angular

Angular 2+ was “designed from above.” That is, a bunch of smart people sat down and decided what would make for the ultimate front-end JavaScript framework.

In many ways, they succeeded: Angular is a very complete framework. On the other hand, Angular can feel overwhelming to learn and use the framework, as you are immediately required to master a large set of interacting elements (services, dependency injection, etc.) to achieve anything.

Angular is intended to incorporate everything you might need to develop large-scale front ends. In comparison, React relies upon community-developed plug-ins (for router support, for instance).

Ultimately, you as a developer are inside a code-thought-machine that wants you to conform to its ideals and conventions.

On the plus side, the wholesale adoption of ReactiveX (RxJS) across the board is innovative and forward-thinking. Not only does it mean all the event handling needs (intra-component, inter-component, back-end service calls, etc.) are managed via the same mechanism, but the same well-built framework (ReactiveX) and its learning will transfer to any other language you can imagine.

Moreover, large-scale projects with many team members may benefit from the more rigid and well-defined architectural style present in Angular.

There are varying opinions about the benefits and drawbacks of TypeScript, but you will code and read TypeScript if you use Angular. Another executive up-front decision.

Angular adopts ECMAScript classes wholesale. These classes use the built-in state as the component state. These are decorated with annotations to define their metadata.

Views in Angular are similar to views in Vue in that they are straight HTML templates with additional data-binding and logic support via inline directives.

Angular uses NgRX/store as its built-in, centralized state management plug-in.

Angular component example

Listing 2 displays a counter component similar to the React example, and is derived from this example.

@Component({
    selector: 'app',
    template: `
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
    <div></div>
    {{counter}}   
`
})
export class App {
    public counter : number = 0;

    increment(){
      this.counter += 1;
    }

    decrement(){
      this.counter -= 1;
    }
}

bootstrap(App, []);

Notice the @Component annotation. This is a “decorator” that informs Angular that the JavaScript class that follows is a component. Other features like services are handled in a similar fashion.

Also observe that the state is handled as a class member: public counter. This is a fairly clean way to build components atop JavaScript’s native syntax.

The interactive part of the component is added to the button elements via the (click) directive that is analagous to the DOM method onClick, but allows for calling methods on the component class. In this case it executes the increment and decrement methods.

Finally, the inline token {{counter}} allows for outputting the data-bound variable. This is slightly different from React’s syntax, but almost the same, and serves the same purpose.

React

React’s strength is that it has organically grown up from in-the-world use and has continued to develop in response to heavy usage. It has undergone extensive growth, but its roots and ongoing advantages reside in its being a framework used by Facebook for its own applications.

You can see Facebook’s committment to driving innovation in the framework with forward-looking features like Concurrent Mode (still in experimental mode at the time of writing).

React has also aggressively developed what is known as “pure” or functional components and hooks to empower them. These components avoid some of the overhead of class-based components. Vue has some support for functional components, and it is possible to create them in Angular, but React is the clear leader in this area.

Component definition and interactions are relatively straightforward in React, honoring the principle of least surprise.

As long as you avoid unnecessary Redux usage, the handling of React with a large-scale application is as good as Vue. Angular handles large code bases in a consistent manner and can offer benefits over React in this area. It is possible to define elegant large-scale apps in React, but the framework itself isn’t going to do as much as Angular to enforce that definition.

React uses an immutable state object accessible only via setState() to represent component state. This is different from Vue and Angular, which employ a more built-in JavaScript approach to state data.

React employs JSX for its view templates. JSX is an interesting approach in that it is like HTML with JavaScript superpowers (or JavaScript with HTML superpowers, if you prefer). JSX can be a bit off-putting when first learning the framework. It works quite well in the long run and is not difficult to learn if you arleady know HTML and JavaScript.

React’s default centralized data management is handled via Redux.

React component example

Listing 1 has a simple component example in React, derived from the React docs. This is a functional component, as that is the primary way to build components going forward.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Notice how the state is handled via the useState “hook.” This exposes the setCount() method to the template. The template is returned by the actual component function, and is written in JSX. JSX allows the inline integration of the JavaScript function into the onClick attribute of the button element, which interacts with the component state. The state is also accessed via the {count} token in the template markup.

Vue

Vue adopts a “normal JSON object as state” philosophy. Any time you can just use the language itself, it’s a win for simplicity. So you’ll find Vue simpler in this respect than React’s setState(), for example. However, there are edge cases and caveats that ultimately mean you are dealing with a native-JSON-hybrid beast.

In a sense, Vue is somewhere between Angular and React, a compromise between Angular’s top-down design and React’s organic growth.

Despite being the newest contender, and lacking the backing of a large corporation, Vue has kept pace with developments and delivers a fully viable framework. Also, there are a number of quality plug-ins and kits for Vue (like Quasar and Vuetify).

Vue has a reputation for being the easiest to learn. That probably derives from its JSON data model and HTML-with-decoration view definitions (versus React’s JSX). Vue templates can also incorporate inline JavaScript functions, unlike JSX.

Vue offers Vuex as its built-in, centralized state management solution.

Vue component example

Listing 3 shows a simple component definition in Vue, from the Vue docs.

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

In Listing 3, you can see that the component is exported as a CommonJS module. This is the Vue idiom for defining the component code. The template is identified as the template member.

Within the object that the module exports is the data member. This is a function that returns an object defining the component’s state.

Notice that the template allows for HTML with inline directives like v-on:click, similar to Angular’s (click) or React’s onClick. The syntax in Vue for outputting bound variables is the same as Angular: {{count}}.

Performance comparison

Performance can be tricky to get a handle on. This excellent article offers a data-based comparison of the three frameworks in three areas: DOM manipulation, load time, and memory allocation.

In the categories: Angular wins for DOM manipulation (in most cases); Vue wins for load times; React and Angular win for memory allocation.

In general, it’s not terribly valuable to make a performance-based decision among the frameworks. How you use them will make the biggest impact on performance.

Native support and server-side rendering

Although Vue and Angular also support to-native features and server-side rendering, React seems to be keeping well ahead in terms of the simplicity in using these. JSX has a good feel for me personally, in that it keeps related code and layout close together. Others have had a less happy experience with it. Overall, I count JSX as a positive for React.

Which framework to use?

The question as to which technology is best is impossible to say definitively. There are quantitative differences, but in the end it is a qualitative decision.

As with many technology choices, external factors can play a big role. In particular, your familiarity with the frameworks and that of your team will weigh heavily. Availability of developers who know the tech is also important, and in that arena, React is the clear winner. The React project also seems the most committed to offering forward-looking innovations.

Microsoft и Google решают проблемы совместимости браузеров

Posted Posted in Советы / рекомендации

Microsoft and Google are partnering to promote web browser compatibility around a number of CSS (Cascading Style Sheets) features, with an effort called #Compat2021.

Also involving open source software consulting firm Igalia and the broader web community, #Compat2021 aims to improve compatibility in five specific areas:

  • CSS Flexbox, a CSS module that defines a CSS box model optimized for user interface design and the layout of items in a single direction.
  • CSS Grid, for dividing a page into regions or defining the relationship in terms of layer, position, and size, between parts of a control built from HTML primitives.
  • CSS Position: sticky, or sticky positioning, which is akin to a hybrid of relative and fixed positioning.
  • CSS aspect-ratio property, pertaining to a CSS property setting a preferred aspect ratio for the box, to be used in the calculation of auto sizes and other layout functions.
  • CSS transforms, for rotating, scaling, skewing, or translating an element.

The joint working group involved in the project identified these focus areas based on the number of related bugs in each vendor’s tracking system, feature usage data, survey feedback, CanIUse data, and web-platform-tests test results.

While working group members will focus on their respective implementations, the Microsoft Edge team plans to contribute fixes to the Google-sponsored Chromium project to pass all CSS Grid tests in 2021 and to support improving interop across browsers.

#Compat21 was announced on March 22. Progress on the project can be tracked on the Compat 2021 dashboard.

Цветовое оформление сайта

Posted Posted in Советы / рекомендации

Одну из ключевых ролей в успешности сайта отыгрывает цветовое оформление. Цвет напрямую влияет на восприятие сайта посетителями: он может внушать доверие и побуждать к покупке, но также может и оттолкнуть. Дело в том, что в нашем случае справедлива пословица «по одёжке встречают…», так как пользователи не доверяют ресурсам с плохим оформлением.

Попадая на главную страницу сайта, человеку достаточно пары секунд, чтобы решить для себя: покинуть страницу или продолжить изучение ресурса. Грамотно сделанный дизайн и правильное цветовое оформление – это увеличение конверсии и упрощение привлечения потенциальных клиентов. Поэтому, давайте разберём принципы правильного подбора оттенков, и на чём основывается выбор цветовой палитры.

Какого цвета должен быть мой сайт?

Что точно нельзя делать при выборе цвета, так это руководствоваться собственными предпочтениями. Сфокусируйтесь на том, что сайт создаётся для пользователей, а не вас вне зависимости от его направленности: eCommerce, информационный, визитка и т.д. В вопросе выбора цвета необходимо понимать его манипуляционные возможности (психологическое влияние на сознание / подсознание пользователя) и, располагая такими знаниями, использовать их для достижения поставленных целей. Рассмотрим три аспекта, на которых основывается выбор.

  • Фирменный стиль. Если ваш продукт уже имеет собственный логотип / фирменный стиль, узнаваемый в массах, либо это уже на этапе разработки – оформление сайта рекомендуется осуществить с применением соответствующих цветов. Однако, нужно принимать во внимание то, насколько гармонично выбранные цвета сочетаются друг между другом и какую картину сформируют в целом. Иногда, цвета, используемые в логотипе, можно заменить на близкие по тональности оттенки, «играясь» с контрастом, жёсткостью и прочими параметрами.
  • Концепт / тематика. Цветовое оформление должно логически продолжать / дополнять тематику сайта, отражать продвигаемый продукт / услугу. К примеру, сайт по продаже разных сортов кофе часто оформляется в коричневых тонах, а тематические ресурсы о здоровом питании берут за основу зелёный цвет.
  • Целевая аудитория. На какой контингент посетителей рассчитан ваш сайт? Мужчины положительно воспринимают нейтральные и приглушённые оттенки. Женщинам приходятся по вкусу плавные и нежные сочетания пастельных тонов в дизайне. И, конечно же, детей привлекают сочные, яркие и броские изображения.

Особенности восприятия цветов

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

Красный. Часто это напряжение, агрессия, страсть или любовь. Провоцирует ощущение беспокойства, угрозы, акцентирует на себе внимание. Отлично подходит для привлечения внимания к конкретному функциональному элементу ресурса (реклама, кнопка оформления заказа и т.д.). Не рекомендуется злоупотреблять данным цветом, т.к. ввиду высокой экспрессивности и насыщенности может «сыграть в ущерб».

Оранжевый. Как и цитрусовые, содержащие множество витаминов для поддержания тонуса и энергии, данный цвет источает яркие и положительные эмоции, вызывает ассоциации с позитивом, постоянным движением, дружелюбием и неутомимой молодостью. Подходит для сайтов, целевая аудитория которых – молодёжь. Также часто используется при оформлении акцентов (грамотное оформление с использованием дополнительных оттенков позволит фокусировать внимание пользователей на нужных вам элементах).

Жёлтый. Тёплая радость, счастье, детские воспоминания, жизненная энергия. Данный цвет подходит как для детской тематики, так и для продвижения собственных бизнес-идей за счёт универсальности. С одной стороны – солидность, авторитетность, статус; с другой – жизнерадостность, энергичность.

Зелёный. Ассоциируется сразу с несколькими тематиками: финансы, здоровье, экология, природа, совершенствование или безопасность. Подобная мультизадачность цвета позволяет его совмещать с разными оттенками в пользу конкретного посыла.

Синий. Умиротворение, спокойствие, надёжность, стабильность и уверенность. Этот цвет позволит завоевать доверие юзера, не оставляя сомнений в вашем профессионализме. Зачастую используется сайтами, реализующими ювелирные изделия, занимающиеся флористикой или специализирующиеся в дизайнерском направлении.

Фиолетовый. Абстрактный цвет, затрагивающий нечто таинственное, романтичное и мистическое. Его стоит рассчитывать на женскую часть аудитории, предлагая товары специфической тематики / эксклюзивные товары.

Белый. Используется как фон, что позволяет сфокусировать внимание посетителя именно на позициях, предлагаемых сайтом. В основном, используется интернет-магазинами и соответствует текущему тренду минимализма в дизайне.

Чёрный. Противоположность белого, также используется в качестве фона. Ассоциируется с эстетичностью, доминированием с нотками напряжения в формате минимализма. Создаёт ощущения роскоши, однако не стоит злоупотреблять чёрными оттенками.

Сколько нужно цветов для дизайна сайта?

Ресурсы, сочетающие в себе все оттенки и цвета радуги – сразу же отталкивают из-за того, что такой цветовой сплэш не позволяет сфокусироваться на нужном товаре / услуге / объекте поиска. Также, при недостатке цветов, сайт становится однообразным, из-за чего восприятие пользователя тоже не позволит ему сосредоточиться, рассеивая внимание (содержимое сайта начинает восприниматься как фон). Оптимальный вариант – 3-4 цвета, у каждого из которых есть своя функция.

  • Основа. Данным цветом выделяется большая часть контента ресурса.
  • Дополнительный. С его помощью выделяется второстепенная по важности информация. Цвет должен гармонично сочетаться с основным.
  • Фон. Нейтральный оттенок, на котором располагаются первые два цвета без ущерба для концентрации пользователя.
  • Акцент. Цвет, при помощи которого привлекается внимание пользователей к определённым функциональным элементам, благодаря высокой контрастности относительно основного цвета.

Существует несколько сервисов, с помощью которых можно найти готовые решения для оформления своего сайта либо можно самостоятельно заняться их подбором. Однако, целесообразнее доверить эту работу специалисту, оперирующего навыками и опытом, а не интуицией и личными предпочтениями в плане дизайна. Возможно, выбранный вами цвет максимально удачно «впишется» в умы ЦА, но без правильной подачи все усилия будут напрасны. Поэтому не стесняйтесь, не экономьте – обращайтесь к нам.

 

Кто такой верстальщик. Почему он является важным звеном при создании сайта

Posted Posted in Советы / рекомендации

Каждый уверенный пользователь ПК и просто обыватель Глобальной сети имеет примерное представление касательно таких специальностей, как программист, дизайнер или тестер. Но нельзя забывать того, кто делает всю грязную работу, проводит тонкую связь между трудами дизайнера и работой программиста. Без него невозможно создать полноценно функционирующий сайт. Речь пойдёт о верстальщике.

Процесс верстки

Поместим в сферический вакуум типичную ситуацию: вы – заказчик и вам необходим сайт. Все нюансы касательно проекта уже обсуждены с руководителем данного проекта, ваша следующая цель – подобрать подходящий дизайн (вернее, выбрать). Когда дизайнерский макет, собранный поэтапно из отдельных элементов, образовывает единое целое, на сцену выходит верстальщик.

Макеты дизайна представляют собой документ с изображениями, ожидающих, когда их задействуют на практике. Теперь макет, созданный в графическом редакторе, необходимо перенести в браузер. Именно так макет обретает новую жизнь непосредственно на веб-ресурсе, а такой перевод называется HTML версткой.

HTML верстка – трудоёмкий процесс, в результате которого сайт должен корректно отображаться на устройствах разного типа. Алгоритмы поисковых систем положительно реагируют на сайты с качественной версткой, «поднимая» их выше как релевантный результат поискового запроса.

Что именно делает верстальщик

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

Основные инструменты верстальщика:

  • Браузер;
  • Текстовый редактор;
  • Графический редактор.

При этом, вёрстка должна учитывать не только тип устройства пользователя, а и браузер, использующийся во время пребывания на сайте. Владельцы сайтов справедливо принимают верстальщика за шамана, потому что танцы с бубном – неотъемлемая часть его деятельности.

 

Кому доверить создание сайта квалифицированному программисту или фрилансеру.

Posted Posted in Советы / рекомендации

Начиная деятельность в Интернете, ключевым фактором вашей успешности будет сайт. При этом успешность проекта определяется ещё на этапе создания сайта. В частности, за позитивный результат отвечают специалисты, занимающиеся программированием, дизайном и др.

Стоимость услуг опытного специалиста / команды (веб-студии) по определению не из разряда дешёвых. Завышенный, по мнению заказчика, прайс вынуждает его спускаться в тёмные закоулки фрилансерских бирж в поисках бюджетных вариантов, предоставляя работу фрилансеру. Целесообразна ли подобная экономия? Сейчас узнаете.

Фрилансеры

Преимущества:

  • относительно низкая стоимость услуг.

Недостатки:

  • Работа «на доверии» / бездоговорная основа
  • Нарушение дедлайнов
  • Мультизадачность
  • «Криво» написанный код
  • Нарушенные ожидания
  • Бесследное исчезновение

Фрилансеры, обычно, не подписывают договоров касательно условий работы над проектом. Это чревато последствиями, о которых мы расскажем дальше.

Отсутствие подписанного документа, в котором чётко прописаны сроки и финансовая ответственность за невыполнение какого-либо из пунктов – благоприятные условия для развития лени бюджетного программиста. Он может месяцами тянуть со сдачей проекта по ряду причин (к примеру, параллельно работая над другими заказами).

Часто фрилансер берётся за выполнение сразу нескольких принципиально разных видов работ: программирование, создание дизайна, вёрстка и т.д. (занимаясь всем практически одновременно). Запуск сайта, разработанного подобным «специалистом» часто открывает массу подводных камней: баги, глюки, код с ошибками, исправление которых обойдётся дороже написания нового кода с нуля. Либо происходит таинственное исчезновение, в результате которого заказчик остаётся без доступа к хостингу или домену.

Веб-студия (команда профессионалов)

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

  • Наличие договора.
  • Чётко установленные сроки.
  • Полный ассортимент: программирование, дизайн, тестирование, продвижение и прочее. Каждый вид работы выполняется предельно качественно.

Недостатки:

  • Высокая стоимость услуг

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