Inhalte aus DIV per JS tauschen?

[timreimann]

Ich möchte gern den gesamten Text aus dem Container mit der Klasse "woocommerce-Price-amount" mit dem Text aus dem Container "price-per-unit" tauschen.

<span class="wc-measurement-price-calculator-price"><span class="woocommerce-Price-amount amount">20,00&nbsp;<span class="woocommerce-Price-currencySymbol">€</span></span>  / m</span>

<span class="wgm-info price-per-unit price-per-unit-loop ppu-variation-wrap">(<span class="woocommerce-Price-amount amount">10,00&nbsp;<span class="woocommerce-Price-currencySymbol">€</span></span> / 0,5 m)</span>

Gibt es hierfür eine Möglichkeit das ganze per JS zu lösen? Per getElementByClassName zum Beispiel?

Gruß Tim

Ich

[TS]

Hello,

Gibt es hierfür eine Möglichkeit das ganze per JS zu lösen? Per getElementByClassName zum Beispiel?

Überleg mal:
Wieviele Elemente dürfen dieselbe Klasse zugewiesen bekommen?
Wie müsste die Funktion also heißen und was liefert sie aller Wahrscheinlichkeit dann zurück?

siehe: Document.getElementsByClassName()

Wenn es sich nur um genau ein Element pro Dokument handelt, ist es immer besser, eine ID zu vergeben und die auch zu verwenden.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Wieviele Elemente dürfen dieselbe Klasse zugewiesen bekommen? Wie müsste die Funktion also heißen und was liefert sie aller Wahrscheinlichkeit dann zurück?

document.querySelector('.foo') liefert das erste Element der Klasse foo zurück.

LLAP 🖖

[JürgenB]

Hallo Tim,

wie Gunnar schon schrieb, kannst du mit querySelector() auf ein Element zugreifen. Über innerHTML kannst du den Inhalt eines Elements auslesen und auch neu Schreiben. Wenn es mehrere Elemente mit dem gleichen Klassennamen gibt, musst du querySelectorAll() verwenden und dann entweder über eine Schleife alle Elemente behandeln oder zählen. Im Fall „eines aus vielen“ würde ich aber mit einer ID arbeiten.

Gruß
Jürgen

[timreimann]

Es geht um eine Ansicht in einem Woocommerce Shop. Dabei soll der Tatasächliche Preis mit dem Preis pro halber Meter optisch getauscht werden.

Beide Elemente sind je nur einfach vorhanden darum ist eine ID nicht nötig... zudem müsste ich sonst zu erk ins Template eingreifen.

Gibt es also eine Funktion mit der ich einfach im Quelltext die Inhalte beim jeweils anderen einfügen kann?

Gruß Tim

[JürgenB]

Hallo Tim,

Gibt es also eine Funktion mit der ich einfach im Quelltext die Inhalte beim jeweils anderen einfügen kann?

eine fertige Funktion gibt es nicht. Hast du dir mal die verlinkten Artikel aus dem Self-Wiki zu querySelector und innerHTML angesehen?

Gruß
Jürgen

[Rolf B]

Hallo timreimann,

Dabei soll der Tatsächliche Preis mit dem Preis pro halber Meter optisch getauscht werden.

Wieso muss man dafür Textinhalte von HTML Elementen vertauschen? Kann man nicht das Template in HTML und/oder CSS so anpassen, dass die gewünschte Anordnung erreicht wird? Genau dafür sind Template doch da: Man vertauscht zwei Zeilen und schwupps ist die Anordnung anders. Ein Postprocessing mittels JavaScript würde ich für den falschen Weg halten.

Wenn Du das Problem hast, dass jeder Artikel ein Template hat und Du "Millionen von Templates" anpassen musst, die Grundstruktur aber für alle gleich ist, dann könntest Du mit CSS weiterkommen und die spans einfach relativ zueinander verschieben.

Rolf

[Gunnar Bittersmann]

@@JürgenB

Über innerHTML kannst du den Inhalt eines Elements auslesen und auch neu Schreiben.

Wenn es nur Textinhalt ist, dann ist textContent das Mittel der Wahl.

Dazu müsste das Markup aber so aussehen:

<span class="wc-measurement-price-calculator-price"><span class="woocommerce-Price-amount amount">20,00</span>&nbsp;<span class="woocommerce-Price-currencySymbol">€</span>  / m</span>

<span class="wgm-info price-per-unit price-per-unit-loop ppu-variation-wrap">(<span class="woocommerce-Price-amount amount">10,00</span>&nbsp;<span class="woocommerce-Price-currencySymbol">€</span> / 0,5 m)</span>

Was es ohnehin tun sollte.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

natürlich sollte man innerHTML nur nehmen, wenn auch Markup berücksichtigt werden soll. Auch vereinfacht strukturiertes Markup DOM-Manipulationen. Aus

Dabei soll der Tatasächliche Preis mit dem Preis pro halber Meter optisch getauscht werden.

habe ich aber gelesen, das das „/ 0.5 m“ auch mitgenommen werden soll.

Gruß
Jürgen

[timreimann]

Ein Beispiel ist auf dieser Seite zu sehen:

https://demos.skyverge.com/shop/chevron-fabric-dimension-by-yd/

Ich möchte den Preis "$2.99 per yd" mit "$1.50 (1/2 yd)" tauschen. Klar geht das auch über Template, aber leider kann ich die entsprechenden Bereich in den PHP-templates nicht ausfindig machen und der Support ist mehr als "langsam".

Gruß Tim

[Gunnar Bittersmann]

@@timreimann

Ich möchte den Preis "$2.99 per yd" mit "$1.50 (1/2 yd)" tauschen. Klar geht das auch über Template

Es geht nur über das, was du Template nennst. Ausschließlich.

Ansonsten würden Nutzer, bei denen das JavaScript nicht ausgeführt wird (und das sind mehr als man denkt), falsche Preise zu sehen bekommen.

LLAP 🖖

[Rolf B]

Hallo timreimann,

Ich möchte den Preis "$2.99 per yd" mit "$1.50 (1/2 yd)" tauschen.

Warum willst Du da die Inhalte tauschen? Das eine ist der Preis pro Yard, das andere die Mindestabnahmemenge, diese Felder haben unterschiedliche Semantiken und werden unterschiedlich dargestellt. Willst Du die Mindestmenge groß und fett anzeigen und den Preis pro Einheit klein?! Da muss mehr passieren als nur Text zu tauschen.

Mir scheint, du willst dein Nichtverstehen der Templates durch nachträgliche Hacks an der Darstellung kompensieren. Das dürfte nicht zielführend sein. Templates sollten doch zum Anpassen gemacht sein, also wühl Dich 'rein.

Rolf

[TS]

Hello,

ist das übrigens eine Webseite für den deutschen Markt? Dann solltest Du die Preisangabenverordnung beachten. Das kann sonst üble Abmahnungen geben.

Liebe Grüße
Tom S.