Tema - Yampi Developer Portal

Módulo Vuex inicializado a partir de window.themeConfig no carregamento da página. Disponibiliza os parâmetros do tema para todos os componentes via getter themeStyle, usado extensivamente pelos mixins e componentes da vitrine.

Getters

Getter	Tipo	Descrição
`themeStyle`	`Object`	Parâmetros visuais do tema (`window.themeConfig.theme.params`). Equivale a `pageConfig.data.theme.params` no Twig.

Principais propriedades de `themeStyle`

Propriedade	Tipo	Descrição
`color_general_primary`	`String`	Cor primária do tema.
`color_general_secundary`	`String`	Cor secundária do tema.
`color_general_background`	`String`	Cor de fundo geral da loja.
`fonts_texts_family`	`String`	Família de fonte para textos.
`fonts_titles_family`	`String`	Família de fonte para títulos.
`buttons_general_format`	`String`	Formato de borda dos botões (`'square'`, `'rounded'`, `'pill'`).
`highlight_type_payment`	`String`	Método de pagamento destacado: `'promotional'`, `'pix'`, `'billet'`.
`show_add_to_cart_button`	`Boolean`	Exibe botão de adicionar ao carrinho na vitrine.
`grids_product_name_size`	`String`	Tamanho da fonte do nome do produto na vitrine.
`grids_product_price_size`	`String`	Tamanho da fonte do preço do produto na vitrine.
`show_review_average`	`Boolean`	Exibe média de avaliações na vitrine.
`show_max_installment`	`Boolean`	Exibe parcelamento máximo na vitrine.

Uso

import { mapGetters } from 'vuex';

export default {
    computed: {
        ...mapGetters('theme', ['themeStyle']),

        primaryColor() {
            return this.themeStyle?.color_general_primary;
        },

        isRoundedButtons() {
            return this.themeStyle?.buttons_general_format === 'rounded';
        },
    },
};

Use o mixin productCardTheme para acessar as configurações de vitrine já transformadas em computed properties prontas para uso.

⌘I