Buttons not loading within Lightbox?

  • I’m looking to incorporate button shortcodes into the lightboxes for the Media Grid plugin. In contacting their support, the issue seems to be on the WP Shopify side.

    Here’s the page I’m testing on: https://wingmakers.wpengine.com/test/

    The second image’s lightbox should have purchase buttons at the bottom of it. I’m using this shortcode:

    [wps_products product_id="5310868160667" pagination="false" excludes="title, description, images" add_to_cart_button_color="#6b41f7" add_to_cart_button_text="Purchase Digital Album"]

    Instead, it loads this code on the front-end:

    <div data-wpshopify-component="" data-wpshopify-component-type="products" data-wpshopify-payload-settings="eyJxdWVyeSI6ImlkOlwiNTMxMDg2ODE2MDY2N1wiIiwic29ydF9ieSI6IlRJVExFIiwicmV2ZXJzZSI6ZmFsc2UsInBhZ2Vfc2l6ZSI6MTAsImFkZF90b19jYXJ0X2J1dHRvbl9jb2xvciI6IiM2YjQxZjciLCJ2YXJpYW50X2J1dHRvbl9jb2xvciI6IiMwMDAwMDAiLCJ2YXJpYW50X3N0eWxlIjoiZHJvcGRvd24iLCJoaWRlX3F1YW50aXR5IjpmYWxzZSwiYWRkX3RvX2NhcnRfYnV0dG9uX3RleHQiOiJQdXJjaGFzZSBEaWdpdGFsIEFsYnVtIiwibWluX3F1YW50aXR5IjoxLCJtYXhfcXVhbnRpdHkiOmZhbHNlLCJzaG93X3F1YW50aXR5X2xhYmVsIjoiaGVsbG8iLCJxdWFudGl0eV9sYWJlbF90ZXh0IjoiUXVhbnRpdHkiLCJzaG93X3ByaWNlX3JhbmdlIjp0cnVlLCJzaG93X2NvbXBhcmVfYXQiOmZhbHNlLCJzaG93X2ZlYXR1cmVkX29ubHkiOmZhbHNlLCJzaG93X3pvb20iOmZhbHNlLCJwcm9kdWN0IjpmYWxzZSwicHJvZHVjdF9pZCI6NTMxMDg2ODE2MDY2NywicG9zdF9pZCI6ZmFsc2UsImF2YWlsYWJsZV9mb3Jfc2FsZSI6ImFueSIsImNyZWF0ZWRfYXQiOmZhbHNlLCJwcm9kdWN0X3R5cGUiOmZhbHNlLCJ0YWciOmZhbHNlLCJjb2xsZWN0aW9uIjpmYWxzZSwidGl0bGUiOmZhbHNlLCJ0aXRsZV9zaXplIjoiMjJweCIsInRpdGxlX2NvbG9yIjoiIzExMSIsImRlc2NyaXB0aW9uX2xlbmd0aCI6ZmFsc2UsImRlc2NyaXB0aW9uX3NpemUiOiIxNnB4IiwiZGVzY3JpcHRpb25fY29sb3IiOiIjMTExIiwidXBkYXRlZF9hdCI6ZmFsc2UsInZhcmlhbnRzX3ByaWNlIjpmYWxzZSwidmVuZG9yIjpmYWxzZSwicG9zdF9tZXRhIjpmYWxzZSwiY29ubmVjdGl2ZSI6IkFORCIsInJlbmRlcl9mcm9tX3NlcnZlciI6ZmFsc2UsImxpbWl0IjpmYWxzZSwicmFuZG9tIjpmYWxzZSwiZXhjbHVkZXMiOlsidGl0bGUiLCJkZXNjcmlwdGlvbiIsImltYWdlcyJdLCJpdGVtc19wZXJfcm93IjozLCJub19yZXN1bHRzX3RleHQiOiJObyBwcm9kdWN0cyBsZWZ0IHRvIHNob3ciLCJhbGlnbl9oZWlnaHQiOmZhbHNlLCJwYWdpbmF0aW9uIjpmYWxzZSwicGFnaW5hdGlvbl9wYWdlX3NpemUiOmZhbHNlLCJwYWdpbmF0aW9uX2xvYWRfbW9yZSI6dHJ1ZSwiZHJvcHpvbmVfcGFnaW5hdGlvbiI6ZmFsc2UsImRyb3B6b25lX3BhZ2Vfc2l6ZSI6ZmFsc2UsImRyb3B6b25lX2xvYWRfbW9yZSI6ZmFsc2UsImRyb3B6b25lX3Byb2R1Y3RfYnV5X2J1dHRvbiI6ZmFsc2UsImRyb3B6b25lX3Byb2R1Y3RfdGl0bGUiOmZhbHNlLCJkcm9wem9uZV9wcm9kdWN0X2Rlc2NyaXB0aW9uIjpmYWxzZSwiZHJvcHpvbmVfcHJvZHVjdF9wcmljaW5nIjpmYWxzZSwiZHJvcHpvbmVfcHJvZHVjdF9nYWxsZXJ5IjpmYWxzZSwic2tpcF9pbml0aWFsX3JlbmRlciI6ZmFsc2UsImRhdGFfdHlwZSI6InByb2R1Y3RzIiwiaW5maW5pdGVfc2Nyb2xsIjpmYWxzZSwiaW5maW5pdGVfc2Nyb2xsX29mZnNldCI6LTIwMCwiaXNfc2luZ3VsYXIiOmZhbHNlLCJoaWRlX3dyYXBwZXIiOmZhbHNlLCJsaW5rX3RvIjoibm9uZSIsImxpbmtfdGFyZ2V0IjoiX3NlbGYiLCJkaXJlY3RfY2hlY2tvdXQiOmZhbHNlfQ==">
    <div class="wpshopify-loading-placeholder"></div>
</div>

    The same shortcode works outside the lightbox, as it is loading beneath the images.

    The site is running WordPress 5.4.2 and WP Shopify 3.0.7.

    How might I go about troubleshooting this?

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

Viewing 1 replies (of 1 total)
  • Plugin Author andrewmrobbins

    (@andrewmrobbins)

    @resslx

    I’m guessing the main issue here is that the content of the lightbox is loaded dynamically with JavaScript, but the WP Shopify code that actually renders the shortcode only runs on initial page load.

    To make this work, you’ll need to call a JavaScript function that my plugin exposes to “render” the shortcode at the right time.

    I’m working on making this function over the next week or so.

Viewing 1 replies (of 1 total)
  • The topic ‘Buttons not loading within Lightbox?’ is closed to new replies.