Description : Hello I am developing Online food ordering site. I have almost completed the project but i am stuck at shopping cart..
Problem: I am facing problem when i delete the item from the cart which i have selected the page is scrolling up when i delete item from the cart.. I am using AJAX to add and delete items from the cart.
What will be the possible solution so that page do not scroll up when i delete the item from cart.??
You can check out here is the link : http://gogaily.com/restaurant_details.php?hotel_id=14 after page redirects click on MENU tab to view Menu items ... When u click on Menu items Cart will be displayed ,once u delete the item from cart Page scroll up.. How to avoid the page getting scrolled up.
That’s because you are using a link element with href="#" – the empty hash gets treated as “scroll to top” by browsers.
You simple have to suppress the “normal” link functionality after executing your JS code – keywords are event.preventDefault or return false (the latter for “traditional” event handling.
I think you have used anchor tag in delete button. ie.
<a href="#" ...>Delete</a>
something like this. Do it with
Delete
or use button i.e.
<button ...>Delete</button>
Hope you problem will be solved.
Replace href="#" with href="javascript:void();"
Related
I have created a product page using Woocommerce elementor widgets and I would like to better control the behaviour of the “add to cart” button (class="single_add_to_cart_button button alt wp-element-button").
Since I only have 1 product to sell, I placed the products and the cart widgets on the same page.
What I would like is that when I press on “add to cart” (ajouter au panier, in french), the user gets redirected to the bottom of the page (where the cart is). I have placed an Elementor menu anchor there (with CSS ID #shop) but I can't redirect the button to the anchor.
I believe I will need to write a PHP function but my understanding is way too limited unfortunately.
Thanks for your support,
C.
I tried using the "WooCommerce Add to Cart Custom Redirect" plugin (as suggested in this thread), which works such that the user gets redirected to the cart but by reloading the page. What I want is that the user stays on the same page and pressing on "Add to Cart" just slides down to the bottom of the page.
My advice would be to use jQuery, and a click handler with scrollIntoView(). The code could be inserted everywhere after the 'add to cart' button and the jQuery link tag, even to the bottom of the page as a simple script tag. It would look something like this:
$(document).ready(function(){
// binding a click event to the button remotely
$(".single_add_to_cart_button").click(function(){
// scrolling to element '#shop'
$("#shop")[0].scrollIntoView();
});
});
PS: for adding the script, you can easily add it using Elementor's html- or custom code blocks.
EDIT: If the above solution does not work, then the problem might relates to Woocommerce constantly changing its DOM everytime a JS event runs that has something to do with the said part. Because of this, binding click handlers will not (or rather, not always) work, and setting a handler for the EVENT itself seems to be a better way:
jQuery(document.body).on("added_to_cart", function() {
jQuery("#shop")[0].scrollIntoView();
});
The Javascript/jQuery events can be found here.
Important disclaimer, when the above code don't work out of the box:
For others who might experience the same issue, by default Woocommerce does a full page reload upon add-to-cart event, hence the JS event never takes place. If you enable add-to-cart with AJAX in WC settings, you'll get the JS event too.
(source at the comments)
I have a site.com/ and e-shop on site.com/b2b/ (site.com/b2b/index.php)
Products are listed on e-shop and if I click a button Add to Cart on any product, buttons text changes to Added and AJAX request sends data and updates Shopping Cart.
Now here is my problem.
If I close the browser, reopen it, start it in Incognito Mode (I can reproduce without IM, but just to be extra sure) and go directly to site.com/b2b/ in the URL bar, EVERYTHING works correctly.
But,
if I close the browser, reopen it, start it in Incognito Mode, go to site.com, and then click a link to site.com/b2b/, clicking the button Add to Cart on any product, changes the button text to Added and it visually updates the Shopping Cart to Amount of products is 1 and temporarily adds text Product Added to Cart, but the price is still 0.00.
Then if I add another product by clicking Add to Cart, it again visually updates Shopping Cart along with the temporary text, but the amount of products is still 1 and price is still 0.00.
Regardless of this last step, if I refresh the page, the Shopping Cart is empty and button texts on product are reseted to Add to Cart.
Now the horcrux of the whole story (sorry for being so verbose).
If I click the on-site link to the same URL (site.com/b2b/), which is visually the same as refreshing the page, but SOMETHING MUST HAPPEN in the back, then (of course Shopping Cart is still empty, but) EVERYTHING WORKS NORMALLY AGAIN.
I can add product and they are saved in Shopping Cart even after refresh or clicking any links the same site or any other site in the same site.com/b2b/ directory.
If anyone has ANY insight, I would be immensely grateful.
I am building a food ordering website like FoodPanda as a project. Now among all pages , I have my order screen which will have two parts. On one side it will show the food items , clicking on which will add the items to my cart and on the other side I will show my cart. Now, what I want to do is I want to show the items added on my cart as soon as I press a button which will add them and show it in the same page without refreshing the webpage. How do I achieve this?
You'll be using JavaScript and Ajax for doing this. When some user click on a product to add it to the cart you'll need to send a post request with product details to a PHP script from where the item will be added to the cart and some result is returned. The returned result can be used for making decision of whether the item was added to the card successfully or not. If it is, you can add the item on the cart side using the JavaScript.
I want to adjust the number of products displayed in cart popup list in prestashop. If I bought too much products. The popup menu will be very long. I already disable the pics. Like below:
And if I add a new product, its pic is still there. After I refresh the page the pic is gone.
All I have done is to disable the code in blockcart.tpl
{*<a class="cart-images" href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'cart_default')}" alt="{$product.name|escape:'html':'UTF-8'}" /></a>*}
So I have 2 problems:
How to limit the number of products displayed in cart list in prestashop?
How to solve the bug in the cart?
Right, the image problem:
Open your /themes/%your_theme%/js/modules/blockcart/ajax-cart.js file, and look for displayNewProducts function. You will need to comment the line that displays the image, just look for img tag and you'll find it.
It displays the image because on page load the cart block is rendered via PHP/Smarty, however, when the contents change or any other action on cart block is detected, the list refreshes via javascript. Which is why initially you don't see a picture, but then it shows up when you add a product.
As for the limit - I am not sure, is this legal to hide ordered products? I mean, I know that when you navigate to the actual cart you'll see them, but it's illegal in some countries (including mine) to hide the ordered items from the customer. Maybe consider making the product list scrollable - this way the products will still be there, but they won't take up too much space.
Option one jump into code and change the "limit" in the query
option two do some css by limiting the max height of the cart product container div and scroll if overflow.
Maybe use some jQuery to limit the amount items visually in the cart.
The picture problem is because you are using PHP, it won't be constantly running, only on page load so that's why you need to refresh to remove the image, change to JS/jQuery with this as well and it will remove the image once the cap is reached automatically without needing to reload.
I seem to have fudged something up and I cannot click on the orders in my admin sales>orders grid in Magento 1.5
I cant even click to go the next page...
Here is the overview grid link:
http://www.thatsmytopper.com/index.php/manage/sales_order/index/key/3686900bdbffc7eead3a4283a269ac33/
When I click on the arrow to go to page 2 I get the same link with a # symbol at the end.
I can view the orders if I click view on the right hand side of each order but the row cannot be clicked on like it used to do.
Any help?
May not be logged in with the necessary permissions to click through.