admin-dashboard-backend/groupTasks/groups/shx-product-label/index.js

const PRODUCT_NAME = "{{PRODUCT_NAME}}", // Gizmo die Eidechse
  PRODUCT_VARIANT = "{{PRODUCT_VARIANT}}", // Farbe Grün/Blau/Orange or Stil Standard
  PRODUCT_CHARACTERISTIC_LINE_1 = "{{PRODUCT_CHARACTERISTIC_LINE_1}}", // (Glänzend)
  PRODUCT_CHARACTERISTIC_LINE_2 = "{{PRODUCT_CHARACTERISTIC_LINE_2}}",
  PRODUCT_ID = "#{{PRODUCT_ID}}", // #32420
  LABEL_PAPER_POSITION = "{{LABEL_PAPER_POSITION}}"; // could be a number between 1 and 12 or combination like 1,3,7

/*
const PRODUCT_NAME = "Gizmo_die Eidechse",
  PRODUCT_VARIANT = "FARBE",
  PRODUCT_CHARACTERISTIC_LINE_1 = "Grün/Blau/Orange",
  PRODUCT_CHARACTERISTIC_LINE_2 = "(Glänzend)",
  PRODUCT_ID = "#32420",
  LABEL_PAPER_POSITION = "1"; */

const labelPaperPosition = LABEL_PAPER_POSITION.split(",");

window.onload = () => {
  for (let i = 1; i <= 12; i++) {
    let labels = document.getElementById("labels");

    /* CONTAINER */

    const label = document.createElement("div");
    label.className = "label";

    if (labelPaperPosition.indexOf(i.toString()) !== -1) {
      const backgroundImage = document.createElement("div");
      backgroundImage.className = "background-image";

      const content = document.createElement("div");
      content.className = "content";

      const productContainer = document.createElement("div");
      productContainer.className = "product-container";

      const productName = PRODUCT_NAME.split("_");

      const productNameFirst = document.createElement("h1");
      productNameFirst.innerHTML = productName[0];

      const productNameRemainingPart = document.createElement("h1");
      productNameRemainingPart.innerHTML = productName[1];
      productNameRemainingPart.style = "margin: 0";

      const productVariant = document.createElement("p");
      productVariant.innerHTML = PRODUCT_VARIANT;
      productVariant.className = "product-variant";

      const productCharacteristicLine1 = document.createElement("p");
      productCharacteristicLine1.innerHTML = PRODUCT_CHARACTERISTIC_LINE_1;
      productCharacteristicLine1.className = "product-characteristic";

      const productCharacteristicLine2 = document.createElement("p");
      productCharacteristicLine2.innerHTML =
        PRODUCT_CHARACTERISTIC_LINE_2 == ""
          ? "\u200B" //  /* Zero-Width Space needed for product variants like Standard which have no color characteristics */
          : PRODUCT_CHARACTERISTIC_LINE_2;
      productCharacteristicLine2.className = "product-characteristic";

      const productId = document.createElement("p");
      productId.innerHTML = PRODUCT_ID;
      productId.className = "product-id";

      content.appendChild(productNameFirst);
      content.appendChild(productNameRemainingPart);

      productContainer.appendChild(productVariant);
      productContainer.appendChild(productCharacteristicLine1);
      productContainer.appendChild(productCharacteristicLine2);

      content.appendChild(productContainer);
      content.appendChild(productId);

      /* container */

      const container = document.createElement("div");
      container.className = "container";

      const childrenImg = document.createElement("img");
      childrenImg.src = "../../groupsData/shx-product-label/children.png";
      childrenImg.alt = "children";
      childrenImg.className = "children";

      const manufacturerInfo = document.createElement("div");
      manufacturerInfo.className = "manufacturer-info";

      const manufacturer = document.createElement("p");
      manufacturer.innerHTML = "Hersteller:";

      const manufacturer2 = document.createElement("p");
      manufacturer2.innerHTML = "Jan Umbach";

      const manufacturer3 = document.createElement("p");
      manufacturer3.innerHTML = "Tannenwäldchen 20";

      const manufacturer4 = document.createElement("p");
      manufacturer4.innerHTML = "D-34212 Melsungen";

      manufacturerInfo.appendChild(manufacturer);
      manufacturerInfo.appendChild(manufacturer2);
      manufacturerInfo.appendChild(manufacturer3);
      manufacturerInfo.appendChild(manufacturer4);

      const ceImg = document.createElement("img");
      ceImg.src = "../../groupsData/shx-product-label/ce.svg";
      ceImg.alt = "ce";
      ceImg.className = "ce";

      container.appendChild(childrenImg);
      container.appendChild(manufacturerInfo);
      container.appendChild(ceImg);

      content.appendChild(container);

      label.appendChild(backgroundImage);
      label.appendChild(content);
    }

    labels.appendChild(label);
  }

  /*
  adjustFontSize();

  function adjustFontSize() {
    console.log("Adjusting font size");

    const container = document.getElementsByClassName("product-container")[0];
    const text = document.getElementById("text");
    const containerWidth = container.offsetWidth;
    let fontSize = 100; // Startgröße in Prozent
    text.style.fontSize = fontSize + "%";

    console.log("Initial sizes", {
      containerWidth,
      textWidth: text.offsetWidth,
    });

    // Reduziere die Schriftgröße, bis der Text in den Container passt
    while (text.offsetWidth > containerWidth && fontSize > 1) {
      fontSize--;
      text.style.fontSize = fontSize + "%";
      console.log("Resizing", { fontSize, textWidth: text.offsetWidth });
    }

    console.log("Final font size:", fontSize + "%");
  }

  // Verwenden Sie die addEventListener-Methode, um sicherzustellen, dass die Funktionen korrekt zugewiesen werden
  window.addEventListener("load", adjustFontSize);
  window.addEventListener("resize", adjustFontSize); */
};