# Product structure for Ecommerce functionality

**URL:** <https://community.weweb.io/t/product-structure-for-ecommerce-functionality/9903>\
**Category:** How do I?\
**Created:** [July 24, 2024, 7:10am UTC](https://community.weweb.io/t/product-structure-for-ecommerce-functionality/9903 "2024-07-24T07:10:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![chaefner](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/chaefner/32/9652_2.png) [@chaefner](https://community.weweb.io/u/chaefner)\
**Post date:** [July 24, 2024, 7:10am UTC](https://community.weweb.io/t/product-structure-for-ecommerce-functionality/9903/1 "2024-07-24T07:10:41Z")

</div>

I am planning to create an ecommerce functionality in WeWeb with

- products
- variants of products
- cart

 ![Bildschirmfoto 2024-07-24 um 09.05.08](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/ea28828bb10f56a6ab035ed5b9121b9311ec6bcc.png)

I don’t have many products, but the variants make it a little tricky for me.  
For the cart, I found [this awesome explanation](https://community.weweb.io/t/add-to-cart-button/866) by @dorilama.

My question is about how to manage products and variants best.  
Let’s say I sell T-Shirts with a product structure like this:

- Shirt A with Size S, M, L and colors Green and Blue
- However, color blue is only available in sizes S and M, but not L.

In my thoughts, I see the requirement to work on a **variant level** when it comes to cart functionality.  
Each variant has

- a variant ID
- Size
- Color
- Quantity
- Reference to main product (e.g. Shirt A)

Each combination of options is a separate variant ID, which can make the product list quite long.

In WeWeb, I only want to display the Shirt-level (Shirt A, Shirt B, Shirt C, etc.) in a grid or list, with an option to select and switch between variants (via Dropdown button).

Here is where I’m stuck right now, and I see two options:

1. I create a collection with **all** variants from **one product table**. But how do I filter this list in WeWeb, so that the grid only shows the shirt level (Shirt A, B, C, etc), and not all variants?
2. I create 2 tables (in Xano), one with products (shirts A, B , C) and another one with variants (with colors, sizes, quantities). This way, I could easily display the product level in WeWeb. But how do I “combine” the product with the dropdown options (variants)?

This is how I would like to display a product

- with the Title and description
- with selectable variants

 ![Bildschirmfoto 2024-07-24 um 09.16.14](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e1375314a58722c17fa779d23bb7abe7092cb70a.jpeg)

But in a datagrid:

 ![Bildschirmfoto 2024-07-24 um 09.20.33](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d8c4e719c6ea2c31ab0082de7c12a8a3f896e0c2.jpeg)

Grateful for any help on this 🙏

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [July 24, 2024, 7:50am UTC](https://community.weweb.io/t/product-structure-for-ecommerce-functionality/9903/2 "2024-07-24T07:50:26Z")

</div>

What you probably might want to do is the opposite, instead of fetching all of the variants of the shirts, you might wanna fetch the shirts with a nested array of all the variants that shirt has. So it would be something like this:

```auto
[
  {
    "id": 1,
    "name" : "Fancy shirt A",
    "variants" : [
        { "id": 1, 
           // Color, Quantity etc. here
        },
        { "id": 2, 
           // ...
        }
      ]
    }
]

```

By doing it this way, you’ll also be able to simply input the `variants[]` (array) into the select dropdowns that you have in your Figma Design.

For the design (if the variants will be common for each item, or at least shared between multiple items) you might want to go with a design like this (I think Shopify has it like this - as far as I know from client projects).

 ![Screenshot 2024-07-24 at 09.47.24](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e12844349041a88c61625b808086802d7f07fbf1.png)

In case of having variants dictated for each product, without them being shared betwen each other, you can do it like this.

 ![Screenshot 2024-07-24 at 09.49.17](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c86051a107a0ceffa9eaf100a022cf8d73f7a025.png)

---

<div class="post-metadata">

**Author:** ![chaefner](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/chaefner/32/9652_2.png) [@chaefner](https://community.weweb.io/u/chaefner)\
**Post date:** [July 24, 2024, 9:55am UTC](https://community.weweb.io/t/product-structure-for-ecommerce-functionality/9903/3 "2024-07-24T09:55:13Z")

</div>

> [@Broberto](#):
>
> What you probably might want to do is the opposite, instead of fetching all of the variants of the shirts, you might wanna fetch the shirts with a nested array of all the variants that shirt has.

Good idea. I did that and it works well. Thanks 🙏

I was able could bind the items to the product grid flexbox and display the name of the variant 0 in the selector, and the variants (that are not 0) in the dropdown list of the product. So far so good.

Now, I’m stuck with another step.  
Since the “add to cart” action (grab variant and post it into a “cart database”) needs to know which variant is currently selected, I would need some extra variable per product in WeWeb.

Question:  
Is there any way I can create a variable (e.g. active\_variant) as a nested element in the product array, so it repeats for each product?

If this is not possible, I would have to create as many global variables as there are products, where each variable holds the selected variant for one specific product. This variable object would update once a new variant is selected from the dropdown list. Since I only have 10 product, this would still be an option. But I’m not sure if this is the smartest way.

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [July 24, 2024, 10:39am UTC](https://community.weweb.io/t/product-structure-for-ecommerce-functionality/9903/4 "2024-07-24T10:39:42Z")

</div>

I think this should be doable in more than one ways. You could:

1. make a global variable, which could hold the whole state of your “front-end” cart before you send it to Xano and get it checked.

2. you could add it to the item as you mentioned, but this might require some little tinkering.

I usually go over these kind of things [on 1:1 meetings with no-coders / founders](https://broberto.sk/consult) like you. Maybe that is something you might be interested in. I see a lot of people benefiting from the more face ti face personalized approach.

---

<div class="post-metadata">

**Author:** ![chaefner](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/chaefner/32/9652_2.png) [@chaefner](https://community.weweb.io/u/chaefner)\
**Post date:** [July 24, 2024, 12:46pm UTC](https://community.weweb.io/t/product-structure-for-ecommerce-functionality/9903/5 "2024-07-24T12:46:13Z")

</div>

Awesome, thanks. I’ll get back to you with a call booking when needed.

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [July 24, 2024, 1:00pm UTC](https://community.weweb.io/t/product-structure-for-ecommerce-functionality/9903/6 "2024-07-24T13:00:49Z")

</div>

I’ll be looking forward to e-meet you! And of course, talk around here 🙂