Hello,
I created a custom CMS with the wix prebuilt CMS of products.
I needed to add some tags to some products, to use filters with different attributes.
Other wise I would have to create thousands of categories to use filters wisely to my customers.
Now I have realized that I can’t connect the add to cart button with the cart
I would like to know, from my ignorance, if is there a way to connect the default CMS product from wix with a custom CMS.
The idea is to build my own custom store, where the products shown are the ones from the wix CMS, and the filters used to sort and filter that collection would be my own build CSM with the same .csv of the prebuilt wix product CMS.
Support told me that using Velo and JavaScript I could do this.
Any guidance or help?
find attached a video.
thankyou
Do I just have to add a reference field to my custom CMS?
I have seen that I have to connect it one by one.
Is there a smart way do do this? like liknk them with the ID or something.
Hi everyone, I tried this code:
but got the following error:
Error simple de consulta: Error: WDE0025: The Products collection does not exist. You cannot work with a collection using the Data API before it is created in the Editor.
//FILTROS CON TAGS
$w.onReady(function () {
$w(‘#checkboxGroup2’).onChange(() => {
let filterValues = $w(‘#checkboxGroup2’).value;
if (!Array.isArray(filterValues)) {
filterValues = [filterValues];
}
let combinedFilter = wixData.filter();
filterValues.forEach(value => {
combinedFilter = combinedFilter.or(wixData.filter().contains('Categorias', value));
});
wixData.query('Products') // Asegúrate de que esto es el nombre de la colección
.filter(combinedFilter) // El método .filter() es llamado directamente después de .query()
.find()
.then(results => {
const ids = results.items.map(item => item.ID);
// Asegúrate de que 'productsDataset' es el ID correcto del dataset que quieres filtrar
$w('#dynamicDataset').setFilter(wixData.filter().hasSome('ID', ids));
})
.catch(err => {
console.error('Error al filtrar:', err);
});
});
I also have this error:
“Error simple de consulta: Error: WDE0025: The Store/Products collection does not exist. You cannot work with a collection using the Data API before it is created in the Editor.”
What does it means: You cannot work with a collection using the Data API before it is created in the Editor.
its already on the page.
it’s connected to a gallery of products I added trough the editor.
(in this image I changed the the code just to check if I can call the ‘Products’ collection with a query)
It seems you can’t use a query/code to call a Wix CMS…LOL.
I have accomplished querying product/store data by having a backend JSW file to query to collection. Example:
// backend JSW file named stores
import wixData from 'wix-data';
const myDefaultCollection = 'your collection id'
export function getAllVisibleProducts(collectionId) {
if (!collectionId) {
collectionId = myDefaultCollection //get collection ID form getCollectionProductsOnly
}
// Query all products
return wixData.query("Stores/Products")
.eq('collections.id', collectionId)
.find()
.then((results) => {
return results.items
});
}
If you do not know/want to query a specific collection, run the function in your backend and comment out the eq parameter to get a list of all your products regardless of collection.
You would then import it on your frontend and make an async call. Something like this:
// Page Code
import { getCollectionProductsOnly } from 'backend/stores'
import { cart, navigate } from 'wix-stores'; // if needed to manually add product to cart
const myCollection = 'Example: Shoes Collection'
$w.onReady(function () {
getMyVisibleProductsByCollection()
})
const getMyVisibleProductsByCollection = async () => {
const products = await getCollectionProductsOnly(myCollection)
console.log(products, 'my store products')
}
Thanks oakstreetassociates!!
I’ll check it.
Question: the idea is that to filter the Products CMS depending on what elements selects on the filter the customer.
Is that included in your code? How do I link it to the filter ID?
What this does it return all of your products to your front end. If you really want to build a “create your own” store. Then add a repeater and connect your repeater items to the query results. My code does not have that in there. You will be able to use that query to add products to your cart and control the display of your products, filtering etc. Since the repeater is your control you can add any filtering logic from there…
I kind of understand what your code does.
But, why would it be needed to return all of my products to my front end?
Sorry I’m not very familiar with queries…
What I have built so far is this:
‘prod6agosto2024 dataset’: dataset of my custom CMS, includes a field named ID, which is exactly the same than the CMS Products
Categories: One of the options to filter by. It’s a multiple selection element, connected to 'prod6agosto2024 dataset. Options shown in this filter is the data contained in CMS ‘prod6agosto2024’ on Categories field.
ID: name of the field that contains the Ids of products on prod6agosto2024 CMS, is the same than CMS Products. #checkboxGroup2: id of the filter that shows the option of Categories, its a multiple selection element
dynamicDataset: dataset of the CMS Products by wix
import wixData from 'wix-data';
import { local } from 'wix-storage';
//FILTROS CON TAGS DE OTRA COLECCION
$w.onReady(function () {
// Cargar las categorías y sus IDs para configurar el filtro
wixData.query('prod6agosto2024 dataset')
.find()
.then(results => {
let options = results.items.map(item => {
return {label: item.Categorias, value: item.ID}; // Asocia cada categoría con su ID
});
$w('#checkboxGroup2').options = options;
})
.catch(err => {
console.log('Error al cargar categorías:', err);
});
});
$w('#checkboxGroup2').onChange(() => {
let selectedIds = $w('#checkboxGroup2').value; // Recolecta los IDs de las categorías seleccionadas
// Establecer un filtro en el dataset asociado al repetidor que muestra los productos
$w('#dynamicDataset').setFilter(wixData.filter()
.hasSome('ID', selectedIds) // Asegúrate de que 'CategoryID' es el campo en 'Products' que vincula con las IDs de 'Categorias'
)
.then(() => {
console.log('Filtro aplicado al dataset de productos correctamente.');
})
.catch(err => {
console.error('Error al aplicar filtro al dataset de productos:', err);
});
});
}
import wixData from 'wix-data';
export function getFilteredIds(labelsArray) {
// Crea una promesa para cada label seleccionado y recopila las IDs
const promises = labelsArray.map(labelsArray =>
wixData.query('productos20240806')
.eq('categorias', labelsArray) // Asume que 'Categoria' es el campo correcto
.find()
);
// Ejecuta todas las promesas y luego combina los resultados
return Promise.all(promises)
.then(results => {
let idsToFilter = [];
results.forEach(result => {
if (result.items.length > 0) {
result.items.forEach(item => {
idsToFilter.push(item._id); // Agrega cada ID encontrado al array de IDs
});
}
});
return idsToFilter;
})
.catch(err => {
console.error('Error al recopilar IDs:', err);
throw new Error('Failed to fetch IDs');
});
}
And also the front end code:
import { getFilteredIds } from 'backend/filtros.web.js';
import wixData from 'wix-data';
$w.onReady(function () {
$w('#checkboxGroup2').onChange(() => {
const selectedLabels = $w('#checkboxGroup2').value; // Recolecta los labels seleccionados por el usuario
const labelsArray = Array.isArray(selectedLabels) ? selectedLabels : [selectedLabels];
getFilteredIds(labelsArray)
.then(idsToFilter => {
console.log("IDs to Filter:", idsToFilter);
// Usa 'idsToFilter' para aplicar un filtro en otro dataset
$w('#dynamicDataset').setFilter(wixData.filter()
.hasSome('_id', idsToFilter)
);
})
.catch(err => {
console.error('Error al aplicar filtro:', err);
});
});
});
Alright, let me make sure I’m on the same page now. So you are using Wix Stores to store your products, correct?
You also noted that have a separate CMS of products. So which collection are you trying to set your repeater data from?
Based off the OP, I basically assumed that you “cloned” Wix Stores Product list (your custom CMS) so that you can add custom fields?
Essentially, your work flow would be to query to the items from Wix stores so you can use the product ID and streamline your add to cart functionality, unless you truly want to rebuild every workflow from search to cart capabilities. (I would not advise this since performance will not be as good in the long run…)
Ideally this is what I would do:
The schema from the Stores/Products query should be what you work off of. But truly, once you set your repeater data, then having event handlers update your repeaters is pretty straightforward from there. Look into using onItemReady to load all your data into the repeater and forEachItem to render event handler/filter changes.
I would not clone the Wix Stores product list into your own CMS. I would just use a product ID column to basically reference your product list and then add any additional columns to that CMS associated to your relative row.
Then you can ensure your data is never stale and the full e-comm workflow has been simplified. You would query your ecomm products and use an event handler (const $item = $w.at(event.context)) to get a specific repeater data when clicked. You can use the context click to then query your new database/CMS for whatever contexts you need.
If you just want to use your CMS and not Wix Stores at all then you would just query your CMS collection ID, set a limit to 1000 or use a while loop to get more than the limit and load your repeater. These queries have tons of parameter filters. Look into Wix Data API. Wix has great documentation.
Hello!
thanks for taking your time to answer, I really appreciate it.
So which collection are you trying to set your repeater data from?
Ans: The original Wix Product CMS.
Based off the OP, I basically assumed that you “cloned” Wix Stores Product list (your custom CMS) so that you can add custom fields?
ANS: yes, but not to connect it to repeaters, to use with filters. And then query the selected filters, using the ID for example, to filter the Original PRoducts CMS connected to the repetear.
I will try to use the codes you mentioned, to make sure everything it’s loaded before the code tries to run.
Thanks for the flow description. That helps. Okay this is what I suggest. If you are able to get the UUID for the Wix Stores already, then lets skip that step in all.
I would suggest only Velo logic here. Ditch the dataset. I would follow these steps:
Create a query function to get all of your items from your custom CMS and save it as a global variable so you can access it across functions
Once you have the data, populate the repeater. Use this API.
Create a function called event handlers and call it on ready
Inside your event handler function, call your respective callback functions when an event happens – example, filter dropdown changed.
On the event change, filter your global data and repopulate your repeater using JS.
If add to cart is needed, use the repeater $w.at(event.context) event handler to get which repeater item was clicked, then .find() the clicked product in your global data and find your product id. Use the add to cart API to make it work.
Thank you very much!
I’ll follow your steps and see how it goes.
I want to keep prebuilt Product CMS by Wix connected to the repeaters, so I don’t have to connect and program the code for inventory, shopping cart, etc etc all over. Besides I also think it’s safer and easier this way.
