0

When we click on any category or subcategory link , it open two urls :

first, it will load below url

https://www.website.com/earrings/earlobes

Next, it will load below url :

https://www.website.com/earrings/earlobes?page=1 as we have pagination.

because of this, facebook pixels are triggering two times as we are loading the page url two times when we click on any category/subcategory link.

Requirement :

Is there any way, we can load only one url [ url which contain page ] when we click on Menu links ?

We have PWA setup [ where frontend is reactjs, but i believe those urls are fetching from backend only ]

Menu code :

let items = megaMenuData.children
        ? megaMenuData.children.map(category => {
            return (
                <MegaMenuItem
                    category={category}
                    activeCategoryId={activeCategoryId}
                    categoryUrlSuffix={categoryUrlSuffix}
                    mainNavWidth={mainNavWidth}
                    onNavigate={handleNavigate}
                    key={category.uid}
                    subMenuState={subMenuState}                    
                />
            );
        })
        : null;

Here is full code : https://pastebin.com/Mpdd222m

jest.mock('react-router-dom', () => ({
    Link: children => `<Link>${children.children}</Link>`
}));
jest.mock(
    '@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems',
    () => {
        return {
            useAccountMenuItems: jest.fn()
        };
    }
);

Here is full code : https://pastebin.com/BtMRbHdZ

const currentCategoryLink = currentProduct ? (
        <Link
            to={resourceUrl(currentCategoryPath)}
            onClick={handleClick}
        >
            {currentCategory}
        </Link>
    ) : (
        <span className={'text-[#3D4A51] font-semibold'}>{currentCategory}</span>
    );

Here is full code : https://pastebin.com/CAZ8Rn1r

1 Answer 1

1
+50

It sounds like you're experiencing duplicate page loads when clicking on category or subcategory links in your Magento PWA (Progressive Web Application). To address this issue and ensure that only one URL is loaded when clicking on menu links, you can consider implementing a solution at the frontend level using React Router (assuming you're using React for your PWA frontend).

Here's how you can approach this:

1. Identify the Cause: Determine why the page is loading twice. It could be due to how your routing is configured or how links are handled in your React components.

2. Check React Router Configuration: Make sure your React Router configuration is correctly set up to handle routing within your PWA. Ensure that there are no duplicate routes or unexpected redirects.

3. Update Link Handling: Review how links are handled in your React components. Ensure that clicking on a category or subcategory link does not result in unnecessary page reloads or redirects.

4. Prevent Default Behavior: If necessary, you can prevent the default behavior of anchor tags (<a>) in React components to avoid page reloads when clicking on links.

5. Use React Router's Link Component: Instead of using regular anchor tags for navigation, consider using React Router's Link component. This component prevents full page reloads and provides smoother navigation within your PWA.

import { Link } from 'react-router-dom';

const CategoryLink = ({ to, children }) => (
  <Link to={to}>{children}</Link>
);

// Usage
<CategoryLink to="/earrings/earlobes">Earrings</CategoryLink>

6. Debugging: Use browser developer tools to debug and trace the source of the duplicate page loads. Check the network tab to see if there are any unexpected requests being made.

7. Cache-Control Headers: Ensure that your backend is sending appropriate cache-control headers to instruct the browser to cache responses for category and subcategory pages. This can help reduce unnecessary page loads.

By implementing these steps, you can ensure that only one URL is loaded when clicking on menu links in your Magento PWA frontend, thereby preventing duplicate page loads and issues with Facebook Pixel triggers.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.