Hi everyone, so i want build a table in the product page, this table change with the product.
For do this I start from the sku of the product in the product database and I do a query with another datebase with all specs of my products. After the query I obtain this object, that inside have the specs, but I don’t know how use that and export that values for build the table…
This is the object
This is the code
This is the table in the web page
The target is do this table responsive in base at the specs because not every product have the same specs.
The Button, for download the data sheet in PDF
In the specs database is present an url with the data sheet in PDF, and I want use this button for download the data sheet.
Thanks all the help. =D
The code:
//-------------Imports-------------//
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
//-------------Page Setup-------------//
$w.onReady( function () {
// Load the products that are related to the currently displayed product using the loadRelatedProducts() function.
loadRelatedProducts();
// Load the data for that.
loadData();
});
// Load the products that are related to the currently displayed product.
async function loadData() {
let product = await $w(‘#productPage’).getProduct();
// Get the related product results using the relatedProductsByCollection() and relatedProductsByPrice() functions.
let productsku = product.sku;
console.log("SKU: " + productsku)
// Trovare la correlazione tra i due database
let productdata = await Promise.all([
wixData.query(‘Data_Sheet’) //Match
.eq(‘sku’, productsku) //condizione
.find()
.then ( (res) =>{
let lunghezza=res.lunghezza;
let temperatura=res.temperatura;
let ip=res.ip;
console.log(res)
console.log(lunghezza)
return res.items;
})
]);
showData(productsku)
$w('#button2').onClick(() => {
// scarica il PDF
wixLocation.to(productdata.link_data_sheet);
});
}
// Show the related data on the page.
function showData(productsku) {
// If there are any related products:
$w(“#table1”).rows = [
{
sku: productsku
}
]
}
// Load the products that are related to the currently displayed product.
async function loadRelatedProducts() {
// Get the current product’s data.
let product = await $w(‘#productPage’).getProduct();
// Get the related product results using the relatedProductsByCollection() and relatedProductsByPrice() functions.
let relatedProductResults = await Promise.all([
relatedProductsByCollection(product),
relatedProductsByPrice(product)
]);
// If there are related products found in the “related-products” collection:
if (relatedProductResults[0].length > 0)
// Show the related products from the collection.
showRelatedProducts(relatedProductResults[0]);
// If there are no related products found in the “related-products” collection:
else
// Fallback to showing the related products by price.
showRelatedProducts(relatedProductResults[1]);
}
// Get related products based on the relations set in the “related-products” collection.
async function relatedProductsByCollection(product) {
// Get the current product’s ID.
let productId = product._id;
// Find related products in the relationship collection by querying for related products in both relation directions.
let relatedByTable = await Promise.all([
wixData.query(‘related-products’)
.eq(‘productA’, productId)
.include(‘productB’)
.find(),
wixData.query(‘related-products’)
.eq(‘productB’, productId)
.include(‘productA’)
.find()
]);
// Merge related products found from both sides of the relationship collection. Le quadre definiscono una lista
let relatedProducts = [
…relatedByTable[0].items.map(_ => .productB),
…relatedByTable[1].items.map( => _.productA)
];
//Return the related products found in the collection.
return relatedProducts;
}
// Get related products based on the the product prices.
async function relatedProductsByPrice(product) {
// Get the current product’s ID.
let productId = product._id;
// Query the “Products” collection for product’s whose price is within 20% of the current product’s price.
let relatedByPrice = await wixData.query(‘Stores/Products’)
.between(‘price’, product.price * 0.8, product.price * 1.2)
.ne(‘_id’, productId)
.find();
// Return the related items extracted from the query results.
return relatedByPrice.items;
}
// Show the related products on the page.
function showRelatedProducts(relatedProducts) {
// If there are any related products:
if (relatedProducts.length > 0) {
// Remove all but the first four related items.
relatedProducts.splice(4, relatedProducts.length);
// Set the function that runs when the related items repeater data is loaded to be relatedItemReady().
$w(‘#repeater1’).onItemReady(relatedItemReady);
// Set the related items repeater data to the first four related items.
$w(“#repeater1”).data = relatedProducts;
// Expand the related items repeater.
$w(“#repeater1”).expand();
}
// If there are no related products:
else {
// Collapse the related items repeater.
$w(“#repeater1”).collapse();
}
}
// Set up the related items repeater as its data is loaded.
function relatedItemReady($w, product) {
// Populate the repeater elements from the item data.
$w(“#image11”).src = product.mainMedia;
$w(“#text30”).text = product.name;
//Abbreviazione della descrizione prodotto
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
// how many characters to include in the shortened version
const shortTextLength = 100;
// read the full text and store it in the fullText variable
fullText = product.description.replace(“
”,“”).replace(“
”,“”).replace(“- ”,“”).replace(“
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + “…”;
// set the contents of the text element to be the short text
$w(“#myTextElement”).text = shortText;
$w("#text39").text = shortText.replace("<li>","").replace("</li>",""). replace(".",". "); //descrizione con pulizia del testo
$w("#text34").text = product.formattedPrice;
// Set the action that occurs when the image is clicked.
$w(‘#image11’).onClick(() => {
// Vai al prodotto
wixLocation.to(product.productPageUrl);
});
$w(‘#button1’).onClick(() => {
// Vai al prodotto
wixLocation.to(product.productPageUrl);
});
}
Thanks again! =D