Tenho um Botão WhatsApp configurado para aparecer somente na versão MOBILE.
Desejo fazer com que esse botão fique fixo no canto inferior esquerdo da página.
Qual o código devo usar em complemento a este a seguir, para fixar o elemento e retirá-lo do cabeçalho
WhatsApp
.gif
Fazer download de GIF • 356KB
?
import wixWindow from 'wix-window' $w.onReady(function () { if(wixWindow.formFactor === "Mobile"){ $w("#BtWhatsApp").show(); } });
Olá Peterson, eu agradeço muito sua colaboração. Por enquanto vou deixar como está. Mas valeu pela dica. Um forte abraço.
Olá @Kleber Quintas, como você já adiantou que é leigo no assunto, aqui vai uma ajuda com a novidade trazida pelo @Matheus Alexandre.
Já adianto que para a sua necessidade e pelo conhecimento técnico exigido, será como construir um canhão pra matar uma mosca. Também será necessário conhecimento em inglês, já que o artigo não tem tradução.
Você terá que inserir um novo elemento customizado. Adivinha como? Pela interface do Editor, claro: Incorporar > Elementos Customizados > Personalize um elemento.
Feito isso, você terá que definir um código personalizado para o elemento. Para a sua necessidade, o código seria mais ou menos assim:
const IMAGE_URL = <url da sua imagem na biblioteca de mídia>';
const createImage = () => {
const imageElement = document.createElement('img');
imageElement.src = IMAGE_URL;
imageElement.id = 'whatsapp-image';
return imageElement;
};
const createImageContainer = () => {
const imageContainer = document.createElement('div');
imageContainer.id = 'whatsapp-image-container';
imageContainer.appendChild(createImage());
return imageContainer;
};
const createStyle = () => {
const styleElement = document.createElement('style');
styleElement.innerHTML = `
#whatsapp-image-container {
position: fixed;
bottom: 0;
left: 0;
}
#whatsapp-image {
width: 100%;
min-width: 100px;
}
`;
return styleElement;
};
class contatoWhatsApp extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.appendChild(createImage());
this.appendChild(createImageContainer());
this.appendChild(createStyle());
}
}
customElements.define('contato-whatsapp', contatoWhatsApp);
Parece complexo demais? Também acho. Mas não esqueça de definir o link da imagem também.
A boa notícia é que o código acima é Javascript puro, sem as restrições da linguagem do Wix, que agora chama Velo em vez de Corvid, caso faça diferença pra você.
Em caso de dúvidas, já te adianto as respostas padrão que costumo ver aqui:
1) você precisa mesmo fazer isso desta forma?
2) contrate um desenvolvedor Wix.
Boa sorte.
Olá @Kleber Quintas Antes não era possível, mas agora você pode criar um elemento personalizado e definir sua posição de estilo como "fixo". Você pode entender mais sobre isso aqui.
Espero ter ajudado
Mais uma vez fico muito agradecido. Sou um leigo no assunto, por isso agradeço demais por destinar seu tempo as minhas questões. Abraços. Ajudou muito.
Kleber, se você observar o código da página citada, você verá que o site não foi desenvolvido via Wix. A linguagem do Wix restringe o acesso ao DOM e alguns recursos você só conseguirá usar se for via Editor. É isso ou nada. Então sem ser da forma que eu exemplifiquei pra você, não será possível, infelizmente.
Se você quiser uma terceira opinião, basta aguardar alguém me desmentir.
Espero ter ajudado, abraços.
Grande Peterson, muito obrigado por sua atenção. Eu conheço esse método, mas gostaria muito de ativar através de código. Tenho esse site como exemplo. Eles conseguiram: https://www.anexoconsultoria.com.br
Mas agradeço imensamente sua ajuda. Abraços.
Olá Kleber, apenas via código não tem como fixar nada no modo Mobile.
Você vai ter que desconsiderar o botão que você criou e utilizar um componente pronto e personalizá-lo. Tudo pela interface visual do Editor.
Abre a página no Editor, modo Mobile, vá até "Ferramentas do Mobile" e insere uma "Barra de Ação Rápida". A partir desse componente, você insere o contato via WhatsApp, edita/exclui os outros e "personaliza" o botão dentro das opções disponíveis, incluindo o posicionamento.