Name: FC 6133 :: Como utilizar a tabela de parcelamento igual da loja fictícia Flores Web?
SKU: 6133
Price: 1.06 BRL
Availability: InStock

Produtos

Filtros da busca:

Filtrando por:

Remover filtros

Seção
- Design

FC 6133 :: Como utilizar a tabela de parcelamento igual da loja fictícia Flores Web?

As tabelas podem ser personalizadas para exibir o valor de cada parcela de acordo com a bandeira de cartão de crédito utilizada pela loja.

ATENÇÃO: A implantação deste recurso requer CONHECIMENTOS AVANÇADOS de html e JavaScript.

O conteúdo mencionado neste exemplo é apenas uma sugestão. A Rumo Informática não se responsabiliza por apresentar mais detalhes a respeito de alterações e implantações.

Para mais informações, solicite recomendações de webdesigner ou entre em contato com o de sua preferência.

1º Passo:

Estas parcelas e juros inicialmente devem estar cadastradas nas formas de pagamento que aceitam estes parcelamentos.

Se sua loja por exemplo parcela com cartão de crédito, clique na seta ao lado da bandeira do cartão na página de Pagamentos para cadastrar as faixas de parcelamento.

2º Passo:

Envie o arquivo SpryTabbedPanels.js para a pasta HTM da loja.

Segue o conteúdo deste arquivo:

var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.TabbedPanels = function(element, opts)
{
	this.element = this.getElement(element);
	this.defaultTab = 0; // Show the first panel by default.
	this.bindings = [];
	this.tabSelectedClass = "TabbedPanelsTabSelected";
	this.tabHoverClass = "TabbedPanelsTabHover";
	this.tabFocusedClass = "TabbedPanelsTabFocused";
	this.panelVisibleClass = "TabbedPanelsContentVisible";
	this.focusElement = null;
	this.hasFocus = false;
	this.currentTabIndex = 0;
	this.enableKeyboardNavigation = true;

	Spry.Widget.TabbedPanels.setOptions(this, opts);

	// If the defaultTab is expressed as a number/index, convert
	// it to an element.

	if (typeof (this.defaultTab) == "number")
	{
		if (this.defaultTab < 0)
			this.defaultTab = 0;
		else
		{
			var count = this.getTabbedPanelCount();
			if (this.defaultTab >= count)
				this.defaultTab = (count > 1) ? (count - 1) : 0;
		}

		this.defaultTab = this.getTabs()[this.defaultTab];
	}

	// The defaultTab property is supposed to be the tab element for the tab content
	// to show by default. The caller is allowed to pass in the element itself or the
	// element's id, so we need to convert the current value to an element if necessary.

	if (this.defaultTab)
		this.defaultTab = this.getElement(this.defaultTab);

	this.attachBehaviors();
};

Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
}

Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
{
	var children = [];
	var child = element.firstChild;
	while (child)
	{
		if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
			children.push(child);
		child = child.nextSibling;
	}
	return children;
};

Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
		return;
	ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
		return;
	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
	if (!optionsObj)
		return;
	for (var optionName in optionsObj)
	{
		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
			continue;
		obj[optionName] = optionsObj[optionName];
	}
};

Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
{
	if (this.element)
	{
		var children = this.getElementChildren(this.element);
		if (children.length)
			return children[0];
	}
	return null;
};

Spry.Widget.TabbedPanels.prototype.getTabs = function()
{
	var tabs = [];
	var tg = this.getTabGroup();
	if (tg)
		tabs = this.getElementChildren(tg);
	return tabs;
};

Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
{
	if (this.element)
	{
		var children = this.getElementChildren(this.element);
		if (children.length > 1)
			return children[1];
	}
	return null;
};

Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
{
	var panels = [];
	var pg = this.getContentPanelGroup();
	if (pg)
		panels = this.getElementChildren(pg);
	return panels;
};

Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
{
	ele = this.getElement(ele);
	if (ele && arr && arr.length)
	{
		for (var i = 0; i < arr.length; i++)
		{
			if (ele == arr[i])
				return i;
		}
	}
	return -1;
};

Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
{
	var i = this.getIndex(ele, this.getTabs());
	if (i < 0)
		i = this.getIndex(ele, this.getContentPanels());
	return i;
};

Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
{
	return this.currentTabIndex;
};

Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
{
	return Math.min(this.getTabs().length, this.getContentPanels().length);
};

Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
			element.addEventListener(eventType, handler, capture);
		else if (element.attachEvent)
			element.attachEvent("on" + eventType, handler);
	}
	catch (e) {}
};

Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
	this.showPanel(tab);
};

Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
{
	this.addClassName(tab, this.tabHoverClass);
};

Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
{
	this.removeClassName(tab, this.tabHoverClass);
};

Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
{
	this.hasFocus = true;
	this.addClassName(this.element, this.tabFocusedClass);
};

Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
{
	this.hasFocus = false;
	this.removeClassName(this.element, this.tabFocusedClass);
};

Spry.Widget.TabbedPanels.ENTER_KEY = 13;
Spry.Widget.TabbedPanels.SPACE_KEY = 32;

Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
{
	var key = e.keyCode;
	if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))
		return true;

	this.showPanel(tab);

	if (e.stopPropagation)
		e.stopPropagation();
	if (e.preventDefault)
		e.preventDefault();

	return false;
};

Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
{
	var stopTraversal = false;
	if (root)
	{
		stopTraversal = func(root);
		if (root.hasChildNodes())
		{
			var child = root.firstChild;
			while (!stopTraversal && child)
			{
				stopTraversal = this.preorderTraversal(child, func);
				try { child = child.nextSibling; } catch (e) { child = null; }
			}
		}
	}
	return stopTraversal;
};

Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
{
	var self = this;
	Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
	Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
	Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);

	if (this.enableKeyboardNavigation)
	{
		// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
		// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
		// by default.

		// Find the first element within the tab container that has a tabindex or the first
		// anchor tag.
		
		var tabIndexEle = null;
		var tabAnchorEle = null;

		this.preorderTraversal(tab, function(node) {
			if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
			{
				var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
				if (tabIndexAttr)
				{
					tabIndexEle = node;
					return true;
				}
				if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
					tabAnchorEle = node;
			}
			return false;
		});

		if (tabIndexEle)
			this.focusElement = tabIndexEle;
		else if (tabAnchorEle)
			this.focusElement = tabAnchorEle;

		if (this.focusElement)
		{
			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
		}
	}
};

Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
{
	var tpIndex = -1;
	
	if (typeof elementOrIndex == "number")
		tpIndex = elementOrIndex;
	else // Must be the element for the tab or content panel.
		tpIndex = this.getTabIndex(elementOrIndex);
	
	if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
		return;

	var tabs = this.getTabs();
	var panels = this.getContentPanels();

	var numTabbedPanels = Math.max(tabs.length, panels.length);

	for (var i = 0; i < numTabbedPanels; i++)
	{
		if (i != tpIndex)
		{
			if (tabs[i])
				this.removeClassName(tabs[i], this.tabSelectedClass);
			if (panels[i])
			{
				this.removeClassName(panels[i], this.panelVisibleClass);
				panels[i].style.display = "none";
			}
		}
	}

	this.addClassName(tabs[tpIndex], this.tabSelectedClass);
	this.addClassName(panels[tpIndex], this.panelVisibleClass);
	panels[tpIndex].style.display = "block";

	this.currentTabIndex = tpIndex;
};

Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
{
	var tabs = this.getTabs();
	var panels = this.getContentPanels();
	var panelCount = this.getTabbedPanelCount();

	for (var i = 0; i < panelCount; i++)
		this.addPanelEventListeners(tabs[i], panels[i]);

	this.showPanel(this.defaultTab);
};

3º Passo:

Adicione as seguintes linhas no começo do arquivo BarraTopo.htm:

<script src=<BaseLoja>htm/SpryTabbedPanels.js></script>
<script src=<BaseLoja>htm/LojaLib.js></script>
<script src=<BaseLoja>htm/JurosParcelas.js></script>

4º Passo:

Altere o conteúdo do arquivo JurosParcelas.js de acordo com o código abaixo:

Veja que temos diferentes parcelamentos para Visa e AMEX.

//Informe abaixo os juros para parcelamento em 1x, 2x, 3x, etc.

var Juros=new Array(0,0,0,0,0,0);
var JurosVISA=new Array(0,0,0,1.9,1.9,1.9,1.9,1.9);
var JurosAMEX=new Array(0,0,0,0,0,1.9,1.9,1.9,1.9,1.9);

5º Passo:

Adicione as funções para mostrar o parcelamento no final do arquivo LojaLib.js.

Veja que temos diferentes funções para parcelamentos (CalculaParcelaJurosCompostosVISA e MostraParcelasVISA) o mesmo se aplica para outros cartões.

Não esqueça de sobrescrever se o arquivo possuir algumas destas funções.

//### Funções que mostram diferentes parcelamentos

function MostraMaxParcela(PrecoProd,MaxParcelas){
  var ComSem;
  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>";
  document.write("ou <b>"+MaxParcelas+"x</b>"+ComSem+" de <b>"+FormatPrecoReais(CalculaParcelaJurosCompostos(PrecoProd,MaxParcelas))+"</b>");
}

function MostraDesconto(PrecoProd){
 if(PrecoProd==0)return;
 document.write("<br>Pague com depósito bancário, boleto bancário ou ItaúShopline e ganhe <font color=#990000><b>10%</font> de desconto</b>.<hr size=1 align=center width=90% style='color:#B4B4B4;'> Valor com desconto <span class=EstPrecoProd>"+FormatPrecoReais(PrecoProd*0.90)+"</span><br><br>");
}

function MostraParcelasMASTERCARD(PrecoProd,MaxParcelas){
  var ComSemMASTERCARD,EstiloLinhaMASTERCARD;
  if(PrecoProd==0||MaxParcelas==1||Juros.length==0)return;
  if(MaxParcelas==0||MaxParcelas>Juros.length)MaxParcelas=Juros.length;
  document.write("<br><table align=center cellpadding=3 cellspacing=1 width=270 class=FundoCorParc><tr class=FundoCorParc><td colspan=3 height=22 class=TitTabParc align=center><b>Opções de parcelamento</td></tr><tr class=FundoCorNumVal><td class=TitTabParc>Número de<br>parcelas</td><td align=right class=TitTabParc>Valor de<br>cada parcela</td><td align=right class=TitTabParc>Valor total<br>parcelado</td></tr>");
  for(var i=0;i<MaxParcelas;i++){
    if(Juros[i]>0)ComSemMASTERCARD="com juros"; else ComSemMASTERCARD="<font color=#990000>sem juros</font>";
    if((i%2)==0)EstiloLinhaMASTERCARD='EstParcPar'; else EstiloLinhaMASTERCARD='EstParcImpar';
    document.write("<tr class="+EstiloLinhaMASTERCARD+"><td class="+EstiloLinhaMASTERCARD+">"+(i+1)+"x "+ComSemMASTERCARD+"</td><td class="+EstiloLinhaMASTERCARD+" align=right>"+FormatPrecoReais(CalculaParcelaJurosCompostos(PrecoProd,i+1))+"</td><td class="+EstiloLinhaMASTERCARD+" align=right>"+FormatPrecoReais(CalculaParcelaJurosCompostos(PrecoProd,i+1)*(i+1))+"</td></tr>");
  }
  document.write("</table><br>");
}

function CalculaParcelaJurosCompostosVISA(Preco,Parcelas){
  if(JurosVISA[Parcelas-1]==0)return Preco/Parcelas;
  else return Math.round(Preco*(Math.pow(1+JurosVISA[Parcelas-1]/100,Parcelas)*JurosVISA[Parcelas-1]/100)/(Math.pow(1+JurosVISA[Parcelas-1]/100,Parcelas)-1)*100)/100;
}

function MostraParcelasVISA(PrecoProdVISA,MaxParcelasVISA){
  var ComSemVISA,EstiloLinhaVISA;
  if(PrecoProdVISA==0||MaxParcelasVISA==1||JurosVISA.length==0)return;
  if(MaxParcelasVISA==0||MaxParcelasVISA>JurosVISA.length)MaxParcelasVISA=JurosVISA.length;
  document.write("<br><table align=center cellpadding=3 cellspacing=1 width=270 class=FundoCorParc><tr class=FundoCorParc><td colspan=3 height=22 class=TitTabParc align=center><b>Opções de parcelamento</td></tr><tr class=FundoCorNumVal><td class=TitTabParc>Número de<br>parcelas</td><td align=right class=TitTabParc>Valor de<br>cada parcela</td><td align=right class=TitTabParc>Valor total<br>parcelado</td></tr>");
  for(var i=0;i<MaxParcelasVISA;i++){
    if(JurosVISA[i]>0)ComSemVISA="com juros"; else ComSemVISA="<font color=#990000>sem juros</font>";
    if((i%2)==0)EstiloLinhaVISA='EstParcPar'; else EstiloLinhaVISA='EstParcImpar';
    document.write("<tr class="+EstiloLinhaVISA+"><td class="+EstiloLinhaVISA+">"+(i+1)+"x "+ComSemVISA+"</td><td class="+EstiloLinhaVISA+" align=right>"+FormatPrecoReais(CalculaParcelaJurosCompostosVISA(PrecoProdVISA,i+1))+"</td><td class="+EstiloLinhaVISA+" align=right>"+FormatPrecoReais(CalculaParcelaJurosCompostosVISA(PrecoProdVISA,i+1)*(i+1))+"</td></tr>");
  }
  document.write("</table><br>");
}

function CalculaParcelaJurosCompostosAMEX(Preco,Parcelas){
  if(JurosAMEX[Parcelas-1]==0)return Preco/Parcelas;
  else return Math.round(Preco*(Math.pow(1+JurosAMEX[Parcelas-1]/100,Parcelas)*JurosAMEX[Parcelas-1]/100)/(Math.pow(1+JurosAMEX[Parcelas-1]/100,Parcelas)-1)*100)/100;
}

function MostraParcelasAMEX(PrecoProdAMEX,MaxParcelasAMEX){
  var ComSemAMEX,EstiloLinhaAMEX;
  if(PrecoProdAMEX==0||MaxParcelasAMEX==1||JurosAMEX.length==0)return;
  if(MaxParcelasAMEX==0||MaxParcelasAMEX>JurosAMEX.length)MaxParcelasAMEX=JurosAMEX.length;
  document.write("<br><table align=center cellpadding=3 cellspacing=1 width=270 class=FundoCorParc><tr class=FundoCorParc><td colspan=3 height=22 class=TitTabParc align=center><b>Opções de parcelamento</td></tr><tr class=FundoCorNumVal><td class=TitTabParc>Número de<br>parcelas</td><td align=right class=TitTabParc>Valor de<br>cada parcela</td><td align=right class=TitTabParc>Valor total<br>parcelado</td></tr>");
  for(var i=0;i<MaxParcelasAMEX;i++){
    if(JurosAMEX[i]>0)ComSemAMEX="com juros"; else ComSemAMEX="<font color=#990000>sem juros</font>";
    if((i%2)==0)EstiloLinhaAMEX='EstParcPar'; else EstiloLinhaAMEX='EstParcImpar';
    document.write("<tr class="+EstiloLinhaAMEX+"><td class="+EstiloLinhaAMEX+">"+(i+1)+"x "+ComSemAMEX+"</td><td class="+EstiloLinhaAMEX+" align=right>"+FormatPrecoReais(CalculaParcelaJurosCompostosAMEX(PrecoProdAMEX,i+1))+"</td><td class="+EstiloLinhaAMEX+" align=right>"+FormatPrecoReais(CalculaParcelaJurosCompostosAMEX(PrecoProdAMEX,i+1)*(i+1))+"</td></tr>");
  }
  document.write("</table><br>");
}

6º Passo:

No exemplo da loja Flores WEB (www.rumo.com.br/sistema/ListaProdutos.asp?IDLoja=278&IDProduto=10195) foi inserido as chamadas para mostrar as diferentes tabelas no arquivo EstiloProduto.htm.

Apague todos os scripts relacionados a tabela de parcelamento do arquivo EstiloProduto.htm

Neste arquivo as chamadas para o parcelamento que ficaram dentro da tag <ProdDet> estão em VERMELHO e devem ser colocadas no lugar onde se encontra o seguinte código:
<script>MostraParcelas(<PrecoNum>,<MaxParcelasProdNum>);</script>

<ProdDet>
<table width=100% name=TabProduto<IDProduto> cellpadding=0 cellspacing=0>
  <tr><td align=center colspan=3><br><hr class=EstLinhaProd><br></td></tr>
  <tr>
    <td align=center valign=top width=<ProdLargura>><ImagemProd></td>
    <td width=7 height=<ProdAltura>><img src=images/shim.gif width=7 height=<ProdAltura>></td>
    <td valign=top>
      <table name=TabDadosProduto<IDProduto> width=100% cellpadding=5 cellspacing=0>
        <tr>
          <td valign=top>
            <table name=TabNomeRefProd<IDProduto> width=100% cellpadding=2 cellspacing=0>
              <tr>
                <td valign=top class=EstNomeProd><NomeProd></td>
                <td width=7><img src=images/shim.gif width=7 height=1></td>
                <td valign=top align=right rowspan=2 nowrap><Lancamento></td>
              </tr>
              <tr>
                <td valign=top class=EstRefProd>Ref. <CodProd> - <LegendaCat> <NomeCat></td>
                <td></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr><td height=7><img src=images/shim.gif width=1 height=7></td></tr>
        <tr><td valign=top class=EstDescrProd><Descricao></td></tr>
        <tr>
          <td valign=top>
            <table name=TabAdicionais<IDProduto> cellpadding=0 cellspacing=0>
              <tr><td height=3><img src=images/shim.gif width=1 height=3></td></tr><FormProd>
              <tr>
                <td>
                  <table name=Tab1Adic<IDProduto> cellpadding=0 cellspacing=0>
                    <tr>
                      <td nowrap><Adicional1></td>
                      <td nowrap><Adicional2></td>
                      <td nowrap><Adicional3></td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table name=Tab2Adic<IDProduto> cellpadding=0 cellspacing=0>
                    <tr>
                      <td nowrap><Cor></td>
                      <td nowrap><AdicionalD1></td>
                      <td nowrap><AdicionalD2></td>
                      <td nowrap><AdicionalD3></td>
                      <td nowrap><Peso></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr><td align=right class=EstMaisInfo nowrap><DescrURL></td></tr>
        <tr>
          <td valign=top>
            <table name=TabPreco<IDProduto> width=100% cellpadding=3 cellspacing=0>
              <tr><td height=1 colspan=5><img src=images/shim.gif width=1 height=1></td></tr>
              <tr>
                <td width=15% nowrap><LinkAmp></td>
                <td width=7><img src=images/shim.gif width=7 height=1></td>
                <td align=center width=15% nowrap><LinkComprar></td></FormProd>
                <td width=7><img src=images/shim.gif width=7 height=1></td>
                <td nowrap class=EstPrecoProd nowrap><Preco><br><AvisoDisp><IndicaProd><br><LinkOpiniao></td>
              </tr>
            </table><br>
          </td>
        </tr>
      </table>
<center>
            <div class="TabbedPanels" id="tp1">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">À Vista</li>
                <li class="TabbedPanelsTab" tabindex="0">Mastercard</li>
                <li class="TabbedPanelsTab" tabindex="0">Visa</li>
                <li class="TabbedPanelsTab" tabindex="0">AMEX</li>
              </ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent"><script>MostraDesconto(<PrecoNum>);</script></div>
                <div class="TabbedPanelsContent"><script>MostraParcelasMASTERCARD(<PrecoNum>,<MaxParcelasProdNum>);</script></div>
                <div class="TabbedPanelsContent"><script>MostraParcelasVISA(<PrecoNum>,<MaxParcelasProdNum>);</script></div>
                <div class="TabbedPanelsContent"><script>MostraParcelasAMEX(<PrecoNum>,<MaxParcelasProdNum>);</script></div>
              </div>
            </div>
            <script language="JavaScript" type="text/javascript">var tp1 = new Spry.Widget.TabbedPanels("tp1");</script>
</center>
    </td>
  </tr>
<Sub>
  <tr>
    <td align=right valign=top><ImagemProd></td>
    </td>
    <td width=7><img src=images/shim.gif width=7 height=1></td>
    <td valign=top>
      <table name=TabDadosSubProduto<IDProduto> cellpadding=0 cellspacing=3 width=100% class=<EstiloSubProduto>>
        <tr>
          <td class=EstLinhaSubProd height=1><img src=images/shim.gif width=1 height=1></td>
        </tr>
        <tr>
          <td valign=top>
            <table name=TabRefSubProd<IDProduto> width=100% cellpadding=3 cellspacing=0>
              <tr>
                <td valign=top class=EstRefSubProd>Ref. <CodProd></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr><td valign=top class=EstDescrSubProd><Descricao></td></tr>
        <tr><td align=right class=EstMaisInfo nowrap><DescrURL></td></tr>
        <tr>
          <td valign=top>
            <table name=TabAdicionaisSub<IDProduto> cellpadding=0 cellspacing=0>
              <tr><td></td></tr>
              <tr>
                <td>
                  <table name=Tab1Adic<IDProduto> cellpadding=0 cellspacing=0><FormProd>
                    <tr>
                      <td nowrap><Adicional1></td>
                      <td nowrap><Adicional2></td>
                      <td nowrap><Adicional3></td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table name=Tab2Adic<IDProduto> cellpadding=0 cellspacing=0>
                    <tr>
                      <td nowrap><Cor></td>
                      <td nowrap><AdicionalD1></td>
                      <td nowrap><AdicionalD2></td>
                      <td nowrap><AdicionalD3></td>
                      <td nowrap><Peso></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td valign=top>
            <table name=TabPrecoSub<IDProduto> width=100% cellpadding=3 cellspacing=0>
              <tr>
                <td width=15% nowrap><LinkDet></td>
                <td width=7><img src=images/shim.gif width=7 height=1></td>
                <td align=center width=15% nowrap><LinkComprar></td></FormProd>
                <td width=7><img src=images/shim.gif width=7 height=1></td>
                <td nowrap class=EstPrecoSubProd nowrap><Preco><AvisoDisp></td>
                <td width=7><img src=images/shim.gif width=7 height=1></td>
                <td valign=top align=right nowrap><Lancamento></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</Sub>
</table>
</ProdDet>

7º Passo:

As cores desta tabela podem ser alteradas pelos estilos inseridos no começo do arquivo EstiloProduto.htm dentro da tag <ProdTop>.

<ProdTop>
<style>
.TitTabParc{font-weight:bold;font-size:8pt;font-family:tahoma,arial}
.EstParcPar{background:#f2f7e7;font-size:8pt;font-family:tahoma,verdana}
.EstParcImpar{background:#FFFFFF;font-size:8pt;font-family:tahoma,verdana}
.FundoCorNumVal{background:#aec67a}
.FundoCorParc{background:#789142}
</style>
</ProdTop>

8º Passo:

Insira as classes que estão abaixo no arquivo LojaSite.css

/* Descrição Formas de Pagamentos -  AJAX */

.TabbedPanelsTab {position: relative;top: 1px;float: left;padding: 4px 10px;margin: 0px 1px 0px 0px;font: bold 0.7em sans-serif;background-color: #f2f5dc;list-style: none;border-left: solid 1px #CCCCCC;border-bottom: solid 1px #999999;border-top: solid 1px #999999;border-right: solid 1px #999999;-moz-user-select: none;-khtml-user-select: none;cursor: pointer;}
.TabbedPanelsTabHover {background-color: #eaf2b5;}
.TabbedPanelsTabSelected {background-color: #ced69b;border-bottom: 1px solid #EEEEEE;}
.TabbedPanels {margin: 0px;padding: 0px;clear: both;width: 100%;}
.TabbedPanelsTabGroup {margin: 0px;padding: 0px;}
.TabbedPanelsTab a {color: black;text-decoration: none;}
.TabbedPanelsContentGroup {clear: both;border-left: solid 1px #CCCCCC;border-bottom: solid 1px #CCCCCC;border-top: solid 1px #999999;border-right: solid 1px #999999;background-color: #FFFFFF;}
.TabbedPanelsContent {padding: 4px;}
.TabbedPanelsContentVisible {}
.VTabbedPanels .TabbedPanelsTabGroup {float: left;width: 10em;height: 20em;background-color: #EEEEEE;position: relative;border-top: solid 1px #999999;border-right: solid 1px #999999;border-left: solid 1px #CCCCCC;border-bottom: solid 1px #CCCCCC;}
.VTabbedPanels .TabbedPanelsTab {float: none;margin: 0px;border-top: none;border-left: none;border-right: none;}
.VTabbedPanels .TabbedPanelsTabSelected {background-color: #EEEEEE;border-bottom: solid 1px #999999;}
.VTabbedPanels .TabbedPanelsContentGroup {clear: none;float: left;padding: 0px;width: 30em;height: 20em;}
.TabbedPanels {width: 300px;}
.TabbedPanelsTab {font-family: sans-serif;font-size: 12px;font-weight: bold;}

Avaliações dos clientes:

Este produto ainda não recebeu avaliações de clientes.
Clique aqui e seja o primeiro a avaliá-lo

Como podemos ajudar?

Encontre os artigos que irão ajudá-lo a melhorar sua loja virtual

FC 6133 :: Como utilizar a tabela de parcelamento igual da loja fictícia Flores Web?

As tabelas podem ser personalizadas para exibir o valor de cada parcela de acordo com a bandeira de cartão de crédito utilizada pela loja.

Seu sucesso não pode esperar,

Criar agora sua
Loja Virtual!

Ou fale com um de nossos
consultores
especializados
em e-commerce.

Visão Geral

Saiba Mais

Download

Contato

Como podemos ajudar?

Encontre os artigos que irão ajudá-lo a melhorar sua loja virtual

FC 6133 :: Como utilizar a tabela de parcelamento igual da loja fictícia Flores Web?

As tabelas podem ser personalizadas para exibir o valor de cada parcela de acordo com a bandeira de cartão de crédito utilizada pela loja.

Seu sucesso não pode esperar,

Criar agora sua Loja Virtual!

Ou fale com um de nossos consultores especializados em e-commerce.

Visão Geral

Saiba Mais

Download

Contato

Criar agora sua
Loja Virtual!

Ou fale com um de nossos
consultores
especializados
em e-commerce.