Product variants are not working - can't add to cart

Is anyone else experiencing products that have default options not working and also when trying to add to cart, you get the error ‘Please select an option in each set.’
Currently this is happening to 2 ecommerce site in webflow and I havent seen anything in the Status page about the issue.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2 Likes

Hi yes, running into the same issue here. I created 2 different test sites to replicate this bug.

Working: https://test-29e882-a7f9f63822d41a7d4d8fc2ac0d2.webflow.io/subcategory/test
Not working: https://test-29e882.webflow.io/subcategory/test

The only difference is one site has over 100 products on the site while the other only has 10. However, both collections have less than 10 items in them.

To repro do the following:

  1. Create a collection
  2. Create 100+ products
  3. Add 5-10 products to the collection
  4. Go to the collection page
  5. Try adding items to the cart, you’ll run into the error

To workaround the error:

  1. Remove products and make sure you have less than 100 products on the site and you’ll see the issue is fixed.

Obviously this work around is not viable at all for production sites but serves to illustrate the issue. For those who are more engineering savvy, you can see the error is being thrown in webflow.js on the following lines where selectedProduct is null. There should be a null check there, the store isn’t being properly updated with the SKU map:

        var items = (_ref4 = data === null || data === void 0 ? void 0 : (_data$database4 = data.database) === null || _data$database4 === void 0 ? void 0 : (_data$database4$colle = _data$database4.collections) === null || _data$database4$colle === void 0 ? void 0 : (_data$database4$colle2 = _data$database4$colle.c_sku_) === null || _data$database4$colle2 === void 0 ? void 0 : _data$database4$colle2.items) !== null && _ref4 !== void 0 ? _ref4 : [];
        var products = (_ref5 = data === null || data === void 0 ? void 0 : (_data$database5 = data.database) === null || _data$database5 === void 0 ? void 0 : (_data$database5$colle = _data$database5.collections) === null || _data$database5$colle === void 0 ? void 0 : (_data$database5$colle2 = _data$database5$colle.c_product_) === null || _data$database5$colle2 === void 0 ? void 0 : _data$database5$colle2.items) !== null && _ref5 !== void 0 ? _ref5 : [];
        var selectedProduct = products.find(function (product) {
          return product.id === productId;
        });
        var productType = selectedProduct ? selectedProduct.f_ec_product_type_2dr10dr.name : 'Advanced';
        var selectedItem = items.find(function (item) {
          return item.f_product_.id === productId;
        }); // build the possible sku values for the given product
        // since all items have the same sku values, we just use the first
        // then we iterate over the skus, and create an object of [propertyId: string]: ''
        // to represent that by default, no property has been selected yet

        if (event.detail.isInitial && selectedItem.f_sku_values_3dr && selectedItem.f_sku_values_3dr.length > 0) {
          var skuValuesMap = selectedItem.f_sku_values_3dr.reduce(function (map, sku) {
            map[sku.property.id] = '';
            return map;
          }, {});
          updateStore(instanceId, {
            skuValues: skuValuesMap
          });
        }

This seems like an issue related to new updates to the CMS system with the membership + variants codebase.

1 Like

I’m having the same issue. And for some reason, products that are out of stock are only displaying that information once someone tries to add to cart. Please help.

Hey everyone, this is a known issue and the fix is on its way. I’ll respond back here when the fix is live so that I can get verification that your sites are working properly.

Also check https://status.webflow.com for status updates.

Adding variants to carts should be working again. Please let me know if your site is still experiencing issues.

Support blamed our custom code on the sites.

@matthewpmunger This is still not working. No one can buy on our sites still. We have had contact from customers trying to buy, telling us our site is broken.
The issue:

  1. The default option for products is not preselecting.
  2. You can not select an option
  3. You can not add to cart because the error ‘Please select an option in each set.’

Hey @mark-joncheff can you try republishing the site and see if that resolves the issue. Let me know.

@matthewpmunger Yes the issue is now resolved. I had to publish the site to see the fix.
Just to note when I first contacted the support team about this issue the response was that it was my site that was the issue because we have custom code. Just a blanket blame. It took hours for weblfow to acknowledge this major issue. Also when I replied back to that support member about trying to get some more details I never got a reply to my questions.
I’m someone that wants to and is currently building an agency on Webflow as a core offering but every week my confidence is lowered. I hope to see some focus on ecommerce.

@mark-joncheff that definitely sounds frustrating. We are currently debriefing on the incident and will also figure out what happened around your support ticket with the goal of improving the process moving forward. What happened is far from ideal.

1 Like

I am experiencing the issue on my site. Here my read-only link: https://preview.webflow.com/preview/macarenaflowers?utm_medium=preview_link&utm_source=dashboard&utm_content=macarenaflowers&preview=dce5bddd2ce6a297344d64a77a55cbdc&workflow=preview

Default option is not preselected. @matthewpmunger

Hey @adalmagro please submit the issue directly support. It is likely we’ll need to investigate and discuss your private account details. Could you please contact our Customer Support Team at support@webflow.com?

One of our Customer Support Team Specialists will be able to investigate and respond via email! Thank you so much!

I’m facing a special issue on my product page “Please select an option in each set.”:

https://velia-production.webflow.io/product/the-velia-ring

I use a script to use images and button to fill informations about the variant.

image.png

When you click on images or orange button the selection update but we can’t order, but when you click directly in dropdown it works.

Did you ever see it ? Is there any solution ?