Can't get Builder IO working properly

[Italo Carillo]

Congrats on the product and mainly on the UI, it is really beautiful...

I've been trying Builder in the last 2 days and found some bugs, and challenges using it. I am not sure if I am doing something wrong.
I will list all my findings below because I think it is easier for me to list, and maybe easier for you to correlate the issues if possible.
As I've tried fixing the problems as I go (only using the UI) maybe one problem led to another 🤷🏼‍♂️, so I listed the steps I remember I took.

Please let me know if you think would be better to have each issue created separately next time.

NOTE: All issues listed were found running local env. (npm run dev)

Issue

1. I can't get Builder IO working properly after connecting to my Shopify Development Store.
2. Two warnings coming from @builder.io modules:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move code from componentWillMount to componentDidMount (preferred in most cases) or the constructor.

Please update the following components: TabsComponent

Warning: React does not recognize the `_newProperty` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `_newproperty` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Expected and actual behaviors

• Being able to link Builder to my store (Done easily 👍🏼 )
• Being able to preview the pages inside Builder

I couldn't see some of the pages for example the Product Page > Generic template (image is attached) and I guess it is because of the URL ${space.siteUrl}/product/${previewProduct.handle} not reading the variables. If I change this URL manually to an existing page and product handle, it works 👍🏼

• Being able to edit the previewed pages

I could somewhat edit the pages but I found it a little buggy:

• Some times the Components weren't added to the view at all and I needed to refresh the page several times to get it back working
• When I removed all the Components from the view (let's say the design team wants a "fresh" start), I couldn't add any other Components (video is attached)

• Being able to see the changes on the site after publishing
• Being able to recover the previews versions inside the HISTORY tab 👍🏼

Steps to reproduce:

1. Clone this repo
2. Create a Dev Store on Shopify
3. Add some dummy data ( I used the app Simple Sample Data to add some data to my store )
4. Follow the README.md directions until you get your store linked
5. Go to BuilderIO and try to edit Product Page > Generic template
6. Change the URL on the top right manually to something like http://localhost:3000/product/vans-authentic-multi-eyelets-gradient-crimson using a valid handle of course
7. Remove all Components in the view
8. Try to drag and drop a component to the view

Attachments

Screen.Recording.2021-04-23.at.9.14.18.PM.mov

[Aziz Abbas]

Hey @icarillo thanks for the kind words, glad you're liking the platform, did a couple of updates today that should make the user experience better setting up by learning from your issues here so in the future users will have a better experience.

I couldn't see some of the pages for example the Product Page > Generic template (image is attached) and I guess it is because of the URL ${space.siteUrl}/product/${previewProduct.handle} not reading the variables. If I change this URL manually to an existing page and product handle, it works 👍🏼

There's a preview field on the page that was not setup correctly, updated the flow to show a picker when that happen, doesn't apply retroactively, so in your case you only need to pick a preview product from the options tab

Some times the Components weren't added to the view at all and I needed to refresh the page several times to get it back working
When I removed all the Components from the view (let's say the design team wants a "fresh" start), I couldn't add any other Components (video is attached)

This was a mistake in some of the commits dating back, I left some pixel tags that doesn't show while editing, it's not in the code anymore, but fix doesn't apply retroactively, so you can basically delete it in the layers tab, it's under name img

[Aziz Abbas]

@icarillo just checking if you had a chance to try the suggestions above?
Closing as this all is solved for brand new spaces