CODEWITHSUNDEEP
iframewebembedblogs
Andy Mattila
Andy Mattila

Reputation: 11

Embed cross domain Magento website into a blog, preferably hosted on Blogger

Sorry in advance for the long question...

Here's the big picture problem: Our website is a venue for online charity auctions for schools and nonprofits. We use Magento to create the catalog of separate auction events, each under its own category--we are just a venue for charity auctions with our own branding, not unlike ebay or craigslist. Some orgs have been requesting to display their auction event with their own branding. I'm trying to come up with a quick, free and user friendly fix for these folks, avoiding major development.

My easy solution: Have them set up a blog on Blogger (free, where bandwidth is unlimited, no risk of crashing) and choose a template that best matches their branding or go ape and make it look exactly like their own website. Then paste in some simple iframe code with a URL of their own category (which lists all of their auction items) from our website so that their items are embedded in the blog.

Tech problem: The iframe idea works, bidders can sign in, bid, checkout... totally functional--but it looks awful because it displays our desktop browser/default theme on Blogger. However, our mobile theme fits the iframe perfectly and because the width is liquid, the iframe can be any width and it still looks good. I was able to test this on our own blog (hosted on Blogger), opening it in Safari and switching the user agent to iPhone. You can see here how that all works together (remember, must use iPhone user agent when viewing the blog): http://winningcause.net

So is there a way to use an iframe to display the mobile theme of a Magento based website when on a desktop? You might also be aware of the gmail gadget for iGoogle--it displays the mobile version of gmail even though it's viewed from a desktop browser--how'd they do that?

Disclosure: I'm not an engineer, I'm a web designer--I know some CSS3 and HTML... but we outsource the real development, so I suppose solutions outside of my comfort zone are absolutely welcome, but if I can do it, we'll save much needed funds. Thanks for your help, your ideas will ultimately help nonprofits!

Upvotes: 0

Views: 1968

Answers (1)

Andy Mattila
Andy Mattila

Reputation: 11

The only way I could figure out to do this was the hard way... I had to make a new theme that redesigned the website to fit in an iframe, much like what the iphone theme does for mobile devices. This is definitely the hard way, no shortcuts...

Here's my how to list to create a new store/store view for iframe display:

  1. Create a new store under your current Website
  2. Create a new store view under the new store
  3. Create a cms page for the home page
  4. Go to System>Configuration>Web and select new store view... change home page to the new cms page created above
  5. Go to System>Configuration>Web and uncheck all Use Website under [Current configuration scope: Default Pages]
  6. Go to System>Design and Add Design Change, assigning your new theme as the theme for the store view
  7. You may need to add the store id to the url of your website to be able to link directly to the new store view. To do that, go to System>Configuration>Web and Add Store Code to Urls=Yes

Now this is the code for an iframe that I found to work best for Blogger:

    <div align="center" style="background:#fff;margin:0 auto;width:770px;border:1px solid #999;border-radius:10px 0 0 10px;webkit-border-radius:10px 0 0 10px;moz-border-radius:10px 0 0 10px;">
<iframe frameborder="0" src="http://yoursite.com/store_id" width="770px" height="550px">  <p>Error: Embedded data could not be displayed.</p> </iframe></div>

Upvotes: 1

Related Questions