Wdrożenie Omnibusa w sklepie na WooCommerce (kurs)

Dostałem zapytanie o umieszczenie formularza zapisu do newslettera w ramach usługi MailerLite na stronie internetowej działające na WordPressie. Niby nic nadzwyczajnego, ale tutaj miejsce, gdzie ów kod miał być umieszczony, było bardzo precyzyjnie wybrane i niekoniecznie łatwo dostępne do modyfikacji.

Dodawanie niestandardowego kodu HTML i JavaScript do strony za pomocą JavaScript

W takiej sytuacji jest kilka rozwiązań, zaczynając od wielu tzw. hooków dostępnych w WordPressie, gdzie za pomocą odpowiedniego filtra (lub akcji) możemy m.in. wstawić dodatkowy kod, np. właśnie zapisu do newslettera. Niestety w tym przypadku takiej możliwości nie było, bo akurat w tym konkretnym „wymarzonym na wstawienie formularza miejscu” takiego hooka nie było.

Dalej możemy np. skorzystać z różnych opcji związanych z theme builder, czyli opcja dostępna w wielu motywach, wielu tzw. page builderach (Divi, Elementor, Gutenberg), gdzie możemy często dość swobodnie odgórnie zmodyfikować nie tylko wygląd konkretnej strony, ale ogólnie szablonu dla różnych typów stron, w tym np. stron związanych z WooCommerce, bo akurat konkretnie tego dotyczyło zapytanie. Jednak również i taka opcja w przypadku tej strony, a konkretnie tego sklepu, nie występowała.

Dalej mamy atak z grubej rury, czyli bezpośrednia modyfikacja – oczywiście z wykorzystaniem motywu potomnego – plików motywu. I choć jest to rozwiązanie, które faktycznie najczęściej pozwala przeprowadzić takie modyfikacje, to jednak nie jestem jego zwolennikiem, i wykorzystuje je tylko wtedy, gdy faktycznie nie ma innego wyjścia. Głównie dlatego, że w przypadku większych zmian np. w motywie bazowym (lub np. WooCommerce, jak w tym przypadku), może się wszystko rozjechać, gdy zmodyfikowany przez nas plik, zacznie się rozmijać z tym, czego np. motyw w nowszej wersji oczekuje, że w nim znajdzie.

Natomiast istnieje jeszcze (przynajmniej) jedno, niekoniecznie standardowe rozwiązanie, czyli wykorzystanie JavaScriptu (celowo pomijam jQuery ;-)). Załóżmy, że mamy obiekt o ID „content” (#content):

<div id="content">[KOD HTML]</div>

Chcemy tu przed jego końcem umieścić trochę dodatkowego kodu HTML (lub JavaScript). W tym celu możemy skorzystać z kodu:

<script type="text/javascript">
	document.getElementById('content').insertAdjacentHTML('beforeend','[DODATKOWY KOD HTML]');
</script>

W wyniku czego otrzymamy:

<div id="content">[KOD HTML][DODATKOWY KOD HTML]</div>

Kluczowy jest tutaj element „beforeend”, który definiuje, gdzie ma być wstrzyknięty dodatkowy kod. Możemy skorzystać z takich tagów:

  • beforebegin – tuż przed, na zewnątrz obiektu (before)
  • afterbegin – na samym początku, wewnątrz obiektu (prepend)
  • beforeend – na samym końcu, wewnątrz obiektu (append)
  • afterend – tuż za, na zewnątrz obiektu (insertAfter)

W przypadku, gdy obiekt gdzie chcemy się wstrzelić, nie ma ID, a np. klasę lub ogólnie mamy do dyspozycji tylko jego typ (uwaga na wielokrotne występowanie obiektu o danej klasie lub typie), możemy kod lekko zmodyfikować, by „zaatakować” np. obiekt „p” o klasie „summary”:

document.querySelector('p.summary').insertAdjacentHTML('beforeend','[DODATKOWY KOD HTML]');

Dzięki czemu taki kod HTML:

<p class="summary">[KOD HTML]</p>

zmienimy na:

<p class="summary">[KOD HTML][DODATKOWY KOD HTML]</p>

A z racji tego, że o WordPressie mowa, to całość możemy jeszcze ubrać w funkcję, dzięki której kod JavaScript modyfikujący HTML strony dodamy do stopki:

function webinsider_wp_add_code2footer() {
?>
	<script type="text/javascript">
		document.querySelector('p.summary').insertAdjacentHTML('beforeend','[DODATKOWY KOD HTML]');
	</script>
<?php
}
add_action( 'wp_footer', 'webinsider_wp_add_code2footer' );

Oczywiście ten kod (JavaScript) można dodać do strony inaczej, tak samo, jak nie musi to być strona na WordPressie…

(!) Zgłoś błąd na stronie
Pomogłem? To może postawisz mi wirtualną kawę?
LUTy dla D-Cinelike (DJI Mini 3 Pro, DJI Avata, OSMO Pocket) od MiniFly
Wdrożenie Omnibusa w sklepie na WooCommerce
Jak (legalnie) latać dronem w Kategorii Otwartej
Wdrożenie Omnibusa w sklepie na WooCommerce (kurs)
Patryk
Wdrożenie Omnibusa w sklepie na WooCommerce (kurs)