Obligation to pay button disabled

[webthinkers]

PS version 1.7 is acting strange lately , now the obligation to pay button suddenly is disabled and customers cannot able to purchase, PS versions is not stable, do not know if anybody else is facing the same issue or not with PS versions.

Thanks in advance for the fix 

[webthinkers]

No fix or suggestions?

[Knowband Plugins]

Please try to check if there is any error present in console ( ctrl + shift + J ). In case if there is no error then we suggest you to hire a developer for this issue.

[webthinkers]

Screenshot attached with the error description ( ctrl + shift + J )

Edited October 13, 2021 by webthinkers (see edit history)

[alexbaysu]

Hello,

 

What's your PrestaShop version?

[webthinkers]

PS Version is 1.7.8.0 ( Latest )

[webthinkers]

So there is no fix for the situation we are in after upgrade?

[webthinkers]

 nothing seems to work, going with PS was a mistake 

Edited October 27, 2021 by webthinkers (see edit history)

[Darussalam]

The fix was very easy but not clearly explained.

You need to edit this file: /themes/ *your theme name*/templates/checkout/partials/steps/payment.tpl
Change the word disabled to enabled. In my theme it was on line 154 (or just search for the word disabled)

Change this line <button type="submit" {if !$selected_payment_option} disabled {/if} class="btn btn-primary center-block">

to this: <button type="submit" {if !$selected_payment_option} enabled {/if} class="btn btn-primary center-block">

[webthinkers]

10 hours ago, Darussalam said:

The fix was very easy but not clearly explained.

You need to edit this file: /themes/ *your theme name*/templates/checkout/partials/steps/payment.tpl
Change the word disabled to enabled. In my theme it was on line 154 (or just search for the word disabled)

Change this line <button type="submit" {if !$selected_payment_option} disabled {/if} class="btn btn-primary center-block">

to this: <button type="submit" {if !$selected_payment_option} enabled {/if} class="btn btn-primary center-block">

Here is the code with default theme payment.tpl code 

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

{block name='step_content'}

  {hook h='displayPaymentTop'}

  {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>
            <div class="float-xs-left">
              <span class="custom-checkbox">
                <input  id    = "conditions_to_approve[{$condition_name}]"
                        name  = "conditions_to_approve[{$condition_name}]"
                        required
                        type  = "checkbox"
                        value = "1"
                        class = "ps-shown-by-js"
                >
                <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</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">&times;</span>
        </button>
        <div class="js-modal-content"></div>
      </div>
    </div>
  </div>
{/block}

I do not see any word disabled except for once above the code where <span starts

[JBW]

It's a known bug: https://github.com/PrestaShop/PrestaShop/issues/26274

Here a workaround:  https://github.com/PrestaShop/PrestaShop/pull/18904#issuecomment-944348444

[quentic]

On 10/27/2021 at 5:47 AM, Darussalam said:

The fix was very easy but not clearly explained.

You need to edit this file: /themes/ *your theme name*/templates/checkout/partials/steps/payment.tpl
Change the word disabled to enabled. In my theme it was on line 154 (or just search for the word disabled)

Change this line <button type="submit" {if !$selected_payment_option} disabled {/if} class="btn btn-primary center-block">

to this: <button type="submit" {if !$selected_payment_option} enabled {/if} class="btn btn-primary center-block">

We can remove the whole condition as "enabled" is not a standard html5 attribute.

Prestashop handles the enabled/disabled by a class attribute.

Edited October 28, 2021 by quentic
improvement (see edit history)

[juju298]

@quentic can you tell me what I should remove? Do you mean removing the whole line <button type="submit" {if !$selected_payment_option} enabled {/if} class="btn btn-primary center-block"> ?

[juju298]

@webthinkers did you solve the problem? 

 

[webthinkers]

7 hours ago, juju298 said:

@webthinkers did you solve the problem? 

 

Yes , try upgrading the PHP version, it did the trick for us.

[juju298]

Which php do you use ? And heischend version of prestashop?