| Info |
|---|
This page describes the concept of bases which define any content in the header and footer of your Styla Frontend website. It also provides details on how product and category bases inherit from the main one and instructs you on how to create and update bases. |
Page bases are templates into which either your product content from BigCommerce or Styla content from the Editor will be inserted. The basic idea behind bases is that all pages need to share the same header and footer which, in turn, consist of multiple modules. Product details and category pages generated based on data from the BigCommerce API and Styla content created with the Editor will be displayed by Styla Frontend between these header and footer.
/diagram here/
Styla Frontend uses two levels of page bases:
Page Base - usually contains header and footer for any page and a placeholder module in which content from the Editor or Big Commerce will appear
Category Base and Product Base - they inherit header and footer from Page Base and render in between them content generated based on product data from the BigCommerce API plus any other content that might be needed, either modules common for all product details or category pages or Modular Content which can load different content for some pages only.
Managing your bases
You manage bases in Styla Editor in Bases Manager. You can reach it from the overlay appearing when you click your user name top-right:
...
Adding and deleting bases is not needed and currently blocked. The only thing you can do on the list above is clicking the Edit link on the right to modify your bases. On clicking this, your base details will show:
...
Adding modules to your base
Right in the beginning your base will be blank. You should start populating it by dragging and dropping modules from the left sidebar onto it. You can both user the default Styla and custom modules for that.
...
The Placeholder module is always needed in the Page Base. It denotes the place in which content of pages created with the Editor, product details and category pages will be displayed. So everything you will set up in Category Base and Product Base will “go into“ the Placeholder. You don’t need to drag and drop the same set of modules on these bases again.
On most websites everything above the Placeholder will be the header while everything below, the footer.
Triggering page re-rendering
Once you are done with your base updates, click the Save&Re-render button top right. This will start updating the page .html files for all pages using this specific base, so:
...
Alternatively, you can click the Save button top left and not trigger the re-rendering process.
Page path patterns
The view with all your bases above displays a path pattern for each of them. This field defines on what location in your website all pages using a specific base will be create.
...
Similarly, if you set your Product Base’s path pattern to products/{product.slug}.html all product details page .html files will be created in a /products/ directory and have the .html extension.
Setting page patterns
At the moment there is not user interface to enter them other than directly in JSON data for a base. When editing a base, simply add a /json to the URL in your browser’s address bar and go there. A JSON with all data for the base will be displayed. You can edit its pattern in the path field and then save (and trigger re-rendering).
...