fix: ensure form grid shortcode compatibility with x theme in mobile devices

[marutim]

Bug Report

User Story

As an admin, I would like to use the Form Grid shortcode in x-theme without any issues.

At the moment, the grid form with display_style set to modal reveal does not work in mobile devices.

The modal works as intended in desktop but in Mobile devices it does not open the modal whereas the modal works fine in mobile when the theme is set to a WP default theme like Twenty Seventeen.

Current Behavior

The modal does not open in mobile devices with x theme activated.

Expected Behavior

The modal should work in all theme and devices.

Bug Type

• I am not sure whether this functionality ever worked as expected.

Steps to Reproduce

1. Set a form grid using the shortcode with x theme activated.
2. Click/tap on the forms and you won't find it opening in a modal.
3. Change the theme back to a WP default like Twenty Seventeen and check Step 2.

Related

HS link: https://secure.helpscout.net/conversation/723380294/30493?folderId=1457790

Acceptance Criteria

• The donation forms should open in a modal in mobile devices for x theme.

Environment

### WordPress Environment ###

Home URL: http://give-x-theme.local
Site URL: http://give-x-theme.local
WP Version: 4.9.9
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
Permalink Structure: /%postname%/
Show on Front: posts
Table Prefix Length: wp_
Table Prefix Length: 3
Table Prefix Status: Acceptable
Admin AJAX: Accessible
Registered Post Statuses: publish, future, draft, pending, private, trash, auto-draft, inherit, request-pending, request-confirmed, request-failed, request-completed, tco-data, refunded, failed, revoked, cancelled, abandoned, processing, preapproval, give_subscription

Server Environment

Hosting Provider: DBH: localhost, SRV: give-x-theme.local
TLS Connection: Connection uses TLS 1.2
TLS Connection: Probably Okay
Server Info: nginx/1.14.0
PHP Version: 7.2.9
PHP Post Max Size: 1,000 MB
PHP Time Limit: 1200
PHP Max Input Vars: 4000
PHP Max Upload Size: 300 MB
cURL Version: 7.52.1, OpenSSL/1.0.2l
SUHOSIN Installed: –
MySQL Version: 5.7.23
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
gzip: ✔
GD Graphics Library: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Give Configuration

Give Version: 2.3.0
Give Cache: Enabled
Database Updates: All DB Updates Completed.
Give Cache: Enabled
Give Cache: ✔New Donation✔Donation Receipt❌New Offline Donation❌Offline Donation Instructions✔New User Registration✔User Registration Information✔Donor Note✔Email access✔Daily Email Report✔Weekly Email Report✔Monthly Email Report✔Renewal Receipt Email✔Subscription Cancelled Email✔Subscription Completed Email✔Subscription Reminder Email✔Subscriptions Email Access
Upgraded From: 1.8.19
Test Mode: Enabled
Currency Code: USD
Currency Position: After
Decimal Separator: .
Thousands Separator: ,
Success Page: http://give-x-theme.local/donation-confirmation/
Failure Page: http://give-x-theme.local/donation-failed/
Donation History Page: http://give-x-theme.local/donation-history/
Give Forms Slug: /donations/
Enabled Payment Gateways: Test Donation, PayPal Standard, Stripe - Credit Card, Authorize.net
Default Payment Gateway: Test Donation
PayPal IPN Verification: Enabled
PayPal IPN Notifications: N/A
Donor Email Access: Enabled

Active Give Add-ons

Give - Authorize.net Gateway: ✔ Licensed – by WordImpress – 1.4.3
Give - Email Reports: ✔ Licensed – by WordImpress – 1.1.2
Give - Fee Recovery: ❌ Unlicensed – by GiveWP – 1.7.2
Give - Form Field Manager: ❌ Unlicensed – by GiveWP – 1.4.1
Give - Manual Donations: ❌ Unlicensed – by GiveWP – 1.4.2
Give - Mollie Gateway: ❌ Unlicensed – by WordImpress – 1.1.2
Give - PayPal Pro Gateway: ❌ Unlicensed – by GiveWP – 1.2.1
Give - PDF Receipts: ❌ Unlicensed – by GiveWP – 2.3.1
Give - Per Form Gateways: ✔ Licensed – by WordImpress – 1.0.1
Give - Recurring Donations: ❌ Unlicensed – by GiveWP – 1.8.2
Give - Stripe Gateway: ❌ Unlicensed – by GiveWP – 2.1.2
Give - Tributes: ❌ Unlicensed – by GiveWP – 1.5.2

Other Active Plugins

Cornerstone: by Themeco – 3.3.8
Debug Bar: by wordpressdotorg – 1.0
Email Cop: by Ashfame – 0.1.1
User Switching: by John Blackbourn & contributors – 1.4.0

Inactive Plugins

Automatic Responsive Tables: by Andrew Rockwell – 1.2
Debug Bar Post Meta: by whyisjake – 0.5.5
Give - AmeriCloud Payments: by AmeriCloud Solutions, Inc. – 1.2.0
Give - Braintree Gateway: by WordImpress – 1.1.1
Give - CCAvenue Gateway: by GiveWP – 1.0.4
Give - Constant Contact: by WordImpress – 1.2.1
Give - ConvertKit: by WordImpress – 1.0.1
Give - CSV Toolbox: by WordImpress – 1.0
Give - Currency Switcher: by GiveWP – 1.3.0
Give - Form Countdown: by WordImpress – 1.0.1
Give - Gift Aid: by WordImpress – 1.1.6
Give - GoCardless Gateway: by WordImpress – 1.2
Give - Google Analytics Donation Tracking: by WordImpress – 1.1.1
Give - Hook Helper: by Ravinder Kumar – 1.0
Give - MailChimp: by GiveWP – 1.4.2
Give - Paytm Gateway: by WordImpress – 1.0
Give - PayUmoney: by GiveWP – 1.0.3
Give - Per Form User Role Assigner: by Matt Cromwell – 1.0
Give - Razorpay: by WordImpress – 1.2.0
Give - Recurring Helper: by WordImpress – 1.0
Give - Zapier: by WordImpress – 1.2.1
Intuitive Custom Post Order: by hijiri – 3.1.1
My Custom Functions: by Space X-Chimp – 4.31
Page Builder by SiteOrigin: by SiteOrigin – 2.9.5
Shortcode in Menus: by Gagan Deep Singh – 3.4
SiteOrigin Widgets Bundle: by SiteOrigin – 1.13.4
The Events Calendar: by Modern Tribe, Inc. – 4.7.1
The Events Calendar: Eventbrite Tickets: by Modern Tribe, Inc. – 4.5.5
WP Filters Extras: by BeAPI – 1.0.2

Active MU Plugins

Local by Flywheel Relative URL (for Live Links): by Flywheel – 1.0

Theme

Name: X
Version: 6.3.8
Author URL: http://theme.co/
Child Theme: No – If you're modifying Give on a parent theme you didn't build personally, then we recommend using a child theme. See: How to Create a Child Theme

[kevinwhoffman]

@nishitlangaliya Please discuss with @marutim so you can get access to the X theme and Cornerstone plugin for testing.

[nishitlangaliya]

@kevinwhoffman , Sure will discuss with @marutim. once I reach to this issue.

[nishitlangaliya]

@marutim , We will need latest version of Cornerstone plugin to see if it has still issue. if latest plugin have same issue with modal popup. Then we will need development version of Cornerstone plugin to see their .js files. Because this version have all files minified and finding difficult to troubleshoot.

[marutim]

@mathetos Can you help @nishitlangaliya here with the latest version of the cornerstone plugin? or do you want me to ask the user to share the latest version?

Also, I am not sure how can I get the development version of the plugin.

[nishitlangaliya]

@marutim , I have gone through the cornorstone plugin core js files and found that wp-content\plugins\cornerstone\assets\dist\js\site\cs-body.js code prevents modal popup open in form grid in mobile device. Since it is minified version unable to find cause of issue. so here two possibility.

1. It would be great if we can get wp-content\plugins\cornerstone\assets\dist\js\site\cs-body.js developer version I mean un minified version so I can do more troubleshoot into it.
2. Or we can ask Xtheme support if they can provide possible fix which we can do from our end or their end.

Thanks

[marutim]

@nishitlangaliya Thank you for looking at it.

I am not sure how can we get an unminified version of the file. The user will always have the same minified version. To get the developer version, I guess we will have to contact x theme and that is something @kevinwhoffman @mathetos can help you with.

BTW have you checked unminifying the js file using services like https://unminify.com/ or similar.
I am sure @ravinderk and @mehul0810 might share some tips to help here as well. Thanks!

[nishitlangaliya]

@marutim , Thanks for your reply. As per your suggestion I have gone through that step and unminify js using online. And after that I was able to found the source of issue. But since we did it from minify to unminfy, variable names like a, b, c, remains same. so difficult to find fix. I have discussed same with @ravinderk and he also suggest to have un minify version of js or we can contact to Xtheme support team.

Thanks

[mathetos]

I've reached out to the X Theme authors via their website. I'll keep everyone posted.

[kevinwhoffman]

Removing from 2.4.0 release and will reassign to an appropriate release if we hear back.

[rohmann]

@mathetos thanks for reaching out! Sorry for the delay getting back to you. I've tried this out and I can shed some light on the situation from Themeco's end.

X (and Pro) include a feature that will automatically scroll you to a section when you click on a link where the href matches an id of another element on the page. It accounts for the height of a fixed header so the top of the destination content lines up under the header when the animation completes. It runs on the click and touchend events and calls e.preventDefault().

The Give grid markup uses a similar pattern where anchor href attributes are paired with id. You could use the script below to abort the scroll behavior when clicking on a grid card.

window.jQuery(function($){
  window.csGlobal.csHooks.filter('hash_scrolling_allow', function(allow, el) {
    return $(el).hasClass('give-card') ? false : allow
  });
})

That being said, it's likely that you'll run into this with other themes later on. It might be better to completely prevent the click and touchend events from propagating outside the grid. For example, if you placed the following code somewhere in the vicinity of the modal setup (https://github.com/impress-org/give/blob/release/2.4.0/assets/src/js/frontend/give-misc.js#L17-L27).

jQuery('.give-wrap').on('touchend click', '.js-give-grid-modal-launcher', function(e) { 
  e.stopPropagation()
})

That would stop propagation late enough for the modal to be opened, but keep delegated body listeners (like the one in X/Cornerstone) from running.