Bolder — Components Reference

Bootic.load('AcceptTerms', {
  termsUrl: '/pages/terminos',
  container: '.bootic_cart'
})

Bootic.load('AddToCartButton', {
  formSelector: '.add_to_cart'
})

Bootic.load('AddToCartLoader', {
  container: '.products'
})

Bootic.require('AnimateNumber', function(err, anim) {
  anim.to(el, 42)
})

Bootic.load('CartQuote', {
  formUrl: '/orders/quote',
  triggerSelector: '.request-quote'
})

Bootic.load('CartRules', { requirements: [...] })

Bootic.load('CartTracking', {
})

Bootic.load('DynamicCartButtons', {
  formSelector: '.add_to_cart'
})

Bootic.load('DynamicCartTable', {
  containerId: 'dynamic-cart-table'
})

Bootic.load('DynamicPrices', {
  productContainer: '.product'
})

Bootic.load('DynamicQuantityButtons', {
})

Bootic.load('Favorites', {
  mainContainer: '.products',
  requireLogin: false
})

Bootic.load('ImageGallery', {
  selector: '.product-images',
  autoplay: true
})

Bootic.load('ImageZoom', {
  imageElement: document.getElementById('main-img'),
  bigImage: '{{ product.image | resize: "1000x" }}'
})

Bootic.load('NotifyRestocked', {
  linkSelector: '.notify-btn',
  includeVariants: true
})

Bootic.load('ProductComparisonPicker', {
  mainContainer: '.products',
  maxComparable: 3
})

Bootic.load('ProductFilters', {
  formSelector: '#product-filters',
  resultsContainer: '#search-results'
})

<div class="product-images">
  <!-- main-image's href will be the image used for zooming -->
  <!-- nested img's src is the "small" one that is shown without zoom -->
  {% for image in product.images limit:1 %}
  <a class="main-image" href="{{ image | resize: '1000x' }}">
    <img src="{{ image | resize: '690x' }}" alt="{{ product.model }}" />
  </a>
  {% endfor %}
  {% if product.image_count > 1 %}
  <ul class="image-thumbs">
    {% for image in product.images %}
    <li>
      <a class="product-image{% for v in image.variants %} image-for-variant-{{ v.id }}{% endfor %}" title="{{ product.model }}"
         href="{{ image | resize: '1000x' }}" data-show-img="{{ image | resize: '690x' }}">
        <img src="{{ image.thumbnail }}" alt="{{ product.model }}" />
      </a>
    </li>
    {% endfor %}
  </ul>
  {% endif %}
</div>
Bootic.load('ProductImages', {
  mainContainer: '.product-images',
  bigImageContainer: '.main-image',
  thumbSelector: '.product-image',
  enableZoom: true
})
 // and optionally, we can load the VariantImages module
 // we need to make sure the thumbSelector in both modules
 // match, and that those nodes contain the 'image-for-variant-xxx' class
 Bootic.load('VariantImages', {
   imageSelector: '.product-image' // should match the one above
 })

Bootic.load('ProductModal', {
  selector: '.product-link',
  container: '.products'
})

Bootic.load('ProductPromotions', {
  container: document.querySelector('.product')
})

Bootic.load('ProductsListModal', {
  selector: '.view-bundle-products',
  matchMethod: 'volume_discount'
})

Bootic.load('VariantImages', {
  container: '.product',
  imageSelector: '.product-image'
})

Bootic.load('AddressAutocomplete', {
  input: document.querySelector('#address'),
  country: 'CL'
})

Bootic.load('AddressFields', {
  regionSelect: document.querySelector('#region'),
  localitySelect: document.querySelector('#locality')
})

Bootic.load('AuthDelivery', {})

Bootic.load('ChooseBranchModal', {
  triggerSelector: '.choose-branch'
})

Bootic.load('DeliverySetup', {
  showAutomatically: true
})

Bootic.load('RutFormatter', { inputSelector: 'input.rut-field' })

Bootic.load('ShippingCosts', {
  triggerSelector: '.shipping-costs-link'
})

<a href="/beta/toggle" data-toggle-beta>Toggle Beta</a>

Bootic.load('Bounce', {
  callback: function() { Bootic.load('WelcomeModal', { always_show: true }) },
  delay: 3000,
  cookieDays: 3
})

Bootic.load('CountdownTimer', {
  selector: '.countdown',
  container: '#content'
})

Bootic.load('LinkPreview', {
  container: '.products',
  selector: '.product-link'
})

Bootic.load('LottieAnimations', {
  selector: '.lottie'
})

Bootic.load('PageModal', {
  linkSelector: '[data-page-modal]'
})

Bootic.load('PromoNotice', {})

Bootic.load('PromoToasts', {})

Bootic.load('RangeSlider', {
  inputSelector: 'input[type=range]'
})

Bootic.load('SectionMenus', {})

Bootic.load('ShareButton', {
  title: document.title,
  description: '{{ product.description | strip_tags | truncate: 100 }}'
})

Bootic.load('SpinWheel', {
  items: [{ probability: 30, label: '10% OFF', coupon_code: '10OFF' }, { probability: 70, label: 'Mejor suerte la próxima' }]
})

Bootic.load('Ticker', {
  container: '.news-ticker',
  messages: ['Free shipping on orders over $50!', 'New arrivals every week']
})

Bootic.load('ViewModal', {
  linkSelector: '.show-promos-link'
})

Bootic.load('WelcomeModal', {
  show_subscribe_form: true,
  subscribe_form_tag: 'subscribe_form',
  delay: 5
})

Bootic.load('UserMenu', {
  triggerSelector: '.user-menu-toggle',
  menuContainer: '.user-menu'
})

Bootic.load('UserSignup', {
  formContainer: '#signup-container',
  formUrl: '/customer/register'
})

Bootic.load('AsyncPartial', {
  name: 'promotions',
  target: '#promo-container'
})

Bootic.load('ContactWidget', {
  email: 'hola@tienda.com',
  call: '+56912345678',
  telegram: 'mitienda'
})

Bootic.load('Feedback', {
  container: '#comments'
})

Bootic.load('Lazyload', {
  selector: '.lazy'
})

Bootic.load('NativeClient', {})

Bootic.load('PdfViewer', {
  pdfUrl: '/assets/catalogue.pdf',
  container: '#pdf-viewer'
})

Bootic.load('PlacesMap', {
  container: '#store-map',
  places: {{ shop.branches | json }}
})

Bootic.load('ShopVisits', {})

Bootic.load('StreamingVideos', { container: '.product-description' })

Bootic.components.render('add-to-cart', containerEl, {
  product_id: 123,
  button_type: 'normal',
  with_variants: true,
  available_variant_id: 456
}, function(node) { ... })

Bootic.components.render('age-verification', containerEl, {
  logoUrl: 'https://myshop.com/logo.png',
  logoAlt: 'My Shop',
  primaryColor: '#c00000',
  successDelay: 2000
}, function(node) { ... })

Bootic.components.render('auth-delivery', containerEl, {
  welcomeTitle: 'Welcome back!',
  api: authAndDeliveryApi,
  validProviders: ['google']
}, function(node) { ... })

Bootic.components.render('biggy-slider', el, { autoplay: true, interval: 5000 })

Bootic.components.render('bundle-option-configurator', containerEl, {
  productId: 123,
  options: bundleOptions
}, function(node) { ... })

Bootic.components.render('cart-promos', containerEl, {
  showApplyPromo: true
}, function(node) { ... })

Bootic.components.render('cart-table', containerEl, {
  show_cart_gauge: true,
  cart_gauge_limit: 50000,
  hide_footer: false
}, function(node) { ... })

Bootic.components.render('cart-table-v3', el, { show_cart_gauge: true, cart_gauge_limit: 50000 })

Bootic.components.render('cart-table-view', el, { show_cart_gauge: true, cart_gauge_limit: 50000 })

Bootic.components.render('cart-totals', el, { show_suggestions: true }, function(node) {})

Bootic.components.render('contact-widget', el, {
  email: 'hola@tienda.com',
  call: '+56912345678'
})

Bootic.components.render('cookie-consent', el, {
  message: 'We use cookies to improve your experience.',
  privacyUrl: '/pages/privacy'
})

Bootic.components.render('countdown-timer', el, {
  startTime: '2025-12-31T23:59:59',
  finishedMessage: '¡Ya llegó!'
})

Bootic.components.render('country-phone-input', el, { defaultCountry: 'MX' })

Bootic.components.render('customer-console', el, {})

Bootic.components.render('customer-menu', el, { user: currentUser }, function(node) {})

Bootic.components.render('delivery-setup', el, { delivery: deliveryApi })

var deliverySetup = DeliverySetupV2Factory({}, shared)
deliverySetup.open()

Bootic.components.render('faceted-search', el, {
  formAction: '/search',
  resultsContainer: '#search-results'
})

Bootic.components.render('feedback-button', el, {})

Bootic.components.render('feedback-comments', el, {
  no_comments_message: 'Be the first to comment!'
})

Bootic.components.render('fulfillment-info', el, {
  productId: {{ product.id }},
  variantId: {{ product.variants.first.id }}
})

Bootic.components.render('fullpage-slider', el, { loop: true })

Bootic.components.render('image-hotspots', el, {
  image: '/img/lookbook.jpg',
  hotspots: [{ x: 30, y: 45, productId: 123 }]
})

Bootic.components.render('infobar', el, {
  message: 'Free shipping on orders over $50!',
  bg_color: '#e63946'
})

Bootic.components.render('matching-bundle-selector', el, {
  productId: {{ product.id }}
})

Bootic.components.render('megamenu', el, {
  linkSelector: '.nav-item'
})

Bootic.components.render('notification-list', el, {})

Bootic.components.render('notify-restocked', el, {
  form_url: '/products/my-product/notify_restocked'
})

Bootic.components.render('order-tracking', el, {})

Bootic.components.render('popover-menu', el, {
  links: [{ label: 'My Orders', url: '/customer/orders' }]
})

Bootic.components.render('product-list', el, {
  title: 'You may also like',
  products: relatedProducts
})

Bootic.components.render('product-option-selector', el, {
  title: '{{ product.name }}',
  options: {{ product.variants | json }}
})

Bootic.components.render('product-preview', el, {
  productSlug: '{{ product.slug }}'
})

Bootic.components.render('product-variant-selector', el, {
  title: '{{ product.name }}',
  variants: {{ product.variants | json }}
})

Bootic.components.render('promo-notice', el, { message: '10% off your first order!' })

Bootic.components.render('push-notifications-prompt', el, {
  prompt: 'Get notified about new arrivals and promotions!'
})

Bootic.components.render('quick-stats', el, {})

Bootic.components.render('search-popover', el, {
  withImages: true,
  withPrices: true
})

Bootic.components.render('shipping-calculator', el, {
  delivery: deliveryApi,
  country: 'CL'
})

Bootic.components.render('signup-form', el, {
  title: 'Create your account',
  showPhone: true
})

Bootic.components.render('slideout', el, { width: '480px', onClose: onSlideoutClosed }, function(slideout) {
  slideout.addStep('cart', {}, function(step) { step.innerHTML = cartHtml })
  slideout.toggle()
})

Bootic.components.render('supernav', el, {
  bg_color: '#222',
  text_color: '#fff'
})

Bootic.components.render('welcome-modal', el, {
  showSubscribeForm: true,
  subscribeFormTag: 'subscribe_form'
})