Arquivos estáticos

Utilização do FbitsStatic para acesso aos recursos da loja

Lojas do modelo antigo da plataforma Wake utilizam o admin para cadastrar recursos estáticos de templates do site (css, javascripts, e imagens), acessando endpoints da API de Recursos para acessá-los na renderização do template. Com o desenvolvimento do Storefront foi elaborado um sistema mais otimizado para lidar com a demanda de assets. O Fbitsstatic veio pra centralizar os arquivos estáticos de template, possuindo otimizações dos recursos de armazenamento e transferência, como caching interno e CDN. Ele se tornará o novo padrão em breve, com o Recursos sendo descontinuado.

🚧

É recomendada, portanto, a substituição de toda chamada da API de Recursos por chamadas ao Fbitsstatic.

Esta é uma recomendação apenas para lojas no processo de migração, lojas novas já iniciarão sem possuir a url de Recursos ativa. Projetos em migração podem continuar funcionando temporariamente com chamadas para o Recursos, mas não haverá garantia do tempo de continuidade destes endpoints.

Utilização

Para realizar chamadas do Fbitsstatic temos disponíveis dois endpoints, bundle (pacotes minificados de css ou js) e img (imagens estáticas do tema). Os endpoints são estruturados da seguinte forma:

Bundle:

{nomeModificado}.fbitsstatic.net/sf/bundle?type=css&paths=css1,pasta/css2&theme=main&v=202301171027

Imagem:

{nomeModificado}.fbisstatic.net/sf/img/imagem.png?theme=colecao-outono&v=202301171027

Parâmetros

• type: 'css' ou 'js'
• paths: caminhos dos arquivos, divididos por vírgula.
  O caminho é considerado a partir da pasta raiz do tipo do recurso, se um arquivo está na pasta
  (raiz do projeto)/Assets/JS/hotsites/black-friday/alerta.js
  a url de chamada ao arquivo será:
  (host do site)/bundle?type=js&paths=hotsites/black-friday/alerta
• theme: de qual tema retornará o arquivo, a informação pode ser acessada através do campo store.theme (o objeto store é injetado nas variáveis da renderização automaticamente)
• v: de qual commit (versão) estamos buscando o arquivo, podemos obter essa informação através do campo store.last_modified, podemos usar este campo para acessar a versão mais recente do site (último commit na branch ativa).
• h(exclusivo imagens): qual a altura da imagem retornada
• w(exclusivo imagens): qual a largura da imagem retornada

Caminho absoluto no Storefront API

Com o Storefront API você pode obter a url montada de diversos recursos fazendo chamadas nas seguintes queries, essas queries estão trazendo o endereço apontando para o Fbitsstatic:

Recurso	Query	Caminho
Selo	product	product.promotions.fullStampUrl
Parceiro	partner	partner.fullUrlLogo
Menu	menuGroups	menu.fullImageUrl
Fabricante	brands	brand.fullUrlLogo

Exemplo no template padrão

Bundle

No template padrão existe um componente de exemplo que monta a url para os assets, o arquivo pode ser encontrado em (raiz do projeto)/Components/asset.html

Imagem

Para imagens, existe também um exemplo de componente no template padrão cujo arquivo pode ser encontrado em (raiz do projeto)/Components/image_asset.html

Processo de migração dos arquivos do Recursos para o Fbitsstatic

Com a migração de um projeto para o Storefront, não teremos mais a url de Recursos da loja, assim, muitos dos recursos que foram cadastrados no passado ainda estarão hospedados no Recursos no momento em que a loja desejar migrar para o Storefront.

Migração de entidades de admin:

Serão migrados automaticamente os arquivos referentes a entidades comuns dentro do funcionamento da plataforma do Storefront, como por exemplo:

• MediaCenter
• Etiquetas
• Selos
• Parceiro
• Embalagem
• Fabricante
• Menu

O processo de migração é interna para tais recursos. Quando a loja inicia o processo de transição para o Storefront, é realizada uma replicação de todos os arquivos acima, sendo direcionados ao Fbitsstatic.

• Para novas chamadas feitas a este arquivo na url de Recursos, o que ocorre é um redirecionamento para o Fbitsstatic. Esta é uma medida que funciona paliativamente até a loja concluir a migração.

• Em novos uploads de arquivos, eles já são direcionados para o servidor fbitstatic.

Arquivos que não serão migrados

Não serão migrados os demais arquivos não relacionadas a entidades enumeradas acima, acessíveis normalmente apenas pelo gerenciador de arquivos do Style Editor. Como por exemplo as imagens presentes dentro da pasta i/.

Este processo de migração será manual caso deseje continuar utilizando os arquivos. A transição pode ser feita trazendo-os para o projeto git do Storefront, dentro de sua pasta respectiva dentro de Assets (JS, Img e CSS).