Allow coupons to be redeemed on the cart page

There is none.

#2792653: Checkout coupon pane implementation tracks the issue for checkout, let's track the cart side here.

It is possible if you review the Promotions test module.

/**
 * Implements hook_form_BASE_FORM_ID_alter().
 */
function commerce_promotion_test_form_views_form_commerce_cart_form_default_alter(&$form, FormStateInterface $form_state, $form_id) {
  // We know that view forms are build on the base ID plus arguments.
  $order_id = substr($form_id, strlen('views_form_commerce_cart_form_default_'));

  $form['coupons'] = [
    '#type' => 'commerce_coupon_redemption_form',
    '#order_id' => $order_id,
    '#title' => t('Promotion code'),
    '#description' => t('Enter your promotion code to redeem a discount.'),
    '#submit_title' => t('Apply'),
    '#remove_title' => t('Remove promotion'),
  ];
}

However there is no exposed block for this.

EDIT: see https://github.com/drupalcommerce/commerce/blob/8.x-2.x/modules/promotio...

Hi !
The solution by @mglaman adds the redemption form by the end of the cart, ie beneath the total and checkout button.
Better UX would be to have the coupon redemption in the views footer, above the "order total" field.

To do so, I am willing to provide a patch with a new global view field. I made on extending AreaPluginBase (just like commerce_order_total). However, in the render() method, something like the following does not render. I do not know why though. I guess I have to gt the correct renderer but can't find one.

$element['form'] = [
  '#type' => 'commerce_coupon_redemption_form',
  '#order_id' => $order->id(),
  '#cardinality' => 1,
  '#element_ajax' => [
    [get_class($this), 'ajaxRefreshSummary'],
  ],
];
return $element;

Do you know about it ?

I managed to do so: I will make it as a patch as soon as possible.

Here is a patch for this issue.

The patch defines a new "Coupon Redemption" field available in views that you can add to your view footer:

The patch includes:
- the definition of the CouponRedemption views area plugin
-- this include a configuration to let you redeem multiple coupon from the cart
-- the field takes it's order in the footer into account
- a change on how the OrderTotal views area plugin is rendered
-- to allow the coupon pane from the view to actually reload in ajax the order total when a coupon is applied
-- to allow the ordering of the footer fields to be considered

Finally, after configuration you have an ajax enabled coupon redemption form within your cart view:

Don't forget to /core/rebuild.php after applying the patch.

Adding a new patch: it may happen that someone remove the "Order total" from cart views footer. The new patch prevent the coupon redemption to fail in that case.

Because both CouponRedemtion and OrderTotal are now views area plugins, the alteration of form adds 'actions' to commerce_order_summary form in the checkout process.
This new patch removes this side effect.

@Dom. Coupon form is appearing on cart footer after setting coupon redemption field in cart-form view. It applies coupon on cart page perfectly. But it making checkout page in loop and I am also not able to apply or remove coupon from order-summary sidebar on checkout page.

When I click on 'Continue to review' button it just refresh the page and don't take me to next checkout step.

Error which I am getting for adding/removing coupon -
Uncaught PHP Exception Symfony\\Component\\HttpKernel\\Exception\\HttpException: "The specified #ajax callback is empty or not callable." at /var/www/d8Contrib/core/lib/Drupal/Core/Form/FormAjaxResponseBuilder.php line 67, referer: http://d8contrib.dev/checkout/7/order_information

Thanks

+++ b/modules/promotion/src/Plugin/views/area/CouponRedemption.php
@@ -0,0 +1,133 @@
+          '#element_ajax' => [

Typo

Hi All,

I am trying to complete this work. But after hours of debugging, I am still not able to find which code is causing the problem. I can apply the coupon on the cart page and it reduces the cart total price. Then I click the checkout button. On order_information checkout step, if I try to add or remove coupon then I get below error -

Symfony\Component\HttpKernel\Exception\HttpException: The specified #ajax callback is empty or not callable. in Drupal\Core\Form\FormAjaxResponseBuilder->buildResponse() (line 67 of /var/www/drupal8.dev/core/lib/Drupal/Core/Form/FormAjaxResponseBuilder.php).

I also saw the ajax call on browser console and there in response I am getting -

The website encountered an unexpected error. Please try again later.

I tried to move to next checkout step by clicking 'Continue to review' button. It just refreshes the page and does not take me to next step of checkout. If I try to go to next step manually by altering the checkout url, then again it would take me order_information checkout step even if I put the review in the URL instead of order_information.

If you can guide me, then I will be able to complete this patch.

@mglaman What is typo error you mentioned in #12?

Thanks All

Patch uploaded for coupon field on cart form. Initial work from #8. Removed changes from commerce_checkout.module and updated changes in OrderTotal.php. Please review.

#15 fixed empty ajax callback issue but introduced another (minor) one. That is when on a cart page you've applied coupon and then removed it, so the ajax replacing stops working on all subsequent attempts to apply/remove a coupon. So, the order summary stays the same what it was after the first ajax action applied, though having right expected value on the background.

Issue mentioned in #16 by @drugan is resolved in the attached patch. Please review.

Thanks All

I've tested the #17 and for me it works great. The only thing that would be useful is to add functional test for this change.

@drugan Thanks for reviewing the patch. I was planning to write test, but since its a view area I was not sure if I can write test for it. Therefore, I saw test for OrderTotal view area plugin in the commerce_order module. And there was no test for that view area, so I thought maybe we don't write test for view area.

If we do, please provide any test for view area that I can refer for writing test for CouponRedemption view area.

Thanks

@sorabh.v6

Go to the web directory of your site:

cd my-site/web

... and run:

locate -r $PWD".*/FunctionalJavascript/.*\Test.php"

FunctionalJavascript test is exactly what we need for this change.

@drugan Thanks, working on test now.

@drugan New patch contains test for coupon redemption on cart page. Please review.

Great work!

But, I think it will not hurt a lot if you'd made these changes:

First, I remember from the d.o testing framework docs that it is always better to use explicit values in a test instead of randomly generated ones;

    $coupon = $this->createEntity('commerce_promotion_coupon', [
     // 'code' => $this->getRandomGenerator()->word(8),
      'code' => 'СКИДКА-Ё!@#',
      'status' => TRUE,
    ]);

That way we'd also check how utf-8 value coupons work. Also, it would be useful to apply coupon once more after // Coupon removal. block.

    // Coupon removal.
    $this->getSession()->getPage()->pressButton('Remove coupon');
    $this->waitForAjaxToFinish();
    $this->assertSession()->pageTextNotContains($coupon->getCode());
    $this->assertSession()->fieldExists('Coupon code');
    $this->assertSession()->buttonExists('Apply coupon');

    // Repeat applying the same coupon.
    $this->getSession()->getPage()->fillField('Coupon code', $coupon->getCode());
    $this->getSession()->getPage()->pressButton('Apply coupon');
    $this->waitForAjaxToFinish();
    $this->assertSession()->pageTextContains($coupon->getCode());

Just to be sure that #16 does not appear any more.

Patch #17 works as expected. Great work.
I agree with drugan's thought #24

it is always better to use explicit values in a test instead of randomly generated ones

Thanks @gauravjeet @drugan I will make suggested changes.

Thanks

Changes made as per #24. Please review.

@drugan Thanks for the suggestion.

Thanks All

YESSS!

Looks good. Just one concern about test coverage. I'll also give it a manual test.

+++ b/modules/order/src/Plugin/views/area/OrderTotal.php
@@ -80,11 +80,14 @@ class OrderTotal extends AreaPluginBase {
+          $order_total = $order->get('total_price')->view(['label' => 'hidden', 'type' => 'commerce_order_total_summary']);
+          $order_total['#weight'] = $this->position;
+          $order_total['#prefix'] = '<div data-drupal-selector="order-total">';
+          $order_total['#suffix'] = '</div>';
+          return $order_total;

+++ b/modules/promotion/src/Plugin/views/area/CouponRedemption.php
@@ -0,0 +1,148 @@
+    if (isset($order_total)) {
+      $order_total['#prefix'] = '<div data-drupal-selector="order-total">';
+      $order_total['#suffix'] = '</div>';
+      return new InsertCommand('[data-drupal-selector="order-total"]', $order_total);
+    }

The test is great, but it does not verify that this AJAX refresh command works.

This is great! One problem. CartCouponRedemptionTest.php is a duplicate of CouponRedemptionElementTest.php and doesn't actually test the view plugin.

We need to alter the cart form view to embed the plugin and not rely on commerce_promotion_test to alter it in. I am fine with testing the view area plugin as part of the form element test. So updating CartCouponRedemptionTest to add the view area plugin to the default cart view instead of commerce_promotion_test altering it in. Keep a blank commerce_promotion_test.module instead.

I'll wrap this up so we can integrate it into the Belgrade theme.

@mglaman - Any update on this? Either it's sitting in branch finished but unshared or it got lost in the holiday shuffle. No worries, just thought a little prod here might keep it moving.

This feel through the cracks. Bringing it back up.

Reroll #30.

+++ b/modules/order/src/Plugin/views/area/OrderTotal.php
@@ -79,11 +79,13 @@ class OrderTotal extends AreaPluginBase {
-          $order_total = $order->get('total_price')->view(['label' => 'hidden', 'type' => 'commerce_order_total_summary']);
-          $order_total['#weight'] = $this->position;
-          $order_total['#prefix'] = '<div data-drupal-selector="order-total">';
-          $order_total['#suffix'] = '</div>';
+          $order_total = $order->get('total_price')->view([
+            'label' => 'hidden',
+            'type' => 'commerce_order_total_summary',
+            'weight' => $this->position,

+++ b/modules/order/templates/commerce-order-total-summary.html.twig
@@ -18,7 +18,7 @@
-<div{{ attributes }}>
+<div{{ attributes.setAttribute('data-drupal-selector', 'order-total-summary') }}>

I just realized that this would break if anyone (previously) extended the theme template.

Maybe it is worth using the prefix.

Updates tests of the element to use the views plugin.

Local decided to not run PhantomJS right after I think I fixed last test. Semi-blind patch post.

I forgot we had duplicate tests, fixed. Add schema.

Need to try and figure out the schema issues.

Drupal\Core\Config\Schema\SchemaIncompleteException: Schema errors for views.view.commerce_cart_form with the following errors: views.view.commerce_cart_form:display.default.display_options.footer.commerce_coupon_redemption.allow_multiple missing schema

Managed to get tests working locally and the patch applies and functions well in manual testing. Had to change the plugin_id in the test, which seems to have fixed the issue with the schema for allow_multiple not being found.

Interdiff got tested by accident, patch itself passes.

oof! thanks for the catch.

I have an issue with messages not showing after ajax but only on next page reload. Anybody has the same problem?
EDIT: sorry, this is working perfectly, looking forward for the patch to be committed

Forgot to update this earlier. We discussed this internally and decide that we should provide this by default -- why hide such a nice feature.

We would want to work with the default UX then. The full-width message is not great nor the default styling.

Two options I considered

• Split the area below the order information into two columns, coupon redemption on the left and totals on the right. 50/50 or so.
• Have the coupon redemption above the order total, constraint its width so the message is not the entire page width

Hi @mglaman sorry I didn't know that.
You are right it's such a nice feature! About the options you considered I personally like the second, so that the coupon redemption is above the order total: frontend devs will be able to customize the position.

Works for me, I mind either, just so long as its _something_ better than being thrown on the page.

I forgot we can't add this by default, because then cart is dependent on promotion. Here's some quick CSS.

@mglaman pretty clean indeed, should we wait for more feedbacks on this to move the state of the issue to reviewed?

Is there different behaviour for coupons which can be combined with others? From the gif it seems that you can use only single coupon.

@mglaman pretty clean indeed, should we wait for more feedbacks on this to move the state of the issue to reviewed?

I'd like to get some feedback.

Is there different behaviour for coupons which can be combined with others? From the gif it seems that you can use only single coupon.

You can allow multiple. The default I was testing was with single coupon.

New patch with https://www.drupal.org/project/commerce/issues/2896303 included.

Rerolling patch #53 for latest dev, which is working fine for me!

@jeroendegloire
Not sure why you've included another patch in this one? Referred issue is also included in latest dev now/

Tested the latest patch from #59 and it's still working well.

Patch from #59 working well.

for last DEV version

Hey,

Somehow latest patch does not work... Ajax refresh fail... There are the errors:

Error: Call to a member function load() on null in Drupal\commerce_promotion\Plugin\views\area\CouponRedemption::ajaxRefreshSummary() (line 141 of /app/web/modules/contrib/commerce/modules/promotion/src/Plugin/views/area/CouponRedemption.php)
#0 /app/web/modules/contrib/commerce/modules/promotion/src/Element/CouponRedemptionForm.php(292): Drupal\commerce_promotion\Plugin\views\area\CouponRedemption::ajaxRefreshSummary(Array, Object(Drupal\Core\Form\FormState))
#1 [internal function]: Drupal\commerce_promotion\Element\CouponRedemptionForm::ajaxRefresh(Array, Object(Drupal\Core\Form\FormState), Object(Symfony\Component\HttpFoundation\Request))
#2 /app/web/core/lib/Drupal/Core/Form/FormAjaxResponseBuilder.php(69): call_user_func_array(Array, Array)
#3 /app/web/core/lib/Drupal/Core/Form/EventSubscriber/FormAjaxSubscriber.php(109): Drupal\Core\Form\FormAjaxResponseBuilder->buildResponse(Object(Symfony\Component\HttpFoundation\Request), Array, Object(Drupal\Core\Form\FormState), Array)
#4 [internal function]: Drupal\Core\Form\EventSubscriber\FormAjaxSubscriber->onException(Object(Symfony\Component\HttpKernel\Event\GetResponseForExceptionEvent), 'kernel.exceptio...', Object(Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher))
#5 /app/web/core/lib/Drupal/Component/EventDispatcher/ContainerAwareEventDispatcher.php(111): call_user_func(Array, Object(Symfony\Component\HttpKernel\Event\GetResponseForExceptionEvent), 'kernel.exceptio...', Object(Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher))
#6 /app/vendor/symfony/http-kernel/HttpKernel.php(228): Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.exceptio...', Object(Symfony\Component\HttpKernel\Event\GetResponseForExceptionEvent))
#7 /app/vendor/symfony/http-kernel/HttpKernel.php(79): Symfony\Component\HttpKernel\HttpKernel->handleException(Object(Drupal\Core\Form\FormAjaxException), Object(Symfony\Component\HttpFoundation\Request), 1)
#8 /app/web/modules/contrib/simple_oauth/src/HttpMiddleware/BasicAuthSwap.php(67): Symfony\Component\HttpKernel\HttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#9 /app/web/core/lib/Drupal/Core/StackMiddleware/Session.php(57): Drupal\simple_oauth\HttpMiddleware\BasicAuthSwap->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#10 /app/web/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(47): Drupal\Core\StackMiddleware\Session->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#11 /app/vendor/asm89/stack-cors/src/Asm89/Stack/Cors.php(49): Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#12 /app/web/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(47): Asm89\Stack\Cors->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#13 /app/web/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(52): Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#14 /app/vendor/stack/builder/src/Stack/StackedHttpKernel.php(23): Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#15 /app/web/core/lib/Drupal/Core/DrupalKernel.php(693): Stack\StackedHttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#16 /app/web/index.php(19): Drupal\Core\DrupalKernel->handle(Object(Symfony\Component\HttpFoundation\Request))
#17 {main}.

This part is failing:

  /**
   * Ajax callback for refreshing the order summary.
   */
  public static function ajaxRefreshSummary(array $form, FormStateInterface $form_state) {
    $order_id = $form['output'][0]['#rows'][0]->order_id;
    $order = $form['output'][0]['#rows'][0]->_entity->load($order_id);
    $order_total = $order->get('total_price')->view(['label' => 'hidden', 'type' => 'commerce_order_total_summary']);
    if (isset($order_total)) {
      return new InsertCommand('[data-drupal-selector="order-total-summary"]', $order_total);
    }
    return NULL;
  }

Any ideas?

Cheers!

I tested and changing that into this:

 /**
   * Ajax callback for refreshing the order summary.
   */
  public static function ajaxRefreshSummary(array $form, FormStateInterface $form_state) {
    $order_id = $form['output'][0]['#rows'][0]["#row"]->order_id;
    $order = $form['output'][0]['#rows'][0]["#row"]->_entity->load($order_id);
    $order_total = $order->get('total_price')->view(['label' => 'hidden', 'type' => 'commerce_order_total_summary']);
    if (isset($order_total)) {
      return new InsertCommand('[data-drupal-selector="order-total-summary"]', $order_total);
    }
    return NULL;
  }

seems to solved the issue.... I might create my own Views Area plugin for now... That way it will be easier to control other potential bugs!

Hi, the latest patches (#59 and #63 on -dev). Both adds the coupon to the cart but the ajax refresh doesn't work, you have to manually refresh the page to see it. The "remove coupon" button does the same: it removes the coupon but the cart summary is not ajax-refreshed.

After this test I've updated ajaxRefreshSummary() according to #65 but nothing changed.

The patch will need to be rerolled to use the inline form instead of the deprecated commerce_coupon_redemption_form element.

Hi! I tried using the inline form but it doesn't work.
The trait "AjaxFormTrait" doesn't work because of the core bug #2897377 and would also require reloading the cart view (for the order summary total component). The trait only reloads the form (i think).

@luca_cracco I'm working on rerolling this patch and also having trouble getting it to work with the inline form.:

The specified #ajax callback is empty or not callable.

Here is a WIP patch that is not working. It applies to the current dev, though, so it might be helpful to anybody looking at this issue. Coupons can be applied and removed, but the order summary disappears. Also, once you use one of the coupon redemption form buttons, neither the checkout nor the update-order button will work.

I made a variety of unsuccessful attempts to try to attach the ajax callback attached to the coupon redemption form.

So, I did some debugging. The problem is.......... VIEWS! Or so it seems. \Drupal\commerce\AjaxFormTrait works fine. It returns the form entirely. But Views is missing the order total area and it changes the form's action to be /cart?ajax_form=1&_wrapper_format=html, breaking all non-AJAX buttons (ie: remove, update, checkout.)

This broke due to the fact InlineForm replaces the entire form, instead of a subset. Views builds forms in a weird way, and this is causing the havoc.

Here is a patch which is mostly working. There's some extra stuff being inserted.

EDIT: The extra "stuff" is the outer field divs when running Replace on [data-drupal-selector="order-total-summary"]. Each AJAX is nesting more and more.

<div class="field field--name-total-price field--type-commerce-price field--label-hidden field--item">
    <div class="field field--name-total-price field--type-commerce-price field--label-hidden field--item">
        <div data-drupal-selector="order-total-summary">

🙌🎉. Need to see about them tests.

#74 works fine. Thanks

#74 worked with me also. Thanks!

Works on 2.13 commerce, thnx

Works on 2.14

I'm not seeing any changes in the cart page.
Nothing mentioning coupons in the source of the /cart page, I tried with the default bartik theme too.
All hunks of patch 74 applied successfully .

drupal 8.8.1
drupalcommerce 8.x-2.16

then I've got a few extra modules commerce paypal, commerce extended quantity, commerce product tax, commerce stock..
could there be some conflict there? or it just doesn't work for 2.16?

@sekoz have you updated the view to include the new Coupon redemption handler in the Footer? If not, comment #4 should help.

@joekers thanks I missed updating the view.
It is now working fine as described by others.

Removing the commerce_promotion_test module dependency from the test since that made the coupon redemption form appear twice on the cart form view.

Also replaced the waitForAjaxToFinish() calls with their non-deprecated counterparts.

I've applied patch #84 to Commerce 2.17 and it's working as expected. Thanks czigor!

I've applied the patch #84 also and tested it. works fine!

I'll put this as RTBC.

🙌 I'll commit on Monday. I think it's time.

nits for later. and phpcs from https://www.drupal.org/pift-ci-job/1610564

1. +++ b/modules/order/templates/commerce-order-total-summary.html.twig
   @@ -19,7 +19,7 @@
   -<div{{ attributes }}>
   +<div>
   

   Can't remember why we removed this. Is it because we now put the classes in a prefix? Some folks might be relying on this.

2. +++ b/modules/promotion/css/promotion.cart_redemption_form.css
   @@ -0,0 +1,11 @@
   +.field--name-total-price {
   +  clear: both;
   +}
   

   😬this isn't scoped

3. +++ b/modules/promotion/src/Plugin/views/area/CouponRedemption.php
   @@ -0,0 +1,205 @@
   +  protected $inlineFormManager;  ¶
   

   whitespace

4. +++ b/modules/promotion/src/Plugin/views/area/CouponRedemption.php
   @@ -0,0 +1,205 @@
   +      if ($order = $this->orderStorage->load($argument->getValue())) {
   

   I think we should unnest this logic and quit early if the order is null

5. +++ b/modules/promotion/tests/modules/commerce_promotion_test/commerce_promotion_test.module
   @@ -14,12 +14,17 @@ use Drupal\Core\Form\FormStateInterface;
   +  $inline_form_manager = \Drupal::getContainer()->get('plugin.manager.commerce_inline_form');
   +  $inline_form = $inline_form_manager->createInstance('coupon_redemption', [
   +    'order_id' => $order_id,
   +    'max_coupons' => Drupal::request()->query->get('coupon_cardinality'),
   +  ]);
   +
   ...
   +  $form['coupons']  = [
   +    '#parents' => ['coupons'],
   ...
   +  $form['coupons'] = $inline_form->buildInlineForm($form['coupons'], $form_state);
   

   since we're adding this by default, is this used anymore?

1. Re-added the attributes.
2. Not sure why but since the patch in #70 we don't attach the css, so let's remove the css file and the library definition too.
3. Fixed.
4. Fixed.
5. Some older tests (e.g. CouponRedemptionElementTest) depend on this so I think we should leave this. Alternatively we could convert the old tests to add the area to the view footer inside the test as CartCouponRedemptionElementTest does though.

Some older tests (e.g. CouponRedemptionElementTest) depend on this so I think we should leave this. Alternatively we could convert the old tests to add the area to the view footer inside the test as CartCouponRedemptionElementTest does though.

Oh yeah! We should keep it then, the idea is to prove this works without the View or the CheckoutPane.

I applied patch #90 in a new fresh install with latest release of core and commerce, works as expected :)

RTBC again, hopefully this will get committed soon.

Thank you, everyone! This has now landed. 🥳

Fixed some phpcs on commit.