Plugin causes constant layout shift

  • When the Payments Plugin is activated, it is causing a constant layout shift on our site when employing Theme Complete extra product options. I know this because I deactivated all but essential plugins and then turned them on one by one to see which plugin was causing the issue, and the issue appeared again as soon as I switched on your payments plugin.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Payment Plugins

    (@mrclayton)

    Hi @grahamsg

    Is this only occurring on the product page?

    1. Provide a screenshot of the correct layout
    2. Provide a screenshot of the incorrect layout

    The PayPal plugin just renders some simple HTML on the product page so the payment buttons can be rendered. There isn’t anything there that targets the page layout.

    Kind Regards

    Thread Starter grahamsg

    (@grahamsg)

    Thanks for the reply.

    What is happening is that the layout is jumping up and down by about 10-20 pixels. The layout is correct so I have nothing to send you as you have requested, but once a customer adds product options, the whole page jumps up and down by 20 pixels.

    Can I suggest that you to the page that I linked in my previous message. Choose any frame colour from the options and then select a different frame colour and you will see the whole section including the product image jumping up and down.

    Doing a little more research on this just now, I noticed that the jumping seems to coincide with the Google Pay button reloading after the frame (or any subsequent extra product option) has been selected. I deactivated payment request gateway in the settings temporarily, and reloaded the product page. This time around, the page did not jump up and down when a frame was selected, so it seems that it is the html for the Payment Request Gateway which is causing this layout shift.

    Kindly check and let us have your feedback on this?

    Plugin Author Payment Plugins

    (@mrclayton)

    Hi @grahamsg

    When a product add-on is selected, the plugin must re-calculate the cart totals so that when the GPay button is clicked, the most up to date selections are included in the GPay wallet.

    During this calculation, the button is cleared and then re-rendered. That clearing causes a temporary shift in the container height since the button is removed. It’s usually undetectable but on your product page it’s more pronounced because of how your HTML is written.

    Kind Regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Plugin causes constant layout shift’ is closed to new replies.