Na etapie zamówienia domyślnie znajduje się checkbox (krateczka) zgody na warunki regulaminu który musi być zaznaczony aby przejść dalej.

Czasem zachodzi potrzeba dodania dodatkowej, obowiązkowej zgody klienta aby proces zamówienia mógł być zrealizowany. Np. w kwestii akceptacji na przetwarzanie danych osobowych (tzw „Ustawa Konsumencka”). Dziś pokażemy jak dodać taką kratkę.

Tutorial jest przeznaczony dla procesu krokowego wykonywania zamówienia (nie „one page checkout„).  Kratka pojawia się na 4 kroku „Wysyłka„. Jeśli masz włączony proces jednostronnicowy wykonywania zamówienia – modyfikacja będzie odmienna. Postaramy się niebawem umieścić stosowną instrukcję na naszym blogu.

Tutorial jest przeznaczony pod wersję Presta Shop 1.6 jednak na nieduże odstępstwa w kodzie w stosunku do poprzednich wersji możesz spróbować wdrożyć to na Twojej wersji.

Dodanie checkboxa w HTML

Otwieramy plik:


themes/{NAZWA-SZABLONU}/order-carrier.tpl

Pod checkboxem z zaznaczeniem regulaminu (okolice 366 linii):


<p class="checkbox">
<input type="checkbox" name="cgv" id="cgv" value="1" {if $checkedTOS}checked="checked"{/if} />
<label for="cgv">{l s='I agree to the terms of service and will adhere to them unconditionally.'}</label>
<a href="{$link_conditions|escape:'html':'UTF-8'}" class="iframe" rel="nofollow">{l s='(Read the Terms of Service)'}</a>
</p>

doklejamy nasz chceckbox:


<div style="clear: both;"></div>
<p class="checkbox">
<input type="checkbox" name="cgv_duo" id="cgv_duo" value="1" />
<label for="cgv_duo">{l s='Tutaj wpisz komunikat związany z drugim checkboxem'}</label>
</p>

Komunikat, gdy nie zaznaczono checkboxa

W tym samym pliku (okolice 425 linii):


themes/{NAZWA-SZABLONU}/order-carrier.tpl

Na jego końcu, zamieniamy kod Smarty:


{addJsDefL name=msg_order_carrier}{l s='You must agree to the terms of service before continuing.' js=1}{/addJsDefL}

na:


{addJsDefL name=msg_order_carrier}{l s='You must agree to the terms of service before continuing.' js=1}{/addJsDefL}
{addJsDefL name=msg_order_carrier2}{l s='Nie zaznaczyłeś drugiej kratki' js=1}{/addJsDefL}

Oczywiście dodajemy komunikat wg uznania.

Mechanizm (JavaScript) pokazywania komunikatu

Otwieramy plik:


themes/{NAZWA-SZABLONU}/js/order-carrier.js

Odnajdujemy funkcję acceptCGV() i na jej początku (zaraz po klamrze otwierającej  { ) wklejamy kod:


if (!$('#cgv_duo').is(":checked")) {
if (!!$.prototype.fancybox)
$.fancybox.open([
{
type: 'inline',
autoScale: true,
minHeight: 30,
content: '<p class="fancybox-error">' + msg_order_carrier2 + '</p>'
}],
{
padding: 0
});
else
alert(msg_order_carrier2);
return false;
}

Na identycznej zasadzie możemy dodać dowolną ilość takich checkboxów. Oczywiście odpowiednio zmieniając komunikaty oraz identyfikator checkboxa (tutaj został użyty cgv_duo – możemy użyć np. cgv_tres).

 

 

Share This:

  1. Kuba says:

    Bardzo przydatny artykuł. Mam jednak pytanie czy jest możliwość, aby dodatkowy chackbox pojawiał się tylko dla wybranych produktów, które wymagają zgody na czynosci dodatkowe, które nie są objęte regulaminem

    • admin
      admin says:

      A czy te wybrane produkty mają być z konkretnej kategorii ? Wtedy będzie łatwiej wstawić odpowiedni warunek. Znajdował by się on w pliku szablonu Smarty tpl. Ewentualnie można stworzyć ukrytą kategorię i do niej dopisać te wybrane produkty.

          • admin
            admin says:

            Wybacz za długi czas oczekiwania. Oto warunek aby pokazać lub ukryć checkbox jeśli znajdzie się w koszyku produkt z danej kategorii. W naszym przypadku ID kategorii to 11:

            1. Controller – w pliku:

            controllers/front/OrderController.php

            Na linii około 180 po wywołaniu:


            case OrderController::STEP_DELIVERY:
            if (Tools::isSubmit('processAddress')) {
            $this->processAddress();
            }
            $this->autoStep();
            $this->_assignCarrier();

            dodaj kod:


            $productsByCategory = array();

            if (!empty($this->context->cart->getProducts(true))) {
            foreach ($this->context->cart->getProducts(true) as $productitem) {
            $productsByCategory[$productitem['id_category_default']][] = $productitem['id_product'];
            }
            }

            $this->context->smarty->assign('productsByCategory', $productsByCategory);

            2. Widok – w pliku:

            themes/default-bootstrap/order-carrier.tpl

            W miejscu gdzie ma się pojawić / nie pojawić checkbox dodaj warunek:


            {if $productsByCategory.11}
            jest produkt z kategorii 11 (pokazujemy checkbox)
            {else}
            nie ma produktu z kategorii 11 (nie pokazujemy checkboxa)
            {/if}

            Oczywiście to tylko mechanizm. Musisz to odpowiednio sprzężyć z instrukcją zawartą w poście

    • admin
      admin says:

      Raczej nie. Jest to sprężone z JavaScript chyba żeby wymusić zaznaczenie tego elementu np 2 sekundy po wczytaniu strony. Jednak może być to w sprzeczności z tzw. Ustawą Konsumencką

  2. j says:

    Hej Dzięki za poradnik. Mi niestety nie pojawia sie komunikat gdy nie zaznaczymy checkboxa.

    kod:

    function acceptCGV()
    {
    if (!$(‚#cgv_3’).is(„:checked”)) {
    if (!!$.prototype.fancybox)
    $.fancybox.open([
    {
    type: ‚inline’,
    autoScale: true,
    minHeight: 30,
    content: ” + msg_order_carrier3 + ”
    }],
    {
    padding: 0
    });
    else
    alert(msg_order_carrier3);
    return false;
    }
    if (!$(‚#cgv_duo’).is(„:checked”)) {
    if (!!$.prototype.fancybox)
    $.fancybox.open([
    {
    type: ‚inline’,
    autoScale: true,
    minHeight: 30,
    content: ” + msg_order_carrier2 + ”
    }],
    {
    padding: 0
    });
    else
    alert(msg_order_carrier2);
    return false;
    }

    if (typeof msg_order_carrier != ‚undefined’ && $(‚#cgv’).length && !$(‚input#cgv:checked’).length)
    {
    if (!!$.prototype.fancybox)
    $.fancybox.open([
    {
    type: ‚inline’,
    autoScale: true,
    minHeight: 30,
    content: ” + msg_order_carrier + ”
    }],
    {
    padding: 0
    });
    else
    alert(msg_order_carrier);
    }
    else
    return true;
    return false;
    }

  3. Sławek says:

    Witam. Świetnie działa drugi checkbox w 5 krokach, jednak jak sprawić by działał w jednym kroku?
    W którym pliku dokonać zmiany?
    Pozdrawiam.

    • admin
      admin says:

      Niestety nie robiliśmy tej modyfikacji dla „One Page Checkout”. Była by tu konieczna modyfikacja innych szablonów na podobnej zasadzie jak tutaj i możliwe że trzeba by było zmienić inny skrypt JavaScript. Najlepiej przeanalizować w jaki sposób działa w tym trybie domyślne ten element ( checkbox ) i powielić nasze rozwiązanie. Jest tam dość dużo kwestii związanych z walidacją i bardzo wskazana jest uprzednia kopia bezpieczeństwa

  4. Mike says:

    Fajny artykul, bardzo przydatny.
    Zrobilem wszystko zgodnie z instrukcją, zastrzeżenie mam tylko do tego ze jak sa oba boxy odhaczone to wywala tylko jeden komunikat np box1 nie zaznaczono, zamiast box1 i box2 nie zaznaczono.
    Ale moje pytanie dotyczy innej kwesti.
    Jak przeniesc boxy np do kroku 3lub2, tak aby walidacja działała? Sam html poprzenosilem, cala funkcje js wkleilem do order adresses ale niestety nie dxiala mi to, tj przechodzi dalej pomimo nie zaznaczonych boxow.

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *