Streaming live at 10am (PST)

Add to cart button not working


#1

Hi everyone,

I am building out my first eCommerce website and I wanted to test if the add to cart button is working properly. So I clicked on the preview button in the designer and clicked on the add to cart button. I got a notification that this feature needs to be tried on the live site, basically. So I published the site to a webflow.io domain, and tried it out, but it doesn’t work. When I click on the add to cart button on the product page, it just reloads the product page and that’s it, nothing gets added to the cart. Also, isn’t the cart supposed to show a zero when it is empty? It is just blank, no numbers in it, but it did have numbers in the designer. Can someone shed some light on what is going on, if I am doing something wrong or maybe I missed something in the setup, or does this actually only work when the website is actually hosted with a custom domain?

Thanks in advance


#2

Hey @VladyRahn make sure to use https to preview e-commerce features because ssl is required to use the cart.

Try that and let me know.


#3

Hey @matthewpmunger, thanks for your help. I just did that, and the cart now shows a zero since it is empty, but clicking the add to cart button still doesn’t add anything to the cart. No idea what is wrong. Do you know what else could going on?

What I don’t understand is, I clicked on the little arrow right beside the publish button in the designer which opens the live website, why wouldn’t it take straight to the URL with https in it, especially since I am trying out an eCommerce website? Wouldn’t that make sense?


#4

@VladyRahn If you can post her or direct message your read-only link and published link, then I’ll gladly take a look at it later when I get to my computer.


#5

Thanks so much for your help @matthewpmunger, really appreciate that. Here is the read-only link:

https://preview.webflow.com/preview/wallys-bullys-ecom?utm_source=wallys-bullys-ecom&preview=22703db2a7b8e3d1909e7d0e18b6e276

And here is the link to the published site:

http://wallys-bullys-ecom.webflow.io/

Please keep in mind that the website is still work in progress and I am also new to this, and loving it, this is my first customer project. Would love to hear from you if you would have any suggestions for what I maybe should improve.

Can you also double check if you can see another issue that I am seeing. On actual mobile devices like my LG G7 ThinkQ and my wife’s iPhone 8+, the hero background images show as tiled for some reason even though I canceled all tiling functions in the designer. Any idea what the issue might be?

Thanks again, really appreciate your help.


#6

Hey @matthewpmunger, I was just working on my website and I remembered that you said that ssl needs to be enabled. I also remembered that they recently enabled ssl for non hosted staged/published sites for new projects, but I started this project before this update. So I double checked the updates post on that and turned on ssl for this site, so now it automatically goes to the full URL including https://. Awesome. So I went on the website in hopes that everything will work properly, but the issue is still there. Just wondering if you already had a chance to have a look and if you found anything? That would be greatly appreciated. Thanks in advance


#7

Hey @matthewpmunger, is this why I cannot check the checkout process?

If that is the case, then how are we, the designers and developers supposed to test if the process works without getting paid hosting? In my humble opinion I think I should be bale to check the process all the way to the payment part of the process, or is that actually the case and I missed something?


#8

Hi @matthewpmunger, @PixelGeek looked at this on his YouTube stream tonight and there is a bug. Here is the stream: https://www.youtube.com/watch?v=uBs6lzM8dwQ

What do I do now? Should I rebuild the page or do I need the Webflow staff to look at this? Maybe @Brando can give a suggestion?


#9

Hey @VladyRahn

I’m not seeing why the cart isn’t adding products. The “enable checkout” is necessary to use the Checkout and Order Confirmation pages. The cart should function with this toggle disabled.

As for the hero background image, on the homepage, I’m not seeing the image tiling on a iPhone 7+. If you’re still having issues, try separating the gradient overlay to its own div using z-index and position:absolute.

Hopefully the staff will be able to help you figure out the cart issue.


#10

Hi @VladyRahn

Yes you’ll need to ensure the Enable checkout is turned on.

I’m testing this now further with the team, but in the mean time an you please try these steps:

  1. Delete the cart
  2. Add a new “Add to cart” widget
  3. Add back styles as needed
  4. Publish

Can you let me know if that fixes the issue?


#11

Thanks so much for getting on this @brando, really appreciate that. I have actually recently done that, after I had the problem that I couldn’t add additional cart symbols to my site and created a topic on that on this forum. One of the webflow staff members has suggested that some e-commerce feature has been worked on and it effected the cart so I deleted the old cart symbol, created a new one and replaced all carts on the website. That was maybe a week or two ago I believe. Should I do that again since I have recently done that?


#12

Hi @VladyRahn

My pleasure to help. In this case, your cart is working as expected. Recreating it ensured you had the latest version of the widget which fixed the issues there.

This issue is actually with the Add to cart button on you product page. To fix this you can:

  1. Go to the product apge
  2. Delete the Add to cart widget
  3. Open the add panel and add a new Add to cart
  4. Style as needed
  5. Publish

This will fix the current issue you’re having, but there’s no need to edit the Cart :slight_smile:


#13

Thanks so much @Brando, that fixed it! It is now adding the products to the cart. Awesome:+1:

So to test the rest of the checkout process I have to get paid hosting for this website or is there another way to enable checkout so I can test the rest of the checkout process?

Thanks in advance


#14

Hi @VladyRahn

At this point you’d need to purchase an ecommerce plan. :slight_smile:

Of course, if you run into any issues where this doesn’t work how you need it to, feel free to contact our support team and, if you no longer plan to use the ecommerce feature, we can always credit that money back.


#15

OK, thanks so much, really appreciate your help