ScandiPWA Updates: October, 7 (Issue #61)

New video tutorials, Magento 2.4 support, SEO improvements, Stability improvement, and bug fixes.

What’s inside

• Setting Up Environment and Talking Theory
• Learning React Hands-On
• Styling It
• Learning ScandiPWA Way
• Magento 2.4 support
• New isMobile implementation
• New translation pack
• UX improvements
• SEO improvements
• Bug fixes

Video Tutorials

Want to work with ScandiPWA? We have prepared a great starting point materials to learn React and PWA:

It features the following topics in written and video format:

1. Setting Up Environment and Talking Theory
2. Learning React Hands-on
3. Styling It
4. Learning ScandiPWA Way

Feature break-down

Magento 2.4 support

ScandiPWA v3.1.0 and all its payment methods that have been implemented within the ScandiPWA team have been tested to find any incompatibilities with Magento 2.4 payment method mechanics changes. All the payment methods which needed an update have been updated. The other functionality related to Magento 2.4 has not been changed since 3.0.2

New isMobile implementation

Google is gradually reducing the amount of information available to be extracted from the user agent, due to that part of the ScandiPWA isMobile utility is going to become deprecated. A new approach has been implemented and used throughout the application. For now the old Util/Mobile remains in the application for backward-compatibility, although it is planned to remove it in the future.

See #716 for details.

New translation pack

Traditional Chinese (Taiwan) Translation has been added.

Preserve state in checkout #795

Previously on desktop, it was impossible to go from the shipping step back to the billing step in the checkout, even in the cases when it was possible, it did not save the input fields’ values and the user was ought to re-enter all the data that has already been entered. With this modification, it is possible to go back to the billing step and among with that the state is preserved and the user should not re-enter anything but has an opportunity to modify what is necessary!

SEO improvements

• Canonical tags are missing for the homepages #927
• No default 404 title on pages #926
• No redirect when adding “ / “ at the end of PLP and PDP URLs #930

Closed issues

• ESLint requires to import overwritten styles before original styles #979
• Color swatches broken #967
• The extension is called twice if the initial component is overwritten in app/design #959
• The current user cannot perform operations on cart #865
• CMS blocks do not respect store view #845
• The “as low as” price is shown without the discount #842
• A custom theme always takes html and phtml templates from vendor #800
• German demo product tier price error #798
• Paypal Express Issue #730
• Going into landscape mode in Menu on IPad pro breaks the menu #956
• Meta works unreliably #881
• The page should scroll up when paginating #882
• My account address post-fixes are not translated. #901
• “Write a review” button clips through the navigation menu #903
• ScandiPWA doesn’t fallback to configurable product images and only shows simple product ones #932
• Account Overlay does not close on click away #933
• Login password length and New password length don’t match #934
• Issues with navigation icons on mobile #629
• Traditional Chinese (Taiwan) Translation #969
• Safari iPad user-agent issue #950
• “Select store” is present as one of the options in-store selection on mobile #999
• The Footer component shows two times #1009
• Cart overlay opening when going back from checkout #1333
• Can’t scroll category options if there are more than fits on-screen (Mobile) #980
• mini-css-extract-plugin throws “Conflicting order” warnings in console #939
• The mobile menu has the wrong URL after 404 #944
• My-account links break the path-name based stores. #941
• Logged out notification appears twice #955
• Bump eslint-plugin-jest, sass-loader, eslint-loader, css-loader, mini-css-extract-plugin to the latest versions #951 #952 #953 #970 #1326

Assets:

Source code(zip)

Source code(tar.gz)

Source code(zip)

Source code(tar.gz)

Bug fixes

• Migrations of slider and menu do not run [#1375]
• Auto-scrolling to the start on the massive category pages [#1352]
• In admin the field “number of lines in the street address” is ignored [#888]
• Footer component shows two times [#1009]
• Refactor MyAccountOverlay — it is hard to override [#877]
• Over indexation on Layered navigation pages [#928]
• Sales Quote table records increase issue [#711]
• Review summary object always null [#803]
• White Page shows if there is a product in the cart that is not available anymore [#973]
• Reset pagination when sort [#1013]
• Tax & price calculation, tax breakdown needs improvement [#675]
• Sitemap/ URLs inconsistency [#925]
• Wrong title on all products and categories by default [#931]

Incompatible changes and important notes

MyAccountOverlay refactor

This component has been split into multiple smaller components. This change must improve my account overlay extensibility.

Here is the list of new components:

• MyAccountConfirmEmail
• MyAccountCreateAccount
• MyAccountForgotPassword
• MyAccountForgotPasswordSuccess
• MyAccountSignIn

Cart is not requested on the initial request

The cart is now synced only in case the user adds at least one product to the card. This will improve the server load, as we no longer need to work with non-cached data for new users.

Migration from px to rem units in font-sizes

The px units were replaced by rem units in the style-sheets. This allows to support accessibility feature which controls user font-size.

The change was applied on margins, font-sizes, and every place was rem units were used previously.

Dependency check

NPM dependencies

There were no changes! 🥳

Composer dependencies

• scandipwa/reviews-graphql: from ^1.0 to ^1.6
• scandipwa/store-graphql from ^1.0.7 to ^1.1.1

Assets:

Source code(zip)

Source code(tar.gz)

We hope you enjoyed the latest ScandiPWA updates. Follow us on Twitter or join the first Magento PWA community in our Slack channel where you can stay up-to-date with our work, explore the latest technical progress, ask questions, and meet other enthusiasts!

ScandiPWA is the first open-source PWA theme for Magento