_Each example can be found in the completely refreshed and updated LAYARED Magazine!
Today 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 mentioned 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.
You can also create a slick photo slideshow with no HTML at all. Just use the built in Image Carousel widget in the Layar Creator! All you do is upload your images, put them in the order than you want, choose the size of the carousel and it’s ready to go!
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.