Limit datastore quantity based on database quantity

[scott]

I am having some difficulty limiting the datastore quantity based on the value in the database.

As you can see in the video below, I have set up a page that has the cart and the add quantity and subtract quantity buttons show as intended. The issue is stopping the add quantity button from showing once the quantity in the database has been reached.

Product Test has a database quantity of 1, so no add or subtract buttons are shown.
Product Test2 has a database quantity of 10, so the add button should only be shown once the datastore quantity reaches 10.

Screen Recording 2024-03-02 at 3.03.37 AM

I have a server connect on the page that retrieves the quantity from the database. It returns the values of “prd_id” and “quantity”.

For the add quantity button, I have set up a Dynamic Attribute “Hide” with the following:

The “Hide” looks at the “prd_id” from the datastore to the “prd_id” from the server connect and if they are equal THEN looks at the “quantity” from the datastore to see if it is less than or equal to the “quantity” from the database.

I feel like there should be some sort of refresh for the button, I am just not sure how to go about it.

I realize that right now with there only being a couple entries in the products table, the server connect is not an issue, but as the list grows, this could become a problem. However, I am not sure if there is a better way to go about doing it.

[scott]

Any suggestions on how to properly resolve this ?

[famousmag]

Hey @scott,

Are you sure that the limit value and the prd_id from the serverconnect are correct?
You used the [$index]?

1. Can you show the actual code for the hide attribute?

2. I would output these values from the serverconnect in the cart so I’m sure they match
   

   

[scott]

Hey @famousmag!

I actually did not use $index, I am not as familiar with its use as maybe I should be.

Here is the code for the hide attribute.

The server connect is a simple database query with no filters or restrictions so it is returning every item in the product table (confirmed results via the Network tab).

[famousmag]

So, as far as I can understand, you have a serverconnect that pulls all the products from the database.
Correct?

If yes, with [0].prd_id or [0].prd_quantity you get always the first record (product)…

I don’t know even if we assign the [$index] there it would work…
Because:

1. in your cart you have 2 products but in your database you may have 2000
2. even if all the products of the database are added in your cart, you don’t know the order they appear so the [$index] wouldn’t much.

So, If I had to do that, I would:

1. add a DataView in my page, define the serverconnect as its Data source
2. place it inside the cart repeat
3. filter the Dataview based on the cart.prd_id (DataView.prd_id==Cart,prd_id)
   So, every row will have the data (prd_id and prd_quantity) of the database available to use in the hide attribute of the add button
4. adjust the above code of the hide attribute to:
   dmx-hide="(Cart.prd_id==DataView.data[0].prd_id) && (Cart.quantity==DataView.data[0].prd_quantity)"

*replace “DataView” with the ID that you will assign to your DataView component…

**we ASSUME that NO DUPLICATE prd_ids are allowed in your Cart

[scott]

Thanks @famousmag!

The main issue I can see just by reading the recommendation is that I have the cart inside a responsive table. While sort of a repeat, I am not sure it is the type of repeat you were meaning.

I’ll give it a shot and see if it works after I finish a few more things in another area.

[famousmag]

Here is an example with tablerepeat:

I place the DataView in a row (td) with class="d-none" so it doesn’t affect my display…

And I use it for my fields inside my table.

[famousmag]

Sorry,
A row, a class and inside the dataview as you can see…
Both row (tr) and cell (td) have a class of "d-none"

(i have to go to bed… If you haven’t solve it, drop a screenshot of your table here and I can help you in 6-7 hours)

[scott]

Unfortunately, that did not work. What appears to be happening is that the quantity number is getting confused between the various products, which effects how the button is shown and not shown.

@Teodor any thoughts on how this can be accomplished?

What I am needing to accomplish two checks:

1. Client side that checks the quantity in the datastore against the quantity available to ensure that a client can not purchase more than the available stock.

2. Server side check to ensure two clients are not purchasing the same item in a combination that would result in an order more than the available stock.

On thinking about it this overnight, perhaps it might be better to reduce the stock number every time a client adds the item to their cart and then increase the stock when the item is removed from the cart. If that would be the better route to go, I would just need some guidance on how to go about that properly.

[Teodor]

If you store your product ID in the data store like prd_id then the expression you need in the data store repeat for your buttons is:

quantity <= serverconnect1.data.query.where(`id`, prd_id, '==')[0].quantity

replace the serverconnect1.data.query with your server connect and query names and also replace `id` with your actual database id column name.
Also, i’d recommend using disabled for your button and not hide for better UX.

[scott]

Thank you @Teodor, I am attempting the solution unsuccessfully.

The data store is name cart (as used in the tutorial) and except for the quantity variable, the others match the database names.

The server connect being used is a little complicated because I use the same naming structure repeatedly (which I probably should not do).

When I tried to enter it (with the modifications regarding the sc and id) in the code view of the Dynamic Attributes > Disabled > Expression Builder, I received an error and it would not let me save.

I canceled out of that and entered the code (with the modifications regarding the sc and id) directly in the Dynamic Attributes > Disabled > Value field.

Note: Wappler added single quotes around the code.

When I load the page locally, the button appears disabled, however the cart is empty.

I feel like the issue is with the name of the two quantity’s in the code, but I tried renaming the first quantity to cart.data.quantity to match the datasource cart and renamed the second quantity to prd_quantity to match the server connect, but the result was the same.

[Teodor]

@Teodor

quantity <= serverconnect1.data.query.where(`id`, prd_id, '==')[0].quantity

Well what i posted here is something you need to add in code view, directly on the page … not in the UI.
Your server action is a paged one, you never mentioned this. So you need to modify the code accordingly…

dmx-bind:disabled="quantity <= sc_get_prd.data.get_prd.data.where(`prd_id`, prd_id, '==')[0].prd_quantity"

[scott]

Thank you @Teodor! I got it to work. I really appreciate you and @famousmag helping me out with this.

I modified the code slightly to make it work with the datasource cart quantity.

dmx-bind:disabled="cart.data.where(`prd_id`, prd_id, '==')[0].quantity >= sc_get_prd.data.get_prd.data.where(`prd_id`, prd_id, '==')[0].prd_quantity"

Here is a video of the finished product.

Screen Recording 2024-03-03 at 6.18.34 AM