How do they do this? I use React.JS and hooks and have online ordering set up, but I wish to do a similar thing where I can style the UI depending on the restaurant.
You can see in the links before, all the online ordering layout is similar but the UI is different for each one.
Thanks
These look like templates to me. You will need some kind of Admin interface from where a user can select the template, as well as information like brand, logo, menu for his website.
Think of something like WordPress, where we select or install a theme for our website and then set up the rest of the website by adding logo, items etc.
So you will definitely need a backend for this to store these values for the individual customers into the database.
You will also need to store the domain name mapped to each template somewhere.
Excellent answer from #vaibhavmande. That is in fact how we do it. (I'm the mobi2go CTO). Here's another sample : https://ghostytoasty.mobi2go.com/. At a basic level you can customize your theme and layout, but you can also customize CSS for each brand. On top of that we actually have a fairly comprehensive javascript framework so orders can be added to a basket without a roundtrip to the server. In some complicated cases we have custom javascript as well (this gives great power but can leave you open to certain bugs). Lots of snapshot testing with https://www.cypress.io/ helps. We're a proud NZ based company but have offices in Australia, North America and Europe. We're also hiring so if you want to learn it all first hand : https://mobi.bamboohr.com/jobs :)
Related
I am working on my first extensive MERN project and part of the functionality involves specific components (like a checkbox to-do list, images, text, ets...) that then allow the user to build out different pages, larger multi-checkbox aggregation lists, etc... Think of it as something like https://www.notion.so/notes.
Building the individual react components and configuring them on static pages is straightforward. However, I'm having a hard time conceptually understanding how to take those components and then dynamically allow users to build out custom pages using them.
In a broad sense, how do page builders functionally work?
Here is a broad idea. You will need a page where the left side lists all your UI components [thump nails] and the right side area for dragging and dropping those compoents. You will need a grid system with rows and columns components like Bootstrap Grid or MUI Grid dividing space into 12 portions for the layout of any page. You should let each dropped component give an option to accept its props so users can set it. Setting props can be another component.
When they save the design you should get the react component tree of what they are saving along with all properties and save it in your DB. You should be able to generate both the design view and the actual view with those saved data.
It was easy to say but I know it's a lot of work. I have seen similar work done using Angular and .NET.
i plan to implement a webapp that allows users to add widgets that are predefined by me in something like a menu (e.g. two buttons and a card with some content) to something like a canvas.
I then want to save this layout so it can be later restored on the same device as well as on an other device.
There should also be a fast way of deciding on one device to add one widget to a layout that is shown on another device right now. This addition i made from one device should be visible on the other device instantely.
I thought about how to do this but am unsure, I saw some stuff about saving it in databases or in json format like in this example with react https://www.storyblok.com/tp/react-dynamic-component-from-json.
As I am a beginner, I with vue.js as well as json etc I am quite unsure on how to decide how to implement such a functionality.
For example with a database/json file I am unsure on how the other device will receive that something was added by another device.
I am glad on any tips or suggestions.
I have been looking at several other suggested frameworks (and others) to fulfil our needs, but the examples in some seem to be too basic, or don't really show what I'm looking for.
I would like to create a flow-based programming type client-side editor.
Here is a basic wire-frame I created to assist (Something similar to the soon-to-be discontinued Yahoo! Pipes editor, but with different features...):
Using the AngularJS Drag and Drop library gives me some of the features (containers, items), but I can't see this working the way I'm hoping.
NoFlowJS is not what I am looking for, although this is pretty cool.
I would like the user to make their selections from the LHS, where if a group like Cats is dragged over to the right, a new "Selected Groups" section would contain all subsequent. Similarly with Cities, below. Basically being able to define a grouping type container.
In this case, Cats is a grouping of cat types, Dogs, the same, etc.
The user can then link the Selected Groups to the Selected Cities - so be able to link grouping containers on the RHS.
This last requirement isn't difficult to implement with regular JS, however, some frameworks I have seen are GL type and may not be as simple to implement: if double-clicking on any of the individual groups, I would have a modal window pop up with the group's properties, ie. Cats {tabby, calico, etc.} (or do anything else).
The lists on the LHS are scrollable.
The current technology stack is AngularJS, KendoUI .Net MVC5, C#.
I see this as all being client-side until the user wishes to save the current status.
I would appreciate some suggestions - maybe some are a combination of different technologies, but all the same, would like some direction on this.
Thank you.
I believe I found what I was looking for with ng-sortable.
Great demo here.
I would just use a side by side select list. For example, like:
http://www.jqueryscript.net/form/jQuery-Plugin-For-Side-By-Side-Multi-Items-Pick-List.html
Drag and drop won't work on a mobile/tablet device and is tedious to do with a mouse. :-)
I Remember reading an article by Marcus Egger a while back about when to and when not to use a gridview style control. I can't find it now...
I have a member on my team who has just found some jquery grids and is determined to use them for everything...
I mean everything from lists of data (which I have no problem with) to using it as a primary means for CRUD on single items (which I find lazy and overkill).
Does anyone have an opinion on this?
Any good articles?
Am I being too picky?
I have used jqGrid control for some projects, and find it to be very powerfull and customizable. And there is a great support for all possible questions here on stackoverflow by Oleg.
However, it is impossible to give reccomendation for any scenario, as there is no silver bullet, and not even jqGrid is optimal for all scenarios.
When you need to have ajax loading and paging, (multiple column) sorting, filtering, inplace editing, enumerated column values, jQuery UI theming - jqGrid is one of the best tools. It supports all that, and different types of data formats, including json and xml.
However, sometimes you only need simple web app for administrator to perform CRUD operations on some codebooks, without requirements for specific looks, ajax and all the bells and whistles, and jqGrid is overkill in these cases, especially if autogenerated mvc scaffolding or asp.net dynamic data application does the job well. Or maybe there is no requirement for grid, if there is only a list of something needed, and it can be done in 15 minutes, then you should NOT use any grid control. There are also cases when displayed data can be more user-friendly, i.e. contact information - you will find someone a lot faster if you display large name and/or picture and smaller address, phone etc aside in a unordered list than you will do the same in a grid-styled display of same information (and you cannot put picture as it will make your row height too big).
Regarding "lazy" part of your question, I would not agree as there is often more work to make jqGrid working than use some out-of-the-box component. With jqGrid you can implement inplace editing (inside jqGrid), but you can also make completely customized form (not different from one someone expects at edit page) which is loaded into edit dialog.
Why don't you use a repeater control, then you have full control of your markup.
Or do something like that:
<table>
foreach(var i in data) {
<tr>
<td>....etc </td> </tr>
}
</table>
Background
I am tasked with developing the front-end to an analytics product that presents the information to the user in a customizable dashboard like the one used by Google Analytics:
- Dashboard is comprised of draggable widgets arranged in a grid layout
- Widgets have a drag handle which can be clicked by the user to start dragging
- Widgets can be re-ordered by dragging and dropping the widget
Question
Part 1. Using jQuery (or any other open source Javascript API) can anyone explain to me how such a feature is implemented, from a high level overview.
Part 2. Can you recommend any resources for me to read that may be relevant to implementing this feature, or any foreseeable related features? (books, links, api docs, tutorials)
EDIT This one looks even better and more maintained! GRID by UberVU
Next one on the list is gridster.js
PS: I know this is an old thread but since this question is the first hit in Google I think its worth listing some newer libraries.
You can easily implement this.
You will get required info from
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
and
http://james.padolsey.com/javascript/inettuts-with-cookies/
First what comes to head is jQuery UI.
Use HTML 5
http://html5doctor.com/native-drag-and-drop/
You can find a lot of info here:
http://jqueryui.com/demos/draggable/
Use jQuery, and get on the Demo & Doc page to see how D&D is being used.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
If you wanna dive into a Widget Page/Dashboard architecture, and would like to see how others did it, take a look at Omar AL Zabir's book
http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=ntt_at_ep_dpt_1
I am pretty sure this one is going to make you happy!
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/