I have problem with refreshing cart. When cart page is loading, activated is javascipt code that modify html, but when somoething in cart is updated (quantity or sth is deleted) html is refreshed and my changes disapear, so how i can detect when cart refreshing is done ?
I tried use event "cartUpdate", but it was triggered before html refresh.
I attach screen with requests that are triggered when sth in cart is updated
SCREEN
You can use a module and implement actionBeforeAjaxDie hook.
Related
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
Whenever the client clicks on the "Add To Cart" button from single product page, it simply goes to cart but cart items are not updated. It redirects to this URL /?controller=cart where all items added either from category view or grid view are there but not the one added from single product page.
I just need a hint on what might be the issue. I'm using Prestashop version 1.7.
Thanks!
It is most likely a JS error; open the browser's dev tools -> console and check the errors, you will notice them they're red.
In my liquid template I've tried to create a trigger for a click event but it seems to trigger on page load and causing more product to be added to the cart than is specified.
I admit, I'm new to shopify but can't figure why it would happen on page load...
It turned out that on this project I had to declare any selector used as a variable first.
I'm using Hotcakes Commerce DNN modules and I'd like to know how I can allow the user to stay on the product page after the "Add to Cart" button is clicked. The default behaviour is to redirect the user to the cart page whenever the a product is added to the cart.
The easiest way to make this happen is to modify your viewset to change how the add to cart buttons work. Here's a summary of the required steps:
Add and begin modifying your viewset if you haven't started already.
Modify your \VIEWSETNAME\Views\Products_ProductDetails.cshtml file to change the add to cart action from a post, to an AJAX link. This will allow you to add products to cart directly using a link, but keep you on the page.
If you're using the Mini Cart, refresh the page using JS so that it updates appropriately.
Please note that this option won't work well if your products have choices. If this is the case, you should instead allow your customers to be directed to the cart page, and use a parameter there to determine whether or not you redirect back to the product page.