search

woocommerce / woocommerce-blocks

(Deprecated) This plugin has been merged into woocommerce/woocommerce
https://wordpress.org/plugins/woo-gutenberg-products-block/
GNU General Public License v3.0
405 stars 218 forks source link

Mobile: If products are added on the cart page, navigating back from checkout to cart does not show the newly added products #3827

Closed Shazgu closed 3 years ago

Shazgu commented 3 years ago

Describe the bug

On mobile, if you add additional products to the cart while on the cart page (e.g. from a cross-sell section on the page), if later you navigate back from the checkout page to the cart, you only see the original products, not the ones added while on the page. The products are not actually removed from the cart - If you go back to checkout again you will see them there - but they're not displayed in the cart unless you refresh the page. On mobile only. Works correctly on desktop. Reproduced on both mobile Safari and Firefox.

To reproduce

Steps to reproduce the behavior:

  1. Add a product to the cart and go to to the cart page
  2. Add another product from product carousels on the cart page.
  3. Click 'proceed to checkout'
  4. Use browser back button or a back gesture to navigate back to the cart page
  5. Observe that only the original product is listed, the new product added on the cart page isn't shown.
  6. If you refresh the cart page, you will see the correct contents displayed.

Expected behavior

Navigating back to the cart page should show the correct contents of the cart.

Screenshots

https://user-images.githubusercontent.com/71322363/107629594-424b0000-6c5a-11eb-859d-9f79757c32f8.MP4

Steps followed in the attached video: STEP 1: Added item to cart and navigated to cart page STEP 2: Added item to from products on cart page STEP 3: Proceeded to checkout STEP 4: Used gesture to go back to cart (product missing) STEP 5: Returned to checkout page (correct cart - both products included) STEP 6: Used browser back button to go back to cart (product missing) STEP 7: Refreshed cart page (correct cart - both products included)

Environment

WordPress (please complete the following information):

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context

Add any other context about the problem here.

ralucaStan commented 3 years ago

Hello @Shazgu, thank you for reaching out.

What extension are you using for the cross-sell? It would be helpful to see your system status report - You will find information on how to do this here: https://docs.woocommerce.com/document/understanding-the-woocommerce-system-status-report/#section-1

If you can paste the status report into this thread that would be great.

Thanks!

Shazgu commented 3 years ago

Hi, Thanks for your reply. We're using the theme's (Woodmart) on carousels. They're created using HTML blocks with Elementor.

I do have an update. In my original message I said this was only on mobile. I've done some more testing on desktop in the meantime, and while it doesn't happen on Safari, it does happen on Chrome and Firefox on desktop too.

Here's the system report:

WordPress Environment

WordPress address (URL): https://rose9193test.wpengine.com Site address (URL): https://rose9193test.wpengine.com WC Version: 4.9.2 REST API Version: ✔ 4.9.2 WC Blocks Version: ✔ 4.4.0 Action Scheduler Version: ✔ 3.1.6 WC Admin Version: ✔ 1.8.3 Log Directory Writable: ✔ WP Version: ❌ 5.5.3 - There is a newer version of WordPress available (5.6.1) WP Multisite: – WP Memory Limit: 512 MB WP Debug Mode: – WP Cron: ✔ Language: en_US External object cache: –

Server Environment

Server Info: Apache PHP Version: 7.4.14 PHP Post Max Size: 100 MB PHP Time Limit: 3600 PHP Max Input Vars: 10000 cURL Version: 7.58.0 OpenSSL/1.1.1

SUHOSIN Installed: – MySQL Version: 5.7.32-35-log Max Upload Size: 50 MB Default Timezone is UTC: ✔ fsockopen/cURL: ✔ SoapClient: ✔ DOMDocument: ✔ GZip: ✔ Multibyte String: ✔ Remote Post: ✔ Remote Get: ✔

Database

WC Database Version: 4.9.2 ====DATABASE INFORMATION REDACTED FOR SECURITY REASONS (if you need it, please let me know how to send privately)========

Post Type Counts

attachment: 1480 cms_block: 73 custom_css: 1 custom-css-js: 2 elementor_library: 1 fusion_element: 3 nav_menu_item: 179 oembed_cache: 13 page: 27 portfolio: 9 post: 35 product: 738 product_variation: 233 revision: 158 seedprod: 1 shop_coupon: 6 shop_order: 15 shop_order_refund: 3 slide: 9 wlwl_email: 30 woodmart_sidebar: 2 woodmart_slide: 45 wpcf7_contact_form: 6

Security

Secure connection (HTTPS): ✔ Hide errors from visitors: ✔

Active Plugins (21)

HTML in Category Descriptions: by Arno Esterhuizen – 1.2.3 Back In Stock Notifier for WooCommerce | WooCommerce Waitlist Pro: by codewoogeek – 1.10.0 Change Password Protected Message: by pipdig – 2.0.2 Coming Soon Page, Maintenance Mode & Landing Pages by SeedProd: by SeedProd – 6.0.10.1 Contact Form 7: by Takayuki Miyoshi – 5.3.2 Google Tag Manager for Wordpress: by Thomas Geiger – 1.11.6 Elementor: by Elementor.com – 3.1.1 Health Check & Troubleshooting: by The WordPress.org community – 1.4.5 OnSale Page for WooCommerce: by wpgenie – 1.0.11 Order / Coupon / Subscription Export Import Plugin for WooCommerce (BASIC): by WebToffee – 1.7.2 Product CSV Import Export (BASIC): by WebToffee – 1.8.7 Safe SVG: by Daryll Doyle – 1.9.9 WooCommerce Blocks: by Automattic – 4.4.0 WooCommerce Conversion Tracking: by weDevs – 2.0.8 Print Invoice & Delivery Notes for WooCommerce: by Tyche Softwares – 4.6.2 WooCommerce Stripe Gateway: by WooCommerce – 4.8.0 WooCommerce Max Quantity: by Isabel Castillo – 1.5.2 WooCommerce: by Automattic – 4.9.2 (update to version 5.0.0 is available) Woodmart Core: by – 1.0.26 WP-Optimize - Clean, Compress, Cache: by David Anderson Ruhani Rabin Team Updraft – 3.1.6

Custom Product Tabs for WooCommerce: by YIKES Inc. – 1.7.6

Inactive Plugins (5)

Product Feed PRO for WooCommerce: by AdTribes.io – 9.4.1 Redirection: by John Godley – 5.0 Slider Revolution: by ThemePunch – 6.2.22 WooCommerce Google Analytics Integration: by WooCommerce – 1.5.0 Yoast SEO: by Team Yoast – 15.6.2

Dropin Plugins (3)

advanced-cache.php: advanced-cache.php db-error.php: db-error.php maintenance.php: maintenance.php

Must Use Plugins (6)

Force Strong Passwords - WPE Edition: by Jason Cosper – 1.6.4 Health Check Troubleshooting Mode: by – 1.7.2 SSO: by Garth Mortensen Mike Hansen – 0.3

WP Engine Seamless Login Plugin: by WP Engine – 1.5.5 WP Engine Security Auditor: by wpengine – 1.0.9 WP Engine System: by WP Engine – 4.1.0

Settings

API Enabled: – Force SSL: – Currency: GBP (£) Currency Position: left Thousand Separator: , Decimal Separator: . Number of Decimals: 2 Taxonomies: Product Types: external (external) grouped (grouped) simple (simple) variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog) exclude-from-search (exclude-from-search) featured (featured) outofstock (outofstock) rated-1 (rated-1) rated-2 (rated-2) rated-3 (rated-3) rated-4 (rated-4) rated-5 (rated-5)

Connected to WooCommerce.com: –

WC Pages

Shop base: #16552 - /shop/ Cart: ❌ Page does not contain the shortcode. Checkout: ❌ Page does not contain the shortcode. My account: #16576 - /my-account/ Terms and conditions: #19790 - /terms-and-conditions/

Theme

Name: Woodmart Child Version: 2.0.4 Author URL: http://www.purenaturals.co.uk Child Theme: ✔ Parent Theme Name: Woodmart Parent Theme Version: 5.3.6 Parent Theme Author URL: http://themeforest.net/user/xtemos WooCommerce Support: ✔

Templates

Overrides: woodmart/woocommerce/archive-product.php woodmart/woocommerce/cart/cart-item-data.php woodmart-child/woocommerce/cart/cart.php woodmart/woocommerce/cart/cross-sells.php woodmart-child/woocommerce/cart/mini-cart.php woodmart/woocommerce/checkout/form-checkout.php woodmart/woocommerce/checkout/thankyou.php woodmart/woocommerce/content-product-cat.php woodmart/woocommerce/content-product.php woodmart-child/woocommerce/content-single-product.php woodmart/woocommerce/content-widget-product.php woodmart/woocommerce/global/breadcrumb.php woodmart-child/woocommerce/global/form-login.php woodmart-child/woocommerce/global/quantity-input.php woodmart/woocommerce/loop/add-to-cart.php woodmart/woocommerce/loop/loop-end.php woodmart/woocommerce/loop/loop-start.php woodmart/woocommerce/loop/no-products-found.php woodmart/woocommerce/loop/orderby.php woodmart/woocommerce/loop/pagination.php woodmart-child/woocommerce/loop/rating.php version 3.0.0 is out of date. The core version is 3.6.0 woodmart/woocommerce/loop/sale-flash.php woodmart-child/woocommerce/myaccount/dashboard.php woodmart-child/woocommerce/myaccount/form-edit-account.php woodmart-child/woocommerce/myaccount/form-edit-address.php woodmart-child/woocommerce/myaccount/form-login.php woodmart/woocommerce/product-searchform.php woodmart/woocommerce/single-product/add-to-cart/grouped.php woodmart-child/woocommerce/single-product/add-to-cart/variable.php woodmart/woocommerce/single-product/meta.php woodmart/woocommerce/single-product/product-image.php woodmart/woocommerce/single-product/product-thumbnails.php woodmart/woocommerce/single-product/rating.php woodmart/woocommerce/single-product/related.php woodmart/woocommerce/single-product/sale-flash.php woodmart/woocommerce/single-product/tabs/tabs.php woodmart/woocommerce/single-product/title.php woodmart/woocommerce/single-product/up-sells.php woodmart/woocommerce/single-product.php

Outdated Templates: ❌

                  Learn how to update

Action Scheduler

Complete: 5,336 Oldest: 2021-02-02 13:01:58 +0000 Newest: 2021-02-11 11:10:51 +0000

Pending: 5 Oldest: 2021-02-12 11:07:39 +0000 Newest: 2021-02-18 11:07:39 +0000

nerrad commented 3 years ago

Thanks for submitting this issue @Shazgu - it looks like this has some similarity to this reported issue that was fixed.

I think a first step here before we can action this would be to rule out this being caused in part by usage of Elementor or the cross-sell plugin. So it'd be great to confirm if this is reproducible without those in the environment (i.e. update an item quantity in the cart on the cart page, go to checkout, and then hit back button in browser and ensure the cart is correct).

On the surface, this looks like it may be a legit bug we have to address but it's unclear yet what that fix might involve.

Shazgu commented 3 years ago

Hi nerrad,

I didn't immediately make the connection to the older fix but perhaps.

I deactivated Elementor and tested with a quantity change as you'd suggested, and the issue persists (the exact same behaviour). We don't use any plugins for the product carousels, it's just elementor and our theme. To double-check, I then also changed from our theme to the twenty-twenty theme (still no Elementor), and was still able to reproduce.

Hope this helps.

Juiceycow commented 3 years ago

Hope you don't mind me jumping in here, but I think I've found a related bug, both on my own site and @Shazgu's above (https://purenaturals.co.uk/). On desktop, if you change the quantity in the cart/basket, 'proceed to checkout', then return to the cart by hitting the browser back button, the quantity reverts to the figure it was before the quantity change. Manually refreshing the page shows the correct number.

Example: https://youtu.be/Ea8IZL-ah94

I've tested it on Chrome and Edge. Also with all plugins disabled, including Elementor and changed theme to twenty-twenty.

nerrad commented 3 years ago

I can reproduce as well. Thanks for reporting all :)

So to be clear, this isn't caused by conflicts with themes or other plugins. I'm able to reproduce this with the following minimal testing steps:

  1. Load the cart block.
  2. Adjust the quantity of any product and note the change.
  3. Proceed to Checkout
  4. Click the browser "back" button and note that the quantity change is not reflected in the view.

This appears to be the browser active cache of the page state after initial load (which isn't being updated by client activity).

Aljullu commented 3 years ago

The issue seems to be caused by the cartData value we print on page load to hydrate the Cart block.

To better understand the issue, this is what happens:

  1. User loads the cart with, for example, Cap with quantity 1. Via PHP, we print that (and other values used by the Cart block) in wcSettings.cartData. It looks something like this: 
    <script>
var wcSettings = {
cartData: {
items: [
  {
    name: 'Cap',
    quantity: 1,
    ...
  }
],
...
}
...
}
</script>
  2. The user changes the quantity. That updates the internal state of the Blocks stores & the database. But the <script> tag that was printed in the HTML on page load stays the same.
  3. The user clicks on Place Order and goes to the Checkout page. wcSettings.cartData is printed in the HTML of that page too, but that's not a problem because it was not in the browser cache so the HTML is retrieved from the server with updated values.
  4. The user navigates back with the browser back button. The browser already has the Cart page HTML, so it doesn't request it again. But that HTML has the outdated wcSettings.cartData object! When the Cart block is loaded, it uses the values from wcSettings.cartData, so it displays outdated data.

A solution that came to my mind was to save a timestamp in the browser local state every time the user triggers a modification in the cart (adds/removes a product, changes quantity, etc.). Then, when loading the Cart block, check if that timestamp is higher than a timestamp that would have been set in wcSettings.cartData with the time when it was printed to the page. If the timestamp in the browser local state is higher, that means there have been modifications so the Cart needs to query the API to get updated values. If the timestamp in the browser local state is the same or lower (or it doesn't exist), that means we can trust the values in wcSettings.cartData. Does that approach make sense? Is there a simpler solution and I'm over-thinking this?

nerrad commented 3 years ago

That seems like a good solution to try Albert. Were you just thinking of using localStorage to save the timestamp? I think @mikejolley used that for something else too - maybe there's something re-usable here?

Aljullu commented 3 years ago

Were you just thinking of using localStorage to save the timestamp?

Yes, that was my idea.

I think @mikejolley used that for something else too - maybe there's something re-usable here?

For reference, this is what I could find: https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/assets/js/middleware/store-api-nonce.js. It's used for storing the store API nonce.

thexpand commented 1 year ago

This seems to be still happening as of today. On mobile, try opening a product, add it to the cart with AJAX, then go back (using the back button) to the category or landing page from where you opened the product. The cart quantity is not updated, and neither is the cart itself. Even the whole widget is empty - an empty cart widget.

opr commented 1 year ago

Hi @thexpand - thank you for reporting this. I investigated and I think this is a little different to the original issue, so I'll open a new one to track this!

Please subscribe to https://github.com/woocommerce/woocommerce-blocks/issues/7974 to follow this bug