Skip to content

Instantly share code, notes, and snippets.

@mvark
Created April 16, 2024 03:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mvark/778b0fa931636dfaea0b1134c152cf0e to your computer and use it in GitHub Desktop.
Save mvark/778b0fa931636dfaea0b1134c152cf0e to your computer and use it in GitHub Desktop.
If you have products on a web page in a grid layout and you want it as a list, here's code that ChatGPT generated that you can use in the Developer Tools console for the required transformed output. Change the class or HTML attribute names as relevant to your case.
// Find all div elements with class "gallery-item"
const products = document.querySelectorAll('div.gallery-item');
// Array to store product list items
const productListItems = [];
// Iterate over each product
products.forEach(product => {
// Extract the hyperlink
const hyperlink = product.querySelector('a.block-wrapper-link').getAttribute('href');
// Extract the name
const name = product.querySelector('h5').textContent.trim();
// Extract the tagline
const tagline = product.querySelector('p.tagline').textContent.trim();
// Construct the list item string and push to the array
const listItem = `<li><a href="${hyperlink}" target="_blank">${name}</a> - ${tagline}</li>`;
productListItems.push(listItem);
});
// Convert the array to a single string with line breaks
const productListString = productListItems.join('\n');
// Output the string
console.log(productListString);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment