Create an "Add-to-cart" button from a category page

This guide provides a high-level overview for programmatically adding an item to cart from a category page. This can be useful when customers are ready to add a subscription to cart without clicking all the way into the product page. Adding an add-to-cart feature to category pages can increase orders by making it easy to buy.

Prerequisites

This guide assumes you've already built a frequency selector drop down as part of the category page (shown below) and modified the templates > components > products > card.html BigCommerce theme file.

See Editing Stencil theme files for details.

Example code on card.html

<button type="button" class="button button--small card-figcaption-button" id="testing" onclick="ajax_add_to_cart({{id}})"> {{lang 'products.add_to_cart'}} </button>

<select id="product_{{id}}_frequency" class="rca-subscription-form__frequency-selector" style="margin-top:.5em; margin-bottom:.5em;display:none;"></select>
11541154

1. Create BigCommerce Cart

You need to programmatically create a BigCommerce cart with the desired product before you can add it as a subscription product. This should be done immediately before adding the subscription product.

Use the BigCommerce Storefront Cart API to create a cart.

Example create a cart code

createCart(`/api/storefront/carts`, {
   "lineItems": [
   {
       "quantity": 1,
       "productId": 86
    }
   ]}
)
.then(data => console.log(JSON.stringify(data)))
.catch(error => console.error(error));

Example response

{
 "id": "d4e978c2-bdcf-41b0-a49b-fecf4f5223c1",
 "customerId": 0,
 "email": "",
 "currency": {
   "name": "US Dollars",
   "code": "USD",
   "symbol": "$",
   "decimalPlaces": 2
 },
 "isTaxIncluded": false,
 "baseAmount": 274.5,
 "discountAmount": 0,
 "cartAmount": 274.5,
 "coupons": [],
 "discounts": [
    ...
 ],
 "lineItems": {
   "physicalItems": [
     {
       "id": "57a877e0-d898-47d0-910d-88656e8dee0c",
       "parentId": null,
       "variantId": 66,
       "productId": 86,
       "sku": "ABS",
       "name": "[Sample] Able Brewing System",
       "url": "https://{store_url}/all/able-brewing-system/",
       "quantity": 1,
        ...
       "extendedSalePrice": 225,
       "isShippingRequired": true,
       "type": "physical",
       "giftWrapping": null
     },
     {
       "id": "22c461a2-eff9-4b72-8d22-7c2792ce2c2d",
       "parentId": null,
       "variantId": 67,
       "productId": 88,
       "sku": "CC3C",
       "name": "[Sample] Chemex Coffeemaker 3 Cup",
       "url": "https://{store_url}/all/chemex-coffeemaker-3-cup/",
       "quantity": 1,
        ...
       "extendedSalePrice": 49.5,
       "isShippingRequired": true,
       "type": "physical",
       "giftWrapping": null
     }
   ],
  ...
 },
 ...
}

2. Create Recharge subscriptions

Once your code has added the desired item to cart, you can create the Recharge subscription.

const subscriptionProducts = RCA_DATA.RCA_PRODUCT_DATA.filter(x => x?.subscriptions?.length);
for (const product of subscriptionProducts) {
  const subscriptionData = product.subscriptions[0];
  const element = document.querySelector(`#product_${product.id}_frequency`);
  if (element) {
    const options = [];
    for (const frequency of subscriptionData.order_interval_frequency_options) {
      let unit = subscriptionData.order_interval_unit.replace(
        /\b([a-z])/g,
        function(_, initial) {
          return initial.toUpperCase();
        }
      );
      options.push(`<option value=${frequency}> Ship Every ${frequency} ${unit}${frequency > 1 ? "s":""} </option>`);
​
    }
​
    element.innerHTML = options.join("");
    element.style.display = "inherit";
  }
}
​
function ajax_add_to_cart(product_id) {
  fetch(`/cart.php?action=add&product_id=${product_id}`).then(response => {
    if (!response.ok) {
      throw new Error(response.status);
    }
    const subscriptionData = RCAInterface.bigcommerce.cart.findProductInRcaData(product_id);
    const variantId = subscriptionData.variants[0].id;
    const element = document.querySelector(`#product_${product_id}_frequency`);
    if(subscriptionData){
      RCAInterface.bigcommerce.cart.addSubscriptionByProduct(product_id, variantId, Number(element.value)).then(
        () => {
          window.location = "/cart.php";
        }
      )
    }
    else {
      window.location = "/cart.php";
    }
​
  });
}

3. Adding script to BigCommerce

There are three ways to add JavaScript to BigCommerce.

  • Wrap the code in a <script> tag and add it to your store using the Script Manager. Select Footer as the location for the script.
  • Place the script at the bottom of the product-view Stencil template file where you placed the HTML element from Step 1.
  • For advanced builds and optimized load times consider bundling JavaScript into the theme.

Need Help? Contact Us