Movimentação de div

Layout
1

Boa tarde Galerinha!.
Estou tentando algo e não consegui creio que alguem consiga me ajudar, é algo simples.
Criei uma DIV ID=“xxxxx”, dentro da descrição do produto.
Quero agora movimentar essa div para em cima do valores dos produtos na pagina do produto.

Screenshot_1
Screenshot_11065×925 140 KB

tentei desta forma

Descrição do produto
<div id="MR1209402018">Mesa Secretaria Cinza Reta 15mm 1200x600 c/aba
<div>Mesa Secretaria – Maranello,</div>
</div>

// edição HTML Java Rodapé pagina produto
$(document).ready(function(){
$('#corpo .secao-principal .conteudo .row-fluid .sem-coluna .produto .span6 .principal. info-principal-produto').before($('#MR1209402018'));

})

Link do produto Aparador 1000x420x900 M40 Nogal - Evimero Home & Office

2

Olá!!

O ponto de “info-principal-produto” tem que estar junto, ele está no fim de “principal”, ficaria assim:

.principal .info-principal-produto

Um outro detalhe, você está usando o before(), ele vai inserir antes do bloco que você deseja, para alcançar o resultado esperado, sugiro você usar o append(), para inserir dentro ao final do elemento especificado. Ao invés de passar um objeto jQuery dentro dele, você pode usar o appendTo(), tem uma sintaxe mais simples:

$('#MR1209402018').appendTo('.info-principal-produto');
// ou
$('.info-principal-produto').append($('#MR1209402018'));

Se não deseja remover da descrição, pode cloná-lo antes:

$('#MR1209402018').clone().appendTo('.info-principal-produto');
// ou
$('.info-principal-produto').append($('#MR1209402018').prop('outerHTML'));

Até mais!!

2 curtidas
3

Muito Obrigado @math na vdd como sou leigo, estava usando uma funcao que ja havia aqui na comunidade, e tentando adaptar ao que precisava srsr, vlw pelas dicas tbm.

Screenshot_2
Screenshot_21145×911 126 KB

era isso mesmo que eu precisava, assim consigo por um resumo a baixo do nome do produto, e uma descrição completa mais a baixo.

@math partindo da mesma ideia só que na pagina inicial, saberia como movimento as categorias, queria mudar a posição, de algumas para dar mais destaque.

Screenshot_3
Screenshot_3961×800 99.5 KB

eu até consegui mover, mais vai apenas o titulo da categoria não vai os produtos a baixo dela, eu não uso o carrossel, e coloco para apresentar 20 produtos por categoria.

1 curtida
4

@ModificMoveis, dá para fazer de várias formas. Uma delas, como tanto o título, quanto os produtos, estão no mesmo nível, é selecionar os dois de uma vez usando o código da vitrine:

$('.vitrine-15818896, .vitrine-15818896 + ul').each(function() {
    $(this).insertBefore('.vitrine-destaque');
});

Espero ter ajudado, até mais.

1 curtida
5

ai no caso se eu quiser por ele dentro de outra div por exemplo uso o appendto

$('.vitrine-15818896, .vitrine-15818896 + ul').each(function() {
    $(this).insertappend('.vitrine-destaque');
ou 
    $(this).append('.vitrine-destaque');
})

;
@math
seria assim?

6

@ModificMoveis Você usaria o appendTo() caso queria que o elemento seja movido para o final dessa div, já o prependTo(), moveria para o começo dela. Somente o append() e prepend(), move também, mas você precisa usar um objeto jQuery como parâmetro, ao invés de só indicar o seletor desejado. Ex: $(…).append($(…)). Caso não queria mover o elemento, deseje apenas copiar, você pode seguir o passo descrito na minha primeira resposta, clonando o elemento ou copiando seu HTML.

*Esse insertappend() não existe, seria o appendTo(’.nome_da_classe’) ou append($(’.nome_da_classe’)).

1 curtida
7

Caso queria inserir antes/depois ao invés de dentro do elemento, respectivamente, existe o insertBefore() / before(), insertAfter() / after(), como foi o caso da Home.

1 curtida
8

@math deixa eu ver se entendi, srsr

tenho uma div exemplo


<div id-="divdestaque"></div>

e quero inserir a Vitrine-destaque dentro dela. então seria assim

$('.vitrine-destaque, .vitrine-destaque + ul').each(function() {
    $(this).appendTo('divdestaque');
 
})
9

Isso, só tem uns erros de escrita, não funcionaria assim, o correto seria:

HTML:

<div id="divdestaque"></div>

JS:

$('.vitrine-destaque, .vitrine-destaque + ul').each(function() {
    $(this).appendTo('#divdestaque');
});

Caso for classe, seria ‘.’ ao invés de ‘#’:

HTML:

<div class="divdestaque"></div>

JS:

$('.vitrine-destaque, .vitrine-destaque + ul').each(function() {
    $(this).appendTo('.divdestaque');
});

Espero ter ajudado, até mais.

1 curtida
10

Vamos a ideia, tenho abas, e quero movimentar as vitrines para dentro de cada aba, assim consigo organizar em abas minha HOME.

<ul class="abas" id="AbasHome">
    <li class="aba" id="aba-1">
     <a href="#aba-1">Destaques</a>
<section class="conteudo"id="AbaDestaque"> Conteúdo da Aba 1 </section></li>
    <li class="aba" id="aba-2">
     <a href="#aba-2">Lancametos</a> 
<section class="conteudo" id="AbaLancamentos"> Conteúdo da Aba 2 </section></li>
</ul>

Movimento a Lista AbasHome pra antes da vitrine-lancamento


$('#AbasHome').before($('.vitrine-lancamento'));

Agora quero movimentar a Vitrine-Destaque para dentro da sessao ID AbaDestaque

$('.vitrine-destaque, .vitrine-destaque + ul').each(function() {
    $(this).appendTo('#AbaDestaque');
});

e a Vitrine Lançamentos para dentro da sessao AbaLancamentos

$(‘.vitrine-lancamento, .vitrine-lancamento + ul’).each(function() {
$(this).appendTo(‘#AbaLancamentos’);
});

Seria assim??
Agora uma duvida, eu movimentei a lista para antes da Vitrine-Lançamento,e a baixo eu movimento a vitrine lançamento isso pode dar bugar e não movimentar nada?

11

Parece tudo correto, acredito que você já possa testar, se preferir, em um momento que a loja não tenha tanto acesso. Não creio que não vá funcionar, porque a execução é sequencial.

// Funciona
$('#AbasHome').before($('.vitrine-lancamento'));
// Shorthand
$('#AbasHome').insertBefore('.vitrine-lancamento');

Espero ter ajudado, até mais!!

1 curtida
12

Obrigado pelas explicações, estou tentando fazer essa alteração a mais de 10 dias sem sucesso. com seu help consegui vlw.

2 curtidas
13

Olá pessoal, estou com uma dúvida sobre essa movimentação.
Eu gostaria de clonar a Div .vitrine-depoimentos da minha home para página do produto, logo abaixo a descrição do produto. após a div .produto-descricao.

Tentei aplicar os conhecimentos do post, mas rodei rodei e não sai do lugar… rsrsrs.
Se puderem me dar um help agradeço e muito.

@math @ModificMoveis

14

A ideia seria essa:

Pegar essa DIV que esta na Home:

image
image1904×376 17.1 KB

E clonar ela para logo abaixo dessa DIV de descrição na página do produto:

image
image1912×399 29.4 KB

Se alguém puder me ajudar agradeço.

Obs: dentro da mesma página vai certinho, o problema é quando quero clonar a div para outra página.

15

Amigo gostaria de fazer essa mudança também. Pegar a Vitrine Lançamentos com os produtos a baixo dela e Colocar a baixo da Vitrine Mais Vendidos só que só vai o nome os produtos não…já tentei todos os códigos que vc passou aqui e nada.

16

Diaaa.
Conseguiu resolver essa questão?
Estava querendo puxar para dentro do Carrinho essa mesma div de depoimentos.
Valeuuu.

17

Fala Lucas, então o clone pode ser feito da mesma forma como da home, criar a mesma estrutura na página do carrinho e deixar a estrutura de inserção dos comentarios igual, porém eles vão precisar ser adicionados tanto na home quanto na página do carrinho.

1 curtida