Handle grouped items

README.md

@@ -4,7 +4,6 @@
 
 # IS24 Price Per Area
 Chrome Extension for showing the price per m² on the search result pages of ImmobilienScout24.
-Grouped results (such as projects) and items hidden by the user are ignored.
 
 This extension is designed to only be active on `https://*.immobilienscout24.de`.
 

contentScript.js

@@ -1,7 +1,5 @@
 'use strict';
 
-const resultListItems = document.getElementsByTagName('article');
-
 const itemAttributesSelector = '[data-is24-qa="attributes"]';
 const priceElementSelector = 'dl:first-child dd';
 const areaElementSelector = 'dl:nth-child(2) dd';
@@ -10,12 +8,20 @@ const hiddenItemAttributesSelector = '.hidden-result__criteria';
 const hiddenPriceElementSelector = 'span:first-child';
 const hiddenAreaElementSelector = 'span:nth-child(2)';
 
+const groupedItemsClassName = 'grouped-listing';
+const groupedItemAttributesSelector = 'div:nth-child(3)>a[data-go-to-expose-referrer="RESULT_LIST_LISTING"]';
+const groupedPriceElementSelector = '.grouped-listing__criterion:nth-child(2)';
+const groupedAreaElementSelector = '.grouped-listing__criterion:nth-child(3)';
+
+
+const resultListItems = document.getElementsByTagName('article');
+setTimeout(function() { handleItems(); }, 2000);
 
-setTimeout(function() { handleItems(); }, 3000);
 
 function handleItems() {
   for (const resultListItem of resultListItems) {
     if (isGroupedProject(resultListItem)) {
+      handleGroup(resultListItem);
       continue;
     }
     if (isHiddenItem(resultListItem)) {
@@ -42,17 +48,6 @@ function handleRegularItem(resultListItem) {
   insertPricePerAreaToRegularItem(resultListItemAttributes, pricePerArea);
 }
 
-function extractValue(resultListItemAttributes, selector) {
-  const resultListItemValueElement = resultListItemAttributes.querySelector(selector);
-  const resultListItemValue = resultListItemValueElement.textContent
-    .replace('€', '')
-    .replace('m²', '')
-    .replace('.', '')
-    .replace(',', '.')
-    .trim();
-  return parseFloat(resultListItemValue);
-}
-
 function handleHiddenItem(resultListItem) {
   const hiddenResultListItemAttributes = resultListItem.querySelector(hiddenItemAttributesSelector);
   const price = extractValue(hiddenResultListItemAttributes, hiddenPriceElementSelector);
@@ -61,13 +56,32 @@ function handleHiddenItem(resultListItem) {
   insertPricePerAreaToHiddenItem(hiddenResultListItemAttributes, pricePerArea);
 }
 
+function handleGroup(resultListItem) {
+  const groupItems = resultListItem.getElementsByClassName(groupedItemsClassName);
+  for (const groupedItem of groupItems) {
+    const groupedResultListItemAttributes = groupedItem.querySelector(groupedItemAttributesSelector);
+    const price = extractValue(groupedResultListItemAttributes, groupedPriceElementSelector);
+    const area = extractValue(groupedResultListItemAttributes, groupedAreaElementSelector);
+    const pricePerArea = calculatePricePerArea(price, area);
+    insertPricePerAreaToGroupedItem(groupedResultListItemAttributes, pricePerArea);
+  }
+}
+
 function calculatePricePerArea(price, area) {
   return (price / area).toFixed(2);
 }
 
-function convertPriceToText(pricePerArea) {
-  return pricePerArea.toString().replace('.', ',') + "  €/m²";
+function extractValue(resultListItemAttributes, selector) {
+  const resultListItemValueElement = resultListItemAttributes.querySelector(selector);
+  const resultListItemValue = resultListItemValueElement.textContent
+    .replace('€', '')
+    .replace('m²', '')
+    .replace('.', '')
+    .replace(',', '.')
+    .trim();
+  return parseFloat(resultListItemValue);
 }
+
 function insertPricePerAreaToRegularItem(resultListItemAttributes, pricePerArea) {
   const pricePerAreaText = convertPriceToText(pricePerArea);
   const pricePerAreaElement =
@@ -87,3 +101,14 @@ function insertPricePerAreaToHiddenItem(resultListItemAttributes, pricePerArea)
   resultListItemAttributes.insertAdjacentHTML('beforeend', pricePerAreaElement);
 }
 
+function insertPricePerAreaToGroupedItem(resultListItemAttributes, pricePerArea) {
+  const pricePerAreaText = convertPriceToText(pricePerArea);
+  const pricePerAreaElement =
+    `<span class="grouped-listing__criterion font-nowrap">${pricePerAreaText}</span>`;
+
+  resultListItemAttributes.insertAdjacentHTML('beforeend', pricePerAreaElement);
+}
+
+function convertPriceToText(pricePerArea) {
+  return pricePerArea.toString().replace('.', ',') + "  €/m²";
+}