Skip to main content
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

GetterTipoDescrição
themeStyleObjectParâmetros visuais do tema (window.themeConfig.theme.params). Equivale a pageConfig.data.theme.params no Twig.

​
Principais propriedades de themeStyle

PropriedadeTipoDescrição
color_general_primaryStringCor primária do tema.
color_general_secundaryStringCor secundária do tema.
color_general_backgroundStringCor de fundo geral da loja.
fonts_texts_familyStringFamília de fonte para textos.
fonts_titles_familyStringFamília de fonte para títulos.
buttons_general_formatStringFormato de borda dos botões ('square', 'rounded', 'pill').
highlight_type_paymentStringMétodo de pagamento destacado: 'promotional', 'pix', 'billet'.
show_add_to_cart_buttonBooleanExibe botão de adicionar ao carrinho na vitrine.
grids_product_name_sizeStringTamanho da fonte do nome do produto na vitrine.
grids_product_price_sizeStringTamanho da fonte do preço do produto na vitrine.
show_review_averageBooleanExibe média de avaliações na vitrine.
show_max_installmentBooleanExibe 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.