Styla BigCommerce App Documentation
This page provides information about the app/plugin that lets you include Styla content on BC frontend. The app is only needed for Styla CMS product. The Styla Frontend product does not require it as it integrates with BC APIs directly.
About the app
The app lets you automatically include Styla content created with Styla Editor (an external CMS) on your BC frontend. Styla Pages are included automatically as new BC pages and can take over any BC path.
In addition, the plugin provides product data over an API with three endpoints so that products from BC can be used in Styla content created in Styla Editor. It also provides one additional endpoint to add products from Styla content to BC cart.
Styla Modular Content is not managed by the app but you can still include it in your page templates directly with a minor effort.
You will need a Styla CMS account to create your content and configure the app. In case you don't know what your account name is, reach out to your colleagues who are in direct touch with Styla. A person responsible for the onboarding on the Styla's end can create new accounts and reset passwords for you.
Installation
The app is currently hidden in the BC Marketplace. In order to install the app, request a private install link from Styla and follow the below steps:
- Open the private install link provided by Styla
- Follow the instructions
You will need an access to your BC website with enough privileges to install a new app.
Configuration
Once installed, the app will show up in the sidebar of your BC backoffice in Apps > STYLA CMS. Click its icon and then the Settings tab to configure it. You will need to fill in two fields:
- An Email that is associated with your Styla account. It is always yourAccountName@styla.com. In case of any doubts, reach out to your contacts at Styla.
- The Sync Styla pages automatically every 30 minutes box which is checked by default and makes any Styla pages updated or published with the Editor be automatically updated on BC too.
Once you click the Save Credentials button, the app will start synchronising content from Styla APIs to BC frontend. Which means that if you have any published pages in that Styla account, they will show up on your BC at https://yourdomain/styla-page-path.
If you change the Styla account name/email in the above settings, the BC pages that have been created using its data will not be removed. They will stay and can be updated/removed in the BC's backend in Storefront > Web Pages. They will no longer be synced. This will only happen for pages from the newly set Styla account.
Creating pages in Styla Editor
You need to create and publish the content you want the app to sync in the Styla Editor at https://editor.styla.com/. What you enter in the Page URL path in Styla page’s settings will define where your page will show up when synced to your BC.
If a specific path is already taken by a BC path, the app will display an error message on the pages list and this Styla page won’t show up. The solution then is either to modify path of either the native BC page or the Styla page.
If you publish a page with a blank path, this page will override your default BC home page. If you then unpublish this Styla page or change its path, the default BC home page will come back after a delay related to the sync process.
Styla pages list
You can always check the list of your Styla pages synced to your BC in Apps > STYLA CMS > Pages. This paginated list shows them with path and last update time stamp. In general, this list should include all pages you have published with Styla Editor for this account - unless some of them had not been synced/updated yet due to queuing/caching times or errors.
The list is actionable too. You can do the following:
- force syncing all the pages with the SYNC ALL PAGES button top-left (this will happen anyway as long as you have the box checked in the Settings tab),
- filter the list by entering part of a Styla page's path in the Filter input,
- click a link in the Path column to open the page directly on your BC frontend,
- toggle the Visible in Menu switch to have/not the page linked in the BC website's menu (default: OFF),
- toggle the Header/Footer switch to have/not the default BC template's header and footer displayed on this Styla page (default: ON),
- click the Publish/Update icon to have the changes done with the switches above (and any changes done in Styla Editor) published,
- click the Delete icon to have the BC page synced from Styla content removed (it will still stay published in Styla Editor and will be published in the next sync queue).
Styla content as home page
You can use Styla content as your BC website's home page. In order to do that:
- In Styla Editor, create a page with a blank Page URL path field and publish it,
- Wait for the page to be synced or force the syncing in the app's Pages list.
As a result, the Styla page will be displayed on https://yourdomain.com/ so on the home page. It will substitute the native BC home page there.
If you want the native BC content back as your home page, unpublish the Styla page in the Editor and wait for the changes to be synced or force syncing. The Styla page will be removed and the native content will again be used by the BC storefront.
How page syncing works
The app picks up page updates from this API endpoint: https://paths.styla.com/v1/delta/${accountName}. The endpoint reflects page content updates done with Styla Editor. Once a page is updated it moves to the top of the list in the JSON node with updated metadata fields. There is up to 15 minutes delay in this process alone.
The update on the above endpoint triggers checking for new page content (unless unpublished). Page content is synced from another API endpoint: https://seoapi.styla.com/clients/${accountName}?url=${pagePath}. This content is rendered on a matching BC path and cached. This process is triggered every 30 minutes and might take an hour or more, depending on how much content needs to be compared and updated. Resulting BC pages with Styla content include a Styla script from https://engine.styla.com/init.js which adds some functionality to the static HTML content. The pages with Styla content will use the default BC page template per default.
You can see BC pages created by the app in BC backoffice in Storefront > Web Pages alongside native pages created with BC backoffice interface. You can change their content including the BC page template there.
The static HTML synced from the seoapi.styla.com endpoint is saved in the WYSIWYG Page Content field and used to display the page by BC storefront This content will be compared by the app with the content from the seoapi.styla.com endpoint an updated, when needed.
All BC pages created by the app will have Styla metadata filled in in the Search Keywords field. This will start with styla followed by the account name, page path and the last update time stamp. Only if the time stamp in this field is older than the time stamp in the API (the last change done with the Editor) will the app compare and update the content of the BC page.
Resolving conflicts
The below rules are used by the app to determine what content should be synced and used on a specific path.
- if there is a Styla page with a blank path, this page will be displayed instead of the native BC home page,
- if there is any other Styla path matching an already existing BC native page, the app will not create/update the page and will display an error message,
- if a page path has been changed with Styla Editor, the app will remove the older version of the BC page with Styla content and create a new one with the new path,
Debugging
If you don’t see your Styla pages published on your BC storefront or it shows outdated versions, try debugging in this sequence:
- Check if the app is set up to use the correct account and has the autopublish box checked,
- Check if your updates done in the Editor are reflected by the Styla API endpoints above (allow 15 minutes for this to happen),
- Wait 30-60 minutes for the app to pick up the updated content and have time to sync all the changes,
- Sync a specific page you have a problem with manually from the app's Pages list,
- Check if the time stamp in the Search Keywords field is older than the one on the https://paths.styla.com/ endpoint above,
- Describe your problem in details, attach screenshots, include steps to reproduce and pass to your Styla Integration Manager or to support@styla.com.