Link a Wix Store/Product dataset to a custom collection

Ask the community
, , , ,
1

Question:
I want to have a “peripherals” section below the standard product page produced by the “Wix Stores” system automatically. In this “peripherals” section, a certain amount of accessories are suggested to the client in accordance to the main product they are reviewing. This is achieved by using a repeater and a custom database collection created by me. The question is how to connect those 2 elements: the Wix store product page and the custom collection database in accordance?

Product:
Wix Studio

What are you trying to achieve:
Connect a Wix store product page and a custom collection database in accordance, to be able to show an accessories section below the “typical wix product page top section”, in a way that the shown accessories are relevant to the specific product

What have you already tried:
I have created a repeater below the product showcase section. In the “dataset settings” I’ve added a filter that compares the field “name” (text) of the dataset accessories collection I’ve created with the Wix Stores/Products dataset field “name” (text), through the condition “contains”. The results were not as expected to say the least. Maybe another path, using code is more advisable. In this regard I’m not a code expert but I can “survive” if given a correct direction to follow…

Additional information:

1 Like
2

Just in case you did not see this option, there is an easier way to create a related products area. Check out this article Wix Stores: Adding a Related Products or Best Sellers Gallery | Help Center | Wix.com

Would this work for your use case instead?

3

I thought you were on point but it didn’t work for one simple reason. Being a related product will imply creating a category for each product and then that same category for each accessory in order to work.

As a workaround it could be functional, but from a back-end perspective is a little complicated.
The accessories in this particular case are very specific and just related to a certain model so a “related” section as general and category based as it is, won’t be a very efficient solution!

Thanks for the help!

1 Like
4

As I’ve understanded you have a main product CMS (the automatically created) and another one with the “peripherals”, right? How is this second one organized? Could you provide a screenshot?

My go would be to have a CMS with the following columns:

  • Title: name of the peripheral
  • Image
  • MainProduct: the main product/s associated to the peripheral
  • ProductPageSlug: peripheral product page slug link after …/product-page/

Done that I believe you would need a bit of code. Basically the idea is:

You could probably use something like

import wixLocationFrontend from 'wix-location-frontend';
$w.onReady(function () {
	let path = wixLocationFrontend.path
});
5

Great! It seems like a good path to follow! I’ve tried this other path creating a compatible products column on the peripherals database. Then I query there, extract the ones that match the product page where I am currently… but… It doesn’t work. Te console says:

TypeError: peripherals.filter is not a function

This is the code:

import wixData from 'wix-data';
// Get the selected option from the product tab
const selectedOption = $w("#productTab").value;
// Function to filter peripherals based on "compatible Products"
async function filterPeripherals(selectedOption) {
  try {
    // Query your custom peripherals collection
    const peripherals = await wixData.query("Aditamentos")
      .find();

    // Filter peripherals based on "compatible Products"
    const filteredPeripherals = peripherals.filter((peripheral) => {
      return peripheral.compatibleProducts.some((compatibleProducts) => {
        return compatibleProducts.title === selectedOption;
      });
    });

    return filteredPeripherals;
  } catch (error) {
    console.error(error);
    return []; // Return an empty array in case of error
  }
}

// Call the function and update the repeater data
filterPeripherals(selectedOption)
  .then((filteredPeripherals) => {
    $w("#repeater1").data = filteredPeripherals;
  });
  • The code first retrieves the current product page URL using
  • It then extracts the product ID from the URL using string manipulation.
  • Next, it queries the Wix Stores “Products” collection to fetch the specific product details using the extracted ID.
  • Once the product information is retrieved, the code extracts the product name.
  • The function then queries the custom peripherals collection, filtering the results based on the “associated product” field matching the provided product name.
  • If related peripherals are found, the code updates the repeater element’s dataset with the retrieved data.
6

Using the suggested method proposed by @Clube_Taberneiros , this is my best solution but I can make it work still…

import wixLocationFrontend from 'wix-location-frontend';
import wixData from 'wix-data';

$w.onReady(function () {
  // Get the current page path
  const path = wixLocationFrontend.path;

  // Extract product name from path (don't know if this is right???
  const productName = path.substring("/product-page/".length); // Appropriate logic based on your URL structure???

  // Filter peripherals based on product name
  const filteredPeripherals = peripherals.filter((peripheral) => {
    // Check if "compatibleProducts" exists and includes the product name
    return peripheral.compatibleProducts && peripheral.compatibleProducts.some((compatibleProductName) => {
      return compatibleProductName === productName;
    });
  });

  // Update "repeater1" with filtered peripherals
  $w("#repeater1").data = filteredPeripherals;
});
7

I have a tutorial video that will show you how to add extra “info” to a product page on Wix Stores. It has the logic you need to accomplish your desired result.

It should point you in the right direction.

#codequeen

8

That’s it! Thanks a lot Nayeli!

1 Like