Snippets

Opções avançadas para utilização de componentes de carregamento dinâmico

O Snippet é um tipo de componente que pode ser carregado após a renderização inicial/principal da página. Um exemplo disso são as sugestões de pesquisa de acordo com o termo digitado.

Estrutura de diretórios

Os Snippets são armazenados na pasta "Snippets" localizada na raiz do projeto. Certifique-se de organizar seus arquivos de snippet corretamente dentro dessa pasta.

Para o retorno de dados, assim como uma página, é utilizado um arquivo .graphql para fazer a query dos dados necessários para o carregamento do snippet, o arquivo deverá estar dentro da pasta Queries.

Utilização do Snippet

Existem duas maneiras de renderizar um Snippet: usando o SDK JavaScript do Storefront ou através do método fetch do JavaScript.

A seguir, você encontrará instruções detalhadas e exemplos para ambos os métodos, considerando um arquivo snippet.html dentro da pasta Snippets e um respectivo query.graphql dentro da pasta Queries:

SDK Javascript

É possível utilizar o SDK Javascript da seguinte forma:

JavaScript

const variables = {
    query: "tenis"
};

const response = await client.snippet.render("snippet.html", "query.graphql", variables);

• O primeiro parâmetro refere-se ao arquivo .html do snippet.
• O segundo parâmetro refere-se ao arquivo .graphql da query a ser realizada na API.
• O terceiro parâmetro refere-se às variáveis da query a ser realizada.

A variável response representa o código HTML renderizado.

📘

Nota

A chamada de renderização é assíncrona, portanto, é necessário usar a palavra-chave await.

Fetch via Javascript

Você também pode utilizar o método fetch do Javascript para chamar a rota /snippet do site. Veja o exemplo abaixo:

JavaScript

const url = window.location.protocol + "//" + window.location.host + "/snippet";

const inputData = {
    fileName: "snippet.html",
    queryName: "query.graphql",
    variables: { 
        query: "tenis"
    }
};

fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(inputData)
})
.then((response) => response.text())
.then((data) => {
    console.log(data);
})
.catch((error) => {
    console.error('Error:', error);
});

Caminhos personalizados

É possível salvar um arquivo .html de snippet e .graphql de query em subpastas em Snippets e em Queries, respectivamente. Veja o exemplo abaixo::

• Arquivo snippet salvo em Snippets/Product/product_snippet.html
• Arquivo de query salvo em Queries/SnippetQueries/product_snippet.graphql.

Para renderizar esse Snippet, se utiliza o seguinte formato:

JavaScript

const response = await client.snippet.render("Product/product_snippet.html", "SnippetQueries/product_snippet.graphql", variables);

Vários templates com apenas uma query

Abaixo temos um exemplo, onde é possível renderizar vários templates com o resultado de apenas uma query.

Request URL

POST pra {url_loja}/snippet/multi -> https://sualoja.com.br/snippet/multi

Body

{
    "fileNames": [
        "autocomplete_snippet.html",
        "wholesale_price_snippet.html"
    ],
    "queryName": "SnippetQueries/multi_snippet.graphql",
    "variables": {
        "query": "tenis",
        "prodVar": 256704,
        "quantity": 1
    }
}

Retorno

[
    {
        "name": "autocomplete_snippet.html",
        "success": true,
        "error": null,
        "result": "<div></div>"
    },
    {
        "name": "wholesale_price_snippet.html",
        "success": true,
        "error": null,
        "result": "<div></div>"
    }
]