Embeddable Shopfronts - Whitelabelling

@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?

@arthur I have used pencil in the past for mockup, open source tool, I liked it very much, super easy. But I’m not really in the design field either :wink:

@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.

Lots of resources about styleguides here: http://styleguides.io/

5 Likes

@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?

1 Like

hi people

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 @janina here)

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 :slight_smile:

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 :slight_smile:

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 :wink:

Came across this in spree-contrib, wanted to share and see if we could leverage anything out of this too !! I am still getting my head around it !!

https://github.com/spree-contrib/spree-multi-domain

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.

1 Like

@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 :slight_smile:

Yep, the login modal would still work. As for the “Powered by OFN” bit, we could maybe detect if the page is loaded in an iframe using javascript and display some extra content conditionally with angular?

this is very excellent. I think I’d really like to get aus dev to have a look over it and a chat and discuss best plan, to make sure direction isn’t cutting anything of. @lin_d_hop were you going to organise a hangout time like we did with bulk uploader? seems like quite pressing as @Matt-Yorkley is ready to get on with it! Definitely include @oeoeaio and I think @maikel as well, is that ok @danielle?

Slight snag with our HTTP header options: apparently we don’t currently allow iframes. Not sure if this is a Rails setting or a server thing.

Load denied by X-Frame-Options: https://openfoodnetwork.org.uk/stroudco/shop does not permit framing.

By jingies @Matt-Yorkley, a deadline of May 29th. That’s a tricky one to navigate…

Ok, could you list the MVP set of requirements for your May29th deadline please? Perhaps this can make our phase one and we add features as we go, based on the outcome of the May 10th chat.

To my understanding…
It should include:

  • Shopper can login to OFN via iframe (OFN login, not an integrated login)
  • Shopper can order from the single hub via iframe
  • Shopper can checkout via iframe
  • Shopper can view their account via iframe

It does not need to include:

  • Any functionality for the hub, they can visit ofn main site
  • Any other navigation with the iframe. In fact this should actively be disabled.
  • White-labelling emails. Emails can still come from hello@ofn.
  • Removal of OFN branding. This is not a total white-label for the embedding enterprise.
1 Like

That looks good. The main blocker at the moment is a simple change in Rails settings to allow pages to be embedded in iframes, outlined here: https://jerodsanto.net/2013/12/rails-4-let-specific-actions-be-embedded-as-iframes/

It’s one line of code: response.headers.delete "X-Frame-Options", which needs to be added on the before render action of whichever controller actions we want to make embeddable.

It’d be good if we could get something like this pushed and merged relatively quickly, because I can’t even test an iframe or tinker with it at the moment. Everything else isn’t really urgent but obviously would be nice to have at some point.

So after a brief chat the outline is:

  • An admin checkbox for “enable embedded shopfronts”
  • A general helper method (enable_iframes) that checks the admin setting is enabled, then unblocks iframe use with the line of code above
  • The method gets called selectively on the necessary controller actions using :after_filter
1 Like

This feature would be very helpful!

@farmtech this feature is in fact deprecated.