On Finding The Perfect “Add to Cart” Button

Recently I participated in a code camp at Al-Makinah where we introduce participants to the fundamentals of the front-end component of the web. I was asked to review the model answer to one of the exercises given to the students. It was simple; they take a web page written in HTML, CSS and JavaScript and improve it in a way that shows what they’ve learnt that reflects what they were taught. The exercise addressed several aspects like user experience improvement, semantics, validation of the markup … etc. It was a simple shopping cart with several products cards laid out in a grid.

I spend a lot of time writing HTML. It’s been a part of what I am doing every day for more than a decade. For me, HTML is more than just a few elements that you throw here and there; I invest a lot in picking the elements that I use. While I was reviewing the exercise, I stopped in front of the “Add to Cart” button. It was an <a> tag with a link. I started questioning myself; part of me hates the fact that this is a link not a button inside a form. It makes perfect sense to be a button. Of course it can be made anything. Simply attaching a listener that fires an ajax request updating the cart will work. But it doesn’t feel right. This isn’t semantically correct. Before I decide what the “Add to Cart” element should be, I decided I should write down the criteria addressing how this element should behave given all the possible circumstances.

Criteria:

  1. It must have the same behavior in presence or absence of JavaScript.
  2. If there are other fields like “amount,” pressing enter (submitting the form) should behave like clicking the button.

At this point I was convinced that this should be a submit button not a link. I quickly realized that this will require each product card to have a form tag with more elements like hidden input with product id for example. In big shops, the home page sometimes hosts a lot of product cards. It even uses sliders to save the space for “Newly arrived,” “Hot offers,” “Hot in category X” and the list can go on. A single page can contain more than a hundred of product cards. All this increase the amount of the HTML tags we serve to the user and increase the page size (comparing to serving a single <a> tag per card).

There is also another problem the submit button doesn’t address and it is very common. It’s the products that need you to select attributes before adding it to your cart (like shirt size or color). It’s common that these product cards redirect the user to the full details page of the product asking him to pick the required attributes in order to add the proper item to the cart. Now I changed my mind; I don’t think it’s a problem using a link for this functionality. I decided to change the first rule I mentioned earlier; it shouldn’t have the same behavior. It just should work in a way.

Before discussing the possible scenarios, I want to clarify something before getting into the argument of whether we should support users with no JavaScript or not. I believe both sides of the argument have valid points; however, there are reasons that you don’t want to lose even the smallest fraction of the users without JavaScript. We’re talking about e-commerce where conversion is translated directly into money. The solution is also pretty simple whether you decided to go with progressive enhancement or graceful degradation as you will see later on.

The available scenarios

Using button

If the product can be added directly to the cart, use button inside a form tag. It can use ajax when JavaScript is available or submit to the server directly when it isn’t (embracing progressive enhancement).

Pros:

  • Semantically, it is more accurate.
  • The behavior is similar in presence or absence of JavaScript.

Cons:

 

  • Require more code for form tag and other elements that identify the product.

 

If the product cannot be added without selecting attributes, use an anchor tag linking to the full product details page.

Using link

Use links in all cases. When JavaScript is available, hijack the click event and add the product to the cart using ajax (embracing graceful degradation). If it isn’t, direct the user to the full details page.

Pros:

 

  • Requires less HTML, just a link with data attribute for product id.

 

Cons:

 

  • The experience is different based on the presence or absence of JavaScript.
  • In absence of JavaScript, the link that says “Add to Cart” will do something completely different. It should then say “Show product details.” This might cause confusion for people using assistive technologies like screen readers.

 

How other e-commerce platforms address this issue?

I decided to review how the other popular e-commerce platforms address this issue. At robusta, we have success stories building successful big e-commerce platforms in Egypt using popular platforms like WooCommerce and Magento Enterprise Edition. I picked the popular open source e-commerce platforms available which provided a demo and a default theme. Now, bear in mind that the result of this analysis is highly based on the used theme. If you are using a different theme it is very likely that your theme uses a different markup than what I am about to show you. The default theme is important because developers use it as a boilerplate for their themes. Some platforms like Magento allow defining a parent theme and extend it to override some of its parts instead of writing everything from scratch.

Magento 2

Magento comes with a theme called Luma. It uses a button tag without a form. The button itself has some additional data attributes related to the product. As you might guess, this implementation doesn’t work except when JavaScript is available. It’s worth mentioning that Magento 2 utilizes RequireJS to split JavaScript into modules. Luma theme by default loads 119 JavaScript file in the homepage alone. With Magento, JavaScript bundler merely seems to function properly; there is a big chance for failure at any point (by network timeout, server failure, slow internet connection,…etc.). It’s disappointing to see the e-commerce giant uses an inaccessible solution that only works with JavaScript.

WooCommerce

The number 1 WordPress plugin for e-commerce really shines with its implementation. It uses a link that directs to the current page with the query string “?add-to-cart=id”. When JavaScript is available, the product is added to the cart using ajax. When it’s absent, WooCommerce handles it in a way different than the scenarios I mentioned before. The product is added to the cart and the user is redirected to the same page again with a success message on top. WooCommerce says “Add to cart” and it delivers what it says exactly with no confusion. When the product requires picking attributes, it redirects the user to the product details page.

OpenCart

OpenCart uses a button without a form that has an onclick attribute. It requires JavaScript to work. When JavaScript is available the product is added to the cart. If the product requires selection of attribute the same button redirects the user to the full details page.

VirtueMart

Perhaps this is one of the least known e-commerce platforms but it is well known across Joomla community. VirtueMart uses a classic form with a button. If JavaScript is available, the experience is enhanced with ajax. If not, the form is submitted and the user is redirected to the cart page. If the product requires selection of additional attributes the button is disabled and the options are displayed to pick from inside the cart. VirtueMart embraces progressive enhancement and provides a solution that works smoothly.

osCommerce

This is an obligatory mention to the e-commerce dinosaur. From the minute you check the demo you get the feeling that you stepped back in time into PhpNuke. osCommerce doesn’t include an add to cart button in the listing. Adding the product to the cart is only available inside the full product details.

Conclusion

There are several methods to mark down the “Add to Cart” button. We should always embrace a method that guarantees the button will work then improve the experience using JavaScript.

0 thoughts to “On Finding The Perfect “Add to Cart” Button”

  1. Precio Prestamos Personales Tipo De Interes Actual Prestamo Personal Como Conseguir Un Prestamo Personal Rapido Y Seguro Creditos Urgentes Rapidos Personas Que Dan Prestamos De Dinero
    https://prestamosenestadosunidos.space/pompano-beach-fl/
    Solicitud De Prestamo Personal Online Simulador De Credito Personal Credi Rapido Credito Rapid
    https://prestamosenestadosunidos.space/east-point-ga/
    Necesito Un Credito Rapido Y Facil Prestamos Al Consumo Prestamos Urgentisimos
    https://prestamosenestadosunidos.space/franklin-nj/
    Calcular Prestamo Personal Credito 24 Horas Telefono Ver Prestamos

  2. Prestamos Con Poco Interes Prestamos Con Dni Financieras Prestamos Personales Creditos De Dinero Rapidos
    https://prestamosurgente.space/harlingen-tx/
    Prestamos Personales Online Rapidos Mini Credito Online Mini Prestamos Rapidos Online El Dinero Y El Credito Solicitar Credito Rapido Online
    https://prestamosurgente.space/corpus-christi-tx/
    Como Conseguir Un Prestamo De Dinero Con Dinero Prestamos Como Sacar Un Credito Personal Prestamos 24h Quien Presta Dinero A Redito
    https://prestamosurgente.space/lovington-nm/
    Prestamos Online Con Nomina Prestamos En Linea Por Internet Simulador Cuota Prestamo Personal

  3. Pedir Dinero Buscador Prestamos Prestamos De Dinero Inmediato
    https://prestamosurgente.space/sierra-vista-az/
    Mejores Condiciones Prestamo Personal Necesito Un Prestamo De Dinero Credito Nomina Interes Por Prestamos Personales
    https://prestamosurgente.space/abilene-tx/
    Creditos Y Prestamos Rapidos Como Pedir Prestamo A Personal Credito 24 Horas Creditos Para Pagar A Plazos Solicitar Prestamo Por Internet
    https://prestamosurgente.space/pflugerville-tx/
    Requisitos Para Un Prestamo Prestamos 24 Prestamos Baratos Prestamos Faciles Y Seguros

  4. Prestamos Con Intereses Companias De Prestamos Personales Mejores Creditos Personales
    https://prestamosurgente.space/denver-co/
    Credito Personal Que Cuenta Es Conseguir Prestamo Personal Bancos Para Prestamos Personales Donde Puedo Pedir Un Credito Simulador Prestamos
    https://prestamosurgente.space/ontario-ca/
    Prestamos Personales On Line Urgente Donde Prestan Dinero Facil Busco Prestamista Dinero
    https://prestamosurgente.space/avondale-az/
    Que Interes Tiene Un Prestamo Personal Tipos De Prestamos Personales Creditos En Linea Rapidos Informe De Credito

  5. Calcular Prestamo Mini Prestamos Urgentes De Credito Credito Al Consumo
    https://prestamosenestadosunidos.space/mount-laurel-nj/
    Prestamo 300 Euros Tipo Interes Prestamo Personal Dinero Ya Prestamos Calcula Tu Prestamo Personal
    https://prestamosenestadosunidos.space/las-vegas-nm/
    Te Presto Dinero Necesito Un Prestamo Personal Prestamos Personales Con Veraz Prestamos Todo Facil Presto Dinero Bajo Interes
    https://prestamosenestadosunidos.space/douglasville-ga/
    Calcular Cuota Prestamo Todos Los Creditos Rapidos Donde Puedo Pedir Un Prestamo

  6. Como Conseguir Un Prestamo Facil Como Solicitar Un Prestamo Creditos Para Empresas Lugares Donde Hacen Prestamos Para Prestamos Personales
    https://creditosrapidosenusa.space/ontario-ca/
    Solicitud De Credito Online Prestamos Personales Rapidos En Linea Prestamos Rapidos Y Faciles Prestamistas Privados Consulta De Credito Personal
    https://creditosrapidosenusa.space/irving-tx/
    Donde Prestan Dinero Rapido Creditos Inmediatos Por Internet Mi Primer Prestamo Cotizador De Creditos Personales Companias De Prestamos De Dinero
    https://creditosrapidosenusa.space/glendale-az/
    Mejores Creditos Personales Donde Prestan Dinero Requisitos Para Un Credito Personal Dinero A Credito

  7. Microcreditos Rapidos Online Prestamos Rapidito Consultar Credito Personal
    https://elprestamista.space/egg-harbor-nj/
    Financieras Prestamos Personales Mejores Condiciones Prestamo Personal Oferta De Prestamo Como Consigo Un Prestamo Rapido Dinero En 24 Horas
    https://elprestamista.space/thornton-co/
    Mi Primer Prestamo Creditos En Linea Rapidos Que Son Los Creditos
    https://elprestamista.space/jacksonville-fl/
    Comparador De Creditos Personales Prestamos Chiquitos Como Pedir El Prestamo De Personal

  8. Prestamo De Saldo Personal Financieras Prestamos Personales Prestamistas Prestamos Por Pagar
    https://elprestamista.space/goodyear-az/
    Dinero Rapido Y Facil Prestamos Prestamos Personales En Linea Un Prestamo Mini Creditos A Plazos Prestamo De Saldo Personal
    https://elprestamista.space/santa-maria-ca/
    Prestamos De Dinero Con Bajo Interes Prestamos Baratos Online Prestamos Al Consumo Creditos Personales
    https://elprestamista.space/anaheim-ca/
    Consultar Prestamos Personales Dinero A Credito Como Obtener Un Prestamo Rapido Gente Que Presta Dinero Prestamos Urgentes Online

  9. Donde Hacer Un Prestamo Personal Minicreditos Online Prestamos Personales Baratos Online Quien Presta Dinero Urgente Creditos Urgentes
    https://prestamosenestadosunidos.space/lagrange-ga/
    Solicitud De Prestamo De Dinero Prestamos O Prestamos Prestamos Con Dni Donde Puedo Pedir Un Prestamo De Dinero
    https://prestamosenestadosunidos.space/glendale-az/
    Prestamos Personales Prestamistas Euro Credito En Linea Pedir Un Credito Rapido Por Internet Prestamistas En Linea Tasa Para Prestamos Personales
    https://prestamosenestadosunidos.space/west-new-york-nj/
    Pedir Credito Online Financieras De Prestamos De Dinero Microcredito Prestamo De Dinero A Interes

  10. Prestamos A Pagar En Cuotas Quiero Un Credito Rapido Financieras De Creditos Personales
    https://elprestamista.space/pflugerville-tx/
    Prestamos Chiquitos Creditos Urgentes Rapidos Quien Presta Dinero Rapido Solicitud De Prestamos En Linea Todo Sobre El Credito
    https://elprestamista.space/hoboken-nj/
    Sacar Credito Prestamos Con Dni Creditos Por Internet
    https://elprestamista.space/hackensack-nj/
    Prestamos Intereses De Los Bancos Para Prestamos Personales Empresas De Prestamos Prestamos Con Pocos Intereses El Credito Financiero

  11. Tipo Interes Prestamo Personal Intereses De Creditos Personales Creditos Personales Rapidos
    https://elprestamista.space/dallas-tx/
    Donde Me Prestan Dinero Rapido Cooperativa De Credito El Mejor Prestamo Personal Sacar Credito
    https://elprestamista.space/los-alamos-nm/
    Prestamos Personales Pagos Mensuales Donde Me Pueden Prestar Dinero Rapido Consultar Credito Personal
    https://elprestamista.space/west-covina-ca/
    Necesito Un Credito Rapido Y Facil Solicitud De Prestamos Online Credito Individual Lugares Donde Hacen Prestamos Personales

Leave a Reply

Your email address will not be published. Required fields are marked *