实现购物车复选框选择可视化并通过$GET传递至邮件展示

Alright, let's work through your two requirements—getting those checked checkbox options to show up in your cart, and then passing those selections via GET to display in an email. Here's how to adjust your existing code to make this happen:

1. Display Checked Items in the Cart (#mycart) #

Your current JavaScript handles price updates, but we need to add logic to add/remove items from the cart when checkboxes are toggled. First, let's tweak your checkbox HTML to include the ingredient name in a data attribute (and add a proper name for form submission):

<label>
  <input 
    type="checkbox" 
    value="<?php echo esc_attr($food_group_ingredients_price); ?>" 
    id="checks_<?php echo $counts; ?><?php the_id(); ?>"
    data-name="<?php echo esc_attr($food_group_ingredients_size); ?>"
    name="ingredients[]" <!-- Critical for collecting selections via GET -->
  >
  <?php echo esc_attr($food_group_ingredients_size); ?>
  <span>+ <?php if(isset($currency_menu) && !empty($currency_menu)){ echo esc_attr($currency_menu);}?><?php echo esc_attr($food_group_ingredients_price); ?></span>
</label>

Next, update your JavaScript to handle cart item addition/removal alongside your existing price calculations:

jQuery(function($){
  $(document).ready(function() {
    // Use one click handler instead of two separate ones for cleaner code
    $("input[id^='checks_']").click(function(){
      const $checkbox = $(this);
      const ingredientName = $checkbox.data('name');
      const ingredientPrice = $checkbox.val();
      const currency = "<?php echo isset($currency_menu) ? esc_attr($currency_menu) : ''; ?>";
      const cartRowId = `cart-item-${$checkbox.attr('id')}`;

      if( $checkbox.is(':checked') ){
        // Add the selected item to the cart table
        const cartRow = `
          <tr id="${cartRowId}">
            <td>${ingredientName}</td>
            <td>${currency}${ingredientPrice}</td>
          </tr>
        `;
        $('#mycart').append(cartRow);

        // Your existing price calculation logic (unchanged)
        var price3 = parseFloat($("#pricecase2-<?php the_id();?>").val());
        var price4 = parseFloat($checkbox.val());
        var totalprices = ( price3 + price4 );
        $('span.price-<?php the_id();?> input#pricecase2-<?php the_id();?>').val(totalprices);
        var price_latest1 = parseFloat($("#price-<?php the_id();?>").val());
        var price_latest2 = parseFloat($("#pricecase2-<?php the_id();?>").val());
        var price1 = parseFloat($("#testprice_<?php the_id(); ?>").val());
        var price_n = price_latest1 + ( price_latest2 - price1 );
        var price_latest_all = Math.round( price_n * 1000)/1000;
        $('span.price-<?php the_id();?> input#pricelatest-<?php the_id();?>').val( price_latest_all );
      } else {
        // Remove the item from the cart when unchecked
        $(`#${cartRowId}`).remove();

        // Your existing price calculation logic (unchanged)
        var price3_after = parseFloat($("#pricecase2-<?php the_id();?>").val());
        var price4_after = parseFloat($checkbox.val());
        var totalprices_after = ( price3_after - price4_after );
        $('span.price-<?php the_id();?> input#pricecase2-<?php the_id();?>').val(totalprices_after);
        var price_latest1 = parseFloat($("#price-<?php the_id();?>").val());
        var price_latest2 = parseFloat($("#pricecase2-<?php the_id();?>").val());
        var price1 = parseFloat($("#testprice_<?php the_id(); ?>").val());
        var price_n = price_latest1 + ( price_latest2 - price1 );
        var price_latest_all = Math.round( price_n * 1000)/1000;
        $('span.price-<?php the_id();?> input#pricelatest-<?php the_id();?>').val( price_latest_all );
      }
    });
  });
});

This will add a unique row to your #mycart table for each checked item, and remove it when the checkbox is unchecked.

2. Pass Selections via GET and Display in Email #

First, ensure your form uses the GET method (add method="GET" to your form tag: <form method="GET" action="your-submission-page.php">). Since we added name="ingredients[]" to the checkboxes, PHP will receive an array of selected prices. To include ingredient names too, adjust the checkbox value to store both name and price (separated by a delimiter like |):

<input 
  type="checkbox" 
  value="<?php echo esc_attr($food_group_ingredients_size) . '|' . esc_attr($food_group_ingredients_price); ?>" 
  id="checks_<?php echo $counts; ?><?php the_id(); ?>"
  name="ingredients[]"
>

On your form submission page (the action target of your form), process the GET data and build your email content like this:

// Retrieve selected ingredients from the GET request
$selectedIngredients = isset($_GET['ingredients']) ? $_GET['ingredients'] : [];
$currency_menu = isset($currency_menu) ? $currency_menu : ''; // Ensure currency is available

// Build the email body with sanitized content
$emailBody = "<h3>Selected Ingredients</h3><ul>";
foreach($selectedIngredients as $item) {
  // Split the value into name and price
  list($name, $price) = explode('|', $item);
  // Sanitize to prevent XSS issues
  $safeName = htmlspecialchars($name, ENT_QUOTES);
  $safePrice = htmlspecialchars($price, ENT_QUOTES);
  $emailBody .= "<li>{$safeName} - {$currency_menu}{$safePrice}</li>";
}
$emailBody .= "</ul>";

// Send the email (adjust to your preferred mail method)
$to = 'your-recipient-email@example.com';
$subject = 'New Order: Selected Ingredients';
$headers = 'Content-Type: text/html; charset=UTF-8' . "\r\n";
mail($to, $subject, $emailBody, $headers);

Quick Tips: #

• Always sanitize user input before using it in emails (we used htmlspecialchars() here) to avoid security risks like XSS.
• If you don't want to use a delimiter, you could pair each checkbox with a hidden input containing the ingredient name, but the delimiter method is simpler for this use case.
• Double-check that your form's action attribute points to the correct PHP page that handles submission.

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