search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.41k stars 1.99k forks source link

Block themes: minicart doesn't allow users to checkout #70204

Closed Robertght closed 1 year ago

Robertght commented 1 year ago

Quick summary

If you use a Block theme like Blockase/Attar/etc and add the Mini cart block to the nav menu the footer of that mini cart won't show up on mobile, being covered by the browser bar

Steps to reproduce

  1. Activate Blockbase
  2. Add the Minicart block to the header
  3. Add a product to your cart and click on the cart icon
  4. You should see the cart section, but you won't be able to click on the bottom checkout option.

What you expected to happen

To see the entire section

What actually happened

The section was cut: ![Uploading IMG_A92B650CE41B-1.jpeg…]()

Context

5719527-zen

5697160-zen

Platform (Simple, Atomic, or both?)

Atomic

Theme-specific issue?

Block themes

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

Change the theme or find a CSS workaround.

github-actions[bot] commented 1 year ago

Support References

This comment is automatically generated. Please do not edit it.

kavyagokul commented 1 year ago

📌 SCRUBBING : RESULT

📌 FINDINGS/SCREENSHOTS/VIDEO

📌 ACTIONS

📌 Message to Author @Robertght I see that you started adding a screenshot, but it didn't work. I was not able to replicate this as shown in my findings. Can you add your screenshot/screencast so we have more info to be able to replicate this?

Robertght commented 1 year ago

Sure! Here it is:

IMG_2CFF1EFC5A20-1

Please check the above on a mobile device.

zachspears commented 1 year ago

Testing the above issues on mobile I had a related issue, leaving this open for further testing. In both Firefox and Safari the Mini Cart did not not display the item in my cart, and was formatted incorrectly:

https://user-images.githubusercontent.com/10124024/203481806-fca1a16e-8807-4db4-9f84-4461cd9cce89.mp4

https://user-images.githubusercontent.com/10124024/203481837-ed4e74e0-7a88-4da2-bac4-dd343ee3893f.mp4

cuemarie commented 1 year ago

Thanks @zachspears for including your test results! This issue (with the blank cart) looks like a separate bug than the issue originally reported - perhaps one of these?

Update - I saw the same issue on my test site; deactivating Page Optimize restored the cart contents (though they ain't pretty), so I'm thinking that's the issue you were encountering as well

cuemarie commented 1 year ago

📌 SCRUBBING : RESULT

📌 FINDINGS/SCREENSHOTS/VIDEO

  1. Add Mini Cart block to header in Blockbase
  2. Deactivate Page Optimize to avoid issue #65662
  3. Open site on mobile browser - I tested with iOS Safari & Chrome
  4. Add multiple items to the cart
  5. Tap the Cart from the header and scroll down

Results - With only one item in my cart, I have to scroll down in the cart section to view and select "Go to Checkout". With multiple products in the cart, when I first scroll down to see the "go to checkout" button, only the contents of the cart scroll, and not the entire sidebar. This results in me not being able to view the button. When I scroll down a second time, the button appears. There seems to be a

iOS Chrome (single product vs multiple products):

https://user-images.githubusercontent.com/27249804/204601081-a388b097-3f13-4105-8256-d898dc9eb960.mov

iOS Safari (multiple products):

https://user-images.githubusercontent.com/27249804/204601207-08bfb287-45a6-4f15-8c5f-a058e1a8fffa.MP4

📌 ACTIONS

Gustavo-Hilario commented 1 year ago

Another report:

I could reproduce this issue on the Tsubaki demo site: https://tsubakidemo.wpcomstaging.com/

I've helped the user above with a CSS code workaround for now:

/* Fix the issue with the Checkout button missing on the mini-cart on mobile | XXXXXX-hc/zen GH */
@media (max-width: 600px) {
.wc-block-mini-cart__title {
    flex-basis: 10%;
}
.wc-block-mini-cart__items {
    flex-basis: 65%;
}
.wc-block-mini-cart__footer {
    flex-basis: 25%;
}
}

/* End  | XXXXXX-hc/zen */

I'm not sure if the code will work for all sites, and a different media query might be necessary. Please test the code before sharing.

kavyagokul commented 1 year ago

Context from closed duplicate

kuropixel commented 1 year ago

Another report (Theme: Tsubaki): 39928718-hc

Sharing CSS workaround resolved the issue.

Aljullu commented 1 year ago

Howdy folks, have you received new reports of this bug? I think it was fixed in https://github.com/woocommerce/woocommerce-blocks/pull/8351, so I guess we can close this issue?

cuemarie commented 1 year ago

Retesting today, Mini-Cart block on a Blockbase theme works as expected in both desktop and mobile responsive views:

Desktop

41cHJX.gif

Mobile Responsive View

https://github.com/Automattic/wp-calypso/assets/27249804/330a0efc-f219-4cae-8184-b255a114e177

📌 ACTIONS