Refactor offcanvas cart #329

crftwrk · 2022-12-19T16:07:14Z

This PR delivers a completely refactored ajax cart and has no breaking changes since 5.2.0.0.

Demo: https://dev.bootscore.me/shop/
Before & After clip: https://www.youtube.com/watch?v=IBsuoKNDrXk

Ajax cart is now compatible with all product types:

Simple product
Variable product
Grouped product
Affiliate product
Out of stock
Only 1 in stock
Sold individually
Add to cart buttons in other page content

Add to cart buttons & Offcanvas cart

Offcanvas loader has been removed and buttons have now a loading-spinner instead. Offcanvas opens when product is added to cart.

Alerts

Offcanvas shows now a success/danger alert when product is added/failed to the cart and removes them when offcanvas closes.

Product page

Alerts are moved out from the top of the page into offcanvas cart. These are the default WooCommerce alerts.

Loop

These alerts are not the WooCommerce alerts, because it seems that WC does not provide alerts in loop. Text can be translated like any other text in the theme.

There is no redirect to product page anymore if adding failed.

Testing

Loop: https://dev.bootscore.me/shop/

Simple product

Add “Album“ in loop to the cart
Add “Album“ in product page to the cart https://dev.bootscore.me/product/album/

Variable product

Click “Hoodie“ Select options in the loop
Select variation and add to cart

Only 1 in stock / sold individually

Add “Beanie“ in loop to the cart - success
Add “Beanie“ one more time in loop - failed
Remove “Beanie“ from cart and go to product page https://dev.bootscore.me/product/beanie/
Add it twice to the cart. First success, second failed
Remove “Beanie“ from cart

Grouped products

Click “Logo Collection“ in loop
Press + buttons to add one “Beanie“ and one or more “Hoodie with Logo“, add them to the cart - success
Add them again - Hoodie success, Beanie failed
Click the Read more button to test the link if product is out of stock

Affiliate products

Click “WordPress Pennant“ Buy on the WordPress swag store button in loop. You will be redirected to the WP swag store.
Click button again on product page https://dev.bootscore.me/product/wordpress-pennant/. You will be redirected to the WP swag store.

Add to cart buttons in other page content

Click the “Album“ button below the ul https://dev.bootscore.me/2012/01/07/template-sticky/.

Disable ajax cart

Because all scripts (except the mini cart in navbar) are now located in ajax-add-to-cart.php, it's very simply to disable ajax cart function. Disable "Enable AJAX add to cart buttons on archives" in backend WooCommerce > Settings > Products and add the empty function to your child's functions.php:

// Disable Ajax Cart
function register_ajax_cart() {

}
add_action('after_setup_theme', 'register_ajax_cart');

Known issues

Alert does not work in related products if product page is out of stock https://dev.bootscore.me/product/t-shirt/. This is done by this script which excludes the ajax cart if product is out of stock.

$('a.ajax_add_to_cart:not(.outofstock a.ajax_add_to_cart)').on('click', function(e) {

Without these selectors, the “Read more“ loop button will not work.

If a product failed adding in the loop and then went directly to the cart/checkout page, the alert appears again at the top of the page. No solution for that yet.

Closes #215
Closes #319
Closes #277
Fixes #200 (comment)
Fixes #205
Fixes #209
Fixes #270
Fixes #154

Let me know what you think!

Variable product disabled button still shows loader on click

Update Refactor offcanvas branch

Hide View Cart

Update 5.2.1

Upstream main

justinkruit · 2023-01-04T21:21:23Z

Planning to take a good look at this this weekend.

Did you also check how well this works when Ajax is disabled? At work we use the bootScore woocommerce resources, and sometimes we need to disable ajax to make more advanced and custom systems.

justinkruit · 2023-01-04T21:26:34Z

Bug found: when going back a page, the cart isn't loaded with content.

justinkruit · 2023-01-04T21:40:31Z

Also, I see we're still using the default woocommerce alerts. Any chance we could kinda revamp that? The icon is set with the font version of Font Awesome, although I haven't used those for almost years now 😂 I've completely switched to the JS version, and needed to fall back on the woocommerce icons even though they don't look as good.

crftwrk · 2023-01-05T10:03:47Z

Bug found: when going back a page, the cart isn't loaded with content.

Urgh, yes. Bug appears in actual ajax-cart https://bootscore.me/shop/ as well.

But it seems that this is a Woo mini-cart widget issue. Added a second cart widget in sidebar here https://dev.bootscore.me/shop/. Always when you hit the go back button, cart is empty. You must add something new or reload the page. Bug appears even if ajax-cart is completely disabled. Think this has nothing to do with this PR.

Also, I see we're still using the default woocommerce alerts. Any chance we could kinda revamp that?

FA icons to alerts are added here https://github.com/bootscore/bootscore/blob/main/scss/bootscore/_alerts.scss. I'm open to remove them in a second PR.

Did you also check how well this works when Ajax is disabled? At work we use the bootScore woocommerce resources, and sometimes we need to disable ajax to make more advanced and custom systems.

Yes, disabling ajax-cart works pretty well.

crftwrk · 2023-01-05T17:47:57Z

Bug found: when going back a page, the cart isn't loaded with content.

We can use a script to force reload when back button is clicked. This one seems to work https://dev.bootscore.me/shop/:

// Refresh page on browser back button 
// https://stackoverflow.com/questions/43043113/how-to-force-reloading-a-page-when-using-browser-back-button
window.addEventListener("pageshow", function (event) {
  var historyTraversal = event.persisted ||
    (typeof window.performance != "undefined" &&
      window.performance.navigation.type === 2);
  if (historyTraversal) {
    // Handle page restore.
    window.location.reload();
  }
});

justinkruit · 2023-01-05T21:00:02Z

Isn't there a way to just refresh the cart, like a js event? I don't think reloading the page is a good idea.

And for the fontawesome part, I know they're being set there, but that only works when you load the font. But the JS version replaces the i tag with an svg so those fonts aren't being loaded. Maybe we could load the svg directly there like bootstrap does.

crftwrk · 2023-01-06T09:49:17Z

Figured out that this happens only on Chrome and Opera. Safari, Edge and Firefox works fine (on my machine). But this is already a known issue woocommerce/woocommerce#32454.

This workaround works fine woocommerce/woocommerce#32454 (comment):

var isChromium = window.chrome;
if (isChromium) {
  $(window).on('pageshow', function (e) {
    if (e.originalEvent.persisted) {
      setTimeout(function () {
        $(document.body).trigger('wc_fragment_refresh');
      }, 100);
    }
  });
}

Font Awesome: We had this already here #46 (comment), but nothing happen?

justinkruit · 2023-01-06T10:10:08Z

That solution looks good! Feel free to implement it and I'll take a full look this weekend.

About FA, let's have a quick chat about it on TG, a bit easier 😉

crftwrk · 2023-01-06T10:38:05Z

Fixed in e8bea45

justinkruit · 2023-01-06T15:29:08Z

Did some more testing, and all looks good! Really impressed by it 😄

I'll be doing some quick formatting tests and then it's ready to be merged.

crftwrk · 2023-01-06T15:39:04Z

I'll be doing some quick formatting tests and then it's ready to be merged.

Perfect ;-) But we should wait to merge until next week Wednesday, because on Monday a new Woo release with template changes (again) is scheduled. So, we can update templates on Tuesday and do a minor release 5.2.3.1 then. The cart we should ship with Bootstrap 5.3 if stable or beta, agree?

Mabye you can have a quick look to #332 and #344, which can be merged now. This are just minor improvements.

justinkruit · 2023-01-06T15:46:18Z

While checking out the code, I noticed the js of the mini cart is getting quite long. Maybe it's a good idea to put it in a file instead of having it inline?

And I'll check out the others one first then, as most changes are in the js 👍

crftwrk · 2023-01-06T15:59:20Z

Yes, it's long. But because JS and PHP is in one file it's very simple to deactivate with one hit. Translation strings will not work that way too if we put JS in an own file. And of course, ajax is direct on the server, no more file request.

crftwrk · 2023-01-06T16:02:46Z

What do you think, should we ship the cart with the next Woo release or wait?

justinkruit · 2023-01-06T16:03:13Z

In that case, would it maybe be cleaner to have the js in a separate file but echo the content directly with a file_get_contents()? That way the code looks a bit cleaner and you still have the direct js in the footer.

justinkruit · 2023-01-06T16:37:05Z

Just did some small js changes, could you quickly check them? Don't have a Woocommerce test environment 😜

Also, you want to wait till bootstrap 5.3 is beta or stable? Knowing their trackrecord that can take quite a while.

crftwrk · 2023-01-06T16:45:48Z

https://dev.bootscore.me/shop/ seems good 👍

crftwrk · 2023-01-06T16:46:22Z

If you agree, we merge now and release it next week.

justinkruit

All seems to be working fine! 👍

crftwrk · 2023-01-13T12:36:00Z

Want to press the merge button?

bootscore/bootscore#329

crftwrk and others added 30 commits August 27, 2022 22:13

Moved notices to offcanvas-cart (only on product pages)

048b884

Trigger offcanvas-cart when cart is loaded

1c84602

Removed duplicate ;

2f32531

Exclude Affiliata/External product from ajax cart

2ab3689

Add loading spinner to add_to_cart_button

16cf2a9

Variable product disabled button still shows loader on click

Top margin only to first alert

a29e04d

Create fake alert to offcanvas cart in archive (Just testing)

52f65ef

Disable fake alert in loop

92d8c13

Merge pull request #235 from bootscore/main

dd96b83

Update Refactor offcanvas branch

Added notices and prevent redirect if product add to cart failed

086330d

Remove cart-loader

9d9e06c

Remove cart-loader

27976fb

Move all ajax cart based scripts to ajax-add-to-cart.php

96ccea2

Merge pull request #238 from bootscore/main

0dc4a9c

Hide View Cart

Moved ajax styles from product.scss to offcanvas.scss

e221956

Merge pull request #250 from bootscore/main

93fb57d

Update 5.2.1

Merge pull request #256 from bootscore/main

23eb2ec

Upstream main

Merge pull request #260 from bootscore/main

af9849c

Upstream main

Merge pull request #281 from bootscore/main

7ca2107

Upstream main

Merge pull request #283 from bootscore/main

a06082f

Upstream main

Merge pull request #303 from bootscore/main

03f273b

Upstream main

Improve btn-loader

e2d6289

Stretched link to outofstock cards

a33ca0b

Refactor btn loader

605263d

Merge pull request #327 from bootscore/main

9d7bd71

Upstream main

Clean-up _wc_offcanvas_cart.scss

f6e47bc

Add title to single_add_to_cart_button in loop

598d1f1

Update add-to-cart.php

50799e7

Revert 598d1f1

a1eb61c

Add product title to alert-danger notice

f201e3b

crftwrk and others added 2 commits December 22, 2022 10:27

Change btn-loader #{$prefix}

9a2a972

Merge pull request #342 from bootscore/main

415d2ce

Upstream main

crftwrk mentioned this pull request Jan 3, 2023

Refactor Woo checkout form validation #343

Closed

Fix empty cart on browser back button

e8bea45

justinkruit added 2 commits January 6, 2023 17:27

Some formatting

3a0123c

Changed vars to lets and consts

31571e6

crftwrk added 2 commits January 10, 2023 10:37

Update _bscore_woocommerce.scss

05957ae

Update header-woocommerce.php

072f50b

justinkruit approved these changes Jan 13, 2023

View reviewed changes

justinkruit merged commit cc84124 into main Jan 13, 2023

crftwrk added a commit to bootscore/bootcommerce-child that referenced this pull request Jan 13, 2023

Update header.php according to refactored ajax cart

49c017a

bootscore/bootscore#329

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor offcanvas cart #329

Refactor offcanvas cart #329

crftwrk commented Dec 19, 2022 •

edited

justinkruit commented Jan 4, 2023

justinkruit commented Jan 4, 2023

justinkruit commented Jan 4, 2023

crftwrk commented Jan 5, 2023 •

edited

crftwrk commented Jan 5, 2023

justinkruit commented Jan 5, 2023 •

edited

crftwrk commented Jan 6, 2023

justinkruit commented Jan 6, 2023

crftwrk commented Jan 6, 2023

justinkruit commented Jan 6, 2023

crftwrk commented Jan 6, 2023

justinkruit commented Jan 6, 2023

crftwrk commented Jan 6, 2023

crftwrk commented Jan 6, 2023

justinkruit commented Jan 6, 2023

justinkruit commented Jan 6, 2023

crftwrk commented Jan 6, 2023

crftwrk commented Jan 6, 2023

justinkruit left a comment

crftwrk commented Jan 13, 2023

Refactor offcanvas cart #329

Refactor offcanvas cart #329

Conversation

crftwrk commented Dec 19, 2022 • edited

Add to cart buttons & Offcanvas cart

Alerts

Product page

Loop

Testing

Simple product

Variable product

Only 1 in stock / sold individually

Grouped products

Affiliate products

Add to cart buttons in other page content

Disable ajax cart

Known issues

justinkruit commented Jan 4, 2023

justinkruit commented Jan 4, 2023

justinkruit commented Jan 4, 2023

crftwrk commented Jan 5, 2023 • edited

crftwrk commented Jan 5, 2023

justinkruit commented Jan 5, 2023 • edited

crftwrk commented Jan 6, 2023

justinkruit commented Jan 6, 2023

crftwrk commented Jan 6, 2023

justinkruit commented Jan 6, 2023

crftwrk commented Jan 6, 2023

justinkruit commented Jan 6, 2023

crftwrk commented Jan 6, 2023

crftwrk commented Jan 6, 2023

justinkruit commented Jan 6, 2023

justinkruit commented Jan 6, 2023

crftwrk commented Jan 6, 2023

crftwrk commented Jan 6, 2023

justinkruit left a comment

Choose a reason for hiding this comment

crftwrk commented Jan 13, 2023

crftwrk commented Dec 19, 2022 •

edited

crftwrk commented Jan 5, 2023 •

edited

justinkruit commented Jan 5, 2023 •

edited