Mini cart buttons not rendering – but HTML code is there

  • Resolved devonto

    (@devonto)


    3 years, 9 months ago

    Hello,

    I’m trying to show the various payment buttons in the minicart, however the javascript doesn’t seem to be triggering.

    The HTML hook is being output, but it seems it is not being picked up by the JS to turn it into the relevant button.

    https://pasteboard.co/K6pp1Ov.png

    The theme in use is Porto – with a demo to inspect its mini cart code here: https://www.portotheme.com/wordpress/porto/shop2/

    (Unfortunately, the development is local, so no “live” site to link to.)

    Are there any specific classes/IDs the code is looking for that may be getting overridden by this theme?

    Thanks!

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

    (@mrclayton)

    Hi @devonto,

    The Stripe plugin looks for the class="widget_shopping_cart_content" element which should have the container that the payment buttons are appended to.

    I can see in the theme demo that the element widget_shopping_cart_content does exist. I am wondering if the wc_fragments_refreshed and wc_fragments_loaded events are triggering before the Stripe plugin’s Javascript file is loaded.

    When you inspect the child elements of widget_shopping_cart_content do you see an element with class wc_stripe_mini_cart_payment_methods?

    Kind Regards,

    Thread Starter devonto

    (@devonto)

    Hello, yes, there is a hidden input with class wc_stripe_mini_cart_payment_methods.
    Full content of the buttons section is as follows:

    <p class="woocommerce-mini-cart__buttons buttons"><input type="hidden" class="wc_stripe_mini_cart_payment_methods">
	<input type="hidden" class="woocommerce_stripe_applepay_gateway_data cart-page" data-gateway="{"items":[{"label":"Product","pending":false,"amount":1425},{"label":"Shipping","pending":false,"amount":400}],"shipping_options":[],"total":"18.25","total_cents":1825,"currency":"GBP","needs_shipping":true}"><a class="wc-stripe-applepay-mini-cart button" style="display: none"></a>	<input type="hidden" class="woocommerce_stripe_googlepay_gateway_data cart-page" data-gateway="{"items":[{"label":"Product","type":"LINE_ITEM","price":"14.25"},{"label":"Shipping","type":"LINE_ITEM","price":"4"}],"shipping_options":[{"id":"default","label":"Waiting...","description":"loading shipping methods..."}],"total":"18.25","total_cents":1825,"currency":"GBP","needs_shipping":true}"><a class="wc-stripe-gpay-mini-cart button" style=""></a>

<a href="https://www.website.co.uk/basket/" class="button wc-forward">View basket</a><a href="https://www.website.co.uk/checkout/" class="button checkout wc-forward">Checkout</a></p>
    • This reply was modified 3 years, 9 months ago by devonto.
    Plugin Author Payment Plugins

    (@mrclayton)

    Hi @devonto

    Have you customized the stripe mini cart template at all? That should be a div not a hidden input element.

    That’s why the buttons aren’t showing.

    Thread Starter devonto

    (@devonto)

    No, nothing overridden from your plugin – everything as standard.

    The theme’s mini-cart.php file is here, if this is of any interest?: https://pastebin.com/sBuvcAPz

    Plugin Author Payment Plugins

    (@mrclayton)

    @devonto my bad, I forgot that hidden input is used and shouldn’t be a div. That all looks correct.

    Contact me via the Help button in the plugin settings. This may be a timing issue where the wc_fragments_loaded event is triggering before the mini-cart script loads.

    Kind Regards,

    Thread Starter devonto

    (@devonto)

    Thank you, request now sent.

    Plugin Author Payment Plugins

    (@mrclayton)

    Issue resolved. In next version, an update to how GPay in the mini-cart is rendered will be added.

    Thread Starter devonto

    (@devonto)

    I can confirm the fix and thank you for your swift support!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Mini cart buttons not rendering – but HTML code is there’ is closed to new replies.