How to make list of selected items

Ask the community
,
1

Hi,
I have page with pics and i want the option that if I click on the pic the ID of this pic will get in to some database or table that i will create.

Is this possible?

Thank you very much,
Eran.

2

You can do this with code. Use the onClick event handler of the images to make a wix-data.insert call to insert the image’s id into a collection.

3

Hi Sam,
Thanx for the replay.

That’s what i thought I need to do but I have got lost with this :frowning:

Also, can I do individual collection to individual user if I do it in member login page?

4

Maybe we can help you out a bit. Do you have individual image elements or are you using a gallery?

5

I’m using a gallery.

6

In that case, what do you want to be added to the collection. The individual items in a gallery do not have their own IDs. You can see what properties they have here .

7

I want to know which image the user marked. Like a “Wish List”.
Can you help me with do this for individuals image/item?

The link doesn’t work.

8

Sorry about the link. I have fixed it above.

You can do this with a gallery if your using a gallery that supports the concept of a current item. You can check if a gallery supports a current item using the gallery’s galleryCapabilities property.

9

Can you give we a hint how I’m doing this things?
How do I create the collection with all the selected image that the user select and put it out to the website owner in the collection?

10

Ok. let’s take the simpler example. Let’s say:

  • You have some image elements on a page (not a gallery)

  • A collection that has two fields for a user ID and image
    You can add code to your page to do something like this:

import wixUsers from 'wix-users';
import wixData from 'wix-data';

$w.onReady(function () {
    $w("#image1").onClick(event => clickHandler(event));
    $w("#image2").onClick(event => clickHandler(event));
    });
    
function clickHandler(event){
    const toInsert = {
        "user": wixUsers.currentUser.id,
        "pic": event.target.src
    };
    wixData.insert("FavoritePics", toInsert);
}

Of course, you need to make the IDs, collection name, and field keys to match the ones on your site. Also realize that this code is a bit naive. If a user continually clicks and image it will add duplicates items into the collection.

11

Sam, thank you very much for your help.

I tought to do this with CHECK BOX’s.
Next to every image will be CHECK BOX and the user can check or uncheck it.
It is possible that the collection will update on live without to do any submission?
I asking becouse the user can pick few images from one gallery and move on to another page or gallery and i dont know if the checked box’s that allready checked will remain checked.

Thanks.

12

If you want the checkboxes that the user already selected at a different point to be checked when they load the page later, you’ll need to query the collection for the relevant items and use them to set the checkbox .checked property.

You might also want to write code that will delete the relevant item from the collection when the unchecks the checkbox.

Another suggestion, instead of checkboxes you can put a colored box behind the image that is just a little larger than the image that you show and hide depending on whether the image was chosen. That will give the effect a border shown around “selected” images.

13

Good idea!
If I want to use the Wix Pro Gallery and use the function that open new link when the user select one of the images and to each link I will add a button that will submit the details of the image to the collection?
It is possible to this with gallery?

14

That could work as well.