MINIMOG theme
Try Minimog freeResourcesOther solutions
  • What is Minimog theme?
  • Changelog
  • Refund policy
  • Support policy
  • Terms of Service
  • Getting started
    • Install Minimog theme
      • Install Minimog in 1-click fast way
      • Install Minimog manually
    • Add Custom code/ CSS correctly
    • Integrate Shopify Review apps
    • Mega menu
    • Theme license
      • Activate license
      • Extend/ Renew Theme Support
      • Transfer license
    • Update Minimog theme
    • FoxHome
  • Build for success series
    • Home page for Fashion stores like SKIMS 🔥
  • Page's global sections
    • Announcement bar
    • Age verifier pop-up
    • Header
    • Footer
    • Mobile sticky bar
    • Scaling logo
  • Theme sections
    • Before/ After image slider
    • Blog posts
    • Brand list
    • Cascading collection
    • Cascading product
    • Collapsible tabs
    • Collection image showcase
    • Collection showcase
    • Collage tab
    • Collection list
    • Collection tab
    • Countdown timer
    • Custom content
    • Favorite product slider
    • Featured collection
    • Featured product
    • Featured promotion
    • Featured products slider
    • Gallery images 🔥
    • Google Maps
    • Hotspot image
    • Instagram
    • Image with slider
    • Image cards
    • Image with text overlay
    • Image with text
    • Lookbook
    • Multiple image with text 🔥
    • Newsletter
    • Press
    • Product bundles
    • Product tabs
    • Product list banner
    • Promotion banner
    • Promotion countdown timer 🔥
    • Recently viewed products
    • Rich text
    • Scrolling promotion
    • Slideshow
    • Testimonials
    • Video
    • Video hero
  • Theme settings
    • General settings
    • Layout settings
    • Additional pages
    • Advanced
    • Animations
    • Article card
    • Badges
    • Cart settings
    • Checkout
    • Colors & Color schemes
    • Currency format
    • Drawer & pop-up
    • GDPR settings
    • Intergrated apps
    • Integration
    • Product card
    • Product inventory
    • Product options design
    • Product options swatches
    • Social sharing
    • Search
    • Section
    • Store contact
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumb
      • Product information
      • Product information tabs
      • Product recommedations
      • Product description
      • Quick order list 🔥
    • Collection page
      • Collection template
      • Collection banner
      • Product listing
  • Other pages
    • 404 page
    • Blogs
    • Blog posts
    • Cart & Checkout
    • Password
    • Customize password page
  • FAQS
    • Generic
      • Combined listings app🔥
      • Add a Cookie Banner
      • Add a gift wrap option to my cart
      • Add/ Remove Social icons on footer
      • Customize search results
      • Hide sections on mobile/ desktop view
      • JavaScript events for developers
      • Set up an Age Verifier Pop-up
      • Show Payment icons on the Footer
      • Sticky header when scrolling
    • Collection page
      • Add custom badges to my product card
      • Change the default product order in collection
      • Move the collection description to under the product listing
      • Set up Filters for the collection pages
    • Product page
      • Add recipient fields to my gift card product
      • Remove the tax-included information in product page
      • Set up Local Pickup option
      • Set up quantity rules and volume pricing 🔥
    • Shopify functions
      • Does Minimog support Section groups?
      • Migrate data in the Section groups supported version
    • Foxify freebie code - All you need to know
  • TROUBLESHOOTING
    • Can't upload my Minimog theme to Shopify
    • Contact form submissions not found
    • Currency format display
    • FoxKit features are duplicated
    • FoxKit stops working
    • Missing images when installing demos
    • Translation missing issue
    • Translation apps incompatibility
    • Why is my activated Show Account Icon option not showing?
    • I can't install FoxKit on March 2023
Powered by GitBook
On this page
  • 1. Page loaded
  • 2. Product successfully added to the Ajax cart
  • 3. Product could not be added to the Ajax cart
  • 4. Cart updated
  • 5. Quick view modal has been loaded
  • 6. Variant selection changed
  • 7. Collection page is refreshed
  • 8. Trigger cart drawer to refresh
  1. FAQS
  2. Generic

JavaScript events for developers

Learn to use custom Javascript event listeners and triggers in Minimog theme

PreviousHide sections on mobile/ desktop viewNextSet up an Age Verifier Pop-up

Last updated 2 months ago

Minimog theme uses JavaScript to enhance loading times and ensure that features work fast.

If you want to connect with events after they occur to integrate custom scripts or link with third-party apps, we offer some post-event options.

All objects returned are vanilla JS objects and can be edited however you see fit.

1. Page loaded

The event is triggered when the HTML document has been fully parsed, and all deferred scripts have finished downloading and running.

document.addEventListener('page:loaded', function() {
  // Page has loaded and theme assets are ready
})

2. Product successfully added to the Ajax cart

.

document.addEventListener('product-ajax:added', function(evt) {
  console.log(evt.detail.product);
});

3. Product could not be added to the Ajax cart

The error message will let you know the problem. Most of the time it is quantity related.

document.addEventListener('product-ajax:error', function(evt) {
  console.log(evt.detail.errorMessage);
});

4. Cart updated

JavaScript updates the cart object once the quantity is modified. This event is triggered after the cart markup has been updated and is open to customization.

document.addEventListener('cart:updated', function(evt) {
    console.log(evt.detail.cart);
});

5. Quick view modal has been loaded

Only fires the first time the modal is opened.

document.addEventListener('quick-view:loaded', function(evt) {
  console.log(evt.detail.productUrl);
});

6. Variant selection changed

document.addEventListener('variant:changed', function(evt) {
    console.log(evt.detail.variant);
});

7. Collection page is refreshed

Fired when the collection page is re-rendered after filters are updated.

document.addEventListener('collection:rerendered', function() {
    console.log('collection refreshed');
});

8. Trigger cart drawer to refresh

Set the open parameter to false if you don't want the cart drawer to be open after the update.

document.dispatchEvent(new CustomEvent('cart:refresh', {
  bubbles: true, detail: { open: true }
}));

.

.

Product object returned
Cart object returned
Variant object returned
Try Foxify free now