Is there any way to remove all cart items when the user logout? I tried getting all the item ID and looping over it and calling the utils cart remove API on every iteration, but it seems it only remove the first one. Any idea about this?
Instead of looping over each item, I'd recommend calling the storefront cart API delete cart endpoint.
Removing all cart items essentially deletes the cart, so the cart winds up in the same state either way. Here's a link to a tutorial on working with the storefront cart API that might help.
Related
I'm trying to figure out how to implement the shopping cart functionality on a page using Vue.js. I get a list of items from an API call and print them on page load. But I'm stuck trying to add items to my cart. The functionality should include the ability to select a quantity of an item and add it to the cart by clicking the "add to cart" button. So it should allow, directly from the cart, to change quantities and remove items from the cart.
For this kind of situation, use a state management pattern like vuex (or pinia), and it will store your data after route change also.
For more clear context, go through this link:
https://vuex.vuejs.org/
How i can add a button on the cart page that will allow the customer to "Empty The Cart". Script will empty contents of the cart.
you could create the button in the template and use a script to call this endpoint: DeleteACart https://developer.bigcommerce.com/api-reference/store-management/carts/cart/deleteacart, to erase an entire cart.
You don't want to use the management api to do this, because that would require authentication. You need to use the storefront cart api I believe.
You would need to call GET /api/storefront/carts and get the id of the cart, and then call DELETE /api/storefront/delete/{id}.
Alternatively you could mimic the native functionality by looping through all the cart items to build a request for POST /remote/v1/cart/update.
The template file for cart in cornerstone is templates/pages/cart.html
I'm building a Shopify app which offers additional products or services related to some identified products. In some cases, I end up adding a product to cart from cart page.
I found this question quite useful, to take actions on cart changes. The issue is that I'm currently forced to reload the page to re-render the cart along with the new product. I can't reasonably reconstruct the cart myself to include new items.
Hence, is there a way to trigger an "AJAX rendering" of the cart and avoid a full page reload ?
You can achieve this in many ways depending on your end goal. From your description, I have understood that you just want your script to run on Cart page. However, just note that a user may proceed to Checkout page without visiting Cart page. So just cover all your use cases.
This would have been much easier if you had to do this in theme and not in an app. Since, your app does not have any idea about the markup of Cart page, it is not easy to just append the new product row to existing table. As a workaround, on adding new product, call the cart page via Ajax, parse the returned HTML and replace the Cart form. So after adding new product, just call the below code to re render product form on Cart page.
function RerenderCart() {
$.get("/cart", function (data) {
const parser = new DOMParser();
const doc = parser.parseFromString(data, "text/html");
const formSelector = doc.querySelector("form[action='/cart']");
$("form[action='/cart']").replaceWith(formSelector);
});
}
Add checks for cart page and if form was found in returned HTML.
This code works fine on Debut Shopify theme. Just thoroughly test it on all your use cases.
DOMParser
I'm making a custom bundle "builder" with Shopify Theme Sections for my client and I managed to add products from the bundle as Line item properties (it's easier to remove it as only one item, then as 5+ items). Now I'm not sure how to finish the order process and update the inventory of the products listed as line item properties.
How to "connect" the Cart and Checkout pages and transfer the info about the products, so it can affect the inventory after the order is finished? Should I add a hidden fields on the Cart page (for those products listed as the properties), or should I do something else (e.g. add a Private app with some hook that'll update the inventory in the background or maybe add all products to the cart page and hide them with JS and add some logic for their removal)?
Here is the checkout screenshoot as an example - https://www.dropbox.com/s/j6cu985wcpfp4t9/shopify-cart-products-as-line-item-properties.png?dl=0
Thanks in advance!
You are on the right track. You cannot do hidden products or line item properties though. Instead, when you add a bundle to the cart, add all the products in the bundle. That is how you accomplish a checkout. Tie the items together using Line Item Properties, and you can handle delete/remove/update code in the cart with JS. Since the customer would be buying products, inventory is then automatic.
You cannot escape having the customer seeing an paying for a variant ID, with a quantity and a price. Trying to hide that in a bundle will never work, although you can be creative and disguise line items as being together with good code.
I'm just setting up my first BigCommerce store, and I'd like to know if I can use their API to add products to a shopper's cart and forward them to the checkout page programmatically?
The problem I'm trying to solve is creation of bundles of products in the store. I need to have each product in a bundle show up as a separate line item and sku on the order, but BigCommerce does not natively support this. The next best thing I can think of is to send the user to a specially crafted php page that will add the constituent parts to their cart, then forward them to the checkout page.
Am I barking up the wrong tree? Is there a simple way to do this that I've missed?
You can use the Cart api to
- Create cart
https://developer.bigcommerce.com/api/v3/cart.html#post-carts
and use the created cart id to
Generate cart URL
https://developer.bigcommerce.com/api/v3/cart.html#post-carts-cartid-redirect_urls
Then you can move the user to this url