Botão guia de medidas

[Joao_Marcelo_Saraiva]

Boa tarde! Gostaria de saber se é possível eu colocar um botão de guia de medidas ao lado do botão comprar nos produtos, que ao apertar apareça uma imagem que eu escolher, como uma espécie de PopUp que mostre uma imagem com as medidas, eu criei um código que funcionou no Visual Studio, mas não funciona na Loja Integrada, alguém pode me ajudar? Segue o código:

[Teus_G]

Boa tarde! Nesse caso recomendo você criar uma modal em react mesmo, não sei se o pop-up direto funcionaria, nunca tentei.

[Paulo21]

Bom dia,
@Leonardo_Vicentini_F consegue me ajudar mais uma vez?? Coloquei um botão de guia de medidas na página do produto com o código abaixo, que ao clicar ele leva para uma página extra, gostaria que ao invés de ir para página extra ele abrisse um pop UP com a tabela. É possível??

$(function(){
	$('.pagina-produto .acoes-produto.disponivel .comprar').prepend('<a href="https://www.bemii.com.br/pagina/tabela-de-medidas.html" class="botao botao-comprar secundario pequeno " rel="nofollow" data-placement="top" style="width: 47%;min-width: 47%!important;float: right;height: 30px;margin: 0;padding: 0 !important;line-height: 30px;background-image: linear-gradient(to bottom,#fff, #e6e6e6);"><i class="icon-list"</i> TABELA DE MEDIDAS</a>');
	$('.pagina-produto .qtde-adicionar-carrinho').css('cssText', 'min-width:44%!important;max-width:44%!important;padding-right:12px;display:flex;');
});

bemii.com.br

[Leonardo_Vicentini_F]

manda o link do produto que vc fez para eu ver

[Paulo21]

Camiseta Bemii basica

[Leonardo_Vicentini_F]

var openPopupLogin = function(){
    if ($('.fancybox-wrap.fancybox-desktop.fancybox-type-html.popuplogin.fancybox-opened').length==0){
        var em  = $('#id_email').val();
        em = '<div> <h5 style="text-align: center;line-height: 19px;white-space: break-spaces!important;margin: 10px 0 0 0;">Verificamos que você já tem cadastro. <br>Faça seu login ou recupere a senha. <br> </h5> <form action="/conta/login" method="post" id="formularioLogin1" data-gtm-form-interact-id="0" style="margin: 0;"> <div aclass=""> <div aclass="control-group"> <div class="email-box1" style="margin-right: 0px;"> <label for="id_email" aclass="control-label" style="text-align: left;">E-mail</label> <input type="text" name="email" id="id_email_login1" value="' + em + '" autocomplete="email" placeholder="meu@email.com.br" data-gtm-form-interact-field-id="0" style=""> </div> </div> <div aclass="login-data hide" style="display: block;"> <div aclass="control-group"> <div class="senha-box1"> <label for="id_senha" aclass="control-label" style="text-align: left;">Senha</label> <input type="password" name="senha" id="id_senha_login1" placeholder="Senha" autocomplete="current-password" ispassword="" data-gtm-form-interact-field-id="1" style=""> </div> </div> <input type="hidden" name="next" value="/checkout/"> </div> <div> <button type="submit" id="id_botao_login1" aclass="botao principal" data-loading-text="<i class=\'icon-refresh icon-animate\'></i>" autocomplete="off" style="width: 100px;">OK </button> <a href="/conta/login?email=' + em + '&amp;next=/checkout/#recuperar_senha" aclass="esqueci-senha" style="margin-right: 10px;float: right;margin-top: 5px;"> <i class="icon-lock"></i> Recuperar senha? </a> </div> </div> </form></div>';
        $.fancybox({
    		type: "inline",
            wrapCSS : 'popuplogin',
    		content: em,
    		topRatio: 0.15,
            leftRatio: 0.5
    	});
    }
}

$(function(){
	$('.pagina-produto .acoes-produto.disponivel .comprar').prepend('<a href="#" onclick="openPopupLogin()" class="botao botao-comprar secundario pequeno " rel="nofollow" data-placement="top" style="width: 47%;min-width: 47%!important;float: right;height: 30px;margin: 0;padding: 0 !important;line-height: 30px;background-image: linear-gradient(to bottom,#fff, #e6e6e6);"><i class="icon-list"</i> TABELA DE MEDIDAS</a>');
	$('.pagina-produto .qtde-adicionar-carrinho').css('cssText', 'min-width:44%!important;max-width:44%!important;padding-right:12px;display:flex;');
});

ai precisa construir o html que vai ficar dentro, exemplo

[Paulo21]

Show Leonardo, vou ir testando e ajustando muito obrigado!!

[Paulo21]

Bom dia,
Leonardo, consegue me ajudar?? Eu ajustei as informações para tabela de medidas, aparece certo… mas as vezes da um bug, aí fecho a tabela de medidas e abro novamente e fica certo.

Bug do erro:

Certo:

[Leonardo_Vicentini_F]

tente definir uma tamanho minimo para a sua imagem, assim deve forçar a abertura do tamanho certo .

ou tentando as ideias deste post

How to programmatically trigger fancybox with an inline div?

[Paulo21]

Show Leonardo vou testar…
Muito obrigado

[Reinaldo_Paulino]

Ola tudo bem, será que você poderia me ajudar a colocar essa tabela de medida no meu site?
Grato