Implement add to cart functionality for cms products

Ask the community
, ,
1

I’m building an add-to-cart feature for ~90k CMS items (no need to manage inventory). Creating individual Wix Store products isn’t feasible, so I’m using a single master wix store product as a placeholder. When a user adds a CMS item to the cart, I map the CMS _id to the cart line item. My custom cart page fetches CMS details via Velo and shows the correct name, image, and price.

The problem is that on the Wix Checkout page, the order summary only shows the master product name and price. I’m trying to understand what’s realistically possible:

  1. Is the master product approach scalable for this many CMS-driven items?

  2. Can CMS-specific details (cms product name, description) appear in native checkout?

  3. Can the CMS item price override the master product price in checkout?

  4. Or is a fully custom cart, checkout, and order tracking system unavoidable?

I’d like to stay within Wix native checkout if possible, but I want to make sure I’m not fighting platform limitations. Thanks for any guidance!

2

90k products is a lot indeed. The good news is that yes - you can technically have your CMS items function as products and use the native Wix checkout flow without needing to add them up in your store catalog. But the approach you have taken here isn’t something I’d advise you to go ahead with.

You’ve mentioned that you have added a single product which acts like a ‘master product’ that you are trying to update based on the items the user has chosen from the CMS. While you can technically ‘update’ the product to match the selection, that would update it sitewide - not just for this specific user. This can give rise to many unnecessary problems. Another major downside is that if a user selects two different products from the CMS, lets say Item A & Item B, your current approach would ‘bundle’ these as one single product - Items A & B. That’s how it would reflect on the dashboard, shipping label, as well as the invoice. Not the best approach, you see.

But the good news is that there is a solution that will allow you to achieve exactly what you’re aiming for, that too - without any of the issues that your current approach would have, and that is - using Custom Line Items.

To achieve this, you need to make use of the createCheckout() function in the backend and pass the CMS items that the user has added to the custom cart, including the product’s name, image and quantity inside of the customLineItems parameter of the options object. This will require elevated permissions, so you will have to elevate the function using auth(). The response will contain the ID of the checkout that was created, which you can then return to the frontend and use it to navigate the user to the checkout page. This will make use of the native Wix checkout flow where the user can pay and place their order - and you will see that reflect on your Order dashboard, just like any other regular order that comes through.

This approach will resolve the doubts that you have raised, and is the one I’d recommend you to go ahead with.

2 Likes
3

Hello,

Thank you so much for your guidance and for sharing your expertise. I really appreciate you pointing me in the right direction and clarifying the limitations of my current approach. I will work on implementing the custom line items approach you recommended.

1 Like
4

Hi Pratham,

I’m currently working on the createCheckout implementation as you suggested. However, I keep running into a ‘Failed to create Wix order: Expected an object’ error when passing my customLineItems. It seems the API is very sensitive to the structure of the price and product name fields.

While trying to debug this, I also came across the Custom Catalog (Catalog Service Plugin) approach. Since I have 90,000 fixed-price items in my CMS, I’m wondering:

What do you recommend between sticking with createCheckout and switching to the Custom Catalog (SPI)?

6

That’s expected behaviour. No matter what API you use, you will have to follow the structure that it requires, or else it is not going to work.

In case of the createCheckout() fucntion, you need to pass an options object with minimum required fields. Take a look at the example below:

var options = {
  "customLineItems": [
    {
      "itemType": {
        "preset": "PHYSICAL"
      },
      "productName": {
        "original": "Test Product" // Product Name
      },
      "quantity": 1, // Product Quantity
      "price": "50", // Product Price
      "media": "wix:image://v1/044fd158f4c9e796c4a4793e605b08bb.png/Plain%20Yellow%20T-Shirt.png#originWidth=848&originHeight=758" // Product Image
    }
  ],
  "channelType": "WEB"
}

Here’s a demo that I have created to show how this works:

Custom CMS Checkout Demo

This approach allows you to use your own custom cart page, and then proceeds to the native Wix checkout. However, along with the native Wix Checkout, you also want to use the native Wix Cart functionality, then yes you can use the eCommerce Catalo Service Plugin to achieve this.

This might be slightly more difficult to implement, but these tutorials by @thewixwiz should help you get an idea on how to use it:

2 Likes