company logo

Help center

Go to EliteCart
Powered by
All collectionsIntegration with other appsIntegration: Globo Product Options

Integration: Globo Product Options

Keep Globo's required options enforced when the EliteCart drawer is active.

Globo Product Options lets you add custom options, swatches, text fields and paid add-ons to your products, and lets you mark any of those options as required. EliteCart works with Globo out of the box, with one exception: if you use required options, you need to add a single selector so EliteCart doesn't add the product before Globo has checked those options.

Why this matters

Globo doesn't use the browser's built-in form validation for required options. Instead, while a required option is still incomplete, it hides your theme's add-to-cart button and shows its own copy of it in its place. Clicking that copy is what triggers Globo's "please choose an option" message.

EliteCart intercepts add-to-cart clicks so it can add the product in the background and open the cart drawer, and by default that includes Globo's stand-in button. The result is that the product is added to the cart first, and Globo's warning only appears afterwards, so the required option looks like it isn't being enforced.

The setting below tells EliteCart to leave that one button alone. Globo can then block the add exactly as it's meant to.

Prerequisites

  • Globo Product Options installed, with at least one required option configured

  • EliteCart installed

Steps

1. Add the exclude selector in EliteCart

  1. In EliteCart, go to Cart designer -> (under "Other") Advanced.

  2. Scroll to the Theme integration - add to cart section.

  3. In Exclude add-to-cart selector, enter:

.gpo-clone-atc-button
  1. Click Save.

If the field already contains something, add the new value after a comma, for example .my-existing-selector, .gpo-clone-atc-button.

No code is needed, and nothing changes inside Globo.

2. Test it

  1. Open your store in a private/incognito window.

  2. Go to a product that has a required Globo option and don't fill it in.

  3. Click add to cart. Globo's warning should appear, the cart drawer should stay closed, and nothing should be added.

  4. Now fill in the required option and add to cart. The product should land in the cart with its options attached, and the EliteCart drawer should open as usual.

Good to know

  • The selector only matches Globo's stand-in button, which exists only while a required option is incomplete. As soon as the option is filled in, Globo puts your theme's real button back and EliteCart takes over again, so you keep the instant drawer opening and loading skeletons.

  • Chosen options are carried into the cart as line item properties either way, so nothing is lost from the order.

  • The setting is safe to leave on. Products without Globo options are unaffected.

  • If your Globo add-on products are meant to appear as their own separate cart lines and they don't, also turn on "Pass through the full product form (for bundle / product-option apps)" in the same Advanced tab. See the Ymq article below for that setting.

Links

  • Globo Product Options on the Shopify App Store

  • Integration with Custom Product Options Apps

  • Integration: Ymq Product Options

Did this answer your question?
😞
😐
😁