/** * Model jednej dynamicznej ceny - warstwa wizualna. * * Jedno zadanie: zdjac DRUGA cene tam, gdzie glowna jest widoczna w tej samej chwili. * * DLACZEGO PROG, A NIE ZWYKLE UKRYCIE: natywna cena wariantu stoi nad przyciskiem, pod lista * wariantow - czyli dokladnie tam, gdzie na telefonie potrzebna jest kotwica. Lista wariantow * wypycha glowna cene poza kadr, wiec na waskim ekranie druga cena ZOSTAJE jako jedyna widoczna * przy wyborze. Model jednej ceny obowiazuje od progu w gore, gdzie obie ceny sa w kadrze. * * Prog jest PRZYBLIZENIEM warunku "obie ceny w kadrze", nie jego pomiarem: media query zna * szerokosc okna, a nie wysokosc formularza wariantow - ta waha sie od trzech pol do kilkuset. * Konsument, u ktorego formularz jest wyjatkowo wysoki, podnosi prog u siebie jedna linia * w `bricks-child-overrides/style.css`: * * :root { --lukuro-price-single-breakpoint: 1200px; } * * UWAGA: sama zmienna nie wystarczy do przestawienia progu w `@media` - media query nie czyta * zmiennych CSS. Zmienna jest deklaracja wartosci dla stylow konsumenta i dla czytajacego; * prog w media query ponizej idzie za nia i przy zmianie trzeba ruszyc oba miejsca albo * nadpisac regule wlasnym `@media` w warstwie konsumenta. * * KLASA `lukuro-price-single` NA `` JEST WARUNKIEM, BEZ KTOREGO TEN ARKUSZ NIC NIE ROBI - * i to jest zabezpieczenie zmierzone, nie ostroznosc. Arkusz jedzie na KAZDA karte produktu, * takze tam, gdzie kontrolka "od" jest odznaczona i podmiana nie ma celu. Bez tego warunku * konfiguracja "przelacznik wlaczony, kontrolka odznaczona" chowalaby natywna cene wariantu, * nie dajac nic w zamian: glowna cena zostawalaby zakresem, a kupujaca po wyborze wariantu nie * widzialaby ZADNEJ ceny wariantu. Klase dokleja skrypt dopiero po znalezieniu kotwicy * i formularza wariantow. * * Skutkiem ubocznym jest degradacja w dobra strone: bez JavaScriptu klasa nie powstaje, wiec * natywna cena zostaje widoczna - dokladnie tak, jak ma wygladac stan bez skryptu. * * @package Lukuro * @author lukuro */ :root { --lukuro-price-single-breakpoint: 768px; } @media ( min-width: 768px ) { .lukuro-price-single .woocommerce-variation-price { display: none; } }