W TRAKCIE Dodatkowe pola tekstowe po wybraniu wariantu

Cześć,

na swojej stronie przy kilku produktach mam opcję personalizacji. Produkty te mają warianty: Zwykły i personalizowany. I tera chciałbym zrobić tak, że jak klient wybirze produkt personalizowany to wyskoczą dwa dodatkowe pola "Tekst presonalizowany" oraz możliwość przesłania pliku graficznego.

Czy da się to zrobić bez większych kombinacji?

 

Dziękuję za wiadomość. Nie wiem czy dobrze się zrozumieliśmy. Mam już utworzone wszystkie warianty i cechy. Problem polega na tym, że wszystkie cechy wyświetlają się na raz (pole select, pole tekstowe i pole do wgrania pliku). Tylko, że pole tekstowe i pole do wgrania pliku dotyczą tylko sytuacji, w której ktoś wybierze odpowiednią pozycję z pola select.

Pokażę to na żywym organizmie. https://www.likocki.pl/pl/p/Likocki-Letters-Premium-PLUS/82 - pod ceną widać wszystkie warianty (Kasetka, Tekst personalizacji (jeśli wybrano), Grafika personalizacji (jeśli wybrano)). Dwie ostatnie cechy dotyczą tylko sytuacji, w której ktoś wybierze kasetkę personalizowaną. Chciałbym, żeby te pola były niewidoczne do momentu, w którym ktoś nie wybierze w polu "kasetka" opcji "personalizowana".

Z góry dziękuję za odpowiedź.

PS. Przepraszam za "zjedzone" literki w pierwszym poście. Da się to jakoś edytować?

 

Dziękuję za zainteresowanie się tematem i odpowiedź. Zastanawiam się nad tym czy nie dałoby się tego wykonać jakimś prostym if-em w JS? Na zasadzie "jeżeli pole select równa się personalizowana to: wyświetl pole tekstowe, wyświetl pole wgrania pliku; w przeciwnym razie nic nie rób" (nie znam się na składni JS, dlatego opisałem to słowami). Miałoby to szansę bytu? Odnosiłby się ten kod tylko do produktów, które korzystają z tego zestawu wariantów.

 

hmmm, zobacz czy zadziała
js

Kod:

var $select = $('select');
$select.each(function() {
   $(this).addClass($(this).children(':selected').val());
}).on('change', function(ev) {
   $(this).attr('class', '').addClass($(this).children(':selected').val());
});

css

Kod:

select, option { background: #fff; }
select.foo, option[value="foo"] { background: red; }
select.bar, option[value="bar"] { background: green; }

oczywiście w value Twoje opcje
nie wiem czy zadziała, nie testowałem

 

@likocki.pl w ramach wystawionego zgłoszenia o numerze: FEEDBACK-1291 otrzymałem informacje, że sugestia została odrzucona. Przyznam uczciwie, że tzw. zagnieżdżanie wariantów jest bardzo skomplikowaną modyfikacją i na ten moment nie planujemy jej wprowadzenia. Najprawdopodobniej w przyszłości pochylimy się nad nią ponownie, jeśli sugestia ta będzie się powtarzać wśród innych użytkowników.

Spróbuj proszę z rozwiązaniem zaproponowanym przez użytkownika Thel powyżej. Może tym sposobem uda Ci się uzyskać opisany efekt.

 

@Mariusz @TheL - bardzo dziękuję Wam za udzielenie się w moim temacie.

@TheL niestety, nie bardzo sobie poradziłem z Twoją propozycją, albo efektu nie było.

Aktualnie jest taka sytuacja:

we własnym kodzie JS jest umieszczony kod:

Kod:

function choicefn(select){
      var val = select.options[select.selectedIndex].value;
    if(val==29)
      {
        document.getElementById('personalizationfirst').setAttribute('style', "display : initial");
        document.getElementById('personalizationsecond').setAttribute('style', "display : initial");
    }
      else
    {
     document.getElementById('personalizationfirst').setAttribute('style', "display : none");
     document.getElementById('personalizationsecond').setAttribute('style', "display : none");
    }
}

Zostało teraz ręcznie zmienić html dla każdej strony z produktem, który ma w ofercie personalizację. Trzeba edytować kod by wyglądał jak w załączonym obrazku (dodać id i onchange).

Czy jest taka opcja, żebym sam umieścił te zmiany na stałe?

 

@likocki.pl sprawdzam dostępne możliwości (QA-45922), wrócę tutaj do tematu jak otrzymam informacje od specjalistów ds. Click Shop

 

Tak, jest opcja, zrób edycję pliku tpl odpowiadającego za wyświetlenie produktu.

 

@TheL - dzięki za odpowiedź. Przyznam szczerze, że nie mogę sobie z tym poradzić. Plik product/index.tpl jest chyba tym, który wyświetla produkty. Jednak użyte tam pętle uniemożliwiają mi właściwe umieszczenie kodu, w miejsca, na których mi zależy

 

a gdzie byś to dokładnie chciał?

 

@TheL, chciałbym zamienić kod html:

Kod:

<select id="option_9" name="option_9">== $0
    ...
</div>
<div class="f-row">
   ...
</div>
<div class="f-row">
...</div>

na kod:

Kod:

<select id="option_9" name="option_9" onchange="choicefn(this);">== $0 
    ...
</div>
<div class="f-row" id="personalizationfirst" style="display : initial">
   ...
</div>
<div class="f-row" id="personalizationsecond" style=" display: initial">
...</div>

 

W ramach wystawionego zgłoszenia: QA-45922, otrzymałem informacje, że wsparcie home.pl nie obejmuje takich modyfikacji. Napisałem wiadomość prywatną do użytkownika @TheL, może on będzie mógł tutaj coś doradzić.

 

Edytuj plik: product/index.tpl
Linie: 245, 254
możesz tam wcisnąć co chcesz, tylko pamiętaj, że to co jest teraz generuje opcje wszystkie, musiałbyś dodać jakiś wariant ręcznie lub zrobić ify w zależności od numeru opcji.