ScandiPWA Updates: August 31 (Issue #61)

Stability improvements!

What’s inside

• Product attribute Used in Product Listing support;
• Bug fixes.

Feature break-down

Product attribute ‘Used in Product Listing’ support

From now on PLPs and PDPs render different attributes. The PLP uses Used in Product Listing attributes, while the PDP uses the Visible on Catalog Pages on Storefront attributes. This allows to reduce payload size on PLP. See more information about this in Incompatible changes section.

Bug fixes

• Fixed some non-translated text (by @bahramdavodi)
• #887 Product attribute on configurable product cannot be chosen if Used in Product Listing property is set to No
• #879 Canonical URLs are referring to old URL structure
• #872 Getting an error from the Magento store tests
• #870 Header ‘Account’ link not working
• #864 Url redirects breaks with URL-based stores
• #840 Configurable products can not have customizable options
• #834 The heading in mobile cart heading is not translatable
• #378 Reorganize the render functionality to be modulable (check the next section for more details)
• #898 Product attributes with ‘Used in Product Listing’ set to ‘Yes’ are not present on the PLP

Incompatible changes and important notes

Missing exports fix + ESLint rule

The missing exports of constants and classes were added to more than 200 files. The rule @scandipwa/scandipwa-guidelines/export-level-one is now responsible for the export insurance.

Max depth of JSX has been decreased to 2

The JSX max depth ESLint rule has been added to the code. It can help to increase extensibility of components. The current value is: react/jsx-max-depth": [2, { "max": 2 }]. This means, that inside a root JSX tag you can nest no more than 2 elements. In example:

// is considered an error
<div>
    <div>
        <div>
            <span>Hello</span>
        </div>
    </div>
</div>
// is alright!
<div>
    <div>
        <span>Hello</span>
    </div>
</div>

Due this, following “breaking” changes were made:

• the Breadcrumbs component was split into one more smaller one - the Breadcrumb itself
• routes: route/ConfirmAccountPage & route/PasswordChangePage received a container and little internal re-structure

Product attribute ‘Used in Product Listing’ support

Previously, there was an issue with too large PLP response due all attributes being returned. To resolve it, the support for attribute property used_in_product_listing has been added.

How it works? For all PLP requests it checks if the attribute has visibility on storefront and used in product listing enabled. Only attributes matching the check are returned.

How to migrate? Go to admin, for attributes you want to be visible on PLP, enable the used_in_product_listing property.

Note: the BE now checks request to know if it is a single-product or multiple-product request. In example asking for sku: { in: [...] } - means we are asking for multiple products, and the sku: { eq: '...' } - means we are on PDP. Thus, the PDP now asks for sku eq, and PLP for sku in range.

Router and App migration to new places

The application index code previously located in app/index.js was moved to app/component/App. Similar happened to the main router route/index.js - now it can be found in app/component/Router.

Field is no longer wrapped into redux

This means that the reference to the Field component in form changed. Previously it was: type: { WrappedComponent: { name } }, now it is type: { name }, props. Note this, if you rely on this logic. And, remove a connect from Field.container (if you have one).

Dependency check

NPM dependencies

There were no changes! 🥳

Composer dependencies

• scandipwa/persisted-query - upgraded from ^2.3.1 to ^2.4
• scandipwa/catalog-graphql - upgraded from ^2.14 to ^2.15.3
• scandipwa/route717 - upgraded from ^1.6 to ^1.7
• scandipwa/performance - upgraded from ^1.0 to ^1.1
• scandipwa/quote-graphql - upgraded from ^2.14 to ^2.14.1

Assets:

Source code(zip)

Source code(tar.gz)