FAQ

FAQ

Answers to the questions developers ask most often about the Selldone Page Builder, including common setup problems. If your question is not here, open an issue.

Can I use the Page Builder outside Selldone?

The code is open source, but its use is governed by the license in LICENSE.md (Selldone Page Builder License). Read it before using the package in a commercial product. Technically, the viewer and editor also expect Selldone services (Storefront SDK, Core models and, in edit mode, upload endpoints).

The page is blank

Check these in order:

1. You called PageHyper(app, options) before mounting the app. Without it the console shows $PageHyper not found! and nothing renders.
2. The console shows no error from SetupPageBuilder (for example an invalid mode).
3. LandingRender found a page: open the network tab and check the page request. Pass forceFetchUrl if your routes differ from the Storefront's.
4. Vuetify, Vue Router and the store are installed in the app.

What is the difference between SetupPageBuilder and PageHyper?

SetupPageBuilder(app, options) installs the builder immediately. PageHyper(app, options) registers a small service that installs the builder on demand when the first page renders, and the viewer and editor depend on this service. Use PageHyper always, and add SetupPageBuilder plus $PageHyper.isInitialized.value = true only when you want eager loading. See View and Edit Modes.

I get "In the edit mode options should have 'server' property!"

Edit mode needs server.uploadImageUrl and server.uploadVideoUrl. See Upload Handlers.

I get "Invalid uploadImageUrl! Generated test upload image path is ..."

During setup the builder calls uploadImageUrl("page", { id: 0, shop_id: 0 }). Your function must return a non-empty string for that call. If it depends on window.API, call BackofficeSDK.Setup() before SetupPageBuilder.

Uploads fail with "You should set it in the builder.setModel() function!"

No model is linked to the builder. LPageEditor links the model from v-model; make sure modelValue is set. If you use the builder directly, call $builder.setModel("page", page) first.

Where are shop custom fonts stored?

Not in the page. content.style.fonts is reserved for Google Fonts. Shop fonts come from the customFonts prop, then $shop.custom_fonts, then the customFonts option passed to PageHyper.

Can I add my own HTML or Vue code?

Yes. Use the Raw Html section. Put <!----vue----> at the top to write a Vue template with editable properties. import statements are not allowed. See Sections and Elements.

Will my old pages still work?

Yes. Pages saved in the older v1 format (name + data per section) are migrated to the current element tree when they load. Save them once to store the new format.

How do I move a page to another shop?

Use Export in the editor to download a .landing file, then Import it in the other shop. See Page JSON Structure.

How do I develop the Page Builder locally?

Run yarn link in this repository and yarn link "@selldone/page-builder" in your app (for example the Storefront). Link @selldone/core-js, @selldone/sdk-storefront and @selldone/components-vue the same way if you change them too. See DEVELOPMENT.md.

Related

• Getting Started
• View and Edit Modes
• Storefront wiki
• Report a security issue