<\/p>\n
![\"Interactive](\"https:\/\/freshinbox.com\/assets\/examples\/add-to-cart\/add-to-cart-overview.gif\")
<\/p>\n
<\/p>\n
Using Amazon.com’s Add To Cart<\/h4>\n
For this example, we will use Amazon.com’s affiliate add to cart<\/a> feature. I chose to use this so that you don’t have to write the “backend code” to try out this example.<\/p>\n The format of a form to add a product to an Amazon.com shopping cart looks like this:<\/p>\n For this example we want the user to be able to select a few colors of an iPhone 6 case<\/a>. To start off we will have to get the ASIN of the products:<\/p>\n Blue: B00MUQ9E7C<\/a> Then we create the carousel using the same technique that we used to create Interactive Tabs for Email<\/a>. For this example instead of tabs we use colored boxes. From the Tabs example you learned that the Tabs are driven using radio inputs. For the example instead of assigning the radio input a random name, we use ASIN.1 as the name and the ASIN tied to the different colors as values.<\/p>\n <input type=radio name=”ASIN.1″ value=”B00MUQ9E7C”> We use a select input to allow the recipient to select the number of cases to put into the cart.<\/p>\n The rest of the fields we’ll just use hidden fields as they are required by Amazon but not relevant to our example. Update:<\/b> Previously AOL Mail did not support the form tag, however that has since changed. In order to get forms to work in AOL Mail the submissions must go to a https link and the “target” attribute of the form must be set.<\/i><\/p>\n As usual we need to provide fallback for clients that don’t support forms as well as good ol Outlook 2007-2013. <\/p>\n In the Tabs example, we moved the content of Tab 1 outside the Tab container so that unsupported clients will still see the content of Tab 1. In this example we’ll simply hide the whole unit for unsupported clients and display a separate block for fallback content.<\/p>\n The unsupported clients this time are: Outlook and Outlook.com.<\/p>\n Expanding on the capability detection technique in the Tabs example, we add a further test for the presence of forms in addition to checking for the support of the :checked pseudo class before displaying the form contents.<\/p>\n To display an alternative block of content for unsupported clients, we reverse the logic and show the alternative content by default and hiding it if support for forms and the :checked pseudo-class is detected.<\/p>\n Here’s what the fallback content will look like for our example:<\/p>\n Below is the final HTML\/CSS (link<\/a>) incorporating the fallback content. (Version with fade in effect<\/a>).<\/p>\n See the Pen xbpWzW<\/a> by FreshInbox (@freshinbox<\/a>) on CodePen<\/a>.<\/p>\n<form method=\"GET\" action=\"https:\/\/www.amazon.com\/gp\/aws\/cart\/add.html target=_new \"> \r\n<input type=\"hidden\" name=\"AssociateTag\" value=\"storeid-20\"\/> \r\n<input type=\"hidden\" name=\"SubscriptionId\" value=\"[AWSAccessKeyId]\"\/> \r\n<input type=\"hidden\" name=\"ASIN.1\" value=\"B00003CWT6\"\/>\r\n<input type=\"hidden\" name=\"Quantity.1\" value=\"1\"\/>\r\n<input type=\"image\" name=\"add\" value=\"Buy from Amazon.com\" border=\"0\" alt=\"Buy from Amazon.com\" src=\"http:\/\/images.amazon.com\/images\/G\/01\/associates\/add-to-cart.gif\"> \r\n<\/form> <\/pre>\n
\nPink: B00MUQ9DVO<\/a>
\nBlack: B00MUQ9DLO<\/a><\/p>\n
<\/p>\n
\nTry out the Image Carousel for Email Builder<\/a>.\n<\/div>\n
<\/p>\nFilling the Form Values<\/h4>\n
\n<\/span> <\/p>\n<select name=\"Quantity.1\">\r\n<option value=\"1\">1<\/option>\r\n<option value=\"2\">2<\/option>\r\n<option value=\"3\">3<\/option>\r\n<\/select>\r\n<\/pre>\n
<\/p>\nCapability Detection and Fallback<\/h4>\n
<style>\r\nform.formcheck .tabcheck:checked + .container{\r\n{\r\n display:block !important;\r\n max-height: none !important;\r\n height: auto !important;\r\n}\r\n\/* Gmail lang trick *\/\r\n* form[lang=\"x-formcheck\"] [lang=\"x-tabcheck\"]:checked + [lang=\"x-container\"]\r\n{\r\n display:block !important;\r\n max-height: none !important;\r\n height: auto !important;\r\n}\r\n<\/style>\r\n \r\n<form class=\"formcheck\" lang=\"x-formcheck\" method=\"GET\" action=\"https:\/\/www.amazon.com\/gp\/aws\/cart\/add.html\" target=_new >\r\n<input type=radio class=\"tabcheck\" lang=\"x-tabcheck\" style=\"display:none !important;\" checked>\r\n<div class=\"container\" lang=\"x-container\" style=\"display:none;height:0px;max-height:0px;overflow:hidden;\">\r\nFORM CONTENT\r\n<\/div>\r\n<\/form><\/pre>\n![\"Unsupported](\"https:\/\/freshinbox.com\/assets\/examples\/add-to-cart\/add-cart-unsupported.png\")
<\/p>\n<style>\r\nform.formcheck .tabcheck:checked + .fallback{\r\n display:none !important;\r\n display:none;\r\n max-height: 0px;\r\n height: 0px;\r\n overflow: hidden;\r\n}\r\n\/* Gmail lang trick *\/\r\n* form[lang=\"x-formcheck\"] [lang=\"x-tabcheck\"]:checked + [lang=\"x-fallback\"]\r\n{\r\n max-height: 0px;\r\n height: 0px;\r\n overflow: hidden;\r\n}\r\n<\/style>\r\n \r\n<form class=\"formcheck\" lang=\"x-formcheck\">\r\n<input type=radio class=\"tabcheck\" lang=\"x-tabcheck\" style=\"display:none !important;\" checked>\r\n<div class=\"fallback\" lang=\"x-fallback\">\r\n <table ><tr><td width=\"200\" height=\"100\" align=\"center\" valign=\"center\" style=\"border: 2px dotted blue;\">\r\n Fallback Content for Unsupported Clients\r\n <\/td><\/tr><\/table>\r\n<\/div>\r\n<\/form><\/pre>\n![\"add2cart-alt\"](\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/02\/add2cart-alt.gif\")
<\/p>\nFinal Code<\/h4>\n