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).