Skip to content
This repository has been archived by the owner on Apr 18, 2024. It is now read-only.

Live preview updates not working #14

Open
frans-vectra opened this issue Nov 10, 2021 · 2 comments
Open

Live preview updates not working #14

frans-vectra opened this issue Nov 10, 2021 · 2 comments

Comments

@frans-vectra
Copy link

Hi, I'm struggling to get the realtime preview to work. It seems like components aren't rerendered when the input Storyblok event is fired.

I followed the Real-time Visual Editor documentation and this is what my root page component looks like:

<template>
  <render-content v-if="content" :content="content" />
</template>

<script>
import { useContent, storyblokBridge } from '@vue-storefront/storyblok'
import { onSSR } from '@vue-storefront/core'
import { computed, onMounted } from '@vue/composition-api'
import { useVueRouter } from '~/helpers/hooks/useVueRouter'

export default {
  name: 'Page',
  setup () {
    const { route } = useVueRouter()
    const slug = route.params.slug

    const { search, content } = useContent(slug)

    // wrap your content with reactive computed function
    const story = computed(() => content.value)

    // get data
    onSSR(async () => {
      await search({
        cache: false,
        version: 'draft',
        url: slug,
      })
    })

    // init the Storyblok Bridge
    onMounted(() => {
      storyblokBridge(story.value)
    })

    return {
      content: story,
    }
  },
}
</script>

One thing I see that doesn't make sense (looking at the storyblokBridge code) is that its expecting a content object with the following structure:

{
  content: {
    ...
  }
}

i.e. wrapped in a containing object, but the story object thats passed to isn't wrapped in this object container (going by the example in the documentation).

I've tried adding this missing wrapping object but it still doesn't seem to work. It also seems like the reactivity of the content object is lost when the new value is assigned to it.

Any guidance would be appreciated!

@lukasborawski
Copy link
Collaborator

@frans-vectra thanks for sharing. We haven't noticed that kind of behavior. We will check this one this or next week. Cheers.

@maciekkus
Copy link

maciekkus commented Nov 18, 2021

Hi,
I had similar issue like @frans-vectra.
My fix for that is below.
@lukasborawski Looking forward for your review of that part of storyblok bridge.

setup() {
    const { search: searchContent, content: dataFromStoryBlok } = useContent('homepage');

    const story = ref({});

    onSSR(async () => {
      await searchContent({ url: 'homepage', cache: false });
      story.value = dataFromStoryBlok.value;
    });

    onMounted(() => {
      story.value = dataFromStoryBlok.value;
       // here I tried to customize storyblokBridge code responsible for updating content
      if (window) {
        // eslint-disable-next-line
        const instance = new StoryblokBridge();
        instance.on(['input', 'change'], (payload) => {
 
          story.value = {
            ...payload.story.content,
            _meta: payload.story,
          };
        });
      }
    });

    return {
      content: story,
    };
  }

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants