Commerce: Remove Line Item : Ajax Posted

[magnessjo]

Description

Similar to 272

When you do a post '/actions/commerce/cart/remove-line-item', a 404 is returned.

@lukeholder, I am using the same fetch code (just switching the URL and data) so I am assuming this is the same issue as before.

Additional info

• Craft version: Craft Pro 3.0.0-RC17.1
• PHP version: 7.0.19
• Database driver & version: MySQL 5.7.18
• Plugins & versions:
  Commerce : dev-develop as 2.0.0-alpha.99

[lukeholder]

Are you passing a correct line item ID? I can remove a line item fine with ajax:

$('form.remove-line-item-form').submit(function(e){
    e.preventDefault();
    var purchasable = $(this).find('input[name=lineItemId]').val();
    $.ajax({
        type: "POST",
        dataType: 'json',
        headers: {
            "X-CSRF-Token" : '{{ craft.app.request.csrfToken }}',
        },
        url: '',
        data: {
            'action' : 'commerce/cart/remove-line-item',
            'lineItemId': purchasable,
        },
        success: function(data){
            console.log(data);
        }
    });
});

[magnessjo]

@lukeholder,

I saw the 404 yesterday and just assumed it was the same issue as before but it's actually different. The action (RemoveLineItem) is working as expected. The 404 is being thrown 'TemplatesController' in craftcms.

Error Output:

yii\web\NotFoundHttpException: Template not found: actions/commerce/cart/remove-line-item in /PATH-TO-CRAFT/craft/vendor/craftcms/cms/src/controllers/TemplatesController.php:69

[23d1]

Now that remove-line-item is deprecated, what data would need to be passed for removing a line item with the update-cart action?

For example (obviously doesn't work);

'lineItems': $lineItemId,
'remove': true

[magnessjo]

@23d1

Hi Anders,

I've reviewed the actionUpdateCart function (line 126) in the Cart Controller of the commerce plugin and I think this should be reported as a bug. I don't see a conditional check for parameter called remove (or any reference to a private method that would be doing the checking). It could be possible that some 'magic' is happening behind the scenes but I don't see it.

Also, I tested adding 'remove' to the JSON or 'x-www-form-urlencoded' by submitting an AJAX request to '/commerce/cart/update-line-item' and attribute was ignored (for reasons previous stated). I would guess that your assumption is correct though based on reading the documentation that went along with the deprecated notice.

@lukeholder, Could you take a look at the update cart action in the CartController in reference to Anders question when you get time?

Also, in the docs it states : "The example templates contain all of the above examples of adding and updating the cart within a full checkout flow.". I was not able to find any reference to [remove] in the example template. I've never at the examples before so I could be wrong but I did a string search for '[remove]' on the entire directory and got no results. I also did an eyeball review on the files in templates > shop > checkout and didn't see any reference.

[23d1]

Thanks @magnessjo.

There's a reference in here;
https://raw.githubusercontent.com/craftcms/commerce/develop/templates/shop/cart.html

Which is a checkbox that gets submitted together with the rest of the items within the form, like so;

<input type="checkbox" name="lineItems[{{ item.id }}][remove]" value="1">

But I can't figure out how to post that via ajax (or any other parameter like the one for updating quantity tagged with [qty]...) It works in regular submission and page load however, so there's definitely doable, the question is how. :)

[magnessjo]

@23d1,

My apologies for the previous response. I was about to leave work when I saw notification and answered quickly. Yes you are correct about the example being referenced in the templates. I pulled the docs from the site (which is still Commerce 1).

I am going to do some more testing and will reply when I know more.

[magnessjo]

@23d1,

I can confirm that it works as @lukeholder stated in the documentation (so it's not a bug). I got caught by the mysterious composer caching issue so that's why I wasn't see the code.

For my AJAX submission, I used 'x-www-form-urlencoded'. Example line in ES6 with template strings is:

${window.csrfTokenName}=${window.csrfTokenValue}&lineItems[${id][remove]=1

I am assuming a JSON submission would be very similar. Would you mind trying a couples iterations of your JSON to see if it works (I am assuming you have JSON submitting correctly and other places so we can rule out that being the issue).

Example:

'lineItems[itemid][remove]': 1,

[lukeholder]

Definitely there: https://github.com/craftcms/commerce/blob/develop/src/controllers/CartController.php#L181

You would make the button inside the form not be a submit, but just a button, then attach an onClick to submit the data to the server directly.

[23d1]

@magnessjo @lukeholder gonna give it a go now. Watch out for any edits to this message. I'm no JS-wizard so it'll take a minute.

Edit;
purchasable is variable grabbed from data attribute with just the item.id in a .each loop.

'lineItems': purchasable,
'remove': 1

doesn't work... Same goes for lineItemId... Basically just updates the cart with no changes. Not sure how to formulate the JSON...

[23d1]

Just to update from the Slack channel.

The line I was looking for was 'lineItems': {[ID_VARIABLE_HERE]: {'remove': true}}

[lukeholder]

Make a button:

<button type="button" class="removeLineItemButton" data-line-item-id="{{ item.id }}">Remove Now</button>

POST

<script>
    window.csrfTokenName = '{{ craft.app.config.general.csrfTokenName }}';
    window.csrfTokenValue = '{{ craft.app.request.getCsrfToken() }}';

    $('.removeLineItemButton').click(function(event) {
        var id = $(this).data('line-item-id');
        var data = {
            action: 'commerce/cart/update-cart',
            lineItems: {[id]: {'remove': true}}
        };
        data[window.csrfTokenName] = window.csrfTokenValue;
        $.post("/", data, function(response) {
            console.log("success", response, data);
        });
    });
</script>

[echantigny]

I'm sorry to comment on a closed issue, but I'm running into an issue with this.

I'm using @lukeholder 's code above and it seems like the call is not returning the correct format. I always get to the "fail" function of $.post, even though the item is actually deleted from the cart. The response comes back completely empty.

``

[23d1]

I actually went the $.ajax route, as opposed to $.post to get some more control over a couple of things. For some reason I never get a fail, but instead have to go through the JSON response to see if that contains errors and so on. I'll post the code later today/tonight.

[echantigny]

Thanks @23d1 , I think I got it that way too.

My code now:
$('.removeLineItemButton').click(function() {

    var $this = $(this);
    var id = $(this).data('line-item-id');
    var data = {
        action: 'commerce/cart/update-cart',
        lineItems: {[id]: {'remove': true}}
    };
    $.ajax({
        type: "POST",
        dataType: 'json',
        headers: {
            "X-CSRF-Token" : '{{ craft.app.request.csrfToken }}',
        },
        url: '/',
        data: data,
        success: function(response){
            console.log("success", response, data);
        },
        fail :function(response) {
            console.log("error", response, data);
        }
    });
});