Customize product page for each product

Ask the community
, , ,
1

Question:
Customize product page for each product

Product:
Wix Studio

to achieve:
Showing detailed features of each product on the product page as a landing product page

already tried:
I couldn’t achieve this using the dynamic pages system.

However, I came up with the following solution: On the Product Page, I added a new section below the standard product information section and placed an iframe inside it (with a customized ID). Then, I added a small JS code to the Product Page’s code section. On page load, the script reads the URL, extracts the product name from it, and injects specific HTML and JS content into the iframe based on that product. This allows me to display different features for each product.

If anyone has an alternative solution, could you please share it here?

Code: `// Dynamic Product Page › Page Code
import wixLocation from ‘wix-location’;
import { getKirecSokucuHtml } from ‘backend/Kirec-Sokucu/kirecsokucu.web’;
import { getPassokucuHtml } from ‘backend/Yag-Sokucu/yagsokucu.web’;
import { getPassokucu } from ‘backend/Pas-Sokucu/passokucu.web’;

$w.onReady(async function () {
// Get the URL path segments and take the last one as the slug
const segments = wixLocation.path;
const slug = segments[segments.length - 1]; // last segment

// Map each slug to its corresponding backend fetcher function
const htmlFetcher = {
‘kirec-sokucu’: getKirecSokucuHtml,
‘yag-sokucu’: getPassokucuHtml,
‘pas-sokucu’: getPassokucu
// Add new products here as needed
}[slug];

let htmlContent;
if (htmlFetcher) {
try {
// Fetch the HTML content from the backend
htmlContent = await htmlFetcher();
} catch (error) {
console.error(Error loading HTML for ${slug}:, error);
htmlContent = <html> <body> <h1>Failed to load ${slug}</h1> </body> </html> ;
}
} else {
// Fallback content if slug is not recognized
htmlContent = <html> <body> <h1>Product Not Found</h1> </body> </html> ;
}

// Convert the HTML to a data URI and set it as the iframe src
const dataUri = ‘data:text/html;charset=utf-8,’ + encodeURIComponent(htmlContent);
$w(‘#PrHtml’).src = dataUri;
});
`