How to show data from a Database in the Product Page in Wix Stores?

Ask the community
, ,
1

I have 2 datasets:

  1. Wix Store (Created by the Wix Store App)

  2. Dataset B (Created by me)

I want to show the details from Dataset B on the product page.
I want to load data from Database based on the product that is being viewed.

Dataset B has the same “Title” text as the Wix Store Database for every product, so I tried to add a filter to the Dataset B (Title is Title) and connected the dataset to the images and text, but it didn’t work.

Am I doing something wrong? Please help if you can.

2

Hi Prashant :raised_hand_with_fingers_splayed:

I suggest that you use reference field in Database B pointing to built-in product collection/database, then get the current product ID displayed on the product page and filter dataset B with the same product ID.

import wixLocation from 'wix-location';

$w.onReady(() => {
    $w('#datasetB').onReady(async()=> {
        let product = $w('#productPage1').getProduct();
        
        await $w('#datasetB').setFilter(wixData.filter()
            .eq('productId', product._id)
        )
    })
})

You also need to add Wix Location’s onChange() event handler to re-filter dataset B when you select different product.

wixLocation.onChange(async (location) => {
  let product = $w('#productPage1').getProduct();
  
  await $w('#datasetB').setFilter(wixData.filter()
            .eq('productId', product._id)
  )
});

Hope this helps~!
Ahmad

3

Thanks a lot Ahmed. I think this might work.

I added this code:

import wixLocation from 'wix-location';
import wixData from 'wix-data';

$w.onReady(() => {
    $w('#dataset2').onReady(async()=> {
 let product = $w('#productPage').getProduct();
 
 await $w('#dataset2').setFilter(wixData.filter()
            .eq('productId', product._id)
        )
    })
})

wixLocation.onChange( (location) => {
 let product = $w('#productPage').getProduct();
 
 await $w('#dataset2').setFilter(wixData.filter()
            .eq('productId', product._id)
  )
});

I added the ‘wix data’ import.

The console is showing an error:
Parsing Error: Cannot use the keyword “await” outside an async function.

Any idea?

4

Change the location onChange() event handler to an async function like this, I forgot to do so, but I’ve updated the answer for you now.

wixLocation.onChange(async (location) => {
5

Thanks a lot.

I published the website and it’s still not showing it accordingly.

I opened the Database Collection B and added multi-reference with the product.

import wixLocation from 'wix-location';
import wixData from 'wix-data';

$w.onReady(() => {
    $w('#dataset2').onReady(async()=> {
 let product = $w('#productPage').getProduct();
 
 await $w('#dataset2').setFilter(wixData.filter()
            .eq('productId', product._id)
        )
    })
})

wixLocation.onChange(async (location) => {
 let product = $w('#productPage').getProduct();
 
 await $w('#dataset2').setFilter(wixData.filter()
            .eq('productId', product._id)
  )
});

I connected the data fields of Database Collection B to the Text and Images, yet it still loads the data from the first table and doesn’t change when product changes.

I am using the Editor X for this website. Could it be because of that?

6

The field should be a reference field, not a multi-reference field. and its ID key should be productId , and regarding the images, you need to disconnect them from the dataset and populate them with code.

You also need to populate these elements when the location is changed.

7

Okay Done. I changed the field ID to productid. I will search about populating the elements with code.

If you ever have time, please point me in the right direction as to where and what code to put.

Image ID: imageX18
Heading ID: text36

8

Hi Prashant,

Quite new to wix, with very few coding notions.
I am facing the same issue than the one you exposed above. Have you been able to find how to populate the elements with code?
I have followed above description, but can’t make it work.
Thanks

9

Hey @prashant-t I hope you are doing good! Did you manage to get this working? I am super close just trying to figure out how to change the image now. Basically I need that last step.