After over a year of building, I would like to introduce you to the first beta version of our e-commerce print shop. It is entirely built against the largest MIS system in the graphic world in Europe. Here is the link to the live BETA version: https://link.heropost.io/6a6wunxw7c
About a year and a half ago, I started building in Bubble (with no programming background), but with ample knowledge of APIs. I have always wanted to complete this project and see if no-code can also play a significant role in the graphics industry. Judging by the results, I believe it can.
We process all customer data, etc., in our MIS package, and the final calculation also comes from our MIS system, which we are linked to at many points through the API. Online payments, online editor, account management - the system is equipped with all conveniences.
I am curious to know what you all think. We are in BETA, so we are currently testing internally and smoothing out any errors. Product pages are quite complex, since print work is not exactly straightforward.
Perhaps you could provide some tips on the following:
The homepage, the repeating groups (menu / blogs / homepage products) take a long time to load. I also use a repeating group for the menu because the data must be manageable from the backend (so option sets are not an option). Are there other solutions for this, or can I cache this data somewhere?
Again, we are in BETA, there are some errors here and there, but right now I am mainly looking for ways to further improve performance.
Very well-made. Looks very good. I haven’t had much looking into it, but the initial sweep it feels and flows like a well-optimized app. Keep it up mate.
You can cache your content within local storage, and pull it later. Just add a revalidation workflow after a certain amount of time, and you’re good to go.
Thanks! Do you have some info how? After a year I didn’t find something that helped me with this. Caching for each user again? Caching a compleet list of things? Like to hear
the menu, maybe it is an option show the main categories like Kaarten, Visitekaartjes etc. first and when they are hovered/clicked show the subcategories.
the menu, another option would be to load the menu items to a custom state on page load, and point the repeating group to that custom state.
the menu, a third option would be keep the data type for the menu as light as possible. You can even consider having a data type / table with one field and row. That row contains a comma separated list of texts (menu items). On the client side client use some logic to split this list into separate items, determine the right style and layout using some extra flags etc.
Leave the datasource for the repeating group that show the blog enties empty by default and set it after the page has loaded in the ‘Page is loaded’ event.
It should be possible to check whether the repeating group for the blog posts enters the users viewport using the plugin ‘element viewport detection’, so maybe it is possible to set the datasource for the repeating group at that moment. For someone who chooses a product directly, the blog entries will not be loaded at all (so less WU usage)
Try to minimize the size of the images, it seems the ones for the blog posts are quite big.
In case you did not do it yet, activate experimental feature ‘Run-mode page-load optimization’ (Settings - Versions). You can deactivate it again.
Play around with it a bit, see what works and what not. Bubble also optimizes things so sometimes intended optimizations can be counter productive.
Btw, did you end up using the change the developer made to the plugin?
Just turn your content into JSON objects, then add an array of objects to a localStorage keystore.
This will cache your content into each users device so whenever they load the page, it’s already there. You will also need to recycle, and update this data.
You can also use this method to prefetch data, for instant loading on future content.
A couple of visual hacks that can work-around the issue:
set a minimum size to your repeating group
add a loading indicator
The minimum size of a repeating group will prevent that big jump when the data finally loads and it might even show a loading indicator. It’s not the prettiest, but it’s a 1-min fix that might go a long way.
The 2nd is to add a loading indicator. My go-to solution for that is to use Keith’s Floppy plugin. The List Shifter element has a reliable is loading state. Which you can then use to show/hide a group with a loading indicator.
FYI: if you want a cheap loading indicator, you can use a text element and drop this in there [fa] fa-circle-o-notch fa-spin [/fa].
Probably overkill, but here an example of the light data type for menu items I mentioned in my previous reply:
A data type with 1 row and two columns. Field Categories with a comma separated list of categories and field items for a comma separated list of items (formatted like category|item)
The group focus contains the search for the menu items:
The repeating group for categories has a data type text and uses the categories from search in the group focus (step 3) split by ;
The nested repeating group that displays the items per categories has a data type text and uses the menu items from the search in the group focus (step 3) split by ; and is filtered based on category:
Hi Martijn, as mentioned before, using 1 row might be overkill (and not the right solution). A data type with 3 columns (category, item, link) with a row for each item should also perform well.
That being said, to answer your question, you can add extra data to the menu item, f.i. category|item|link and use that link to determine to which page to go:
After more than a month in BETA1, we’ve now moved to BETA2 - significant improvements have been made to further optimize the shop. We’ve also made good progress with Google Page Speed, though server performance remains a challenge (tips are welcome). There is some work left on the productpages in therms of optimalisation. Overall, we’re satisfied with the speed.
This week, we started live testing with customers on a separate domain (www.monsterprint.online) and expect to go live on the original domain within a week. Redirects and sitemaps are currently being prepared to ensure a smooth transition for Ads.
The first orders through the new portal have already been successfully processed, giving a glimpse behind the scenes. All the tools you see are built into this webshop. Everything you see is Bubble.
MIS Software - MultiPress - this is the engine for all calculations, options, and order management. Seamlessly integrated via the API.
PitchPrint - An online design tool for creating print files. We’ve built a plugin for this.
MultiSafePay - Online payment provider in the Netherlands (via API).
Overheid.io - Connection to retrieve company data (via API).
TinyPNG - Image optimization (via API).
GetResponse - Online marketing and newsletters (via API). Postcode.tech - To validate address using postal code (via API).
Additionally, we’ve incorporated some plugins for uploading print files, pop-ups, Postmark (transactional emails), Analytics, Image Sliders and other useful features.
!
!
