Tag de promoção no produto

VTEX in your native language 🌎 Português
1

Olá boa tarde, eu gostaria de deixar nossas promoções em destaque nos nossos produtos. A empresa que criou o Layout, deixou essa opção desativada, vi o material da VTEX que ensina a colar o código na pagina correta, no entanto fiquei em duvida onde exatamente colar o código, se é no topo ou em um lugar especifico. Gostaria da ajuda de vocês para por o código de forma correta e não fazer besteira no layout!
Desde já eu agradeço!

2v
2v1080×1080 107 KB

2

Só para confirmar, vc quer por a flag na tela do produto , na vitrine ou nos 2?

Produto

<vtex.cmc:discountHightLight/>

Pode colocar em qualquer lugar que vc queira que apareça no site. Depois estilizar com o css.
https://help.vtex.com/pt/tutorial/lista-de-controles-para-templates--tutorials_563

Vitrine:

$product.DiscountHightLight

Pode colocar em qualquer lugar que vc queira que apareça na prateleira. Depois estilizar com o css.
https://help.vtex.com/pt/tutorial/controles-do-template-de-prateleira--tutorials_550
https://help.vtex.com/pt/tutorial/o-que-sao-prateleiras--28D8d6GFfuAsuAoeWC8eq0
https://help.vtex.com/pt/tutorial/como-criar-um-template-de-prateleira--frequentlyAskedQuestions_1852

Prateleira é um produto da vitrine.

1 Like
3

Grato por me responder Fabio!
Mas a dúvida é mais simples do que imagina, eu colo esse codigo vtex.cmc:discountHightLight/ no topo do templante product? Entende, a dúvida é só, onde devo inserir o codigo, pois tô com medo de colocar em um lugar que não deveria e dar algum bug nas paginas dos produtos.

Esse é uma parte do codigo do templante:

Modelo Vtex 
<div class="page">

    <!--  SubTemplate: Header -->
    <vtex:template id="Header" />
    <!-- /SubTemplate: Header -->
                
    <div id="product-extra-top"></div>  

    <section id="product-content" class="container">

        <div id="box-bread-brumb" class="hidden-xs">
            <vtex.cmc:breadCrumb />
        </div>
                
    	<div id="product-extra-middle"></div>  

    	<div class="row product-details">

    		<div class="product-name-mobile col-xs-12 visible-xs">
    			<div class="product-name">
        			<div id="brand"><vtex.cmc:brandName/></div>
        			<vtex.cmc:productName />
    			</div>
    			<div class="row">
    				<div class="codigo-produto col-xs-12">
    					<span>Cód:</span> <vtex.cmc:skuReference/>
    				</div>
    				<div class="col-xs-12">
4

Realmente é fácil, mas dificil kkkk.
Na verdade, você coloca esse controle da VTEX onde você desejar no código. Contanto que fique entre os <body></body>.
Onde você incluir o controle, será onde ele ficará na página.
Junto da inclusão, precisará estiliza-lo (alterações no seu arquivo css).
ex: se quiser, que a tag de promoção apareça abaixo do sku reference, vc terá que colocar nesse trecho:

...
<div class="codigo-produto col-xs-12">
   <span>Cód:</span> <vtex.cmc:skuReference/>
</div>
<div class="flag-promocoes col-xs-12">
     <vtex.cmc:discountHightLight />
</div>
<div class="col-xs-12">
...