apiparametersbigcommercestorefront

BigCommerce | Storefront . APIs, parameters, and more

So I am doing this project where I am required to create 2 buttons. 1 "Add All To Cart" where I can add all items from the current page to the cart, and 1 "Remove All From Cart" where it removes all the items I just added.

I was able to find and successfully install the "Add All To Cart" button. Just with a unique link and parameters, I was able to get it together. However, with the Remove button, I cannot for the life of me figure out how to remove those said items. I have currently been looking through the BigCommerce Dev Center for resources, and the closest one I believe to be the correct resource is a Delete Cart Line Item. Assuming this is the correct formula, this is the link it provides as a solution.

https://api.bigcommerce.com/stores/{store_hash}/v3/carts/{cartId}/items/{itemId}

Im new to BigCommerce, but Is it correct that I should only be changing whats inside the squiggly brackets? If so, I was able to find my store hash, and itemID, but I have not been able to locate a way to pull the current cart ID.

If you have any advice on how I can get this working, I would greatly appreciate it. Thank you in advance.

Solution

  • Any link that begins api.bigcommerce.com is a management API and cannot be used on the frontend of a Stencil build. You will want to use the Storefront cart API here to delete line items.

    And yes, the items in "squiggly brackets" will need to be replaced. The cart ID can be obtained through the Stencil context or by making a request to the storefront cart API. Cart item IDs can be obtained through the same methods.

    Assuming you are able to obtain the cart ID and cart item IDs, you can simply put them in a delete request to this relative url: /carts/{cartId}/items/{itemId}

    Run the following to get the Cart ID and the Cart item IDs:

    <script>
fetch('/api/storefront/cart', {
  credentials: 'include'
}).then(function(response) {
  return response.json();
}).then(function(myJson) {
  console.log(myJson);
});
</script>

    Reference docs: