Checkout_confirmation hook working but visually different

[14Steve14]

I have a hook that shows a toggle and message in checkout_confirmation.php above the finalise button, but it does not look the same as all other toggles in the site. A.I. has tried to help, but failed, so I am hoping someone here may be able to help get the toggle to look and work the same as all the others i.e. show a red border before being switched, and then show green border and infill once toggled. This is the hook code

Code: Select all

<?php
/*
  includes/hooks/shop/checkout_confirmation/digital_waiver.php
  CE Phoenix Compliance Engine
*/

class hook_shop_checkout_confirmation_digital_waiver {

  public function listen_injectFormDisplay() {

    $this->load_lang();

    global $cart;

    // Safety check
    if (!isset($cart) || !is_object($cart) || empty($cart->contents)) {
      return '';
    }

    // Only show for virtual or mixed baskets
    $cart_type = $cart->get_content_type();

    if ($cart_type !== 'virtual' && $cart_type !== 'mixed') {
      return '';
    }

    $checkbox_html = '';

    $checkbox_html .= '<div class="row mb-3 align-items-center" id="digital_waiver_container">';

    $checkbox_html .= '  <div class="col-sm-4 text-sm-end">';
    $checkbox_html .= '    <strong>' . MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TITLE . '</strong>';
    $checkbox_html .= '  </div>';

    $checkbox_html .= '  <div class="col-sm-8">';
    $checkbox_html .= '    <div class="form-check form-switch">';

    $checkbox_html .= '      <input class="form-check-input"
                                   type="checkbox"
                                   role="switch"
                                   id="inputDW"
                                   name="confirm_dw"
                                   value="1"
                                   required>';

    $checkbox_html .= '      <label class="form-check-label text-muted" for="digital_waiver">';
    $checkbox_html .= '        <small>' . MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TEXT . '</small>';
    $checkbox_html .= '      </label>';

    $checkbox_html .= '    </div>';
    $checkbox_html .= '  </div>';

    $checkbox_html .= '</div>';

    // Ensure Bootstrap validation styling is applied consistently
    $checkbox_html .= '<script>';
$checkbox_html .= '$(function() {';
$checkbox_html .= '  var form = document.querySelector("form[name=checkout_confirmation]");';
$checkbox_html .= '  if (!form) return;';
$checkbox_html .= '  form.classList.add("was-validated");';
$checkbox_html .= '});';
$checkbox_html .= '</script>';

    return $checkbox_html;
  }


  public function listen_before_process() {

    if (empty($_POST['digital_waiver'])) {

      $GLOBALS['messageStack']->add_session(
        'checkout_confirmation',
        MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_ERROR,
        'danger'
      );

      tep_redirect(tep_href_link('checkout_confirmation.php', '', 'SSL'));
    }
  }


  private function load_lang() {
    global $language;

    include_once(
      'includes/languages/' .
      $language .
      '/hooks/shop/checkout_confirmation/digital_waiver.php'
    );
  }
}

[tessthepup]

I have a hook that shows a toggle and message in checkout_confirmation.php above the finalise button, but it does not look the same as all other toggles in the site. A.I. has tried to help, but failed, so I am hoping someone here may be able to help get the toggle to look and work the same as all the others i.e. show a red border before being switched, and then show green border and infill once toggled. This is the hook code

Code: Select all

<?php
/*
  includes/hooks/shop/checkout_confirmation/digital_waiver.php
  CE Phoenix Compliance Engine
*/

class hook_shop_checkout_confirmation_digital_waiver {

  public function listen_injectFormDisplay() {

    $this->load_lang();

    global $cart;

    // Safety check
    if (!isset($cart) || !is_object($cart) || empty($cart->contents)) {
      return '';
    }

    // Only show for virtual or mixed baskets
    $cart_type = $cart->get_content_type();

    if ($cart_type !== 'virtual' && $cart_type !== 'mixed') {
      return '';
    }

    $checkbox_html = '';

    $checkbox_html .= '<div class="row mb-3 align-items-center" id="digital_waiver_container">';

    $checkbox_html .= '  <div class="col-sm-4 text-sm-end">';
    $checkbox_html .= '    <strong>' . MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TITLE . '</strong>';
    $checkbox_html .= '  </div>';

    $checkbox_html .= '  <div class="col-sm-8">';
    $checkbox_html .= '    <div class="form-check form-switch">';

    $checkbox_html .= '      <input class="form-check-input"
                                   type="checkbox"
                                   role="switch"
                                   id="inputDW"
                                   name="confirm_dw"
                                   value="1"
                                   required>';

    $checkbox_html .= '      <label class="form-check-label text-muted" for="digital_waiver">';
    $checkbox_html .= '        <small>' . MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TEXT . '</small>';
    $checkbox_html .= '      </label>';

    $checkbox_html .= '    </div>';
    $checkbox_html .= '  </div>';

    $checkbox_html .= '</div>';

    // Ensure Bootstrap validation styling is applied consistently
    $checkbox_html .= '<script>';
$checkbox_html .= '$(function() {';
$checkbox_html .= '  var form = document.querySelector("form[name=checkout_confirmation]");';
$checkbox_html .= '  if (!form) return;';
$checkbox_html .= '  form.classList.add("was-validated");';
$checkbox_html .= '});';
$checkbox_html .= '</script>';

    return $checkbox_html;
  }


  public function listen_before_process() {

    if (empty($_POST['digital_waiver'])) {

      $GLOBALS['messageStack']->add_session(
        'checkout_confirmation',
        MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_ERROR,
        'danger'
      );

      tep_redirect(tep_href_link('checkout_confirmation.php', '', 'SSL'));
    }
  }


  private function load_lang() {
    global $language;

    include_once(
      'includes/languages/' .
      $language .
      '/hooks/shop/checkout_confirmation/digital_waiver.php'
    );
  }
}

@14Steve14

First things I noticed was your checkbox is named confirm_dw

Code: Select all

name="confirm_dw"

but your validation checks for:

Code: Select all

$_POST['digital_waiver']

Try changing to

Code: Select all

if (empty($_POST['confirm_dw'])) {

not sure if this is what you mean but without supporting language file it is hard to test

[14Steve14]

I have a hook that shows a toggle and message in checkout_confirmation.php above the finalise button, but it does not look the same as all other toggles in the site. A.I. has tried to help, but failed, so I am hoping someone here may be able to help get the toggle to look and work the same as all the others i.e. show a red border before being switched, and then show green border and infill once toggled. This is the hook code

Code: Select all

<?php
/*
  includes/hooks/shop/checkout_confirmation/digital_waiver.php
  CE Phoenix Compliance Engine
*/

class hook_shop_checkout_confirmation_digital_waiver {

  public function listen_injectFormDisplay() {

    $this->load_lang();

    global $cart;

    // Safety check
    if (!isset($cart) || !is_object($cart) || empty($cart->contents)) {
      return '';
    }

    // Only show for virtual or mixed baskets
    $cart_type = $cart->get_content_type();

    if ($cart_type !== 'virtual' && $cart_type !== 'mixed') {
      return '';
    }

    $checkbox_html = '';

    $checkbox_html .= '<div class="row mb-3 align-items-center" id="digital_waiver_container">';

    $checkbox_html .= '  <div class="col-sm-4 text-sm-end">';
    $checkbox_html .= '    <strong>' . MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TITLE . '</strong>';
    $checkbox_html .= '  </div>';

    $checkbox_html .= '  <div class="col-sm-8">';
    $checkbox_html .= '    <div class="form-check form-switch">';

    $checkbox_html .= '      <input class="form-check-input"
                                   type="checkbox"
                                   role="switch"
                                   id="inputDW"
                                   name="confirm_dw"
                                   value="1"
                                   required>';

    $checkbox_html .= '      <label class="form-check-label text-muted" for="digital_waiver">';
    $checkbox_html .= '        <small>' . MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TEXT . '</small>';
    $checkbox_html .= '      </label>';

    $checkbox_html .= '    </div>';
    $checkbox_html .= '  </div>';

    $checkbox_html .= '</div>';

    // Ensure Bootstrap validation styling is applied consistently
    $checkbox_html .= '<script>';
$checkbox_html .= '$(function() {';
$checkbox_html .= '  var form = document.querySelector("form[name=checkout_confirmation]");';
$checkbox_html .= '  if (!form) return;';
$checkbox_html .= '  form.classList.add("was-validated");';
$checkbox_html .= '});';
$checkbox_html .= '</script>';

    return $checkbox_html;
  }


  public function listen_before_process() {

    if (empty($_POST['digital_waiver'])) {

      $GLOBALS['messageStack']->add_session(
        'checkout_confirmation',
        MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_ERROR,
        'danger'
      );

      tep_redirect(tep_href_link('checkout_confirmation.php', '', 'SSL'));
    }
  }


  private function load_lang() {
    global $language;

    include_once(
      'includes/languages/' .
      $language .
      '/hooks/shop/checkout_confirmation/digital_waiver.php'
    );
  }
}

@14Steve14

First things I noticed was your checkbox is named confirm_dw

Code: Select all

name="confirm_dw"

but your validation checks for:

Code: Select all

$_POST['digital_waiver']

Try changing to

Code: Select all

if (empty($_POST['confirm_dw'])) {

not sure if this is what you mean but without supporting language file it is hard to test

Here are the two constants from the language file

Code: Select all

const MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TITLE = 'Digital Content Delivery Terms';

const MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TEXT = 'I explicitly consent to the immediate delivery of this digital content and acknowledge that I will lose my 14-day statutory right of withdrawal once the download starts.';

Just created an image which may make things clearer by what I mean when the two toggles are different.

toggles.jpg

[Omar_one]

@14Steve14
try this

Code: Select all

<?php
/*
includes/hooks/shop/checkout_confirmation/digital_waiver.php
CE Phoenix Compliance Engine
*/
class hook_shop_checkout_confirmation_digital_waiver {
  public function listen_injectFormDisplay() {

    $this->load_lang();

    global $cart;

    // Safety check
    if (!isset($cart) || !is_object($cart) || empty($cart->contents)) {
      return '';
    }

    // Only show for virtual or mixed baskets
    $cart_type = $cart->get_content_type();

    if ($cart_type !== 'virtual' && $cart_type !== 'mixed') {
      return '';
    }

    $checkbox_html = '';

    $checkbox_html .= '<div class="row mb-3 align-items-center" id="digital_waiver_container">';

    $checkbox_html .= '  <div class="col-sm-4 text-sm-end">';
    $checkbox_html .= '    <strong>' . MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TITLE . '</strong>';
    $checkbox_html .= '  </div>';

    $checkbox_html .= '  <div class="col-sm-8">';
    $checkbox_html .= '    <div class="form-check form-switch">';

    // FIXED: ID changed to 'digital_waiver' to match the label's "for" attribute and the POST name
    $checkbox_html .= '      <input class="form-check-input"
                                   type="checkbox"
                                   role="switch"
                                   id="digital_waiver"
                                   name="digital_waiver"
                                   value="1"
                                   required>';

    // FIXED: Now correctly references 'digital_waiver'
    $checkbox_html .= '      <label class="form-check-label text-muted" for="digital_waiver">';
    $checkbox_html .= '        <small>' . MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TEXT . '</small>';
    $checkbox_html .= '      </label>';
    
    // Optional: Adds Bootstrap feedback messages if the form triggers validation
    $checkbox_html .= '      <div class="invalid-feedback">You must agree to the digital waiver to proceed.</div>';

    $checkbox_html .= '    </div>';
    $checkbox_html .= '  </div>';

    $checkbox_html .= '</div>';

    // Ensure Bootstrap validation styling is applied consistently
    $checkbox_html .= '<script>';
    $checkbox_html .= '$(function() {';
    $checkbox_html .= '  var form = document.querySelector("form[name=checkout_confirmation]");';
    $checkbox_html .= '  if (!form) return;';
    $checkbox_html .= '  form.classList.add("was-validated");';
    $checkbox_html .= '});';
    $checkbox_html .= '</script>';

    return $checkbox_html;
  }

  public function listen_before_process() {
    // FIXED: This now successfully pairs with name="digital_waiver"
    if (empty($_POST['digital_waiver'])) {

      $GLOBALS['messageStack']->add_session(
        'checkout_confirmation',
        MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_ERROR,
        'danger'
      );

      tep_redirect(tep_href_link('checkout_confirmation.php', '', 'SSL'));
    }
  }

  private function load_lang() {
    global $language;

    include_once(
      'includes/languages/' .
      $language .
      '/hooks/shop/checkout_confirmation/digital_waiver.php'
    );
  }
}

[14Steve14]

@Omar_one Many thanks for trying to help. We have tried almost everything with this and it just stays a plain toggle. Unfortunately your suggested change made no difference, but the consolation is that the hook still worked. When I tried changing things it broke.

[Omar_one]

I think you need to
- Remove the custom validation script . Because checkout forms usually have built-in validation checks.
- adding form-switch-input to the classes, this will let native CSS engine take care of the styling.
try this

Code: Select all

<?php
/*
  includes/hooks/shop/checkout_confirmation/digital_waiver.php
  CE Phoenix Compliance Engine
*/

class hook_shop_checkout_confirmation_digital_waiver {

  public function listen_injectFormDisplay() {

    $this->load_lang();

    global $cart;

    // Safety check
    if (!isset($cart) || !is_object($cart) || empty($cart->contents)) {
      return '';
    }

    // Only show for virtual or mixed baskets
    $cart_type = $cart->get_content_type();

    if ($cart_type !== 'virtual' && $cart_type !== 'mixed') {
      return '';
    }

    $checkbox_html = '';

    $checkbox_html .= '<div class="row mb-3 align-items-center" id="digital_waiver_container">';

    $checkbox_html .= '  <div class="col-sm-4 text-sm-end">';
    $checkbox_html .= '    <strong>' . MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TITLE . '</strong>';
    $checkbox_html .= '  </div>';

    $checkbox_html .= '  <div class="col-sm-8">';
    $checkbox_html .= '    <div class="form-check form-switch">';

    // Phoenix-style toggle
    $checkbox_html .= '      <input class="form-check-input form-switch-input"
                                   type="checkbox"
                                   id="digital_waiver"
                                   name="digital_waiver"
                                   value="1"
                                   required>';

    $checkbox_html .= '      <label class="form-check-label" for="digital_waiver">';
    $checkbox_html .= '        <small>' . MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_TEXT . '</small>';
    $checkbox_html .= '      </label>';

    $checkbox_html .= '    </div>';
    $checkbox_html .= '  </div>';

    $checkbox_html .= '</div>';

    return $checkbox_html;
  }

  public function listen_before_process() {

    if (empty($_POST['digital_waiver'])) {

      $GLOBALS['messageStack']->add_session(
        'checkout_confirmation',
        MODULE_CHECKOUT_CONFIRMATION_DIGITAL_WAIVER_ERROR,
        'danger'
      );

      tep_redirect(tep_href_link('checkout_confirmation.php', '', 'SSL'));
    }
  }

  private function load_lang() {
    global $language;

    include_once(
      'includes/languages/' .
      $language .
      '/hooks/shop/checkout_confirmation/digital_waiver.php'
    );
  }
}

[burt]

I've not looked at the code or tried it, but the first thing that came to mind is that the form in checkout_shipping "was-validated" whereas the form in checkout_confirmation is not.

I think if you make the checkout_confirmation form was-validated...by overriding the checkout_confirmation page into your template (and changing the Form appropriately), it might then be as you want it.

Take a look at the difference in the

Code: Select all

new Form(

lines in both files.

[BrockleyJohn]

I've not looked at the code or tried it, but the first thing that came to mind is that the form in checkout_shipping "was-validated" whereas the form in checkout_confirmation is not.

I think if you make the checkout_confirmation form was-validated...by overriding the checkout_confirmation page into your template (and changing the Form appropriately), it might then be as you want it.

Take a look at the difference in the

Code: Select all

new Form(

lines in both files.

Your hook already has a jquery script that attempts to add this class to the form. Have you checked the console for javascript errors?
If you use a template override as Gary suggests, you can lose the script section in the hook code.

[14Steve14]

Thank you to everyone for their help and guidance. With a few changes to what I had, I implemented Gary's @burt suggestion as the file had already been overwritten and everything works fine. I removed the old jquery stuff from the actual hook and everything is now working as it should.

This hook all came about as we sell downloadable products and the system needed to comply with the latest EU regulation which now requires explicit consent to remove the 14 day cooling off period when it used to rely on implied consent where we had text on the product description page.

[burt]

1. You have a couple of tep_* functions which surely don't exist in recent versions of Phoenix - artifacts where AI conflates Phoenix with osCommerce. -> if that block of code invokes, it'll bomb out.
2. You don't need load_lang if the lang file is located in the correct place

In your original pasted code you had a block of javascript that added was-validated class. That probably would have worked were it not for AI conflating jQuery and javascript. Phoenix has no jQuery. Always ask AI for pure javascript.

Also, extra;

3a. Write something (date/time) to the DB to flag that the user agreed to your waiver for this Order
3b. And show this on the account_history_info page for this Order