Builder.IO replaces my own header element with some other "Hello notification"

Visual Editor Help
,
1

Hi,
Builder IO seems to replace my own announcement bar with odd text in editor.

“Hello! If you see me, then you have integrated Builder.IO correctly!”

What am I doing wrong?

I would like(need) to see my announcement bar there when editing the page. Announcement bar shows well in browser.

image
image3061×1194 192 KB

2

Hello @hessu82,

I see you have integrated the builder announcement bar which is the reason it’s showing the builder-integrated announcement bar. If you would like to show your own announcement bar then consider unpublishing the builder announcement bar and including your own in the Shopify page integration code.

You may find help at the below link

Screenshot 2024-04-22 at 6.23.23 PM
Screenshot 2024-04-22 at 6.23.23 PM2876×1368 245 KB

3

Hi,

Actually I changed the content of that announcement bar with my own. This content what I have changed is visible when I go to site with my browser. ALso, this announcement bar (the one i made) is inside my own Header section. I have created customizable header and footer sections so that I can edit them via Builder.io. So actually the whole Header is not shown… model name is “header” so could that conflict somehow with builder.io.

4

And I also removed the original announcement-bar model that come with the kit.

5

Hello @hessu82,

I think the header needs to be integrated using code because you are using Shopify headless integration. For detailed guidance on accomplishing this, I recommend referring to our documentation available at the following link: Integrating Sections - Builder.io

6

Hi,
I found yesterday evening the reason that caused Builder.IO editor to show wrong header section content. It was because I had urlPath user attribute in my Header section content fetch.urlPath worked as targeting rule, but builder.io Editor did not understand it.

My Layout has 3 parts:

Header
Page content (dynamically loaded based on URL via Builder.io targeting)
Footer

I was trying to pass in UrlPath userAttributes when I fetches my Header section.

useEffect(() => {
    async function fetchContent() {
      const items = cart?.lineItems || []  
      const headerContent = await builder
        .get('header', {
          cacheSeconds: 120,
          userAttributes: {
            /* Here we can add targeting data. Data is used by builder.io Targeting rules to select appropriate page */
            itemsInCart: items.map((item: any) => item.variant.product.handle),
            cartItemQuantity: getCartItemQuantity(cart),
            cartSubTotalAmount: getCartSubTotalAmount(cart),
            urlPath: router.asPath              #### This attribute caused Builder.IO editor to load that "hello xxx " text..
          } as any,
        })
        .toPromise()
      setHeaderContent(headerContent)
    }
    fetchContent()
  }, [cart?.lineItems])

Is there any change that there is some issue with Builder.io editor regarding urlPath userAttribute?

7

Hello @hessu82,

The header is section model content and urlPath is optional for the section model unlike page models, therefore, it’s recommended to use targeting for showing the correct header in your case.

8

Hi,

Yes exactly. I am using URL targeting and this URL targeting works with this header when I go to the actual site with my browser, but not when viewing it with builder.io editor (buildere.io editor, for some strange reason shows this "hello!xxx " text. )

So I can show different header content when I am at /cart page or just root page “/” and so on, but builder.io Editor gets confused of this URLpath for my section. If I remove the UrlPath useratribute when fetching my Header content, header loads, but I cannot use URl targeting of course.

It would be great to be able to see also URL targeted sections in Builder.IO too instead of that static “Hello! You have integrated builder.io successfully” text.

9

Hi again.
I found the problem there was :smile:

Now I made few tests and found out that when I was using my page trough builder.IO editor Router.asPath contained all builder.editor related query paramaters and not just Urlpath what I wanted.

So I changed my code so that I put useratributes urlPath value to window.location.href.

urlPath: window.location.pathname

 useEffect(() => {
    async function fetchContent() {

      const items = cart?.lineItems || []  
      const headerContent = await builder
        .get('header', {
          cacheSeconds: 120,
          userAttributes: {
            /* Here we can add targeting data. Data is used by builder.io Targeting rules to select appropriate page */
            itemsInCart: items.map((item: any) => item.variant.product.handle),
            cartItemQuantity: getCartItemQuantity(cart),
            cartSubTotalAmount: getCartSubTotalAmount(cart),
            urlPath: window.location.pathname
          } as any,
        })
        .toPromise()
      setHeaderContent(headerContent)
    }
    fetchContent()
  }, [cart?.lineItems])
1 Like