Como podemos ajudar?

ATENÇÃO: Os procedimentos deste artigo consideram que loja utiliza o modelo 2. Fale com nossa equipe de suporte se sua loja utiliza outro modelo ou tem design personalizado.

Antes de iniciar, é preciso fazer backup da pasta HTM. Veja aqui como fazer este backup. Em seguida, siga os passos abaixo:

1º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo estiloproduto.htm e clique no ícone do lápis verde ao seu lado para editar.

Dentro do <script></script> na tag <ProdTop> faça a inclusão de uma nova variável:

var aDescNames=["<NomeAdicional1>","<NomeAdicional2>","<NomeAdicional3>"];

Exemplo:

<script>
iQtdProds=<QtProd>;
FCLib$.onReady(function(){
if(iQtdProds=="1"){
var sPages=sF$.fnGetID("idPageCountFC");
if(sPages)sPages.style.display="none";
}
});
OffsetAutoPagFC=290;
var bTemSub=false;
var aDescNames=["<NomeAdicional1>","<NomeAdicional2>","<NomeAdicional3>"];
</script>

No mesmo arquivo estiloproduto.htm, dentro da tag <ProdDet>, faça a inclusão de uma nova linha de html abaixo da tag <prodPriceSimple>.

<p class="prod-custom-fields" id="idCustomFieldsFC<prodId>"></p>

Exemplo:

<div>
<p class="prod-price" id="idPriceGridFC<prodId>">
<prodPriceSimple>
</p>
<p class="prod-custom-fields" id="idCustomFieldsFC<prodId>"></p>
<script>
FCLib$.onReady(function(){
var e=document.getElementById("idPriceGridFC<prodId>");
if(e)e.innerHTML += fnMaxInstallmentsGrid(<prodPriceNum>,<prodMaxInstallmentNum>) + fnShowEconomyGrid(<prodPriceNum>,<prodPriceOri>);
});
</script>
</div>

No arquivo estiloproduto.htm, dentro da tag <ProdDet>, encontre a linha com FCLib$.onReady(function(){}) e faça a inclusão da função fnShowCustomFields:

fnShowCustomFields(<prodId>,{"a1":"<desc1Val>","a2":"<desc2Val>","a3":"<desc3Val>"});

Exemplo:

<script>
FCLib$.onReady(function(){
sF$.fnCustomizeIconsSocialNetworks(true);
fnShowCEP(<prodId>);
fnShowCEPGrid(<prodId>); /*FC simulação de frete */
fnShowCustomFields(<prodId>,{"a1":"<desc1Val>","a2":"<desc2Val>","a3":"<desc3Val>"});
});
FCGrid$.showVideoGrid("<CodVideoProd>");
</script>

Continuando no arquivo estiloproduto.htm, dentro da tag <ProdDet>, será necessário a inclusão de uma nova variável IDProdutoPai e a utilização da mesma no <script>:

var IDProdutoPai=<prodId>;

De:

<script>
var GridLib_<prodId>$=(function(){
var oProdTags={...}</script>

Para:

<script>
var IDProdutoPai=<prodId>;
var GridLib_<prodId>$=(function(){
var oProdTags={...}</script>

No <script> faça a seguinte alteração dentro de oProdTags, abaixo de IDProduto:<prodId>:

De:

var oProdTags={
ImagemProdDet:"<prodImgDet>",
ImagemProdAmp:"<prodImgAmp>",
CorVal:"<colorVal>",
CorRGB:"<colorRGB>",
IDProduto:<prodId>,
CodProd:"<prodRef>",
Estoque:<prodStock>,
PesoNum:"<weightNum>"...

Para:

var oProdTags={
ImagemProdDet:"<prodImgDet>",
ImagemProdAmp:"<prodImgAmp>",
CorVal:"<colorVal>",
CorRGB:"<colorRGB>",
IDProduto:<prodId>,
IDProdutoPai:IDProdutoPai,
CodProd:"<prodRef>",
Estoque:<prodStock>,
PesoNum:"<weightNum>"...

Agora realize a seguinte alteração dentro de aSubProdTags, abaixo de IDProduto:<prodId>:

De:

var aSubProdTags=[];
<sub>
aSubProdTags.push({
ImagemProdDet:"<prodImgDet>",
ImagemProdAmp:"<prodImgAmp>",
CorVal:"<colorVal>",
CorRGB:"<colorRGB>",
IDProduto:<prodId>,
IDProdutoPai:IDProdutoPai,
CodProd:"<prodRef>",
Estoque:<prodStock>,
PesoNum:"<weightNum>"...

Para:

var aSubProdTags=[];
<sub>
aSubProdTags.push({
ImagemProdDet:"<prodImgDet>",
ImagemProdAmp:"<prodImgAmp>",
CorVal:"<colorVal>",
CorRGB:"<colorRGB>",
IDProduto:<prodId>,
IDProdutoPai:IDProdutoPai,
CodProd:"<prodRef>",
Estoque:<prodStock>,
PesoNum:"<weightNum>"...

Após realizar todas as alterações, clique em Salvar.

OBS: Repita os procedimentos acima no arquivo estiloproduto5.htm.

2º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM > pasta JS . Localize o arquivo store-lib.js e clique no ícone do lápis verde ao seu lado para editar.

No final do arquivo, copie e cole a função abaixo:

/* Product init custom fields */
function fnShowCustomFields(id,oCustom){
var oCustomFields=document.getElementById("idCustomFieldsFC"+id);
if(oCustomFields){
var sCustom="";
if(oCustom.a1=="custom")sCustom+="<div class='product-details-custom-fields'><input placeholder='"+aDescNames[0]+"' type=text data-name='"+ aDescNames[0] +"' name=CustomField1 id=CustomField_1_"+ id +"></div>";
if(oCustom.a2=="custom")sCustom+="<div class='product-details-custom-fields'><input placeholder='"+aDescNames[1]+"' type=text data-name='"+ aDescNames[1] +"' name=CustomField2 id=CustomField_2_"+ id +"></div>";
if(oCustom.a3=="custom")sCustom+="<div class='product-details-custom-fields'><input placeholder='"+aDescNames[2]+"' type=text data-name='"+ aDescNames[2] +"' name=CustomField3 id=CustomField_3_"+ id +"></div>";
if(sCustom!="")oCustomFields.innerHTML="<div class='product-details-custom-container'><div class='product-details-custom-fields-title'>Preencha abaixo para personalizar o produto:</div>"+sCustom+"</div>";
}
}
/* Product end custom fields */

Clique em Salvar.

3º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM > pasta JS. Localize o arquivo fc_grid_v1.js e clique no ícone do lápis verde ao seu lado para editar.

Dentro da função function fnBuyProduct(posBtnComprar), após o if(options.incMultGrid) e antes da variável var aNameRGB, inclua o código abaixo:

 /* Product init custom fields */
console.log("IDProdutoPai",product.IDProdutoPai);
var oCustomField_1=document.getElementById('CustomField_1_'+product.IDProdutoPai);
var oCustomField_2=document.getElementById('CustomField_2_'+product.IDProdutoPai);
var oCustomField_3=document.getElementById('CustomField_3_'+product.IDProdutoPai);
if(oCustomField_1){
if(oCustomField_1.value==""){alert("Preencha o "+ oCustomField_1.getAttribute("data-name"));return oCustomField_1.focus();}
else{product.adicional1=oCustomField_1.value;}
}
if(oCustomField_2){
if(oCustomField_2.value==""){alert("Preencha o "+ oCustomField_2.getAttribute("data-name"));return oCustomField_2.focus();}
else{product.adicional2=oCustomField_2.value;}
}
if(oCustomField_3){
if(oCustomField_3.value==""){alert("Preencha o "+ oCustomField_3.getAttribute("data-name"));return oCustomField_3.focus();}
else{product.adicional3=oCustomField_3.value;}
}
/* Product end custom fields */

Exemplo:

/* incMult */
if(options.incMultGrid){
var iQtyEstoque=product.estoque;
iQtyIncMult=document.getElementById("idQTIncMultGrid").value;
if(iQtyIncMult>iQtyEstoque){
alert(""+ rk("grid-stock-higher-available") +" \n"+ ""+ rk("grid-stock-available-now") +" ("+ iQtyEstoque +").");
return document.getElementById("idQTIncMultGrid").focus();
}
if(iQtyIncMult==0){
alert(rk("grid-quantity-requested-equal-greater"));
return document.getElementById("idQTIncMultGrid").focus();
}
}
/* Product init custom fields */
console.log("IDProdutoPai",product.IDProdutoPai);
var oCustomField_1=document.getElementById('CustomField_1_'+product.IDProdutoPai);
var oCustomField_2=document.getElementById('CustomField_2_'+product.IDProdutoPai);
var oCustomField_3=document.getElementById('CustomField_3_'+product.IDProdutoPai);
if(oCustomField_1){
if(oCustomField_1.value==""){alert("Preencha o "+ oCustomField_1.getAttribute("data-name"));return oCustomField_1.focus();}
else{product.adicional1=oCustomField_1.value;}
}
if(oCustomField_2){
if(oCustomField_2.value==""){alert("Preencha o "+ oCustomField_2.getAttribute("data-name"));return oCustomField_2.focus();}
else{product.adicional2=oCustomField_2.value;}
}
if(oCustomField_3){
if(oCustomField_3.value==""){alert("Preencha o "+ oCustomField_3.getAttribute("data-name"));return oCustomField_3.focus();}
else{product.adicional3=oCustomField_3.value;}
}
/* Product end custom fields */
/* todos os parâmetros do produto */
var aNameRGB=product.cor.split(options.separadorRGBCor), sNameColor=aNameRGB[0];

Após realizar a inclusão, clique em Salvar.

4º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo lojasite.css e clique no ícone do lápis verde ao seu lado para editar.

No final do arquivo copie e cole os estilos abaixo:

/* Custom Product fields */
.product-details-custom-container{padding:10px;border:1px solid #dedede}
.product-details-custom-fields-title{padding:8px;font-size:1rem;}
.product-details-custom-fields{padding:3px;}
.product-details-custom-fields input{height:30px;font-size:0.9rem;}

Após realizar a inclusão, clique em Salvar.

5º Passo

No menu esquerdo da administração clique em DADOS DA LOJA > Produtos, vá até a seção Descritores especiais.

Nesse exemplo serão utilizados os descritores especiais 2 e 3, para uma loja fictícia que vende camisas personalizadas de times de futebol. O nome do campo 2 será Nome e do campo 3 será Número que o cliente deseja que sejam estampados na parte de trás da camisa. Ao lado de cada campo marque a opção Filtro:

Clique no ícone da seta ao lado do campo Nome e do campo número e cadastre um item chamado custom:

Após cadastrar o item custom nos descritores Nome e Número, clique no botão Gravar.

Obs: O nome dos campos dos descritores especiais podem variar de acordo com o segmento da loja.

6º Passo

Acesse a ficha do produto principal e clique na aba Atributos:

Verifique que os descritores especiais Nome e Número estão com o item custom. Clique na palavra custom e em seguida no botão Adicionar:

Confirme se o cadastro está conforme a imagem abaixo. O item custom deve ter sido adicionado aos descritores Nome e Número:

Clique no botão Alterar.

7º Passo

Acesse o produto na loja virtual e verifique se os campos são mostrados:

Seu produto não precisa utilizar dois campos personalizados. Veja exemplo com apenas um campo:

Qualquer dúvida entre em contato com nossa equipe de suporte.