Carrito de compras simple con jQuery Minicart, html y paypal

DESCARGA : Minicart

Carrito de compras simple con jQuery Minicart, html y paypal, Minicart es un plugin de jQuery que integra de forma rápida un carro de compras sin necesidad de usar ningún lenguaje de programación del lado del servidor, en pocas palabras funciona solo con jQuery, se integra de forma muy simple ya que aprovecha la ayuda que paypal brinda “Envio de datos mediante el método post”, sin duda una gran utilidad a la hora de vender productos por internet sin la necesidad de conocer a profundidad el entorno para esta plataforma de pago.

Este plugin se basa en el uso simple de Paypal: https://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/web-accept-to-sc-button-outside

Enlace del plugin con desmotración: http://minicartjs.com/
Enlace de la documentación: https://github.com/jeffharrell/minicart#customization

¿Como se implementa? y ¿que necesitas para implementar este plugin?

1.- Incluir los archivos js, tanto de jQuery y minicart.js

<script src="//cdnjs.cloudflare.com/ajax/libs/minicart/3.0.6/minicart.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2.- Crear los elementos html que contendran la informacion de compra “Productos”, en este caso puedes implementarlo en tu proyecto HTML simple.

<input class="item" type="button" value="200" data-description="Película de Ironman " data-title="ironman II" />
<input class="item" type="button" value="150" data-description="Película de Ironman" data-title="ironman I" />

3.- Posterior a eso implementar mediante un script la creación del carrito de compras


paypal.minicart.render();

4.-  Crear los observadores de eventos tanto del botón ver carrito y el botón agregar a carrito


$('#viewcart').click(function (e) {
e.stopPropagation();
paypal.minicart.view.show();
});
$('.item').click(function (e) {
e.stopPropagation();
paypal.minicart.cart.add({
business: [email protected]',
item_name: $(this).attr("data-title"),
amount: $(this).attr("value"),
currency_code: 'USD',
});
});

Puede interesarte