Checkout multiple terms approval issue

[pixelicous]

TL;DR - When user checkout, he needs to agree to terms twice, once in user details, 2nd in payment. By removing order setting to approve the terms, i do get it once, but now paypal express checkout bypasses all terms and conditions approval.

 

Hi,

Been building my shop in the past weeks, so i have followed many solutions here that helped me greatly, so thx community

I'm an advanced user, most of my problems fixed myself.

Got to a point where i managed to automate end to end prestashop installation both for containers and regular servers.

Now I'm almost at the end, i think my only question that remains is the only below.

 

When checking out, there could be two places to access terms and conditions:

1. When a user checks out he can either use guest details or register - for which he needs to agree to terms and conditions
2. When a user gets to payment phase, he needs to agree to terms and conditions

Thus the user needs to agree twice, which is pretty weird.

• If i disable terms and conditions in the order settings, now if a user clicks the "buy with paypal" instead of regular checkout button, now he doesnt need to agree to terms and conditions anywhere, not for user creation, and not for payment (which i just disabled).

 

AT PAYMENT

 

 

Below screenshot if i disabled

Personal info tab - no consent to terms and conditions or policy (which is weird by itself, because basically i receive the user information too, gdpr wise that guest user now didnt accept anything)

Payment tab

I was also trying to change the text of the express checkout if anyone knows how to do that. especially "clicking on the order validation button below", i changed my button text

I also managed to change the "will adhere to them unconditionally" part, but after if i reboot my server and resets (didnt find a way to statically change that)

 

I have my own cloud server, no hoster or anything, full control of the files/db etc. So could follow any solution proposed.

 

 

Edited July 4, 2020 by pixelicous
mistake at the bottom (see edit history)

[pixelicous]

Anyone?

[pixelicous]

Nobody? What do people do, i'd love to hear how you overcome this obstacle...

 

Thanks in advance for anyone

[Guest]

Have you come so far and can't handle banality?

just add a checkbox condition::

{if $customer.is_logged}checked="checked"{/if}

or 

{if $logged}checked="checked"{/if}

Sample:

find in TPL:

<input name="psgdpr" type="checkbox" value="1" required="">

and change to:

<input name="psgdpr" type="checkbox" value="1" required="" {if $customer.is_logged}checked="checked"{/if}>

 

or change to:

<input name="psgdpr" type="checkbox" value="1" required="" {if $logged}checked="checked"{/if}>

 

 

and in Payment find:

./themes/classic/templates/checkout/_partials/steps/payment.tpl

<input id="conditions_to_approve[terms-and-conditions]" name="conditions_to_approve[terms-and-conditions]" required="" type="checkbox" value="1" class="ps-shown-by-js">

and change to:

<input id="conditions_to_approve[terms-and-conditions]" name="conditions_to_approve[terms-and-conditions]" required="" type="checkbox" value="1" class="ps-shown-by-js" {if $customer.is_logged}checked="checked"{/if}>

 

full code payment.tpl (auto checkbox checked and hide input)

{extends file='checkout/_partials/steps/checkout-step.tpl'}

{block name='step_content'}

  {hook h='displayPaymentTop'}

  {* used by javascript to correctly handle cart updates when we are on payment step (eg vouchers added) *}
  <div style="display:none" class="js-cart-payment-step-refresh"></div>

  {if !empty($display_transaction_updated_info)}
  <p class="cart-payment-step-refreshed-info">
    {l s='Transaction amount has been correctly updated' d='Shop.Theme.Checkout'}
  </p>
  {/if}

  {if $is_free}
    <p>{l s='No payment needed for this order' d='Shop.Theme.Checkout'}</p>
  {/if}
  <div class="payment-options {if $is_free}hidden-xs-up{/if}">
    {foreach from=$payment_options item="module_options"}
      {foreach from=$module_options item="option"}
        <div>
          <div id="{$option.id}-container" class="payment-option clearfix">
            {* This is the way an option should be selected when Javascript is enabled *}
            <span class="custom-radio float-xs-left">
              <input
                class="ps-shown-by-js {if $option.binary} binary {/if}"
                id="{$option.id}"
                data-module-name="{$option.module_name}"
                name="payment-option"
                type="radio"
                required
                {if $selected_payment_option == $option.id || $is_free} checked {/if}
              >
              <span></span>
            </span>
            {* This is the way an option should be selected when Javascript is disabled *}
            <form method="GET" class="ps-hidden-by-js">
              {if $option.id === $selected_payment_option}
                {l s='Selected' d='Shop.Theme.Checkout'}
              {else}
                <button class="ps-hidden-by-js" type="submit" name="select_payment_option" value="{$option.id}">
                  {l s='Choose' d='Shop.Theme.Actions'}
                </button>
              {/if}
            </form>

            <label for="{$option.id}">
              <span>{$option.call_to_action_text}</span>
              {if $option.logo}
                <img src="{$option.logo}">
              {/if}
            </label>

          </div>
        </div>

        {if $option.additionalInformation}
          <div
            id="{$option.id}-additional-information"
            class="js-additional-information definition-list additional-information{if $option.id != $selected_payment_option} ps-hidden {/if}"
          >
            {$option.additionalInformation nofilter}
          </div>
        {/if}

        <div
          id="pay-with-{$option.id}-form"
          class="js-payment-option-form {if $option.id != $selected_payment_option} ps-hidden {/if}"
        >
          {if $option.form}
            {$option.form nofilter}
          {else}
            <form id="payment-form" method="POST" action="{$option.action nofilter}">
              {foreach from=$option.inputs item=input}
                <input type="{$input.type}" name="{$input.name}" value="{$input.value}">
              {/foreach}
              <button style="display:none" id="pay-with-{$option.id}" type="submit"></button>
            </form>
          {/if}
        </div>
      {/foreach}
    {foreachelse}
      <p class="alert alert-danger">{l s='Unfortunately, there are no payment method available.' d='Shop.Theme.Checkout'}</p>
    {/foreach}
  </div>

  {if $conditions_to_approve|count}
    <p class="ps-hidden-by-js">
      {* At the moment, we're not showing the checkboxes when JS is disabled
         because it makes ensuring they were checked very tricky and overcomplicates
         the template. Might change later.
      *}
      {l s='By confirming the order, you certify that you have read and agree with all of the conditions below:' d='Shop.Theme.Checkout'}
    </p>

    <form id="conditions-to-approve" method="GET">
      <ul>
        {foreach from=$conditions_to_approve item="condition" key="condition_name"}
          <li {if $customer.is_logged && $condition_name == 'terms-and-conditions'}style="display:none;"{/if}>
            <div class="float-xs-left">
              <span class="custom-checkbox">
                <input id="conditions_to_approve[terms-and-conditions]" name="conditions_to_approve[terms-and-conditions]" required="" type="checkbox" value="1" class="ps-shown-by-js" {if $customer.is_logged}checked="checked"{/if}>
                <span><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
              </span>
            </div>
            <div class="condition-label">
              <label class="js-terms" for="conditions_to_approve[{$condition_name}]">
                {$condition nofilter}
              </label>
            </div>
          </li>
        {/foreach}
    </ul>
    </form>
  {/if}

  {if $show_final_summary}
    {include file='checkout/_partials/order-final-summary.tpl'}
  {/if}

  <div id="payment-confirmation">
    <div class="ps-shown-by-js">
      <button type="submit" {if !$selected_payment_option} disabled {/if} class="btn btn-primary center-block">
        {l s='Order with an obligation to pay' d='Shop.Theme.Checkout'}
      </button>
      {if $show_final_summary}
        <article class="alert alert-danger mt-2 js-alert-payment-conditions" role="alert" data-alert="danger">
          {l
            s='Please make sure you\'ve chosen a [1]payment method[/1] and accepted the [2]terms and conditions[/2].'
            sprintf=[
              '[1]' => '<a href="#checkout-payment-step">',
              '[/1]' => '</a>',
              '[2]' => '<a href="#conditions-to-approve">',
              '[/2]' => '</a>'
            ]
            d='Shop.Theme.Checkout'
          }
        </article>
      {/if}
    </div>
    <div class="ps-hidden-by-js">
      {if $selected_payment_option and $all_conditions_approved}
        <label for="pay-with-{$selected_payment_option}">{l s='Order with an obligation to pay' d='Shop.Theme.Checkout'}</label>
      {/if}
    </div>
  </div>

  {hook h='displayPaymentByBinaries'}

  <div class="modal fade" id="modal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}">
          <span aria-hidden="true">×</span>
        </button>
        <div class="js-modal-content"></div>
      </div>
    </div>
  </div>
{/block}

etc ........

Edited July 17, 2020 by Guest (see edit history)

[pixelicous]

On 7/17/2020 at 9:58 AM, Guest said:

 

Thank you for your elaborate post.

I preferred checking with the community instead of reinventing the wheel thus preferred handling it last myself if i have no answers.

Till now i tried avoiding custom development of anything "serious" as I had much on the plate when creating the shop as it is.

I will have a long look tomorrow at your reply and see how to execute it.

Thanks again, greatly appreciated.

[pixelicous]

On 7/17/2020 at 9:58 AM, Guest said:

 

Ok, I tried your suggestion, and basically the idea should work.

However, when you use "checked", for some reason clicking on the paypal buttons after generate errors.

No matter what I do, when i do the "checked" hack to select automatically, the form fails.

I tried even without any IF statements, didn't hide the form or input html tag and its just the same.

I think {if $logged} is deprecated btw, only $customer.is_logged should be used. 

 

I have a new issue though,  I switched to the new official prestashop/paypal module 

The modules doesnt honor that order setting of showing "Terms and conditions". (preferences>order settings)

So i dug in, there is no check if $conditions_to_approve exists.

I cloned the github repo, started checking inside. Shame you can't open any issues there, it's so annoying.

 

When I tried modifying the file paypal.tpl (under /modules/ps_checkout/views/templates/front/paymentOptions) myself and add that bit:

Whether it is  {if $conditions_to_approve|count}   or {if $conditions_to_approve}   it just doesn't display anything, i added debug printouts to the template files, there is no value.

I had issues with $customer.is_logged, for some reason it was true also for a guest? I don't understand why.. so when is a customer not logged? maybe before he enters details at the first step? I was entering my debug print outs at payment.

What worked for me is {if $customer.is_logged && not $customer.is_guest}

 

Any idea where i should look out for passing $conditions_to_approve from the code/functions? So it will have some value. Never had prestashop development experience yet, I guess this module does some sort of module override, but i can always change the code directly, maybe even suggest it as a pull request to the original code as it will help everyone!

 

 

Edited July 24, 2020 by pixelicous
updated finds (see edit history)

[pixelicous]

Well it appears the paypal JS is actually listening for CHECK events.

I had to open up the JS and look down at the code below.

Made some modifications and it works. However I just blew the thing all together for now till i have time to deal with it.

I do not ask for accepting terms of service at all as when the user puts his details in the first step he gets the that requirement. which is pretty weird considering he is a guest.

That terms approval comes from the account creation module.. which would mean more modifications if want to go down that road *face palm*

 

 document.querySelector('.buttons-approve').addEventListener('change', (event) => {
        // Enable or disable the button when it is checked or unchecked
        if (event.target.checked) {
          actions.enable();
          document.querySelector('#paypal-approve-error').classList.add('hide-paypal-error');
        } else {
          actions.disable();
        }
      });
    },
    onClick() {
      // Show a validation error if the checkbox is not checked
      if (!document.querySelector('.buttons-approve').checked) {
        document.querySelector('#paypal-approve-error').classList.remove('hide-paypal-error');
      }
    },