Handling Response.backUrl Undefined in AddToCart #95
Conversation
| const swatchData = $('[data-role=swatch-options]').data('mage-SwatchRenderer'); | ||
| if (swatchData && swatchData.getProductId()) { | ||
| simpleProductId = swatchData.getProductId(); | ||
| // check product data from swatch widget |
| if (configurableProduct) { | ||
| simpleProductId = configurableProduct.simpleProduct; | ||
| } | ||
| // else check product data from configurable options |
| simpleProductId = productId; | ||
| } | ||
| const form_key = jQuery("[name='form_key']").val(); | ||
| const runAsync = !data.response.backUrl; |
There was a problem hiding this comment.
this will still result in an error if data.response.backUrl is undefined. add a check here, something like:
const runAsync = 'backUrl' in data.response ? !data.response.backUrl : true;
– returns true if data.response.backUrl is undefined or false
There was a problem hiding this comment.
This is redundant because undefined checks are meant to be used for falsy value checking. To your point I added cont runAsync = !(data && data.response && data.response.backUrl) to cover our bases but explicitly checking for undefined like you have here is not only redundant but misses a case: backUrl could be set to empty string for example and that is functionally the same as it not being set at all. Just checking it the way I have it written would handle both cases.
<img width="1119" alt="Screenshot 2024-12-09 at 5 07 39 PM"
src="/~https://github.com/user-attachments/assets/af0ce705-1fbe-4f2f-bdb9-b839c9700522">
| }, | ||
| type: 'get', | ||
| dataType: 'json', | ||
| async: runAsync, |
There was a problem hiding this comment.
using above defined const. looks bigger than it is because I fixed the alignment
Jmencab
changed the title
Jmencab
changed the title
| simpleProductId = productId; | ||
| } | ||
| const form_key = jQuery("[name='form_key']").val(); | ||
| const runAsync = !data.response.backUrl; |
There was a problem hiding this comment.
this will still result in an error if data.response.backUrl is undefined. add a check here, something like:
const runAsync = 'backUrl' in data.response ? !data.response.backUrl : true;
– returns true if data.response.backUrl is undefined or false
|
@magento run all tests |
|
Moved to /~https://github.com/magento-commerce/facebook-for-magento2/pull/844. Closing. |
Fixing bug on undefined backUrl parameter in the AddToCart pixel event.
Description (*)
Responding to issue 94 by taking the boolean definition out of the json and into the const. This replicates previous behavior but should default to true or false.
Previous behavior explanation:
In Magento, there is a configuration option called "Redirect to Cart After Add to Cart", which, when enabled, redirects users to the cart page after a product is added to the cart.
This functionality is implemented in script: /~https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js#L120
It checks for the backUrl in the response and, if present, redirects the user to the specified URL.
However, this behavior caused an issue with the addToCart event tracking. We use the ajax:addToCart event to trigger an ajax call that retrieves product information, which is then sent to Meta. Since AJAX calls are asynchronous by default, the user was being redirected to the cart page before the ajax call would complete.
To address this, I added the async property to the ajax call. When a backUrl is present in the response, the ajax call is made synchronous to ensure it completes fully before the redirection to the cart page occurs.
Story
Bug
94 <Cannot read properties of undefined (reading 'backUrl')>
Task
Fixed Issues (if relevant)
Manual testing scenarios (*)
There are two relevant variables: Redirect to Cart After Add to Cart (RedirectEnabled for short) and the backUrl value. Will test all 4 combinations of those two by toggling Redirect Enabled from local admin panel and then altering backUrl value from browser source file.
RedirectEnabled = true, backUrl="http://44.245.119.204/": redirected to the homepage as expected and pixel addToCart recorded:
RedirectEnabled = true, backUrl=undefined or empty string; Redirected to cart (expected) and pixel addToCart recorded.
RedirectEnabled = false, backUrl="http://44.245.119.204/": Stayed on PDP where I was. Makes sense, redirect is not enabled. AddToCart pixel event recorded.
RedirectEnabled = false, backUrl=undefined or empty string; Same as above.
Questions or comments
Why sync if there is a backUrl and async if not? I am replicating the existing behavior but it does not make intuitive sense to me.
Checklist