4

I am currently working on a WordPress project where I have a webstore made up using WooCommerce, and as a practice project I've decided to make refund system for customers to use, where they can send a "Refund request" for the site admins to either accept or deny.

The refund tab is split into 3 different pages where on the first page the customer confirms his/her order by inputting her Name, PostCode and the order number, on the second page the customer can choose the products they want to order and their quantity by inputting the number, and checking the product's checkbox and the third page is just a confirmation page where the customer can also send a message and then they press the "Send request button". And after the button is pressed the information from the request tab is inserted to a custom table called wp_refundrequests, which is used to show all the requests on the admin page.

My problem is that on the second page, where the customer is supposed to select to amount of certain products they want a refund for, always shows the maximum amount in my code, and I can't wrap my head around on how to make it work so, that it would only take the user inputted amount.

Here is the code for the second page, where the problem is:

<div class="Etusivu">
    <form action="" method="post" style="border:0px solid #ccc">
<legend><b>Product refund</b></legend>
          <div class="step">
        <legend>Step 2/3</legend>
      </div>
      <br />
          <p class="important">Order information</p>
          <br />
          <div class="valitse">

        <p class="important">Choose all of the products you want to refund.</p>
      </div>
        <hr>

        <script>
        //function for making a checkbox to check all checkboxes
        function toggle(source) {
          checkboxes = document.getElementsByName('productinfo[]');
          for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
          }
        }
        </script>
          <input type='checkbox' onClick='toggle(this)' />

        <p class="selectall">Select all products</p>

        <label>The order:</p>
        <br />
        <?php
        //Gets and displays data based on certain variables from the database, connects quantity and product name into one string in
        $order = wc_get_order( $ordernumber );

        foreach ($order->get_items() as $item ){

          $unitprice = $item->get_total() / $item->get_quantity();
  // This is the part that currently gets the quantity value for the next page/the refund request
          echo "<input type='checkbox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";
          echo '<p>';
          echo __('Product name: ' ) . $item->get_name() . '<br>';
          if($item->get_quantity() > 1) {
            echo "Quantity: " . "<input type='number' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' > " . "<br/>";
          }
          else {
          echo __('Quantity: ' ) . $item->get_quantity() . '<br>';
        }
        if ($item->get_quantity() > 1) {

          echo __('Product price: ') . $unitprice . '€' . '<br/>';
        }
          echo __('Products total: ' )  . wc_price($item->get_total()) . '</p>' . '<br/>';
       }
        echo '<p>'. __('Order total: ') . $order->get_total() . '</p>';
        ?>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


        <input type="submit" id='check' value="Next"/>
        <script>
        //Checks if any checkboxes have been checked, if not, displays an error
        function checkBoxCheck() {
          if($('input[name="productinfo[]"]:checked').length) {
            console.log("at least one checked");
            return true;
          }
          else {
            alert("Select at least 1 product.");
            return false;
          }
        }
        //runs the script for checking the checkboxes
        $('#check').on('click', checkBoxCheck);
      </script>
        </label>
          <input type="hidden" name="page" value="2">
    </form>
    <br />
</div>
</body>
</html>
<?php

EDIT: So to make this more clear, the problem here is that I'm making a system that customers can use to return some products, on the page 2/3, that I am currently having problems on, the user can see all the products that his order includes, and all products have their own checkboxes so the user can choose which products they want to refund. Right now when the user chooses a product(s), and presses "next", the chosen information is shown on the next page, 3/3. The values shown on that page are the Product name, product price and the product QUANTITY. However, the QUANTITY is always the same amount as the customer has ordered them, and on the 2/3 page (Where user chooses which products he wants to refund), I want to be able to input how many of some products I want to refund, and have this value on the checkbox array.

Eg. I have bought 5 cables, but I want to return only 2 of them, so I input 2 in to the input field I have.

Puppe
  • 112
  • 3
  • 15
  • What value are you wanting it to show by default? (also, you're missing a space before the `'max='` in your code. It's currently `value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "'`, you might want it to be `value='" . $item->get_quantity() . " 'max='" .$item->get_quantity() . "'`) – dpDesignz Nov 02 '18 at 08:48
  • @dpDesignz To be honest, the default value doesn't matter too much, the field could even be empty by default, as long as it works. Right now I just made it so that it would show the amount of the item the customer has in the order. And thanks, I'll edit that bit as well :P – Puppe Nov 02 '18 at 08:52
  • Could you please explain in a little more detail what's happening now and what you're wanting to happen? – dpDesignz Nov 02 '18 at 08:54
  • @dpDesignz Sure! So Right now, when the user selects one of the checkboxes on the page (If there's multiple products, there's a checkbox for each one of them), and when the user checks one of the boxes and presses "Next", he is then redirected to another page, where he can confirm the items he wants to return, and if the information is correct. Right now the information that comes with the checkbox are the selected product's name, price and the quantity of those items. BUT the quantity is always the same amount the user has bought those items. – Puppe Nov 02 '18 at 09:00
  • @dpDesignz So for example, if the user bought five cables, and wanted to only refund 3 of them, he can't do that, since the system only lets him return all of them at a time. So Basically I would like to be able to change the value of the checkbox(Or if there is some other way to do this let me know), by user input. So When the user types eg. "2" on the input field, the quantity value would 2 instead of the maximum 5, that the user had ordered. Does this make sense or am I still being confusing? – Puppe Nov 02 '18 at 09:02
  • Ah! I understand now. Why don't you pull the value from the input box instead of the checkbox? Otherwise, you'll have to use some javascript to pull the data from the input to replace the value of the checkbox. I can post example codes for either scenario if needed? – dpDesignz Nov 02 '18 at 09:04
  • When you post this form, where is the value coming from? Can you post a dump of your `post` results? – dpDesignz Nov 02 '18 at 09:15
  • @dpDesignz Examples would be great! I tried to get the value from the input before, but all of the product values (name, qty) right now are inserted as the checkbox's array, so it would be a small hassle to change the way it works. Or Maybe I'm just thinking that it would be more difficult than it actually is. But if you could post examples for both, I would greatly appreciate it! – Puppe Nov 02 '18 at 09:15
  • Can you share a dump of your `post` results so I can see what you want the output to look like when you press next? – dpDesignz Nov 02 '18 at 09:21
  • "Array ( [productinfo] => Array ( [0] => APPLE IPHONE X 64GB SILVER , 0 kpl | 2997 ) [numberqty] => [page] => 2 )". The "page" is a post variable I've used to to show different content on the page, so that shouldn't be a part of this problem. @dpDesignz – Puppe Nov 02 '18 at 09:27
  • So how are you pulling the number you want from that array? – dpDesignz Nov 02 '18 at 09:28
  • @dpDesignz sorry I messed up, while editing the code so the array didn't show the quantity! I fixed it and it looks like this: "Array ( [productinfo] => Array ( [0] => APPLE IPHONE X 64GB SILVER , 3 kpl | 2997 ) [numberqty] => [page] => 2 ) productinfo". I get the quantity from the part "3 kpl". Sorry some of the data is in Finnish, so that's why I'm using "kpl" instead of qty. – Puppe Nov 02 '18 at 09:32
  • My idea was to mimic the way Woocommerce does this, as in their order's the product name and quantity is in the same array as well – Puppe Nov 02 '18 at 09:32
  • why are you doing this: for(var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } ? you don't need the variable called n at all! And you have a lot of syntax errors... like unclosed and empty tags – SeReGa Nov 02 '18 at 11:53
  • @SeReGa It checks that at least on checkbox is checked. – Puppe Nov 02 '18 at 11:58
  • @Puppe you could use just `for(var i = 0; i < checkboxes.length; i++)` – SeReGa Nov 02 '18 at 12:01
  • @SeReGa I see, thank you for this :P – Puppe Nov 02 '18 at 12:03
  • Try to debug it on your browser, put a breakpoint in the `checkBoxCheck` function and look what you get in the `$('input[name="productinfo[]"]:checked').length` I guess it will help you. – SeReGa Nov 02 '18 at 12:13

1 Answers1

2

First, you have to change the following :

      echo "<input type='checkbox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";

to

      echo "<input type='checkbox' class='" . $item->get_id() . "checkBox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";

And this:

      if($item->get_quantity() > 1) {
        echo "Quantity: " . "<input type='number' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' > " . "<br/>";
      }

To this:

      if($item->get_quantity() > 1) {
        echo "Quantity: " . "<input type='number' class='" . $item->get_id() . "' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' onchange='changeCheckBoxValue(this.className)'> " . "<br/>";
      }

If you don't have a get_id() on item use any unique identifier.

This following piece of the code is responsible for triggering the event that changes the value of the checkbox onchange='changeCheckBoxValue(this.className)

And finally add the following function to your code:

function changeCheckBoxValue(className) {

    var checkBox = document.getElementsByClassName(className + 'checkBox')[0];
    var currentValue = checkBox.value;
    var wantedAmount = document.getElementsByClassName(className)[0].value;
    checkBox.value = currentValue .replace(new RegExp('[0-9]* QTY'),wantedAmount + ' QTY');
}

This will update the value of the checkbox

Good luck

Elie
  • 321
  • 3
  • 11