Como podemos ajudar?

Este artigo foi criado para as lojas que utilizam o modelo de design responsivo (RWD) do Fastcommerce.

Este recurso só funcionará corretamente nas seguintes condições:

• O campo Subprodutos da página Dados da loja do site administrativo deve estar marcado.
• O campo Exibe peso da página Dados da loja do site administrativo deve estar marcado.
• O subproduto deve conter pelo menos um descritor cadastrado.
  ex. Tamanho: P
• Ao cadastrar cores personalizadas, coloque + (sinal de mais) ao invés de espaços entre os nomes.
  ex. Amarelo+Azul
• Cada combinação de tamanho e cor deve ser cadastrada como um subproduto.
  ex. Cadastre um subproduto para o Tênis Ultra Mega - Tamanho 37 - Cor Preta, outro subproduto para o Tênis Ultra Mega - Tamanho 38 - Cor Preta, etc)
• Deve ser cadastrada a Imagem principal, Imagem de detalhe e Imagem ampliada em todos os produtos e subprodutos, mesmo que as imagens sejam iguais.
  Para o zoom funcionar corretamente, sugerimos que as imagens tenham as seguintes dimensões:
  
  • Imagem detalhada: entre 200px de largura x 200px de altura até 350px de largura x 350px de altura
  • Imagem ampliada: entre 600px de largura x 600px de altura até 800px de largura x 800px de altura
  Veja aqui algumas recomendações para as imagens de produtos.
• Para exibir várias imagens do produto é necessário que todas estas imagens sejam cadastradas entre vírgulas nos campos Imagem de detalhe e Imagem ampliada na ficha dos produtos.
  Exemplo:
  
  • Imagem de detalhe: ImagemDetalhe01.jpg,ImagemDetalhe02.jpg,ImagemDetalhe03.jpg,ImagemDetalhe04.jpg
  • Imagem ampliada: ImagemAmpliada01.jpg,ImagemAmpliada02.jpg,ImagemAmpliada03.jpg,ImagemAmpliada04.jpg
  
  Obs: Todas as imagens devem ser enviadas para a pasta PROD, antes do preenchimento dos campos na ficha de produto.
  ATENÇÃO: Se a quantidade de imagens cadastras nos campos de imagem for diferente, só será exibida a primeira imagem.
  
  • Exemplo: Se forem cadastradas 3 imagens de detalhe e apenas 2 imagens ampliadas, somente a primeira imagem será exibida.
    

Obs.: Se a loja não seguir as regras acima, este recurso não funcionará corretamente.

Passos para a implementação

1. Salve o arquivo FC_Grid_v1_css.zip em seu computador. Em seguida, envie o arquivo para a pasta CSS dentro da pasta HTM do Gerenciador de Arquivos da loja. Se a pasta não existe crie uma nova pasta com o nome CSS e envie o arquivo para a pasta.
2. Salve o arquivo FC_Grid_v1_js.zip em seu computador. Em seguida, envie para a pasta JS dentro da pasta HTM do Gerenciador de Arquivos da loja. Se a pasta não existe crie uma nova pasta com o nome JS e envie o arquivo para a pasta.
3. Salve o arquivo FC_Grid_v1_IMG.zip em seu computador. Em seguida, envie para a pasta IMAGES do Gerenciador de Arquivos da loja.
   O arquivo FC_Grid_v1_IMG.zip possui as seguintas imagens:
   • BotCarrinho.svg (botão comprar)
   • BotCarrinhoEsgotado.svg (botão esgotado)
   • BotConsulteGrid.svg (botão consulte-nos)
   • BotSelecioneGrid.svg (botão selecionar as opções)

No arquivo EstiloProduto.htm inclua entre as tags <ProdDet> e </ProdDet> o seguinte bloco de código:

<ProdDet>

<!-- Begin: HTML structure -->
<link rel="stylesheet" type="text/css" href="<BaseLoja>htm/css/FC_Grid_v1.css">
<link rel="stylesheet" href="/js/MagicToolbox/MagicZoomPlusV1/magiczoomplus.css">

<div class="FCGridMain">
  <div id="idDivGridImg" class="col-small-12 col-medium-12 col-large-5 col-xlarge-5">
    <img src="<ImagemProdDet>">
  </div>
  <div class="col-small-12 col-medium-12 col-large-7 col-xlarge-7 FCContentGrid">
    <h1 id="idNameProductGridFC" class="FCNameProductGrid"><NomeProd></h1>
    <br>
    <span class="FCCodProdGrid">
      Ref.: <small id="idCodProdGrid"><CodProd></small> 
    </span>
    <br>
    <p id="idPriceGridFC" class="FCPriceGrid">
      <PrecoSimples>
    </p>
    <script>
    (function(){ var e=document.getElementById("idPriceGridFC"); if(e)e.innerHTML+= fnMaxInstallmentsGrid(<PrecoNum>,<MaxParcelasProdNum>) + fnShowEconomyGrid(<PrecoNum>,<PrecoOri>); })();
    </script>
    <br>    
    <div id="idMainGridFC_<IDProduto>"></div>    
    <br>  
    <!-- ZipCode: Begin -->
    <div class="ProductStyleBoxFC col-small-12 col-medium-12 col-large-8 col-xlarge-5">
      <div id="ShowCEP<IDProduto>"></div>
    </div>
    <!-- ZipCode: End -->
  </div>
  <div class="col-small-12 col-medium-12 col-large-12 col-xlarge-12 text-left descr-prod">
    <div class="ProductStyleBoxDescriptionFC">
      <h2>Descrição:</h2>
    </div>
    <div class="ProductStyleBoxDescriptionFC">
      <Descricao>
    </div>
    <div class="ProductStyleBoxDescriptionFC">
      <DescrHTM>
    </div>
    <div class="ProductStyleBoxDescriptionFC">
      <DescrURL>
    </div>
  </div>

</div>
<br>
<!-- End: HTML structure -->

<!-- Begin: JS scripts -->
<script src="/js/MagicToolbox/MagicZoomPlusV1/magiczoomplus.js"></script>
<script src="<BaseLoja>htm/js/FC_Grid_v1.js"></script>

<script>
fnShowCEPGrid(<IDProduto>); /*FC simulação de frete */
FCGrid$.fnMultipleZoom("<ImagemProdDet>","<ImagemProdAmp>", false);
</script>

<script>
var aProductOnlyOneGrid=[], aProductListGrid=[];

/* Begin: Produto principal */
var sCor = ("<CorVal>" !="") ? "<CorVal>|<CorRGB>":"";
aProductOnlyOneGrid.push(JSON.stringify({IDProduto: <IDProduto>,codProd: "<CodProd>", cor: sCor, estoque: <Estoque>, peso: "<PesoNum>", priceOri: "<PrecoOri>", priceNum: "<PrecoNum>", maxInstallmentsNum: <MaxParcelasProdNum>, adicional1: "<Adicional1Val>", adicional2: "<Adicional2Val>", adicional3: "<Adicional3Val>", adicionalD1: "<AdicionalD1Val>", adicionalD2:"<AdicionalD2Val>", adicionalD3:"<AdicionalD3Val>", imgDet:"<ImagemProdDet>", imgAmp:"<ImagemProdAmp>"}));
/* End: Produto principal */

/* Begin: Lista subprodutos */
<sub>
var sCor = ("<CorVal>" !="") ? "<CorVal>|<CorRGB>":"";
aProductListGrid.push(JSON.stringify({IDProduto: <IDProduto>, codProd: "<CodProd>", cor: sCor, estoque: <Estoque>, peso: "<PesoNum>", priceOri: "<PrecoOri>", priceNum: "<PrecoNum>", maxInstallmentsNum: <MaxParcelasProdNum>, adicional1: "<Adicional1Val>", adicional2: "<Adicional2Val>", adicional3: "<Adicional3Val>", adicionalD1: "<AdicionalD1Val>", adicionalD2:"<AdicionalD2Val>", adicionalD3:"<AdicionalD3Val>", imgDet:"<ImagemProdDet>", imgAmp:"<ImagemProdAmp>"}));
</sub>
/* End: Lista subprodutos */

/* Begin: Código opcional para alterar as configurações da grade */
FCGrid$.myOptions = {
  autoSelect : false,
  cartOnPage : true,
  shippingUpdate : true,
  incMultGrid : false,
  separadorRGBCor : '|',
  qtyDescriptors : 7,
  htmlFlagChecked : '<i class="FCCheckedGrid"></i>',
  imageProduct : 'cor',
  colorName : false,
  colorImg : false, 
  colorImgFormat : '.gif',
  stock: false,
  btnSelectImg : 'BotSelecioneGrid.svg', 
  btnBuyImg : 'BotCarrinho.svg',
  btnContactUSImg : 'BotConsulteGrid.svg',
  btnSoldOut : 'BotCarrinhoEsgotado.svg', 
  textGrid : 'Selecione as opções abaixo',
  order : ['cor', 'adicional1', 'adicional2', 'adicional3', 'adicionalD1', 'adicionalD2', 'adicionalD3'],
  nameDescriptor : { 
    cor : 'Cor',
    adicional1 : 'Descritor 1',
    adicional2 : 'Descritor 2',
    adicional3 : 'Descritor 3',
    adicionalD1 : 'Descritor 4',
    adicionalD2 : 'Descritor 5',
    adicionalD3 : 'Descritor 6'
  },
  textDescriptor : {
    cor : 'Selecione',
    adicional1 : 'Selecione',
    adicional2 : 'Selecione',
    adicional3 : 'Selecione',
    adicionalD1 : 'Selecione',
    adicionalD2 : 'Selecione',
    adicionalD3 : 'Selecione'
  }
};
/* End: Código opcional para alterar as configurações da grade */

FCGrid$.init("idMainGridFC_<IDProduto>", aProductListGrid, aProductOnlyOneGrid); /* Inicia a grade */
</script>
<!-- End: JS scripts -->

</ProdDet>

O código HTML apresentado neste passo é um exemplo simplificado para o layout da página de detalhe do produto. Se preferir salve o arquivo completo EstiloProdGrid_v1.zip em seu computador. Em seguida, envie o arquivo para a pasta HTM dentro do Gerenciador de Arquivos da loja.

Obs.: esse arquivo está preparado para ser implementado no modelo de design responsivo (RWD) do Fastcommerce. Caso o loja utilize um modelo diferente/ personalizado será necessário realizar as devidas adaptações nos códigos HTML, CSS e javascript.

Parcelamento dos produtos.

Inclua no final do arquivo LojaLib.js as funções abaixo:

/*Função para mostrar parcelamento*/
function fnMaxInstallmentsGrid(PrecoProd,MaxParcelas){
  var ComSem;  
  if(typeof Juros!="undefined"){
    if(PrecoProd==0||MaxParcelas==1||Juros.length==0)return "";
    if(MaxParcelas==0||MaxParcelas>Juros.length)MaxParcelas=Juros.length;
    if(Juros[MaxParcelas-1]>0)ComSem=""; else ComSem="<font color=#990000> sem juros</font>";
    return "<span class=EstParc> ou <b>"+MaxParcelas+"x</b>"+ComSem+" de <b>"+FormatPrecoReais(CalculaParcelaJurosCompostos(PrecoProd,MaxParcelas))+"</b></span>";
  }else{
    return "";
  }
}

/*Função para mostrar valor formatado*/
function FormatNumber(num){
  var num=num.toString().replace(/\$|\,/g,'');
  if(isNaN(num))num="0";
  sign=(num==(num=Math.abs(num))); num=Math.floor(num*100+0.50000000001); num=Math.floor(num/100).toString();
  for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+'.'+num.substring(num.length-(4*i+3));
  return ((sign)?'':'-')+num;
}

/*Função para mostrar valor economizado em produtos em promoção*/
function fnShowEconomyGrid(ProdPrice,ProdPriceOri){
  if(ProdPrice!=ProdPriceOri && typeof FormatNumber == 'function' && typeof FormatPrice == 'function' ){
    return "<font style='font-size:16px;display:block;margin:10px 0;' color=#6f9e45>Economize <b>"+ FormatPrice(ProdPriceOri-ProdPrice,'R$') +"</b> ("+ FormatNumber(((ProdPriceOri-ProdPrice)/ProdPriceOri)*100)+"%)</font>";
  }else{return "";}
}

A função fnMaxInstallmentsGrid é responsável por exibir o valor do parcelamento do produto, ex.:
R$ 1.000,00 ou 6x de R$ 178,47

A função fnShowEconomyGrid é responsável por exibir o valor economizado em produtos em promoção, ex.:
de R$ 2.500,00 por R$ 2.100,00 Economize R$ 400,00 (16%)

Simulação de frete para os subprodutos.

Obs.: A simulação de frete no detalhe do produto funciona somente se a loja utiliza a opção Utilizar faixas de CEP (Brasil) na página Envio & frete da loja. Para mais detalhes sobre a configuração do frete da loja por faixas de CEP clique aqui e veja a 3° opção.

Para o funcinamento correto do recurso de simulação de frete para os subproduto marque na página Dados da Loja a opção Exibe Peso e cadastre o respectivo peso em cada subproduto.

Inclua no final do código do arquivo LojaLib.js as funções abaixo:

// ZipCode Grid FC - CEP - Begin 
function fnShowCEPGrid(IDProd){
  if(FC$.TypeFrt==3){
    var sNumCEP=fnGetCookie('CEP'+FC$.IDLoja);
    if(sNumCEP==null)sNumCEP="";
    sCEP="<div id='idDivCEPFC'>";
    sCEP+="  <div id='idDivTitCEP'><img src='"+ FC$.PathImg +"iconziptruck.svg' width='25' height='25' alt='Zip box' /><span>Simule o valor do frete</span></div>";
    sCEP+="  <div id='idDivContentCEP'>";
    sCEP+="    <div id='idDivContentFieldsCEP'>";
    sCEP+="      <div id='idDivCEPCalc'>";
    sCEP+="        <div class='FieldCEP FieldCEPQty'><label>Qtd.</label><input type='number' id='idQtdZip"+ IDProd +"' value='1' maxlength='4'></div>";
    sCEP+="        <div class='FieldCEP FieldCEPNum'><input type='text' placeholder='CEP' id='idZip"+ IDProd +"' value='"+ sNumCEP +"' maxlength='9'></div>";
    sCEP+="        <img src='"+ FC$.PathImg +"iconnewsletter.svg' height='29px' id='idCEPButton' class='FieldCEPBtn' onclick='fnGetShippingValuesProdGrid("+ IDProd +")'>";
    sCEP+="      </div>";
    sCEP+="    </div>";
    sCEP+="    <div id='idDivImgLoadingCEPFC'><img src='"+ FC$.PathImg +"loadingcep.gif' vspace=3 style='display:none;' id=ImgLoadingCEP></div>";
    sCEP+="    <div id='idShippingValues"+ IDProd +"'></div></div>";
    sCEP+="  </div>";
    sCEP+="</div>";
    var oShowCEP=document.getElementById("ShowCEP"+IDProd);
    if(oShowCEP)oShowCEP.innerHTML=sCEP;
  }
}


function fnGetShippingValuesProdGrid(IDProd){
  sCEP=document.getElementById("idZip"+ IDProd).value;
  fnSetCookie('CEP'+FC$.IDLoja,sCEP);
  if(sCEP==""){document.getElementById("idShippingValues"+IDProd).innerHTML="<span class='freightResult' style=color:#990000;>Informe o CEP</span>";return;}
  document.getElementById("idShippingValues"+IDProd).innerHTML="";
  document.getElementById("ImgLoadingCEP").style.display='';
  var iQty=document.getElementById("idQtdZip"+IDProd).value;
  if(IDProd)var sParamProd="&idproduto="+ IDProd;
  else var sParamProd="";
  AjaxExecFC("/XMLShippingCEP.asp","IDLoja="+ FC$.IDLoja +"&qty="+ iQty +"&cep="+ sCEP + sParamProd,false,processXMLCEPGrid,IDProd);

}

function processXMLCEPGrid(obj,IDProd){
  var sShipping="";
  var oShippingValues=document.getElementById("idShippingValues"+IDProd);
  var iErr=ReadXMLNode(obj,"err");if(iErr==null)return;
  if(iErr!="0"){
    document.getElementById("ImgLoadingCEP").style.display='none';
    oShippingValues.innerHTML="<span class='freightResult' style=color:#990000;>"+ ReadXMLNode(obj,"msg") +"</span>";
    return;
  }
  oShippingValues.innerHTML="";
  var UseCart=ReadXMLNode(obj,"UseCart");
  if(UseCart=="False"){
    var ProdName=ReadXMLNode(obj,"ProdName");
    var ProdRef=ReadXMLNode(obj,"ProdRef");  
  }
  sShipping+="<div class='ZipOptions'>";
  var iOpt=ReadXMLNode(obj,"OptQt");
  for(var i=1;i<=iOpt;i++){
    var OptName=ReadXMLNode(obj,"Opt"+ i +"Name");
    var OptImage=ReadXMLNode(obj,"Opt"+ i +"Image");
    var OptObs=ReadXMLNode(obj,"Opt"+ i +"Obs");
    if(OptObs==null)OptObs="";
    sValorFrete=ReadXMLNode(obj,"Opt"+ i +"Value");
    if(sValorFrete=="R$ 0,00")sValorFrete="FRETE GRÁTIS";
    sShipping+="<div class='ZipOption'>";
    sShipping+="  <div class='ZipNameObs'>";
    sShipping+="    <div class='ZipName'>"+ OptName +"</div>";
    sShipping+="    <div class='ZipObsVal'>"+ OptObs +"</div>";
    sShipping+="  </div>";
    sShipping+="  <div class='ZipValue'>"+ sValorFrete +"</div>";
    sShipping+="</div>";
  }
  oShippingValues.innerHTML=sShipping;
  oShippingValues.style.display="block"; 
  sShipping+="</div>";
  document.getElementById("ImgLoadingCEP").style.display='none';
}

// ZipCode Grid FC - CEP - End 

Verifique se o arquivo LojaLib.js já possui as funções abaixo. Caso o arquivo não possua essas funções faça a inclução delas no final do código do arquivo.

function fnGetCookie(name){
  var arg=name+"=";
  var alen=arg.length;
  var clen=document.cookie.length;
  var i=0;
  while (i<clen){
    var j=i+alen;
    if(document.cookie.substring(i,j)==arg)return fnGetCookieVal(j);
    i=document.cookie.indexOf(" ",i)+1;
    if(i==0)break;
  }
  return null;
}

function fnGetCookieVal(offset){
  var endstr=document.cookie.indexOf(";",offset);
  if (endstr==-1)endstr=document.cookie.length;
  return unescape(document.cookie.substring(offset,endstr));
}

function fnSetCookie(name,value){
  var argv=fnSetCookie.arguments;
  var argc=fnSetCookie.arguments.length;
  var expires=(argc>2)?argv[2]:null;
  var path=(argc>3)?argv[3]:null;
  var domain=(argc>4)?argv[4]:null;
  var secure=(argc>5)?argv[5]:false;
  document.cookie=name+"="+escape(value)+((expires==null)?"":(";expires=" + expires.toGMTString()))+((path==null)?"":(";path="+path))+((domain==null)?"":(";domain="+domain))+((secure==true)?"; secure":"");
}

Veja as opções de personalização.

Parâmetro	Padrão	Opções	Descrição
myOptions
autoSelect	true	true/ false	Seleciona automaticamente o primeiro subproduto caso seja utilizado a opção true
cartOnPage	true	true/ false	Ativa o recurso Adiciona produto à cesta sem sair da página na Grade caso seja utilizado a opção true
shippingUpdate	true	true/ false	Ativa o recurso a simulação de frete com o peso do subproduto caso utilizado a opção true
incMultGrid	true	true/ false	Ativa o recurso para informar a quantidade de cada produto antes de colocá-lo na cesta na Grade caso seja utilizado a opção true
separadorRGBCor	'|'	Caracteres	Define o caractere para seperar o nome e o valor Hexadecimal da cor cadastrado no produto
qtyDescriptors	2	números de 1 à 7	Define a quantidade máxima de descritores especiais e simples utilizandos nos produtos, incluí também a cor
htmlFlagChecked	'<i class="FCCheckedGrid"></i>'	elemento html	Define o HTML para exibir o check
imageProduct	'cor'	nome de um descritor ex.: cor e descritor1	Define qual descritor será usado para alterar a imagem dos produto de acordo com o descritor clicado
colorName	false	true/ false	Define se será exibido o nome das cores, ex. vermelho
colorImg	false	true/ false	Define se será exibido imagens para as cores, ex.
colorImgFormat	'.gif'	extensões de arquivos de imagem ex. .svg e .png	Define a extensão dos arquivos de imagem que serão para as cores ex.
stock	false	true/ false	Exibe o quantidade em estoque dos produtos caso seja utilizado a opção true
btnSelectImg	'BotSelecioneGrid.svg'	nome da imagem do botão	Nome do arquivo de imagem para o botão "selecionar"
btnBuyImg	'BotCarrinho.svg'	nome da imagem do botão	Nome do arquivo de imagem para o botão "comprar"
btnContactUSImg	'BotConsulteGrid.svg'	nome da imagem do botão	Nome do arquivo de imagem para o botão "consulte-nos"
btnSoldOut	'BotCarrinhoEsgotado.svg'	nome da imagem do botão	Nome do arquivo de imagem para o botão "esgotado"
textGrid	'Selecione as opções abaixo'	texto livre	Exibe um texto acima das opções da grade
order	['cor', 'descritor1', 'descritor2', 'descritor3', 'descritorD1', 'descritorD2', 'descritorD3']		Define a ordenação que os descritores serão exibidos na Grade
myOptions : nameDescriptor [ ]
cor	'Cor'	nome para o descrito cor	Define o nome que será exibido para o descritor Cor
descritor1	'Adicional 1'	nome do descritor 1, ex. tamanho	Define o nome que será exibido para o Descritor Adicional 1
descritor2	'Adicional 2'	nome do descritor 2, ex. marca	Define o nome que será exibido para o Descritor Adicional 2
descritor1	'Adicional 3'	nome do descritor 3	Define o nome que será exibido para o Descritor Adicional 3
descritorD1	'Adicional 4'	nome do descritor 4	Define o nome que será exibido para o Descritor Simples 1
descritorD2	'Adicional 5'	nome do descritor 5	Define o nome que será exibido para o Descritor Simples 2
descritorD3	'Adicional 6'	nome do descritor 6	Define o nome que será exibido para o Descritor Simples 3
myOptions : textDescriptor [ ]
cor	'Selecione'	texto livre, ex. selecione a cor	Define o texto que será exibido para o descritor Cor
descritor1	'Selecione'	texto livre, ex. selecione o tamanho	Define o texto que será exibido para o Descritor Adicional 1
descritor2	'Selecione'	texto livre, ex. selecione o modelo	Define o texto que será exibido para o Descritor Adicional 2
descritor3	'Selecione'	texto livre, ex. selecione a voltagem	Define o texto que será exibido para o Descritor Adicional 3
descritorD1	'Selecione'	texto livre	Define o texto que será exibido para o Descritor Simples 1
descritorD2	'Selecione'	texto livre	Define o texto que será exibido para o Descritor Simples 2
descritorD3	'Selecione'	texto livre	Define o texto que será exibido para o Descritor Simples 3

Exemplos

Configuração simples para grade que utiliza Cor e Tamanho (Descritor Especial 1):

<script type="text/javascript">
FCGrid$.myOptions = {
  qtyDescriptors : 2,
  order : ['cor', 'adicional1'],
  nameDescriptor : { 
    cor : 'Cor',
    adicional1 : 'Tamanho'
  },
  textDescriptor : {
    cor : 'Selecione a cor',
    adicional1 : 'Selecione o tamanho'
  }
};
</script>

Configuração completa

<script type="text/javascript">
FCGrid$.myOptions = {
  autoSelect : false,
  cartOnPage : false,
  shippingUpdate : false,
  incMultGrid : false,
  separadorRGBCor : '|',
  qtyDescriptors : 7,
  htmlFlagChecked : '<i class="FCCheckedGrid"></i>',
  imageProduct : 'cor',
  colorName : false,
  colorImg : false, 
  colorImgFormat : '.gif',
  stock : false,
  btnSelectImg : 'BotSelecioneGrid.svg', 
  btnBuyImg : 'BotCarrinho.svg',
  btnContactUSImg : 'BotConsulteGrid.svg',
  btnSoldOut : 'BotCarrinhoEsgotado.svg', 
  textGrid : 'Selecione as opções abaixo',
  order : ['cor', 'adicional1', 'adicional2', 'adicional3', 'adicionalD1', 'adicionalD2', 'adicionalD3'],
  nameDescriptor : { 
    cor : 'Cor',
    adicional1 : 'Descritor 1',
    adicional2 : 'Descritor 2',
    adicional3 : 'Descritor 3',
    adicionalD1 : 'Descritor 4',
    adicionalD2 : 'Descritor 5',
    adicionalD3 : 'Descritor 6'
  },
  textDescriptor : {
    cor : 'Selecione',
    adicional1 : 'Selecione',
    adicional2 : 'Selecione',
    adicional3 : 'Selecione',
    adicionalD1 : 'Selecione',
    adicionalD2 : 'Selecione',
    adicionalD3 : 'Selecione'
  }
};
</script>

Como utilizar imagens para as cores?

1. Configuração da grade

Utilize o parâmetro:

colorImg : true

Exemplos

Configuração simples para grade que utiliza Cor e Tamanho (Descritor Especial 1):

<script type="text/javascript">
FCGrid$.myOptions = {
  qtyDescriptors : 2,
  colorImg : true
  order : ['cor', 'adicional1'],
  nameDescriptor : { 
    cor : 'Cor',
    adicional1 : 'Tamanho'
  },
  textDescriptor : {
    cor : 'Selecione a cor',
    adicional1 : 'Selecione o tamanho'
  }
};
</script>

2. Cadastro das cores na loja

Cadastre as cores na página Dados da Loja » Produtos » clicando na seta a direita do campo "Exibe cores", informe o nome da cor, selecione uma cor hexadecimal (#000000) na tabela de cores e clique no botão incluir. Para mais detalhes sobre como cadastrar novas cores e demais descritores para os produtos veja o nosso artigo de ajuda.

Crie uma pasta com o nome CORES dentro da pasta PROD no Gerenciador de Arquivos da loja e envie os arquivos de imagens das cores.

O nome do arquivo da imagem deve ser igual ao nome da cor cadastrada na loja. Caso a cor seja composta por mais de um nome, utilize o sinal de + (mais).

Exemplo: se o nome da cor é Azul+Escuro, o nome da imagem enviada para a pasta CORES deve ser Azul_Escuro.gif, substitua o sinal de + (mais) por _ (underscore / underline).

Exemplos

Cor simples Nome cadastrado na loja: vermelho Nome do arquivo de imagem: vermelho.gif

Cor simples Nome cadastrado na loja: azul Nome do arquivo de imagem: azul.gif

Combinação de cores Nome cadastrado na loja: preto+vermelho Nome do arquivo de imagem: preto_vermelho.gif