Integrating With Product Samples App: Event Hooks & Advanced Settings

The Product Samples App fires custom JavaScript events at key stages, making it easy to integrate with your existing Shopify theme or other third-party apps. You can listen for these events to trigger custom behaviors such as updating a mini cart, displaying notifications, or running your own code.

Event Reference

Example: Listening to an Event

document.body.addEventListener("ready.productSamples", function (result) {
  var data = result.detail;
  console.log(data);
  console.log('Product Samples App is ready!');
});

Advanced Integration Options

You can further control and customize the app’s behavior using these advanced settings:

1. Re-initialize Sample Buttons (e.g., after Ajax page loads)

window.ProductSamplesApp.reInit();

2. Disable Page Reload After Adding to Cart

Enable Ajax mode and listen for successful cart adds:

ProductSample.type = 'ajax';
document.body.addEventListener("addedToCart.productSamples", function (result) {
  // Your code to trigger minicart or slideout here
});

3. Custom Product ID Field

If your product form uses a custom input field name for the product ID:

ProductSample.CustomIDFieldName = 'yourCustomFieldName';

4. Exclude Properties from Line Item Properties

To exclude certain product properties from being added to cart line item properties:

ProductSample.excluded_properties = ["Vendor", "SKU", "OtherProperty"];

5. Force Load Sample Button on Collection Pages

To show the sample button on collection or other custom pages, add this snippet to each product item:

{%- form 'product', product, novalidate: 'novalidate' -%}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  <div class="js-product-samples" data-sample="{{ product | json | url_encode }}"></div>
{%- endform -%}

Then enable:

ProductSample.loadSamplesButton = true;

6. Disable Redirect After Login

To prevent redirecting after login:

ProductSample.disableRedirectionAfterLogin = true;

Tip:
These hooks and options let you deeply customize the app’s integration and customer experience, whether you’re working on AJAX carts, custom notifications, or bespoke storefronts.