Can't add edit button

Developing with Prismic
1

Hello,

I'm currently trying to integrate the edit button on a vue storefront project, but i'm facing certain problems.

When i include the script from the preview page, i have a warn log in my console

Capture d’écran 2020-06-16 à 14.56.41
Capture d’écran 2020-06-16 à 14.56.411516×272 40 KB

I can see the html hydrated and a div appear with the class prismic toolbar and an iframe but they seem empty.

After that i integrating the new script tag, i no longer have the console warn anymore but there is nothing in the html either, i have the iframes but empty also without any messages.

i tried to had a custom edit button from the doc with the id of the document without success.

( can't add more pictures )

Thank you for reading,

Marc

2

Are you using the new <script async defer src="//static.cdn.prismic.io/prismic.js?repo=...&new=true"></script>?

5

Hello, @marc.arnoult Welcome to the community forum!

Have you already enabled and configured the Preview functionality? If you haven’t done that first, here are the docs on how to do it: How to set up Previews.

Could you tell me where exactly are you adding the script for the Edit button and also share with me the code that you’re adding if possible

Thanks!

1 Like
6

@marcellothearcane yes, i no longer have the warning message but nothing more on the html or visible.

@Pau Thank you ! Yes i followed https://prismic.io/docs/vuejs/beyond-the-api/in-website-edit-button

carbon (3)
carbon (3)1902×1128 308 KB

I tried with the previous script that in the previews setting page, and the vue lib to add the edit button without success either and with the vanilla doc to include a custom edit button too, but i can’t see any change/error/warning anywhere.

However i can clearly see the div for the toolbar in the html or the iframe from prismic.

7

Hi Marc,

You need to include the EXACT script from the Previews section of your repository in the in the <head> of your project, in Vue this is done in the in the base index file.

If the script in your repository looks like this:
<script type="text/javascript" src="https://static.cdn.prismic.io/prismic.min.js?repo=MARCS-REPO-NAME&new=true"></script>

Then all you need to do is run a query for a document in your views coming from Prismic and the toolbar will get the document id to create the new button.

If the script in your repository looks like this:
<script type="text/javascript" src="https://static.cdn.prismic.io/prismic.min.js"></script>

Then your repository is using the old toolbar script and the new edit button will not work for you yet. If that is the case you have 2 choices:

  1. Send a message to the Activations team to get the new script/edit button.
  2. Use the old edit button.

To use the old edit button, insert a component on the pages where you do your query to the document from Prismic and pass the document ID as prop.
<prismic-edit-button :documentId="documentId"/>

Let me know if this helps.

Thanks.

8

This issue has been closed due to inactivity.