如何实现勾选同意条款后才显示ct-cart购物车模块？

Hey Matt, let's fix that cart visibility issue you're facing. I’ve put together a couple of solid solutions that should work without those jQuery conflicts you mentioned, plus a jQuery version if you still need it.

Step 1: Hide the Cart by Default #

First, add some CSS to make sure the cart module is hidden when the page loads. This ensures it only appears once the user agrees to your terms:

.ct-cart {
  display: none; /* Keep hidden initially */
  /* Add your existing cart styles here */
}

Step 2: Add State Listener Scripts #

Vanilla JavaScript Version (No Dependencies) #

This version avoids jQuery entirely, so you won’t have to worry about conflicts. Place this script right before your closing </body> tag, or wrap it in DOMContentLoaded to ensure elements are loaded first:

document.addEventListener('DOMContentLoaded', function() {
  const termsCheckbox = document.getElementById('tandc');
  const cartModule = document.querySelector('.ct-cart');

  // Check initial state (in case the checkbox is checked after a page refresh)
  if (termsCheckbox.checked) {
    cartModule.style.display = 'block'; // Use 'flex' instead if that's your layout
  }

  // Listen for checkbox changes
  termsCheckbox.addEventListener('change', function() {
    if (this.checked) {
      cartModule.style.display = 'block';
      cartModule.removeAttribute('disabled'); // Unlock interactions if needed
    } else {
      cartModule.style.display = 'none';
      cartModule.setAttribute('disabled', 'true'); // Lock interactions as extra precaution
    }
  });
});

jQuery Version (Conflict-Safe) #

If you still need to use jQuery, make sure it’s properly loaded and use no-conflict mode to avoid clashes with other scripts:

jQuery.noConflict();
jQuery(document).ready(function($) {
  const $terms = $('#tandc');
  const $cart = $('.ct-cart');

  // Check initial state
  if ($terms.is(':checked')) {
    $cart.show();
  }

  // Listen for checkbox changes
  $terms.on('change', function() {
    if ($(this).is(':checked')) {
      $cart.show().removeAttr('disabled');
    } else {
      $cart.hide().attr('disabled', 'true');
    }
  });
});

Quick Troubleshooting Tips #

• Double-check that your checkbox ID (tandc) matches what’s in the script—typos are a common culprit!
• Open your browser’s dev tools (F12) and check the Console tab for any errors that might be blocking the script.
• If your cart has interactive elements (like buttons or forms), you might want to add disabled to those elements too when the cart is hidden, to fully restrict access.

内容的提问来源于stack exchange，提问作者Matt Phillips