Support

This article describes the steps to manually add a one time product add-to-cart button to your Cratejoy hosted site. This can be done in a way that takes the shopper directly to the cart, or in a way that just adds the product to the cart without taking them there. This process requires knowledge of HTML/CSS and JavaScript. If you aren't comfortable with custom coding, we have recommended designers who can help you out! Please note that Cratejoy Support can not assist with custom-coded solutions.

Adding an add-to-cart button that takes a customer directly to the cart:

To do this, you will need the product ID and quantity.

You can get the product ID easily by navigating to the specific product in your merchant portal, and grabbing the ID from the URL. You'll get something like this: https://my.cratejoy.com/product/91801160/ecommerce, where 91801160 is the product ID number.

Once you have this information, you can use the code below to add the button to your page. You will edit the values to reflect your existing product:

<div class="form-group">
  <form action="/cart/add" method="POST">
    <input name="quantity" type="hidden" value="1" />
    <input name="product_id" type="hidden" value="91801160" /> 
    <input name="product_name" type="hidden" value="Red Hat" /> 
    <button class="add-button" type="submit">Add to Cart!</button>
  </form>
</div>

Adding an add-to-cart button that lets the customer stay on the page:

If you want the button to add the product to the cart but let the customer keep browsing and shopping on the page, you'll then need to use JavaScript.

First, you can drop the form elements from the previous example and instead use the code format below:

 <input id="productQuantity" type="hidden" name="quantity" value="1"/>
 <input id="productId" type="hidden" name="product_id" value="91801160"/>
 <input id="productName" type="hidden" name="product_name" value="Red Hat"/>
 <div class="cta" id="addit"><a class="getstarted-button">Add to Cart!</a></div>

$("#addit").click(function(){
  var productId = $("#productId").val();
  var productName = $("#productName").val();
  var productQuantity = $("#productQuantity").val();
  var data = {
    'product_id': productId,
    'product_name': productName,
    'quantity': productQuantity
  };

  $.post("/cart/add", data, showDone);
 });
 
 var showDone = function() {
  /* Make something happen here*/
 }