Hello
I have the following requirements for a wix store for a client. It is a cooking service that has 3 packages A, B and C. I think the store is the best way to show the menu options for each service but i cannot find a way to do that in wix store. Here are my detailed requirements
User should select a package - the price is based on the package and not the menu items. So lets say A = $100 and can have 5 menu items
B=$200 and can have 7 menu items.
I want the user to select package, the price to be auto-populated and they they should be the menu item page to select the menu items (i want to restrict them to 5 for A and 7 for B and so on).
Could someone please help me on how to do this effeciently in wix.
Any help would be greatly appreciated!
1 Like
Nisha,
Setting up the store data approach is straightforward. In Wix Stores, the packages would be added as collections, and then you add each individual menu item with the price of that package and assign it to one of the three collections (packages) located in the visibility tab on the right.
Next, on the page that has the store selections, it will take just a little Javascript to filter the menu item control appropriately based on what choice is made in the user control that you are using for the package: radio button or dropdown. I prefer using radio buttons in situations like this.
I hope this helps. There may be other approaches that would work as well, but this seemed to be the most efficient approach if you are using Wix Stores.
Thank you so much! This helps, but I have a follow up question.
I donāt want the price to add up per menu item. If package A is $100 then I need a to limit the items in the cart to 5 and set the price as 100 not per item.
How do i do this?
Understanding better these real unique requirements, Iām giving this some thought and testing a couple things to see if the Wix Store approach is indeed workable. If not, there is the Pay API. To be continued ā¦
There are at least two limitations that are going to make the Wix Stores solution unfeasible for your requirements.
I thought of adding the package as both a collection and a product, the product having the dollar amount attached. When you select Package 1 in the radio group, it would automatically add the that package to the cart with the $100 price. Then the thinking was to then give the option of adding individual menu items in a slider or some other store control, all with the price of $0. However, the screen shot below shows you the problem with that approach:
Wix automatically disables the button and displays the āContact Us to Purchaseā wording in the button if the set amount for the product (menu item) is $0. There is no setting to change it currently.
Another problem with the Wix Stores option is that you would probably want the ability to programmatically clear out the cart if the customer changed their mind and chose to go with package B after package A and several of its menu items were already in the cart. From what I can tell in the WixCode API documentation, that is not possible to do.
Thank you Anthony, i really appreciate it! I have been stuck for a while and this helps a lot!
Can I use repeaters to show all my options, and if i do, is there any way for the user/customer to SELECT an element in the repeater? All i want to do is capture the data selected and navigate to the next page for name and other details. I show and hide using repeaters but the only roadblock here is to retrive the ID for the selected element in the repeater.
Also if you have any other suggestions please let me know.
As far as looping through repeaters to get the IDs, there is this example in the documentation.
In this example, the repeater named ārepeater1ā is tied to a store/products dataset with an embedded checkbox called ācheckbox1ā. This code reveals the ID of the checked products.
$w(ā#repeater1ā).forEachItem( ($item, itemData, index) => {
if ($item(ā#checkbox1ā).checked === true ){
console.log("_id = " + itemData._id);
}
} );
thank you so much Anthony.
Is there a way to GET POST or some way i can retrieve selected items in the next page?
i am trying to take the user to the next page to fill in their name and address, how do i save their selection here?
this is what i have got so far https://www.kinza.life/nisha-test
Just to add more clarity, I want the user to do the following
- Select 5or7 mains based on the package
- select 3or4 sides
- select 3 breakfasts
- enter information about their address and name
- hit submit and this would create a record in one of my tables
Now, I donāt mind if this is achieved by moving from one page to the other or in some way having a collapsed element that expands after each stageā¦ anything that is easier to achieve.
Again Anthony, i really appreciate your help.
Nisha, itās not clear from your last several posts whether or not you still plan to use Wix Stores after collecting all of this information.
Regarding the page that you are working on, you may have to replace the āAddā button with a checkbox, even though it would be aesthetically inferior. I thought that you might be able change the label of the button to āChosenā, āAddedā or something, but Iām not seeing the way to do that for each individual menu item in the repeater. In any event, you will need to loop through the repeater and be able to capture the ones chosen.
HI anthony, just to update this is what i currently have https://www.kinza.life/nisha-test3
I have created the repeaters and the collapse blocks.
I know how to set a counter based on the package the user has selected
could you tell me how to
- retrieve the name of the dish that has been checked in javascript
- decrement the counter and increment the counter if it is unchecked
- on submit write these selected values to the database table
I currently dont know how to give each repeater checkbox a unique value, it would be ideal if the value of the checkbox was the name (i understand it is boolean so this is probably no an option for me in this use case, in that case ill use an add button)
Assuming that you are connecting the repeater to the stores/products collection, use the same looping routine referenced above but use the name field instead. Given this forEachItem methodās ability to capture the underlying data of each repeater item in itemData, Iām thinking that you donāt need to assign a unique value to the checkbox. Substituting the below with your repeater and checkbox names, run this method so you can see what it returns in the developer console.
$w(" #repeater1 ā).forEachItem( ($item, itemData, index) => {
if ($item(ā #checkbox1 ").checked === true ){
console.log("name = " + itemData.name);
}
} );
As far as incrementing and decrementing the counter, you could use variables declared at the page level, and have a function set up that gets called every time a checkbox is checked or unchecked.
I would need to know more about your data structures and how you view the saving of the data before advising the best way to proceed.
Hi Anthony
Thank you for your response and apologies for all the confusion 
- We have decided to use repeaters with the + and - button instead of checkboxes
- i have figured out the counter part
this is the new page I have been working on https://www.kinza.life/nisha-test3 please scroll to the red meat section as that is the only section that is set up for now.
Questions
- how to make the ā-ā button active/enabled only when that particular dish has been added at least once?
- I am planning to create an array to track the selections. How is the best way to do this, given
A. We are allowing users to select a dish multiple times
B. The number of dishes is based on the package selected at the dropdown at top (the pinned text
shows the counter)
- Is it possible to write to wix tables from the dynamic array or arrays i create in the code? if so, please give me some pointers.
Let me know what are your thoughts and we are open for suggestions as well.