O que é uma Position CSS?

O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para controlar a apresentação e o Layout de elementos HTML em uma página web. O posicionamento é uma parte importante do CSS, pois determina como os elementos são dispostos na página em relação a outros elementos e ao próprio fluxo do documento.

Para a propriedade position, podemos atribuir 5 valores, que são: static, fixed, sticky, relative, absolute.

Vamos entender como funciona cada uma delas:

Position Static (Estático):

É um comportamento padrão do HTML, onde os elementos são posicionados em ordem, de cima para baixo e da esquerda para a direita.

Elementos em fluxo normal não aceitam propriedades CSS especiais para o seu posicionamento.

Position Fixed (Fixo):

O posicionamento fixo, faz com que o elemento que recebeu esta propriedade não se mova na tela. Mesmo que a página possua rolamento (scroll), tanto rolando para a esquerda e direita, quanto para cima e para baixo. Um exemplo seria usar uma barra de navegação lateral onde a mesma ficaria fixa, a navegação fica sempre visível durante o uso da página.

Exemplo:

.teste {

      position: fixed;

      height: 1000px;

}


Position Sticky (Colado/pegajoso):

Este posicionamento precisa de um posicionamento de referência, por tanto é sempre em conjunto das propriedades auxiliares. Parecido com o fixed, mas sua diferença, é que em vez de ficar fixo em relação a tela, fica fixo em relação a rolagem da página.

Exemplo:

.teste {

       position: sticky;

        top: 0px;

}

Position Relative (Relativo):

O posicionamento relativo serve para posicionar o elemento da página de acordo com as indicações que você definir.

A posição é definida através de quatro outras propriedades: top, bottom, left, right, que indicam a distância com relação ao topo, base, esquerda e direita, respectivamente, tomando como referência o posicionamento do elemento pai.

Exemplo:

.teste {

      position: relative;

      left: 150px;

}

Position Absolute (Absoluto):

A posição será definida em relação ao próximo elemento pai que esteja posicionado relativamente ou absolutamente.

Se não houver um elemento pai definido, por padrão ele irá definir o próprio documento HTML como sua raiz, significa que a posição será definida em relação à própria página web.

Exemplo:

.teste {

      position: absolute;

      top: 50px;

       left: 50px;

}

A diferença entre o position relative e o position absolute é basicamente qual elemento será usado como referência para realizar o posicionamento. O relative leva em consideração sua própria posição ao se deslocar. E o absolute leva em consideração a posição do elemento pai que possua um position relative, ou então será relativo ao próprio navegador. 

Em resumo, o posicionamento CSS é uma ferramenta poderosa para controlar o layout e o design de páginas da web. É essencial entender as propriedades de posicionamento e usá-las de forma adequada para criar layouts desejados e funcionais. Além disso, ao projetar para a web, é importante levar em consideração a responsividade e a adaptabilidade a diferentes dispositivos e tamanhos de tela.

READ MORE

Como criar um lightbox

É muito comum que sites que possuem galeria de fotos precisem de um lightbox para poder ver melhor as fotos. Existem muitos plugins pra isso, mas plugins podem dar problemas ao longo do tempo. Então criei um lightbox simples, que você pode personalizar como quiser.
Na página onde você possui a galeria de fotos, no meu caso a galeria fica na single-product.php, vamos colocar este código html:

<div class="lightbox-product">
    <a class="btn-blue prev-photo"><i class="fas fa-caret-left"></i></a>
        <div class="content-light-img">
            <a class="btn-blue close-light"><i class="fas fa-times"></i></a>
            <img>
        </div>
    <a class="btn-blue next-photo"><i class="fas fa-caret-right"></i></a>
</div>

E no arquivo JS vão os códigos:
– Esse bloco pega as informações da foto clicada, pego o src da imagem e o id e coloco na tag <img> que está dentro do ‘content-light-img’;

   $('.thumbnail-principal').on('click', function(){
       var src =  $('.thumbnail-principal .slick-current').attr('src');
       var id =  $('.thumbnail-principal .slick-current').attr('id');
        $('.lightbox-product img').attr('src',src);
        $('.lightbox-product img').attr('id',id);
         $('.lightbox-product').fadeIn();
         $('.lightbox-product').css('display','flex');
    });

– Este código é o do botão que passa para a próxima foto, pegamos o id da foto atual dentro do lightbox e contamos a quantidade de fotos dentro do container, se o id for igual a quantidade de fotos voltamos para 1 senão soma-se mais 1 ao id.  Com o resultado dessa soma pegamos as informações da próxima foto.

    $('.next-photo').on('click', function(){
        var id = $('.lightbox-product img').attr('id');
        var photos = $('.thumbnail-principal .slick-slide').length;
        if(id == photos){
            var result = 1;
        } else {
            var result = parseInt(id) + 1;
        }
        var value_result = $('.thumbnail-principal .slick-slide#'+result).attr('src');
        $('.lightbox-product img').attr('src',value_result);
        $('.lightbox-product img').attr('id',result);
    });

 
– Esse código é do botão que volta uma foto, como no botão next pegamos todas as informações da foto que está no lightbox só que ao contrário do outro subtraímos 1 do id, e quando id for igual a 1 dizemos ao contador que ele é igual a quantidade de fotos dentro do container.

    $('.prev-photo').on('click', function(){
        var id = $('.lightbox-product img').attr('id');
        var photos = $('.thumbnail-principal .slick-slide').length;
        if(id == 1){
            var result = photos;
        } else {
            var result = parseInt(id) - 1;
        }
        var value_result = $('.thumbnail-principal .slick-slide#'+result).attr('src');
        $('.lightbox-product img').attr('src',value_result);
        $('.lightbox-product img').attr('id',result);
    });

– E por ultimo esse código que fecha o lightbox;

    $('.close-light').on('click', function(){
        $('.lightbox-product').fadeOut();
    });

E esse foi o resultado:
lightbox
Nesse lightbox eu usei os efeitos de Fade do javascript, mas você pode animar da forma que achar melhor.
Espero ter ajudado, e até a próxima!

READ MORE
widget

Criando área de widget

O que seria a área de widget? Bom, ela pode ser seu sidebar ou um menu no rodapé da página por exemplo, você decide. Eu usei como sidebar no site em que estava desenvolvendo.
Para adicionar a área de widget usamos a função abaixo:

function widgets_novos_widgets_init() {
                 register_sidebar( array(
                                'name' => 'Sidebar',
                                'id' => 'sidebar_widgets',
                                'before_widget' => '<div class="sidebar">',
                                'after_widget' => '</div>',
                                'before_title' => '<h2>',
                                'after_title' => '</h2>',
                 ) );
 }
 add_action( 'widgets_init', 'widgets_novos_widgets_init' );

Ela vai aparecer no painel do wordpress em Aparência > Widgets, assim:
result
Para mostrar o widget na página desejada usamos a seguinte função:

dynamic_sidebar('sidebar_widgets');

Em ‘sidebar_widgets’ vai o id que você deu ao seu widget.
Espero ter ajudado, e até a próxima.

READ MORE
Ajax – 400 bad request

Ajax – 400 bad request – Como resolver?

Estava eu desenvolvendo meu projeto quando preciso fazer uma requisição via ajax e apareceu esse erro, e agora? Bom, como todo programador fui atrás de uma solução.
No meu arquivo functions.php coloquei a seguinte função:

add_action('wp_footer', 'eps_footer');
 function eps_footer() {
     echo "<script>var ajax_request_url = '".admin_url( 'admin-ajax.php' )."'</script>";
 }

E não resolveu todo o problema, começou a dar o erro 500 – internal server error, e comecei a pensar, por que não fiz Ed. Física?
Por fim a solução para esse erro era muito simples, eu tinha esquecido de dar o include do arquivo ajax.php no arquivo functions.php.
NÃO ESQUEÇAM DE DAR INCLUDE DO SEU ARQUIVO AJAX.
Espero ter ajudado, e até a próxima!
 

READ MORE
woo

Saiba como adicionar Custom Fields nos dados gerais do produto (woocommerce)

No cadastro de produtos do woocommerce tem uma tabela com vários dados sobre o produto, nesse artigo vou ensinar como colocar campos novos na aba “Geral”, que é a primeira aba que aparece aberta.
sem-campo
Eu precisava de campos para colocar preço de atacado nos produtos, então adicionei a seguinte função no meu arquivo functions.php:
add_action(‘woocommerce_product_options_general_product_data’,’woo_add_custom_general_fields’ );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
echo ‘<div class=”options_group”>’;
echo ‘<h2>Atacado</h2>’;
woocommerce_wp_text_input(array(
‘id’                => ‘_regular_price_wholesale’,
‘class’             => ‘short wc_input_price’,
‘label’             => __( ‘Preço (R$)’, ‘woocommerce’ ),
‘placeholder’       => ”,
‘type’              => ‘text’,
)
);
woocommerce_wp_text_input(array(
‘id’                => ‘_sale_price_wholesale’,
‘class’             => ‘short wc_input_price’,
‘label’             => __( ‘Preço promocional (R$)’, ‘woocommerce’ ),
‘placeholder’       => ”,
‘type’              => ‘text’,
)
);
echo ‘</div>’;
}
Você pode personalizar os nomes dos campos , classes, placeholder, tipo de input e etc…
Após adicionar os campos que você deseja precisará salvar eles também, e pra isso utilizamos essa outra função, também no arquivo funtions.php:
add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );
function woo_add_custom_general_fields_save( $post_id ){
$woocommerce_text_field = $_POST[‘_regular_price_wholesale’];
$_woocommerce_text_field = $_POST[‘_sale_price_wholesale’];
if( !empty( $woocommerce_text_field ) ){
update_post_meta( $post_id, ‘_regular_price_wholesale’, esc_attr( $woocommerce_text_field ) );
}
if( !empty( $_woocommerce_text_field ) ){
update_post_meta( $post_id, ‘_sale_price_wholesale’, esc_attr( $_woocommerce_text_field ) );
}
}
com-campo
E esse foi o resultado! Espero ter ajudado, e até a próxima.

READ MORE

Aprenda como reorganizar os campos de checkout do woocommerce

Quando o usuário vai finalizar uma compra o woocommerce mostra os campos do checkout organizados da forma padrão, só que o projeto que eu estava desenvolvendo pedia por uma disposição dos campos de forma diferente. Então pesquisando achei uma solução simples e que funciona muito bem.
Na pasta checkout do woocommerce tem um arquivo de nome form-billing.php, nele estão os campos que aparecem no checkout. Você vai copiar a pasta e o arquivo para o seu tema para pode editar.
Ao abrir o arquivo ele estará desta forma:
foreach
 
Ele distribui os campos através de um foreach, então para mudar os campos vamos mexer nessa função, e ela ficará desta forma:
second-foreach
Você vai colocar os nomes dos campos na ordem em que deseja dentro de um array(), e depois fazer um foreach para mostras os campos utilizando a própria função do woocommerce: woocommerce_form_field(), como no exemplo acima. Eu fiz dois foreach por que queria colocar em divs diferentes, mas você poderá personalizar como quiser.

READ MORE

Saiba como preencher e limitar a quantidade mínima dos produtos no WooCommerce

Depois de muito quebrar a cabeça, a solução apareceu e era mais fácil do que o esperado.
No arquivo functions.php do seu tema adicione as funções:
Produto comum:
Add_filter(‘woocommerce_quantity_input_args’,’ex_woocommerce_quantity_input_args’,10,2);
function ex_woocommerce_quantity_input_args($args,$product){
if(is_singular(‘product’)){
$args[‘input_value’] = 25; (value do input)
}
$args[‘min_value’]=25; (valor mínimo)
return $args;
}
Produto Variável:
Add_filter(‘woocommerce_available_variation’,’ex_woocommerce_available_variation’);
function ex_woocommerce_available_variation($args){
$args[‘min_qty’]=25;
return $args;
}
Você pode pegar a quantidade mínima definida no cadastro do produto e por no lugar do número 25 da seguinte forma:
global $product;
$id = $product->get_id();
$min = get_post_meta($id,’min_qty’,true);
$args[‘min_qty’]= $min;

READ MORE