catalogAddToCart moved to data-mage-init and product_sku option removed #35349

serhii-chernenko · 2022-04-21T17:49:18Z

Description (*)

I've implemented products infinite scroll for a project and I got a bug that catalogAddToCart widget doesn't work for new loaded items after repeating scripts applying.

It happens because I tried to load only items from a grid which exists only in a loop but the script tag that has to call catalogAddToCart inserted after the grid:

It can be fixed by manual widget calling after parsing html, as:

But before doing that I didn't understand why the option product_sku added to the widget when this initialization is outside of loop:

I've investigated how it works, and I got that the option doesn't necessary, because the product SKU passed to widget from the form data attribute:

And I've additionally investigated that elements with the selector .form.map.checkout don't exist on PLP:

So, we can remove it from the template.

And better solution is to move the script initialization to the loop to fix the issue when the product will be loaded after AJAX, all scripts inside the loop can be initialized by triggering the event contentUpdated without separated calling of catalogAddToCart widget:

Related Pull Requests

When the script have been added:
617d107

When the property product_sku was added:
3494fbb

Manual testing scenarios (*)

Create a custom theme like Vendor/theme
Create the handle with the content:

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_category_view.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block template="Magento_Catalog::load-more.phtml" after="category.products"/>
        </referenceContainer>
    </body>
</page>

Create the template with the content to call a script:

app/design/frontend/Vendor/theme/Magento_Catalog/templates/load-more.phtml

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Catalog/js/load-more": {}
        }
    }
</script>

Create the widget if IAS:

app/design/frontend/Vendor/theme/Magento_Catalog/web/js/load-more.js

define(['jquery', 'mage/storage', 'mage/translate', 'jquery-ui-modules/widget'], ($, storage, $t) => {
    'use strict';

    $.widget('custom.loadMore', {
        _init() {
            this.appendLoadMoreButton();
        },

        appendLoadMoreButton() {
            $('.products.wrapper .product-items').after(
                $('<button/>', {
                    text: $t('Load more'),
                    click: this.getProducts.bind(this)
                })
            );
        },

        getProducts() {
            storage.get(`${window.location.pathname}/?p=2`).done(this.appendItems.bind(this));
        },

        appendItems(response) {
            const listSelector = '.products.wrapper .product-items';
            const list = $(listSelector);
            const items = $(response).find(`${listSelector} .product-item`);

            if (!items.length) return this;

            list.append(items);
            list.trigger('contentUpdated');
        }
    });

    return $.custom.loadMore;
});

Go to the page domain.tld/women/tops-women.html
And press the button "Load More":

7. AJAX Add to Cart widget has to work for all uploaded items.

Contribution checklist (*)

Pull request has a meaningful description of its purpose
All commits are accompanied by meaningful commit messages
All new or changed code is covered with unit/integration tests (if applicable)
README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
All automated tests passed successfully (all builds are green)

Resolved issues:

resolves [Issue] catalogAddToCart moved to data-mage-init and product_sku option removed #35480: catalogAddToCart moved to data-mage-init and product_sku option removed

m2-assistant · 2022-04-21T17:49:21Z

Hi @iNeViX. Thank you for your contribution
Here are some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

@magento give me test instance - deploy test instance based on PR changes
@magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

@magento run all tests - run or re-run all required tests against the PR changes
@magento run <test-build(s)> - run or re-run specific test build(s)
For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names. Allowed build names are:

Database Compare
Functional Tests CE
Functional Tests EE,
Functional Tests B2B
Integration Tests
Magento Health Index
Sample Data Tests CE
Sample Data Tests EE
Sample Data Tests B2B
Static Tests
Unit Tests
WebAPI Tests
Semantic Version Checker

You can find more information about the builds here

ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

For more details, review the Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

serhii-chernenko · 2022-04-22T07:07:08Z

@magento run all tests

magento-automated-testing · 2022-04-22T07:07:12Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

engcom-Alfa · 2022-05-10T12:11:54Z

@magento run Functional Tests CE, Functional Tests CE, Integration Tests

magento-automated-testing · 2022-05-10T12:12:02Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

engcom-Alfa · 2022-05-10T13:03:45Z

HI @iNeViX and @nuzil Thanks for your contribution and collaboration.

Tried reproducing the issue in 2.4-develop version before testing the given PR fix code referring PR description/ comments.
Issue is not reproducible and below is the information on this:
Used Php 7.4 version

Reproducible steps

Created a custom theme like Vendor/theme (Below screenshot has displayed 2 themes; Both the themes are working fine, cross checked in front end UI- catalog page/ product details page)

Here, freego and freego_child are 2 new custom themes. Here, Solwin is our newly created name of the vendor (we chose as an example.)

Created the handle with the content as shown in the above description: We opened the app/design/frontend/Solwin/freego/Magento_Catalog/layout/ folder, and created a new file catalog_category_view.xml and placed the below content into the file. Below is the file code screenshot.

Created the template with the content to call a script: Opened the folder path app/design/frontend/Solwin/freego/Magento_Catalog/templates/ and. created a new file load-more.phtml. Added the code as given in the description. Screenshot on the same is below.

Created the widget: Module was already created and added the file app/code/Solwin/Core/view/frontend/requirejs-config.js. Below screenshot has the code tree structure and file content.

Also created the file app/code/Solwin/Core/view/frontend/web/js/load-more.js

load-more.js file has the code update that is given in the above description only!

We had already applied the new freego theme to the women>tops-women category from admin; Navigated to the front end category page and checked for Load More button.

Not able to see the button at all in the front end, and just visible as shown in the below screenshot.

Can you please help us to know how can we reproduce in 2.4-develop branch first. So that later, we can check the fixes of this PR as well.
@iNeViX @nuzil
Thanks in advance!

serhii-chernenko · 2022-05-10T13:09:15Z

hey @engcom-Alfa!
load-more.js is NOT a mixin for the widget catalogAddToCart. This script has to be loaded via x-magento-init in PHTML template on step 3.
Remove requirejs-config.js file on step 4

engcom-Alfa · 2022-05-12T07:30:30Z

@magento run Functional Tests EE, Integration Tests

serhii-chernenko · 2022-05-14T19:38:09Z

@engcom-Lima I record a short video to show the steps of testing:
https://user-images.githubusercontent.com/28815318/168445808-80e14182-c00a-47a2-a106-75584b12f781.mp4

As I see, the general issue is the load-more.js file. My bad, I forgot to specify a path of that file.
You created the file in the Solwin_Core module, but you call the file from the Magento_Catalog module in the load-more.phtml.

So, you have 2 ways to fix the issue:

Change the content of the load-more.phtml file to:

<script type="text/x-magento-init">
    {
        "*": {
            "Solwin_Core/js/load-more": {}
        }
    }
</script>

Or create the load-more.js file in the Magento_Catalog module instead of Solwin_Core in your custom theme:

app/design/frontend/Solwin/freego/Magento_Catalog/web/js/load-more.js

PS: I've updated the PR's description for 2d way.

engcom-Lima · 2022-05-16T06:22:59Z

@magento run Functional Tests EE, Integration Tests

magento-automated-testing · 2022-05-16T06:23:07Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

engcom-Lima · 2022-05-16T10:06:39Z

@magento create issue

engcom-Lima · 2022-05-16T11:20:17Z

@magento give me test instance

magento-deployment-service · 2022-05-16T11:20:20Z

Hi @engcom-Lima. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service · 2022-05-16T11:24:29Z

Hi @engcom-Lima, here is your Magento Instance: https://9a3057a05725c1eda8741b14ae0731d5.instances.magento-community.engineering
Admin access: https://9a3057a05725c1eda8741b14ae0731d5.instances.magento-community.engineering/admin_7b9f
Login: e9560401
Password: efdfb298c2dc

engcom-Lima · 2022-05-16T14:46:24Z

Hi @Ineix, @nuzil Thanks for detailed reply with recorded video.

As per your video, issue is there in the frontend catalog grid view where the add to cart button is disabled once after clicking on Load More.As we tried to reproduce (PHP 7.4.29 and Magento version: 2.4-develop) the add to cart button is enabled in the grid view.Further investigated and found that add to cart button is completely unavailable in the front-end catalog "list" view.

I have applied this PR file changes, the unavailability of add to cart button in the list view issue is still existing. Kindly assist me whether I am doing correct file configuration or not.
Please find video link for your reference : click here

Can you please retest PR file changes in Magento 2.4-develop version and let us know if issue is still existing.

serhii-chernenko · 2022-05-16T16:16:49Z

@engcom-Lima I've investigated and I don't have this issue. I recorded new video, please follow the link.

As I see on your record, you have a lot of non-default modifications which don't exist in the Magento Blank theme. Are you sure that you don't have rewrites of list.phtml files? Or maybe this button is hidden by the non-default styles...

Try to:

Use the Magento Blank theme as a parent theme:

2. Disable all non-default modules.
3. Remove other directories with templates and styles.

Other way:
Check that the right PHTML template was loaded in your record, just enable hints

bin/magento dev:template-hints:enable && bin/magento cache:clean

engcom-Lima · 2022-05-18T10:48:29Z

✔️ QA Passed

Preconditions:

Install the fresh Magento 2.4-develop instance with sample data.

Manual testing scenario:

Create catalog_category_view.xml : app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_category_view.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block template="Magento_Catalog::load-more.phtml" after="category.products"/>
</referenceContainer>
</body>
</page>

Create the template with the content to call a script :
app/design/frontend/Vendor/theme/Magento_Catalog/templates/load-more.phtml

`<script type="text/x-magento-init">
{
"*": {
"Magento_Catalog/js/load-more": {}
}
}
</script>`

Create the widget:
app/design/frontend/Vendor/theme/Magento_Catalog/web/js/load-more.js

`define(['jquery', 'mage/storage', 'mage/translate', 'jquery-ui-modules/widget'], ($, storage, $t) => {
'use strict';

$.widget('custom.loadMore', {
_init() {
this.appendLoadMoreButton();
},

appendLoadMoreButton() {
$('.products.wrapper .product-items').after(
$('<button/>', {
text: $t('Load more'),
click: this.getProducts.bind(this)
})
);
},

getProducts() {
storage.get(`${window.location.pathname}/?p=2`).done(this.appendItems.bind(this));
},

appendItems(response) {
const listSelector = '.products.wrapper .product-items';
const list = $(listSelector);
const items = $(response).find(`${listSelector} .product-item`);

if (!items.length) return this;

list.append(items);
list.trigger('contentUpdated');
}
});

return $.custom.loadMore;
});`

Go to frontend.
Hover over category ex- women ,then click on sub category ex-Tops,product page should be open.
Scroll down upto Load More button should be visible.
Click on Load More button, more product should be open.
Click on Add to cart button and check whether button is clickable or not.
Repeat from step 2 to check in List view.

Before: ✖️ Add to cart button was not visible.

After: ✔️ Add to cart button is visible after doing PR changes.

Navigated to other pages and validated Add to cart button is visible or not.
Clicked on Add to Cart and validated whether product is getting added to cart.

catalogAddToCart moved to data-mage-init and product_sku option removed

def043e

m2-community-project bot added the Progress: pending review label Apr 21, 2022

engcom-Hotel added the Priority: P2 A defect with this priority could have functionality issues which are not to expectations. label Apr 26, 2022

nuzil approved these changes Apr 27, 2022

View reviewed changes

m2-community-project bot assigned nuzil Apr 27, 2022

m2-community-project bot added Progress: ready for testing and removed Progress: pending review labels Apr 27, 2022

nuzil added Auto-Tests: Not Covered Changes in Pull Request requires coverage by auto-tests Progress: pending review and removed Progress: ready for testing labels Apr 27, 2022

m2-community-project bot added Progress: ready for testing and removed Progress: pending review labels Apr 27, 2022

nuzil added Auto-Tests: Not Required Changes in Pull Request does not require coverage by auto-tests Progress: pending review and removed Progress: ready for testing Auto-Tests: Not Covered Changes in Pull Request requires coverage by auto-tests labels Apr 27, 2022

m2-community-project bot added Progress: ready for testing and removed Progress: pending review labels Apr 27, 2022

engcom-Alfa self-assigned this May 9, 2022

m2-community-project bot added Progress: testing in progress and removed Progress: ready for testing labels May 9, 2022

m2-community-project bot added Progress: testing in progress and removed Progress: ready for testing labels May 13, 2022

m2-community-project bot added Progress: ready for testing and removed Progress: testing in progress labels May 14, 2022

m2-community-project bot added Progress: testing in progress and removed Progress: ready for testing labels May 16, 2022

m2-assistant bot mentioned this pull request May 16, 2022

[Issue] catalogAddToCart moved to data-mage-init and product_sku option removed #35480

Closed

5 tasks

m2-community-project bot added Progress: ready for testing Progress: testing in progress and removed Progress: testing in progress Progress: ready for testing labels May 16, 2022

m2-community-project bot added Progress: accept and removed Progress: testing in progress labels May 18, 2022

engcom-Lima added the QA: Ready to add to Regression Scope Should be analyzed and added to Regression Testing Scope(if applicable) label May 18, 2022

m2-community-project bot added Progress: ready for testing and removed Progress: accept labels May 18, 2022

engcom-Lima removed the QA: Ready to add to Regression Scope Should be analyzed and added to Regression Testing Scope(if applicable) label May 18, 2022

m2-community-project bot added Progress: accept and removed Progress: ready for testing labels May 18, 2022

magento-devops-reposync-svc merged commit 43cdcf7 into magento:2.4-develop Jun 11, 2022

catalogAddToCart moved to data-mage-init and product_sku option removed #35349

catalogAddToCart moved to data-mage-init and product_sku option removed #35349

Uh oh!

Conversation

serhii-chernenko commented Apr 21, 2022 • edited by m2-assistant bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description (*)

Related Pull Requests

Manual testing scenarios (*)

Contribution checklist (*)

Resolved issues:

Uh oh!

m2-assistant bot commented Apr 21, 2022

Uh oh!

serhii-chernenko commented Apr 22, 2022

Uh oh!

magento-automated-testing bot commented Apr 22, 2022

Uh oh!

engcom-Alfa commented May 10, 2022

Uh oh!

magento-automated-testing bot commented May 10, 2022

Uh oh!

engcom-Alfa commented May 10, 2022

Uh oh!

serhii-chernenko commented May 10, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

engcom-Alfa commented May 12, 2022

Uh oh!

serhii-chernenko commented May 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

engcom-Lima commented May 16, 2022

Uh oh!

magento-automated-testing bot commented May 16, 2022

Uh oh!

engcom-Lima commented May 16, 2022

Uh oh!

engcom-Lima commented May 16, 2022

Uh oh!

magento-deployment-service bot commented May 16, 2022

Uh oh!

magento-deployment-service bot commented May 16, 2022

Uh oh!

engcom-Lima commented May 16, 2022

Uh oh!

serhii-chernenko commented May 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

engcom-Lima commented May 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

serhii-chernenko commented Apr 21, 2022 •

edited by m2-assistant bot

Loading

serhii-chernenko commented May 10, 2022 •

edited

Loading

serhii-chernenko commented May 14, 2022 •

edited

Loading

serhii-chernenko commented May 16, 2022 •

edited

Loading

engcom-Lima commented May 18, 2022 •

edited

Loading