Frequently prospective users ask if they can embed an OFN shopfront in their website. Users want to be able to take a piece of code (like an iframe) and add it to their wordpress site, such that customers can complete the whole checkout process without having to leave the user’s wordpress site.
Currently only the shopfront need be embedded. Administration and backend tasks are not required.
Embedded shopfronts should render correctly on all browsers and devices.
Rohan did a chunk of work to get the Groups pages to embed, so exporing his branch would make a good starting point.
To provide some more clarity I would like to propose the following as the spec.
The shopfront itself contains very little reference to OFN.
The top menu and logo are removed from the frame.
The About, Producers, Contact and Groups modals should all still display.
There needs to be checkout navigation toward the top of the frame. In the images I’ve just added the buttons from the cart. If anyone wants to suggest improvements on this that would be great! In the first iteration I’d be tempted to go with the simplest to implement so that we can get on with some testing.
Much of the footer is removed. We need a message like “Powered by the Open Food Network” and a link to the powering instances OFN site. This text and links should be configurable independently of the main OFN instance site.
The embedded shopfront should render well in all browsers and all devices… if that’s possible when you don’t have full control or where it will be embedded…?
Thank you @lin_d_hop for this proposal and work, sounds good to me! @Arthur maybe you’ll have some feedback on this? Arthur has worked on UX also on Democracy OS
I’m currently working on a general UX and UI backlog. For this particular case, I think the embed version should copy the native one, regarding the checkout process, therefore I’m not sure about the simple “checkout now” button, I think it’s better to stay with the cart icon with number of items => click on it to modify or checkout.
Additional features:
Checkout page: specify with a * or different color where field can’t be left blank. Also remind the user that his data will always be kept private and secure.
Buttons for adding and removing items are very small, could we put larger + and - signs instead ?
I’ll give it another fresh look next Monday, but for now it seems pretty good !
The shopping trolley icon needs to move to make that happen. When i was mocking it didnt feel right. If u could mock something with the shopping trolley icon in frame id be up for us doing that. @Arthur
I like your spec @lin_d_hop thanks. We could run this past Bob at Kent Farmers Market and others who are keen to see whitelabelling, but I don’t think they need to see this level of detail. Let me know if you want me to run it past them
@lin_d_hop What tool(s) do you use for your mockups ? I like Sketch, but I’d have to recreate all the visual identity (buttons, fonts, backgrounds etc…) to use it properly. Otherwise, I can work directly with code (I guess that’s what you do ?) Thanks
@Arthur I’m new to the design game… I’ve been using code or just manipulating screen shots to get out quick ideas. Would be great to have more tools to work with and I’d be very up for your ideas and suggestions. Do you think it would be worth putting together a library collaboratively?
@lin_d_hop I’m willing to create a library on Sketch with the OFN standards, but then all the designers would have to use Sketch to access that library, and the software is $99… Maybe that can be part of a team budget ? I’ll start working on that library anyway, and we’ll see later about using it globally !
Hey guys, I just thought of another constraint that comes with embeddable shopfronts: if a food hub asks for user login before shopping, OFN has to get access to that data to avoid duplicating entries at checkout.
Another thing, what do you think of adding : "More shopping options / Notify me when a product runs out of stock => join OFN / Register to OFN => button. I can work on a mockup.
Hi @arthur,
Ideally it would be great if the image files were exportable to be used in other software/platforms. There are a lot of linux users too!
Is there no way to do that with Sketch? Even if the library itself was compressed image files, it would go some way to being more widely usable?
@Arthur it is perhaps unlikely that many others will buy copies of Sketch if they dont have it. Just to throw an alternative out there, what about building a styleguide for OFN? This could become a reference at styleguide.openfoodnetwork.org and would be a useful tool for quick prototyping in code of new UI components and layouts.
@lin_d_hop re your mockups, I wonder if the footer should be made much more lightweight? It will be in the middle of an embedded area, not in the actual page footer, so could be quite jarring. Also when embedding it might be good to keep the extraneous content to a minimum?
sorry for being a bit late to this discussion! We had some discussions about this as part of our initial rough estimate for the german project (as introduced by @janinahere)
I have attached the rough outline we suggested to give an idea of our thoughts. The blue is re. the development of the standalone website itself which is not necessarily an OFN task but they needed for the estimate. Key points to note re. discussion above
we thought that there are at least three required pages for the iframe embed approach: shop, checkout and order confirmation (although I suppose that could return to their website instead). Maybe also consider the customer account page now that it does some stuff?
see comments under advanced, including consideration of login, emails and invoices etc
also note the curious consistency of the estimates e.g. these are not based on detailed analysis - they are ballpark at best
Also, with the parallel interest / discussions / work on UX and mobile, we think there is a possibility that it may be best to invest in development of a semi-independent module that can then be embedded in any site.
I’m not across the technicalities of iframe vs module, or whether it’s a decision that needs to be made early . .
NB. Couple of designers we’re worked with recently have all had/used Sketch as standard. Perhaps it is something that each instance could purchase if needed to support voluntary contributions where people don’t have it, but perhaps reasonable for paid designers to have as part of their toolkit? I am of course in favour of an open version if there is one, but we also don’t want to make everyone learn a new thing if there’s something most people already use?
also . . we will be putting together agenda for our planning retreat and I suspect (hope) discussion of priority projects like this will be on it. @danielle may have some ideas on how we best integrate with these discussions
I guess also the group page need to be embeddable (is it already embeddable? I was not sure :-o) In the discussion we have with potential partners here in France this will also be needed.
And the possibility for the third party to make its own design/appearance is a strong requirement, they are ok the what they finance to develop go into the Commons but they need to have something that differentiate them from the other, and that can go through design. I see that more and more in open source hardware projects btw.
I pass on the tech details
I have to do something like this for a Hub I work with now, so it’d be great to get a consensus on an initial plan for this.
I’m wondering if we could just have an additional “embedded shopfront” CSS stylesheet that can hide unwanted elements or modify/reposition existing ones, then just pass a url paramater in the iframe to trigger it, like /shop?embedded=true
So the floating bar at the top with the cart can stay there (maybe a bit slimmer) but with the navigation and logo hidden. The footer content can be hidden as well, or even just selected bits of the footer can be hidden. It’s really easy with just plain CSS tweaks. The customer account page would work fine as well.
@Matt-Yorkley that’s super exciting that you’ve taken a look at this. I like the simplicity your proposal.
Would the login modal work?
Could we make an optional but obvious ‘Powered by OFN UK’ somewhere without adding a ostensibly floating footer as Paul noted? Optional for white labelling.
@danielle@Kirsten@MyriamBoure@oeoeaio any other thoughts on this… I’d like to summarise into a req spec so matt can spike and estimate properly… Eeep exciting
