javascript e botões radio

[Flavio Silveira 0]

Boa noite galera,

 

Queria começar dizendo que não sou programador, sei somente editar códigos simples.

 

Minha situação é a seguinte, comprei uma loja virtual da Rumo (Plataforma FastCommerce) e descobri da pior forma que eles não auxiliam na personalização da loja, mesmo sendo uma personalização de um script que eles disponibilizam.

 

Meu objetivo é criar uma tabela com botões radio em alguns produtos para selecionar certas caracteristicas desses produtos, por exemplo:

 

Ao invés de cadastrar "Carro Celta 1.0", "Carro Celta 1.4" e por ai vai, quero cadastrar "Carro Celta" e dentro do produto ter essa tabela tipo "Selecione a motorização".

 

Eles disponibilizam um script que relaciona "Cor / Tamanho", como por exemplo para tênis, roupas, como pode ser visto aqui: http://www.fastcommerce.com.br/grid/grid

 

Eu não preciso relacionar "Cor / Tamanho", já que é só uma caracteristica, então gostaria de pedir ajuda para interpretar e editar o script. O link do script é esse: FC 10470

 

Posso postar aqui se preferirem.

 

Obrigado desde já,

 

Flávio

[Flavio Silveira 0]

Bom gente, eu consegui fazer a maior parte do que eu precisava, agora gostaria da ajuda de vocês pra manter uma opção selecionada quando entra na página do produto.

 

A função chamada quando entra na página do produto é essa abaixo:

 

function FC_fInitProd(IDProduto){
//Inicializa arrays e exibe opções de IDProduto
 var FC_aProduto=new Array();
 for(var i=0;i<FC_aSubProd.length;i++)FC_aProduto=FC_aProduto.concat(FC_aSubProd[i]);
 eval("FC_aProduto_"+ IDProduto +"=FC_aProduto");

 var aDistintos=new Array();
 for(var i=0;i<FC_QtdDescritores;i++){
   var aTemp=new Array();
   FC_fDistintos(FC_aProduto,FC_posIniDescritor+i,aTemp);
   aDistintos=aDistintos.concat([aTemp]);
 }
 eval("FC_aDistintos_"+ IDProduto +"=aDistintos");

 var NivelSeguinte=ObtemNivelSeguinte(aDistintos,-1);  //procura pelo primeiro nível com opções
 if(NivelSeguinte==-1)return void(0); //alert('Sem opções nos sub-produtos de '+IDProduto);
 else document.write("<form name=FC_oForm_"+ IDProduto +">");

 for(var i=0;i<FC_QtdDescritores;i++){
   if(i==NivelSeguinte){FC_sClass="NivelOn";var sDisabled="";}
   else{FC_sClass="NivelOff";var sDisabled=" disabled";}
   document.write("<table><tr><td><div id=FC_idNivel_"+ i +"_"+ IDProduto +" class="+ FC_sClass +"><ul class=lstColor>");

   if(aDistintos[i].length>0){
     for(var j=0;j<aDistintos[i].length;j++){
       //alert(aDistintos[i][j]);
       if(i==0){  //separa nome e RGB da cor
         var aNomeRGB=aDistintos[i][j].split(SeparadorRGBCor);
         //sValor="<span style=background-color:#"+ aNomeRGB[1] +">   </span>  <span>"+ aNomeRGB[0] +"</span>";
         sValor="<span style=width:27px;background-color:#"+ aNomeRGB[1] +">    </span>";
         //sValor="<span style='width:27px;background:url("+sCaminhoProds+"cores/"+aNomeRGB[0]+".gif) no-repeat;'>    </span>"; //EXEMPLO DE IMAGEM PARA CADA COR
         sValor=sValor.replace("+","_");
       }
       else{sValor=aDistintos[i][j];}
       if(aDistintos[i][j]!=''){
         document.write("<span id=FC_idOpcao_"+ i +"_"+ j +"_"+ IDProduto +">");
         document.write("<li id=FC_liOpcao_"+ i +"_"+ j +"_"+ IDProduto +" style='border-style:solid;border-width:2px;border-color:white;text-align:center;'><input type=radio name=FC_oOpcao_"+ i +"_"+ IDProduto +" id=FC_oOpcao_"+ i +"_"+ j +"_"+ IDProduto +" value="+aDistintos[i][j]+" onclick='FC_fRedefineOpcoes("+ IDProduto +",FC_aProduto_"+ IDProduto +",FC_aDistintos_"+ IDProduto +","+i+",this.value);'"+ sDisabled +"><label class=FC_Opcao for=FC_oOpcao_"+ i +"_"+ j +"_"+ IDProduto +">"+ sValor +"</label>");
         setTimeout("document.getElementById('FC_oOpcao_"+ i +"_"+ j +"_"+ IDProduto+"').checked=false",1);  //força desmarcar radio quando recarrega a página no IE
         if(sDisabled!="")document.getElementById("FC_oOpcao_"+ i +"_"+ j +"_"+ IDProduto).disabled=true;
         document.write("</li></span>");
       }
     }
     //if(!FC_fIsVazio(aDistintos[i]))document.write("<hr>");
   }
   document.write("</ul></div></td></tr></table>");
 }
 document.write("<br><hr><table cellspacing=0 cellpadding=0><tr height=20><td id=RGBCorProduto></td><td id=CorProduto></td><td id=TamanhoProduto></td></tr></table><br><input type=button class=BotComprarGrid name=FC_oBotao_"+ IDProduto +" id=FC_oBotao_"+ IDProduto +" onClick='' value='' disabled>");
 if(NivelSeguinte!=-1)document.write("</form>");
}

 

Já tentei colocar a função que está no evento onclick e não funcionou, já tentei outras funções e não consegui nenhum resultado, alguém tem alguma sugestão?

 

Tem nexo usar o método dentro do document.write? É só o que eu consigo pensar...

[Flavio Silveira 0]

Senhor moderador, peço desculpas, pensei que podia responder quando não fosse algo relacionado ao post anterior, porque senão, quem já viu o post e não ve novas respostas, acaba não dando atenção ao tópico, mas se preferir edito o post acima para incluir o que vou perguntar abaixo.

 

Consegui 90% do que queria fazer, agora só falta ajeitar pequenos detalhes, sendo um deles o alinhamento vertical do texto com o botão radio, ouvi dizer para usar vertical-align, mas não funcionou, deixo abaixo a linha atual para sugestões:

 

document.write("<ul style='list-type:none;padding:0;margin:0;text-align:left;' class=Testao><li id=" + liId + " style='text-align:left;'><input style='verical-align:middle;margin:0px;' type=radio name=" + radioName + " id=" + radioId +" value="+aDistintos[i][j]+" checked='checked' onclick='" + clickValue + "'" + sDisabled +"> teste");

 

Onde está "teste" tinha um <label>, não sei se com <label> fica mais fácil alinhar.. enfim, conto com a ajuda de vocês!

[William Bruno 1501]

ai você vai ter q usar css, acredito que a propriedade line-height resolve oq você quer.

[Flavio Silveira 0]

Obrigado pela rápida resposta William!

 

Preciso colocar id em algum lugar? radioId por exemplo?

 

Se não fosse abusar muito, poderia dar um exemplo relacionado com a linha?

 

Obrigado!

[William Bruno 1501]

pq ID ? depende do que você tem q fazer, não sei.

 

 

deixa esse css externo, num arquivo.. assim inline é dificil de manter e codificar.

o line-height é a altura da linha, não tem muito oq exemplificar:

 

http://maujor.com/tutorial/elinhas.php

[Flavio Silveira 0]

Na loja eu tenho um arquivo chamado LojaSite.css, onde fica tudo de css da loja, mas pra mexer no line-height desse input especificamente eu tenho que usar class= (eu escrevi id, mas acho que na verdade eu queria dizer class) e depois usar algo como:

 

.classeinput {
line-height: 10px
}

 

Algo assim?

[William Bruno 1501]

pode ser.. contanto q essa class aponte para o LI.

 

a minha sugestão é para q você aplique o line-height no LI.

[Flavio Silveira 0]

No li não deu certo. Coloquei class=testando dentro do li e dentro do arquivo CSS coloquei:

 

.testando {
line-height: 150px
}

 

Coloquei bem exagerado pra poder enxergar, ele espaçou os botões radio mas manteve o desalinhamento entre o botão e o texto.

 

Depois tentei no ul, nenhuma alteração.

 

Depois tentei colocar class=testando no input, nada.

 

Por ultimo criei um label <label class=testando for=radioId>Teste</label>, fez a mesma coisa que no li, espaçou os botões mas o desalinhamento continuou.

[William Bruno 1501]

faça o seguinte:

-> dê uma altura pro LI

-> dê float left para o radio

-> dê float left para o texto, usando algum elemento como um span para englobar ele.

 

controle com margin-top no radio e no span do texto o alinhamento que você quer.

[Flavio Silveira 0]

Agradeço muito sua ajuda! Valeu mesmo!

 

Então seria mais ou menos isso?

 

<ul style='list-type:none;padding:0;margin:0;text-align:left;' class=Testao><li class=classeli id=" + liId + " style='text-align:left;'><input class=classeinput style='verical-align:middle;margin:0px;' type=radio name=" + radioName + " id=" + radioId +" value="+aDistintos[i][j]+" checked='checked' onclick='" + clickValue + "'" + sDisabled +"><span class=classespan><label class=classelabel for=radioId>Teste</label></span>

 

No arquivo CSS:

 

li.classeli {
height: 100px
}
input.classeinput {
float: left
margin-top: 12px
}
span.classespan {
float: left
margin-top: 15px
}

 

Eu coloquei o label dentro do span, é isso mesmo? Ou se estou usando span não preciso do label?

[Flavio Silveira 0]

É William, acho que to sem sorte, não funciona :(

[William Bruno 1501]

ou o span ou o label, não precisa dos 2.

 

não se trata de sorte, mas de entender oq você está fazendo, e corrigir até funcionar.

[Flavio Silveira 0]

Com o código que eu postei só consigo ter controle sobre a li, mesmo colocando class=classeinput no input e class=classespan no span e colocando o código no CSS não muda nada..

 

Talvez eu precise ler mais um pouco, mas se você tiver mais alguma sugestão ficaria muito grato :D