UX research shows that coupon input fields reduce conversion cause they send the customer away googling for a coupon code.
Thus, a best practice is to have a "Did you receive a coupon code?" link that when clicked shows the form.

Comments

bojanz created an issue. See original summary.

jsacksick’s picture

Should we add that to the element type CouponRedemptionForm element or do we want that to leave inside the checkout pane?

mglaman’s picture

When I first built the element, we have it on the element. Because I do not have pane based checkouts in most of my projects.

steveoliver’s picture

Related: I noticed that the coupon redemption form refreshes the order totals part of the form, but not the rest of the form, like the payment gateway form.

steveoliver’s picture

Which is to say, whether the implementation is a hidden form or a modal, the final action should refresh the whole checkout form.

vasike’s picture

Status: Active » Needs review
StatusFileSize
new5.52 KB

Here is patch for this.

Approach: Add a "Did you receive a coupon code?" link with JS at the CouponRedemptionForm element template.
I think it's best to have it in template than in the form.
So anyone could customize as needed.
Also updated the Tests.

Status: Needs review » Needs work

The last submitted patch, 6: coupon_code_form_default_hidden-2884210-6.patch, failed testing. View results

vasike’s picture

Status: Needs work » Needs review
StatusFileSize
new8.37 KB

Hmm. indeed i forgot to update also the CouponRedemptionElementTest
Here is a new patch

vasike’s picture

The patch should also fix the broken test for CouponRedemptionPaneTest
https://www.drupal.org/pift-ci-job/863305

from patch:

-    $this->assertSession()->pageTextContains('Visa ending in 1111');
+    $this->assertSession()->pageTextContains('Visa ending in 9999');
anybody’s picture

Title: Hide the coupon redemption form behind a link » Add a setting to hide the coupon redemption form behind a trigger link
Version: 8.x-2.x-dev » 3.0.x-dev
Category: Task » Feature request

Thank you very much for this useful feature request! I think this is a good and valuable idea, but I guess it should be a setting in the pane settings, so the shop owner can decide if form or link should be used.

So from my perspective we should finish this by:
- Turning this into a MR
- Adding a setting to the CouponRedemption checkout pane to select form or link (radio)
- Adding another test for this setting

I'll add it to our roadmap! :)

anybody’s picture

Another option - instead of implementing this as link with custom JS - would be to make the label of the wrapper element configurable and translatable. If the details element is configured to be collapsed, it could simply be used for what this issue is supposed to do? And the expand functionality is already present.

See the currently already existing setting:

    $form['wrapper_element_open'] = [
      '#type' => 'checkbox',
      '#title' => $this->t('Display element open by default.'),
      '#default_value' => $this->configuration['wrapper_element_open'] ?? TRUE,
    ];

What's just missing then is an option to use a text like "Did you receive a coupon code?" instead of the hard-coded label?

@jsacksick and the others, what do you think? (Before we get started...)

That wonderful option was recently added here: #3470982: Allow customizing the wrapper element and the display label for checkout panes

anybody’s picture

anybody’s picture

Update: Just saw that we also added the option to override the pane labels in general here: https://git.drupalcode.org/project/commerce/-/commit/a78255493f7592e88c1...
(#3470982: Allow customizing the wrapper element and the display label for checkout panes)

So if we agree this is a good enough way, we could close this won't fix or closed as duplicate for 3.x! I think it's now possible, what the author of this issue tried to achieve!

anybody’s picture

@jsacksick: I'd vote to close this outdated. The new settings in 3.x (see #13) can be used for this out of the box.