How do I add this to my website?

[gio1135]

I'm making a jekyll site at http://cocosgoodies.com How do I add this to it? I don't see any instructions to do so.

[bradonomics]

Jekyll Cart is a fully functioning Jekyll theme. It's boilerplate and designed to be built on top of. It's based on simpleCart(js). All I did was get simpleCart working with Jekyll and added an option for email checkout.

Since you've already got a site going, first add the simpleCart.js file to your default template. Then add your options, either inline or as a separate file. You can see the one I have in the boilerplate here.

[gio1135]

Oh, OK. Thanks, mate. I'm just starting all this dev stuff so I'm trying to discover as much as possible. I'm trying to make a store type of site right now; I figured it'd be good experience. You think you could help me out a bit?

[bradonomics]

If you have specific questions, I'll do my best to answer them.

[gio1135]

So I cloned it, ran bundle install, and everything seems to work except the contact page and checkout.

[bradonomics]

...they don't work how? Are you getting errors?

I'll take a stab and say that the forms aren't working because you don't have a form provider. I've used Formspree on a couple sites. It works well, but there are others.

[gio1135]

OK, I see. I thought it was supposed to work if I just put my email in there; I see how that all works now. One last thing: I'm not that familiar with simple cart and jekyll, so what steps should I take to make it to where when I choose a size, it changes the price and when I switch colors, it changes the description?

[bradonomics]

The description change you'll need to do with plain Javascript or you can use jQuery similarly to the price example below.

For the price change you could list the prices for the different sizes and use simpleCart's beforeAdd event to update the cart. There are examples in the documentation. Or if you want to see it change as the user changes the select option you could do something like this:

jQuery('.item_size').change(function() {
  var size = this.value;

  if (size == 'Small') {
    $('.item_price').text('4.00');
  } else if (size == 'Medium') {
    $('.item_price').text('5.00');
  } else if (size == 'Large') {
    $('.item_price').text('7.00');
  }

});