Image is not fetching from the collection

Hey, I have two collections.

  1. The Wix Store’s Products Collection.

  2. A collection I made named Ingredients.
    In the Ingredients Collection I added two fields:
    1. Product(type: Reference of the product from the Products collection)
    2. Ingredients Image - type: Image
    Now I want to display Ingredient’s Image on the specific product’s page. (The product page is native and not dynamic).
    But it keeps on showing the same Image for every product.
    Please HELP!!

Where is your code?

1 Like

@russian-dima I don’t know how to code this one.

@soniaayush24400 Ok, i understood! At least a clear and honest answer!

Well first checking your PROJECT-SETUP!

  1. You have a non-dynamic-page!
  2. You also have 2x DATABASES with connected …
  3. …by 2x DATASETS …with
  4. …a REPEATER, or what is the element i can see on the screenshot?

Be informed about the fact, that maden connections trough the wix-property-panel have their boundaries. Doing it by code, would expand your possibilities.

It is also NOT recommended doing a mix of both! Either you do it completely by CODE, or you do it completely by… → YES → by CODE! :grin::wink:

So we just forget all these useless datasets xD. → Let’s GOOOOO!

Your problem will be, to get data from two different DATABASES to be loaded in just one REPEATER, right?

OKEEEEEEEY!

  1. Get a DATA-Query from DATABASE-A
  2. Also get a DATA-Query from DATABASE-B
  3. Of course both of the QUERIES should be filtered by a product-ID, because you want to load the right ingredients for each selected or just loaded product, right?
  4. After we got our queries → we push them into our REPEATER on our page to show the content , right?

First → Disconnect your REPEATER from all your DATASET-CONNECTIONS!
SECOND: Check REPEATER-ID in CODE! Enter your own one…

const REPEATER = "#repeater1"; 

THIRD: Do the same for all DATA in the → USER_INTERFACE!

//------- USER-INTERFACE --------------------------------
    const DATABSE_A = "Products";
    const DATABSE_B = "Ingredients";
    const refField = "product";
    const REPEATER = "#repeater1"; 
//------- USER-INTERFACE --------------------------------

So this one could work for you… What do you get as RESULTS in CONSOLE ?

import wixData from 'wix-data';
//------- USER-INTERFACE --------------------------------
    const DATABSE_A = "Products";
    const DATABSE_B = "Ingredients";
    const refField = "product";
    const REPEATER = "#repeater1"; 
//------- USER-INTERFACE --------------------------------

$w.onReady(async function() {  
    let ingredients = await get_DATA(DATABASE_B); console.log("Ingredients: ", ingredients); 
    $w(REPEATER).data = ingredients; 
     
    $w(REPEATER).onItemReady(($item, itemData, index)=>{console.log("Item-Data: ", itemData); 
        $item('#yourImageIDhere').text = itemData.ingredient;
        $item('#yourTextTitleIDhere').text = itemData["ENTER_HERE_THE_RIGHT_FIELD_ID"];
    });
});

// Gets Data out of DATA.....---------------------
function get_DATA(DATABSE) {
    wixData.query(DATABASE)
    .include(refField)
    .find()
    .then((res)=>{console.log(res);
        let ITEMS = res.items; 
        return(ITEMS);
    }).catch((err)=>{console.log("ERROR: ", err);});
}

Paste this code onto your PAGE, where your REPEATER is located.
Save or/and publish your site and do your first test.
Take a look onto CONSOLE → either inside the Preview-Mode of the Wix-Editor or press F-12 when doing it on published site.

I would recommend the published version.

@russian-dima Hey Thank you so much for the help. I am getting an error. You can see it in the image. Also, I don’t understand the “ENTER YOUR IMAGE ID HERE”, which image id are you talking about as I want all the images dynamically on their specific product page.

Also, I didn’t understand “YOUR TEXT TITLE ID HERE”, as I don’t want any text. I just want the Ingredients Image from the Ingredients table on their specific product page.

Here is the published site : advaitamayurveda dotcom. (My account doesn’t allow me to post the actual link, that’s why I wrote it like this)
Also, you will see the dynamic product page, those are there for testing purposes, you can ignore them. I just want it on the native product page.
Please help.

Ok, perhaps i did not really understand your setup.

  1. Please show a complete screenshot of your product-page.
  2. Describe all elements which i can see on your product page.
  3. How do you switch between product-items, if it is not a dynamic one?
  4. On your shown example-site, i just found a → DYNAMIC-VERSION.

Your setup-is cunfusing or it is your description.

Try to describe the whole flow.

Or you can also send me an invitation, so i can investigate your setup by my own.
My e-Mail can be found in my forum-profile. Normaly i do not offer this opertunity, but in your case, i need to see your setup.

However, what you perhaps will need is this one…


These are the results of both DATABASES in ONE-QUERY!

And this is what you need to get it working…

import wixData from 'wix-data';
//------- USER-INTERFACE -----------------
    const database = "Ingredients"; 
    const refField = "ingredients";
   // const repeater = "#repeater1"; 
//------- USER-INTERFACE -----------------

$w.onReady(async function() { 
    let ingredients = await get_DATA(database, refField); 
    console.log("Ingredients: ", ingredients); 
   // $w('#image1').src = ingredients[0].ingredients
});

// Gets Data out of DATA.....---------------------
function get_DATA(database, refField) {
    return wixData.query(database)
    .include(refField)
    .find()
    .then((res)=>{console.log(res);
        let ITEMS = res.items; 
        return(ITEMS);
    }).catch((err)=>{console.log("ERROR: ", err);});
}

Replace your old code with this one → investigate the RESULTS. Make some thoughts about, if this could help you to solve your problem.

I did not completely understand your setup, so i can’t really give you an 100% correct answer.

@russian-dima I invited you, please go through the structure and help me.

1 Like

@soniaayush24400 Checked my e-Mails (also Junk-Mail-Folder)! You are sure, that you have send it to the right e-mail ? No invitation arrived :open_mouth:

russi…@hot…de ( to be found in my profile).

@russian-dima okay, I just sent it again, please check your mail.

1 Like

@soniaayush24400 Got it!

@soniaayush24400 Now i understand why i did not understand your SETUP!

Yes it was not a dynamic page directly, but it is some kind of a dynamic page, fired through the Wix-Stores-App. And yes, it was also not a REPEATER.

However, you can not enter produtcs-database by a usage of a query (correct me if i am wrong at this point Velo-Masters), but though i got it to work, at least i could get all these inofrmations for you out of the Products-Database…

-------------------------------- CORRECTION on my own statement ----------------------------------------

However, you can not enter produtcs-database by a usage of a query.
Yes you can!
-------------------------------- CORRECTION on my own statement ----------------------------------------


…and there a even more informations which are provided by the wix-stores-App to be working with.

So now you have your ITEM-ID, right? Let’s check it! → Look at this…


You are now able to get all the PRODUCT-DATA for EACH PRODUCT - - > including …

  1. Product-Name:
  2. Product-Inventory-ID:
  3. and many other informations…

But do we realy need more than just the NAME of the current PRODUCT to solve your PROBLEM? → The answer is → NOPE WE DON’T :grin::sunglasses:

So once you have selected one special PRODUCT on your Wix-Stores Product-Page (original-wix-stores-app-product-page) and once you got all the data of your selected PRODUCT-DATA, what do you want to do NOW ???

Of course !!! - → You want to get the corresponding → INGREDIENTS-IMAGE ← out of your SECOND-DATABASE which is in your case called → “Ingredients”

Take a look at this one…
The two yellow-marked RESULT-lines are from the two different DATABASES (Products & Ingredients)


Do you have already an idea, how you can solve it now?

Ok, i think you will be able to handle the rest by your own, right now.
You have now all DATA you need to get this to work.

And you know where to find me if you are still not able to do it by your own. :wink:

BTW: Your current working CODE:

$w.onReady(async function() {console.log("Page READY!");
    // Get Ingredients-Data ....
    let ingredients = await get_DATA(database, refField); console.log("Ingredients: ", ingredients); 
    // Get Products-Data...
    $w('#productPage1').getProduct()
    .then((product) => {//console.log("Product: ", product);
        let productName = product.name; console.log("Product-Name: ", productName);
        let productDescription = product.description; console.log("Product-Description: ", productDescription);
        let currency = product.currency; console.log("Currency: ", currency);
        let discountedPrice = product.discountedPrice; console.log("Discounted-Price: ", discountedPrice);
        let inStockAvailability = product.inStock; console.log("In Stock available: ", inStockAvailability);
        let inventoryItemId = product.inventoryItemId; console.log("Inventory-Item-ID: ", inventoryItemId);
        let productImage = product.mainMedia; console.log("Product-Image: ", productImage);
        let productMediaItems = product.mediaItems; console.log("Product-Media-Items: ", productMediaItems);
        let productPrice = product.price; console.log("Product-Price: ", productPrice);
        let productPageURL = product.productPageUrl; console.log("Product-Page-URL: ", productPageURL);
    }).catch((error)=>{console.error(error);});


    //***************************************** Complete CODE here *********************
    // Set IMAGE to the corresponding current selected PRODUCT...
    
    
    //$w('#image1').src = ingredients[0].ingredients 



    //***************************************** Complete CODE here *******************
    
});

// Gets Data out of DATA.....---------------------
function get_DATA(database, refField) {
    return wixData.query(database)
    .include(refField)
    .find()
    .then((res)=>{console.log(res);
        let ITEMS = res.items; 
        return(ITEMS);
    }).catch((err)=>{console.log("ERROR: ", err);});
}

This part will be done by your own…

And you do not need any repeater in your case → just a simple IMAGE…


…which will change automaticaly, when you change selected product.
But this function you will have to write by your own. Like already mentioned → you have now all needed data to get your END-SOLUTION!

LINK to related/corresponding page…

https://www.advaitamayurveda.com/product-page/anti-dandruff-hair-oil

!!! DO NOT FORGET !!!

CONSOLE = YOUR BEST-FRIEND !!!

Good luck and have fun! (i leaved your editor):stuck_out_tongue_winking_eye:

@russian-dima Thankyou so much but I still dont’t know how to move further and achieve my main goal i.e displaying the ingredients pictures on their specific products page.

@soniaayush24400
Ok, your CODE has been UPGRADED!

import wixData from 'wix-data';
//------- USER-INTERFACE -----------------
    const database = "Ingredients"; 
    const includeField = "product";
    const refField = "title"; 
//------- USER-INTERFACE -----------------

$w.onReady(async function() {start_Process();
    $w('#productPage1').onMouseIn(()=>{start_Process();});
});

function start_Process() {
    $w('#productPage1').getProduct()
    .then(async(product) => {//console.log("Product: ", product);
        let productName = product.name; console.log("Product-Name: ", productName);
        let productDescription = product.description; console.log("Product-Description: ", productDescription);
        let currency = product.currency; console.log("Currency: ", currency);
        let discountedPrice = product.discountedPrice; console.log("Discounted-Price: ", discountedPrice);
        let inStockAvailability = product.inStock; console.log("In Stock available: ", inStockAvailability);
        let inventoryItemId = product.inventoryItemId; console.log("Inventory-Item-ID: ", inventoryItemId);
        let productImage = product.mainMedia; console.log("Product-Image: ", productImage);
        let productMediaItems = product.mediaItems; console.log("Product-Media-Items: ", productMediaItems);
        let productPrice = product.price; console.log("Product-Price: ", productPrice);
        let productPageURL = product.productPageUrl; console.log("Product-Page-URL: ", productPageURL);
        //***************************************** Complete CODE here *************************************************** */
        // Set IMAGE to the corresponding current selected PRODUCT...
        // Get Ingredients-Data ....
        let foundItem = await get_DATA(database, includeField, refField, productName); console.log("Found-Ingredient-Item: ", foundItem); 
        
        $w('#image1').src = foundItem.ingredient; console.log(foundItem.ingredient)
        //***************************************** Complete CODE here *************************************************** */
    }).catch((error)=>{console.error(error);});   
}

// Gets Data out of DATA.....---------------------
function get_DATA(database, includeField, refField, value) {
    return wixData.query(database)
    .eq(refField, value)
    .include(includeField)
    .find()
    .then((res)=>{console.log(res);
        let ITEM = res.items[0]; 
        return(ITEM);
    }).catch((err)=>{console.log("ERROR: ", err);});
}

Let’s DANCE!

Everything working now?

Please take a look on all the changes, also into your Ingredients-Database.
Working with the following DATABASE-STRUCTURE, is much easier…


isn’t it ???

Good luck with your project!

@russian-dima Hey, Thank you so much, it’s working now as I expected.

1 Like

@russian-dima Hey, It’s works sometimes and sometimes won’t. Can you please check this out?

@soniaayush24400 Can you describe a situation, when it does NOT work?
Or perhaps even make a little screen-recording?

@russian-dima Actually it’s not working at all now. I’ve invited you to make changes. Also, getting an error in the console, which I am attaching here.

@soniaayush24400
Which changes have been done, so it is not working anymore?
-Did you do some changes on code?
-Did you changes in your DB?

@russian-dima I just replaced the old images with the new ones, that’s it.

@soniaayush24400
After you have replaced your images, your titles were changed!
Make sure, that the values in the TITLE-FIELD of your INGREDIENTS-DB are identical with the values in the PRODUCT-FIELD…

Your first title was → Nalpamradi & Rose Bar → not identical with PRODUCT-TITLE!

But you still have an ERROR in your code → perhaps in this case you should contact wix-customer-care. Not sure, but seems to be a system-error caused on wix-side.

1 Like