Como funciona a edição de layout manualmente via HTML

Guia de recursos do layout Sass (catalogo)

Recursos Geral (SEO, token de visitas e outros)

SEO basico e avancado

• SEO geral de pagina:
  
  {{searchMetaDescription}}, {{searchCanonicalPath}}, {{siteNameJson}}.
  
  
• SEO de organizacao/loja:
  
  {{seoStoreJsonLd}} e {{seoWebsiteJsonLd}}.
  
  
• SEO de produto:
  
  {{productSchemaJsonLdRaw}} e {{productSchemaHasJsonLd}}.

Padrão como as tags de SEO podem ser usadas:

<title>{{searchQueryLabelTitle}} | {{mainData.siteName}}</title>

<meta name="description" content="{{searchMetaDescription}}" />

<link rel="canonical" href="{{searchCanonicalPath}}" />

Formatação padrão para schema de Store em JSON

{{#if seoStoreJsonLd}}

<script type="application/ld+json">{{seoStoreJsonLd}}</script>

{{/if}}

Todos os recursos de mainData:

Token de visitas, dados globais e busca

• Token para telemetria/visitaçãoo:
  
  {{visitsToken}}
  
  
• Dados globais de loja:
  
  {{mainData.*}}
  
  
• Termos mais buscados:
  
  {{searchTermsFirst}}, {{searchTermsMore}}, {{searchTermsHasMore}}.

Exemplo de uso do token e exibição de todos os termos mais pesquisados, caso haja:

<input type="hidden" id="visitsToken" value="{{visitsToken}}" />

{{#if searchTermsFirst}}

{{#each searchTermsFirst}}

<a href="{{href}}">{{searchUserQuery}}</a>

{{/each}}

{{/if}}

Todos os recursos de buscas

Blocos e comandos gerais do template

• Placeholders: {{chave}} e {{objeto.campo}}.
• Condicionais: {{#if ...}}, {{else}}, {{#unless ...}}.
• Repeticao: {{#each ...}} com {{item.*}}, {{itemIndex}}, {{itemKey}}.
• Inclusao de bloco: <iBlock bw="..." />.

Dados formatados como JSON

{{listOrganizationJsonLd}} / {{seoStoreJsonLd}} / {{listStoreJsonLd}}

São uma string JSON (não escapar de novo com {{ — nos templates usa-se {{{...}}}).

Organization (listagem/busca) — formato gerado por sassEncodeListOrganizationJsonLdString:

{"@type":"Organization","@context":"http://schema.org","name":"TechShop Comércio Ltda","url":"https://www.techshop.com.br","logo":{"@type":"ImageObject","url":"https://cdn.exemplo.com/logo.png","width":"140","height":"70"}}

Store (seoStoreJsonLd / listStoreJsonLd) — só é não vazio se seoOrganizationHoursWeek estiver preenchido (sassEncodeStoreJsonLdString). Exemplo típico:

{"@context":"https://schema.org","@type":"Store","address":{"@type":"PostalAddress","addressLocality":"São Paulo","addressRegion":"BR-SP","postalCode":"01310-100","streetAddress":"Rua X, 100"},"name":"TechShop Comércio Ltda","openingHours":["Mo-Fr 09:00-18:00","Sa 09:00-13:00"],"telephone":"11999999999","url":"https://loja.exemplo.com","image":"https://cdn.exemplo.com/logo.png"}

Se não houver horário de semana, a string fica vazia e o {{#if seoStoreJsonLd}} não imprime o <script>.

Home: “Organization” inline (não é uma variável seoWebsiteJsonLd)

O template emite JSON literal com valores de mainData, por exemplo:

<script data-schema="Organization" type="application/ld+json"> { "@type":"Organization", ... "name":"TechShop Comércio Ltda", ... }</script>

Todos os recursos JSON, incluindo produtos

Listas de Produtos

Dados principais de listagem

• {{products}}, {{listHasProducts}}, {{productsIdsHash}}.
• Filtros: {{listPriceRangeLinks}}, {{listVariationFilterGroups}}, {{listSimpleTextFilterGroups}}, {{listBrandFilters}}.
• Destaques: {{listCategoryBannerSrc}}, {{listShowCategoryDiscountAdvertise}}, {{listShowGlobalDiscountAdvertise}}.

Chamada de produtos dinamicos (helper)

• Comando: {{sassListCustomProducts[...]}}.
• É a função oficial e de melhor performance para listar produtos
• Parametros aceitos: as, category, min, max, stock, brand, excludeProduct, filters, medias, description, orderBy, addAdditionalCatsIds, showBrand, showChildren, getShippingInfo, includeVariations.
• Aliases: categoryId/cat, offset/start, limit/take, order/sort/sortBy.

{{sassListCustomProducts[ as=products, category={{category.categoryId}}, max=12, orderBy="ProductTitle ASC", includeVariations=true ]}}

{{#if products}}

{{#each products}}

<article class="card" data-product-id="{{item.id}}"> <img src="{{item.img350}}" alt="{{item.title}}" />

<h2>{{item.title}}</h2>

<p class="js-product-price"></p> </article>

{{/each}}

{{/if}}

Todos os parâmetros de sassListCustomProducts

{{sassListCustomProducts[as=products, category=0, min=0, max=30, stock=0, brand=0, excludeProduct=0, filters="", medias="", description=false, orderBy="", addAdditionalCatsIds=false, showBrand=false, showChildren=false, getShippingInfo=false, includeVariations=false]}}

Todos os parâmetros de sassListCustomProducts em formato de tabela com exemplos

Parâmetros alternativos também reconhecidos e compatíveis

• min: offset, start
• max: limit, take
• stock: productStock
• brand: brandId
• excludeProduct: exclude_product, excludeId, exclude_id
• filters: filter, productFilters, product_filters
• medias: media, productMedias, product_medias
• description: withDescription, with_description
• orderBy: order, sort, sortBy, sort_by
• addAdditionalCatsIds: add_additional_cats_ids, withAdditionalCatsIds, with_additional_cats_ids
• showBrand: show_brand, withBrand, with_brand
• showChildren: show_children, includeChildren, include_children
• getShippingInfo: get_shipping_info, shippingInfo, shipping_info, withShipping, with_shipping
• includeVariations: include_variations, withVariations, with_variations

Exemplos de usos do sassListCustomProducts

1) Listagem excluindo alguns produtos específicos

{{sassListCustomProducts[as=products, category={{category.categoryId}}, min=0, max=12, stock=0, brand=0, excludeProduct={{product.productId}}, filters="", medias="", description=false, orderBy="ProductTitle ASC", addAdditionalCatsIds=false, showBrand=false, showChildren=false, getShippingInfo=false, includeVariations=true]}}

2) Utilizando um filtro de cor com id 12, no caso, pegando só os valores iguais a Azul

{{sassListCustomProducts[as=products, category={{category.categoryId}}, min=0, max=20, stock=0, brand=0, excludeProduct=0, filters="filtro_12_Cor=Azul", medias="", description=true, orderBy="ProductTitle ASC", addAdditionalCatsIds=false, showBrand=true, showChildren=false, getShippingInfo=false, includeVariations=false]}}

3) Utilizando medias (espera-se imagem_{productfilterId}_{position}, anexando dados armazenados em ProductMedias. As medias recebe uma lista de IDs de filtros de mídia, separados por vírgula, e faz o template engine anexar ao produto as mídias cadastradas em ProductMedias para esses filtros. As mídias retornam com chaves no formato imagem_{filtro}_{posição}. Ele apenas acrescenta campos extras no objeto de retorno

{{sassListCustomProducts[as=products, category=0, max=10, medias="12,15"]}} <!-- vai adicionar medias do productFilterId = 12 e productFilterId - 15 -->

Exemplos de filtros em layout

{{#if listPriceRangeLinks}}

{{#each listPriceRangeLinks}}

<a href="/q.php?catId={{category.categoryId}}&priceRange={{min}}-{{max}}"> De {{displayMin}} a {{displayMax}} </a>

{{/each}}

{{/if}}

{{#each listVariationFilterGroups}}

<h4>{{variationName}}</h4>

{{#each items}}

<a href="/q.php?variation_{{variationoptSearchName}}">{{variationoptName}}</a>

 {{/each}}

{{/each}}

Todos os recursos em lista por filtros

Para produtos especificos

Dados principais do detalhe de produto

• {{product.*}} para titulo, descricao, imagens, preco base e links.
• {{productVariations}}, {{productVariationImagesB64}} e {{productShowVariationBlock}}.
• {{productGalleryThumbItems}} e {{productShowGalleryThumbs}}.
• {{productStockScriptSimple}}, {{productStockScriptVariation}} para fluxo de estoque.
• {{productShippingScriptAttrs}} e campos de frete para simulacao.

SEO e rich data do produto

• Campos de head de produto (titulo, canonical, metas) ja chegam prontos para uso em placeholders.
• JSON-LD do produto: {{productSchemaJsonLdRaw}}.

<h1>{{product.productTitle}}</h1>

{{#if productSchemaHasJsonLd}}

<script type="application/ld+json">{{productSchemaJsonLdRaw}}</script>

{{/if}}

Preco no frontend com fallback B64 - JSON

var products = safeJsonParseB64('{{productsJsonB64}}', safeJsonParse('{{productsJson}}', []));

var priceLabelData = safeJsonParseB64('{{priceLabelDataJsonB64}}', safeJsonParse('{{priceLabelDataJson}}', {}));

var paymentDiscounts = safeJsonParseB64('{{paymentDiscountsJsonB64}}', safeJsonParse('{{paymentDiscountsJson}}', {}));

var categoryDiscounts = safeJsonParseB64('{{categoryDiscountsJsonB64}}', safeJsonParse('{{categoryDiscountsJson}}', {}));

var productsDiscounts = safeJsonParseB64('{{productsDiscountsJsonB64}}', safeJsonParse('{{productsDiscountsJson}}', {}));

✚ Campos: Coletando conteúdos específicos de filtros

Além das funções para um único filtro como {{#if productHasRichDescription}} para descrição rica é possível invocar o filtro diretamente pelo id para uso no layout, conforme:

Exemplo simples onde se sabe que o filtro retorna só um conteúdo como texto simples:

<div data-filter-1430='{{productFiltersById.1430}}'></div>

Exemplos mais avançados para cada tipo de filtro e seu conteúdo:

1) Filtro simples

Retorno esperado em filtersById['1430']: string JSON com:

• filterKey
• filterValue
• filterSearchKey
• filterSearchValue

<script> const rawSimple = filtersById['1430']; // ex: '{"filterKey":"Cor","filterValue":"Azul",...}' let simple = null; try { simple = JSON.parse(rawSimple); } catch(e) {} if (simple) { console.log(simple.filterKey, simple.filterValue, simple.filterSearchKey, simple.filterSearchValue); }</script>

2) Filtro rich text

Retorno esperado em filtersById['1431']: string HTML (ou '')

<div id="richTextFilterBox"></div><script> const richHtml = filtersById['1431'] || ''; document.getElementById('richTextFilterBox').innerHTML = richHtml;</script>

3) Filtro de mídias 

Retorno esperado em filtersById['1432']: array de strings JSON, cada item com:

• productmediasUrl
• productmediasType (0 imagem, 1 vídeo)

<script> const mediaRows = Array.isArray(filtersById['1432']) ? filtersById['1432'] : []; const mediaList = mediaRows .map((row) => { try { return JSON.parse(row); } catch(e) { return null; } }) .filter(Boolean); mediaList.forEach((m) => { console.log(m.productmediasUrl, m.productmediasType); });</script>

4) Filtro HTML (tipo 3)

Retorno esperado em filtersById['1433']: string HTML (ou '')

<div id="htmlFilterBox"></div><script> const htmlFilter = filtersById['1433'] || ''; document.getElementById('htmlFilterBox').innerHTML = htmlFilter;</script>

Todos os recursos da página do produto

Recursos gerais

Dados base do produto

Imagem principal

Preço e condições comerciais

Variações

Carrinho, estoque e frete

Descrição e conteúdo enriquecido

Avaliações e comentários

Relacionados e blocos auxiliares da página

Dados globais usados na visualização do produto

Exemplos de aplicação em código

1) Exibição de produto simples (título, descrição, imagem principal, imagens adicionais e preço)

<section class="sectionProductDetail">

  <div class="container productContainer">

    <div class="row productDetails">

      <div class="col-12 col-lg-7 productItemImg">

        {{#if productShowGalleryThumbs}}

        <div class="boxAdditionalMediaThumbs">

          {{#each productGalleryThumbItems}}

            {{#if item.isImage}}

            <a data-fancybox="gallery" data-src="{{item.largeSrc}}">

              <img width="55" height="75" src="{{item.thumbSrc}}" alt="{{item.thumbAlt}}">

            </a>

            {{/if}}

          {{/each}}

        </div>

        {{/if}}

        <div class="boxMainMedia">

          <a data-fancybox="gallery" data-src="{{productMainImgSrc700Escaped}}">

            <img src="{{productMainImgSrc700Escaped}}" alt="{{productMainTitleEscaped}}">

          </a>

        </div>

      </div>

      <div class="col-12 col-lg-5 productInfo">

        <h1 class="productItemTitle">{{product.productTitle}}</h1>

        <p class="productPrice">

          {{#if productPriceIsConsultation}}

            Sob consulta

          {{else}}

            {{productCurrentPriceFormatted}}

          {{/if}}

        </p>

        {{#if productHasRichDescription}}

          <div class="productItemDescription">{{productRichDescriptionRaw}}</div>

        {{else}}

          <p class="productItemDescription">{{productDescriptionPlainEscaped}}</p>

        {{/if}}

      </div>

    </div>

  </div>

</section>

2) Produto com título, descrição e variações

<section class="sectionProductDetail">

<div class="container productContainer">

<h1 class="productItemTitle">{{product.productTitle}}</h1>

{{#if productHasRichDescription}}

<div class="productItemDescription">{{productRichDescriptionRaw}}</div>

{{else}}

<p class="productItemDescription">{{productDescriptionPlainEscaped}}</p>

{{/if}}

{{#if productShowVariationBlock}}

<div class="boxVariations">

{{#each productVariations}}

<div class="variationContent" id="variationContent_{{item.variationId}}">

<p class="variationContentTitle">

{{item.variationName}}

<span class="variationContentTitleHelpMessage">{{item.helpMessage}}</span>

</p>

<div class="variationContentBoxOptions">

{{#each item.variationOptions}}

<div class="variationOptionContent" optId="{{item.optionId}}">

<input type="{{item.inputType}}" name="option_{{item.variationId}}" id="option_{{item.optionId}}_{{item.optionParentId}}" value="{{item.optionId}}" class="optionComponent" />

<label for="option_{{item.optionId}}_{{item.optionParentId}}" class="labelForOption">

{{#if item.optionHasImage}}

<img src="{{item.optionImageSrc}}" alt="{{item.optionImageAltTitle}}">

{{/if}}

<span>{{item.optionNameEsc}}</span>

{{#if item.optionShowPrice}}

<small>{{item.optionPricePlusLabel}}</small>

{{/if}}

</label>

</div>

{{/each}}

</div>

</div>

{{/each}}

</div><section class="sectionProductDetail">

<div class="container productContainer">

<h1 class="productItemTitle">{{product.productTitle}}</h1>

{{#if productHasRichDescription}}

<div class="productItemDescription">{{productRichDescriptionRaw}}</div>

{{else}}

<p class="productItemDescription">{{productDescriptionPlainEscaped}}</p>

{{/if}}

{{#if productShowVariationBlock}}

<div class="boxVariations">

{{#each productVariations}}

<div class="variationContent" id="variationContent_{{item.variationId}}">

<p class="variationContentTitle">

{{item.variationName}}

<span class="variationContentTitleHelpMessage">{{item.helpMessage}}</span>

</p>

<div class="variationContentBoxOptions">

{{#each item.variationOptions}}

<div class="variationOptionContent" optId="{{item.optionId}}">

<input type="{{item.inputType}}" name="option_{{item.variationId}}" id="option_{{item.optionId}}_{{item.optionParentId}}" value="{{item.optionId}}" class="optionComponent" />

<label for="option_{{item.optionId}}_{{item.optionParentId}}" class="labelForOption">

{{#if item.optionHasImage}}

<img src="{{item.optionImageSrc}}" alt="{{item.optionImageAltTitle}}">

{{/if}}

<span>{{item.optionNameEsc}}</span>

{{#if item.optionShowPrice}}

<small>{{item.optionPricePlusLabel}}</small>

{{/if}}

</label>

</div>

{{/each}}

</div>

</div>

{{/each}}

</div>

 {{/if}}

</div>

</section>

3) Listas de produtos relacionados

<section class="relatedProducts">

 <div class="container">

  <h3>Produtos <strong>relacionados</strong></h3>

 <div class="row productsList" id="relatedProductsContainer">

 {{#if listHasProducts}}

  {{#each products}}

   <div class="col-6 col-lg-3 productItem" id="{{item.id}}">

   <a href="https://{{mainData.siteDomain}}{{mainData.configPath}}/item/{{item.url}}">

   <div class="productImg">

   <picture>

    <source media="(min-width:300px) and (max-width:499px)" srcset="{{item.img175}}">

    <source media="(min-width:500px) and (max-width:699px)" srcset="{{item.img250}}">

    <source media="(min-width:700px)" srcset="{{item.img350}}">

    <img src="{{item.img350}}" alt="Imagem de {{item.title}}" loading="lazy">

   </picture>

  </div>

  <div class="productDescription">

   <h4 class="productTitle">{{item.title}}</h4>

   <p class="productPrice js-product-price"></p>

  </div>

 </a>

</div>

{{/each}}

{{else}}

<p>Nenhum produto relacionado encontrado.</p>

{{/if}}

</div>

</div>

</section>

Outros casos (Menu e buscas)

Menu de categorias

• {{menuCategories}} e {{menuHasCategories}}.
• Campos por item: {{categoryId}}, {{categoryParentId}}, {{categoryName}}, {{href}}, {{qtd}}.

{{#if menuHasCategories}}

<ul class="menuList">

{{#each menuCategories}}

<li id="item_{{categoryId}}" parent="{{categoryParentId}}">

<a href="{{href}}">{{categoryName}} <span>{{qtd}}</span></a>

</li>

{{/each}}

</ul>

{{/if}}

Boas praticas finais

• Se um placeholder nao existir, ele vira vazio; valide nomes de chave e caminhos.
• Em loops, prefira {{item.campo}} para leitura mais clara do layout.
• Quando usar scripts de preco/filtro, mantenha *JsonB64 com fallback *Json.
• Teste sempre com cenarios com e sem produto para validar {{#if}} e {{#unless}}.