Editor de Código - Yampi Developer Portal

Módulo Vuex que gerencia o estado do Editor de Código. Detecta se a loja está sendo visualizada dentro do iframe do editor, bloqueia navegação em modo preview e escuta mensagens do editor para atualizar parâmetros em tempo real.

Getters

Getter	Tipo	Descrição
`isPreview`	`Boolean`	`true` quando a página está sendo visualizada em modo preview (`?preview=true`).
`isIframe`	`Boolean`	`true` quando a página está rodando dentro do iframe do editor de temas.
`activeSection`	`String`	Alias da seção atualmente selecionada no editor.

Actions

Action	Parâmetros	Descrição
`load`	—	Inicializa os listeners de clique em links para o modo preview e iframe.
`focusOnSection`	`section: String`	Faz scroll até a seção com a classe correspondente ao alias informado.
`updateParams`	`params: Array`	Recebe parâmetros do editor e notifica o iframe pai para limpar os params.
`setActiveSection`	`section: String`	Define a seção ativa no editor.

Uso

import { mapGetters } from 'vuex';

export default {
    computed: {
        ...mapGetters('preview', ['isIframe', 'isPreview']),
    },

    methods: {
        handleAction() {
            // Bloqueia ações que não devem ocorrer dentro do editor
            if (this.isIframe) return;

            this.$redirectTo('/checkout');
        },
    },
};

⌘I