Back in February we shared how Net-a-Porter had launched a completely new magazine with Layar’s Interactive Print technology built in from day one. And now we’re happy to share the Summer 2014 issue of PORTER is on newsstands now!

If you’re unfamiliar, Net-a-Porter is one of the biggest names in online luxury retail. It was a unique, but innovative step to enter into the print realm by launching PORTER – it’s not often that online outlets look to expand into print, it’s usually the other way around. But the truth is, Net-a-Porter saw a big opportunity to expand its online retail presence by reaching people where they discover fashion: in the pages of magazines.

With the custom Net-a-Porter app, readers can scan the pages to reveal links and instantly buy the season’s hottest items as they see them in the magazine. Whether checking out new shoes or upcoming summer styles, the latest PORTER provides convenient links back to Net-a-Porter’s online outlet to buy the items.

This month, the one-and-only Lady Gaga graces the cover. Inside, along with all of the latest in fashion, PORTER features interviews with celebs and personalities including “strong women” like Arianna Huffington, Sarah Silverman, Zoe Saldana, Christiane Amanpour and more. Readers can also view bonus videos with their favorite interview subjects by scanning the pages.

And the extra content doesn’t stop there. PORTER also features links on nearly all of its advertising pages for the biggest names and brands in fashion.

^{Welcome to HTML Week here on the Layar blog where we’ll be taking a look at some of the great ways you can bring print alive with HTML widgets in the Layar Creator. We’ll provide a closer look at how each example was built, and provide you with some resources to add similar techniques to your own projects. Each example we feature can be found in the completely refreshed and updated LAYARED Magazine! Get yours today and see how interactive print is creating more engaging reader experiences!}

Today for HTML Week we are taking a look at one of our several ecommerce solutions found in LAYARED Magazine. Print is often advertising a product being sold, and now readers can buy items right off the page with interactive print!

We have multiple mobile shopping examples in LAYARED Magazine. On page 18, scanning the advertisement for a men’s briefcase brings up photos and information on similar products, and on page 22, you can interact with detailed information about the products found in the photo spread. But be sure to check out page 20 where things get really interesting!

Simple Shopping Cart

Everyone these days is familiar with an online shopping, and some may have even purchased an item from the mobile device via the web. In this example, we offer a way to bring the shopping cart experience in augmented reality with interactive print.

Essentially this example is a proof of concept, showing how the Layar App can handle “cookies” of information which can be translated into an actual shopping cart experience. On page 20 of LAYARED Magazine, you’ll see an ad for several products, including a wristwatch. Scanning with Layar displays two widgets – one for picking a color and adding the item to a cart, and one for viewing your cart info and proceeding to checkout.

When a user taps on one of the three color squares, the color of the watch in the magazine changes, much like in a traditional web-based shopping experience. This is accomplished with some simple jQuery code. There are many ways to accomplish this effect, but we chose the simplest route.

First we stacked the three different images of the watch on top of each other, but set two to be “hidden.” When a user taps on one of the colored swatches, the corresponding watch image is set from “hidden” to “visible,” and the watch which was previously “visible” is then made “hidden.” It’s a really simple, quick and easy way to showcase different colors of products with interactive print.

Tapping “Add to Cart” then stores the chosen product as a “cookie.” The top widget tracks the changes on this “cookie” and changes the number of items whenever a product is added to the cart. Readers can then tap the link to proceed to checkout with the shopping cart they have filled. In our case, it’s a dummy shopping cart so no product can actually be purchased, but it shows how a shopping cart experience can easily be implemented.

Layar behaves like a normal web browser, which means you can use normal HTML tactics to display different AR content based on user input, providing for a more personalized experience for readers. Here’s more about how this widget works:

• Uses jQuery and “cookies” to save information.
• Multiple “Add to Cart” buttons and widgets could be used.
• More features and options could be added: color, quantity, size, design, etc.
• The ultimate version of the shopping cart widget would allow one widget to be used throughout an entire campaign.

More: Photo Grid & Animated Ad

Of course, the shopping cart isn’t the only ecommerce example found in LAYARED Magazine. Check out page 18 for a dynamic photo grid and page 22 for an animated advertisement. Here’s a little more on how we made these great interactive items.

For the photo grid, we wanted to showcase some similar products to the one in the photo. Using similar jQuery tricks we mentioned yesterday with the Lonely Planet map, we created some slick animation effects and slideshows to provide more information about each product. Alternatively, you could add “Buy now!” buttons for each product and connect it with a shopping cart widget.

The animated ad on page 22 was created to show off the possibilities of simple animation with jQuery. Tapping the button which appears on the page animates more buttons which hover over the various products. Tapping these buttons triggers slick animated windows that provide the reader with added information about the product.

Like a lot of HTML examples, it seems complicated but is actually relatively simple to create using the jQuery tactics we’ve gone over so far in HTML Week.

That’s it for today’s examples! Be sure to keep it here tomorrow as well as we wrap up HTML Week with our final widget example!