Stencil Utils Reference

updateView() {
  $(this.options.blockerSelector).show();
  api.getPage(urlUtils.getUrl(), this.requestOptions, (err, content) => {
    $(this.options.blockerSelector).hide();
    if (err) {
      throw new Error(err);
    }
    // Refresh view with new content
    this.refreshView(content);
  });
}

utils.api.getPageByGQL('pages/store-locator', (err, response) => {
  if(err) {
    console.error(err);
  }
  // Server returns HTML template in the response, even if response is unsuccessful
  modal.updateContent(response);
});

utils.api.cart.getCart({}, (err, response) => {
  console.log(response);
  console.log(err);
});
utils.api.cart.getCart({includeOptions: true}, (err, response) => {
  console.log(response);
  console.log(err);
});

utils.api.cart.getCartQuantity({}, (err, response) => {
  console.log(response);
  console.log(err);
});
utils.api.cart.getCartQuantity({includeOptions: true}, (err, response) => {
  console.log(response);
  console.log(err);
});

utils.api.cart.itemAdd(this.filterEmptyFilesFromForm(new FormData(form)), (err, response) => {
  const errorMessage = err || response.data.error;
  $addToCartBtn
  .val(originalBtnVal)
  .prop('disabled', false);
  this.$overlay.hide();
  // Guard statement
  if (errorMessage) {
    // Strip the HTML from the error message
    const tmp = document.createElement('DIV');
    tmp.innerHTML = errorMessage;
    return showAlertModal(tmp.textContent || tmp.innerText);
  }
  // Open preview modal and update content
  if (this.previewModal) {
    this.previewModal.open();
    this.updateCartContent(this.previewModal, response.data.cart_item.id);
  } else {
    this.$overlay.show();
    // if no modal, redirect to the cart page
    this.redirectTo(response.data.cart_item.cart_url || this.context.urls.cart);
  }
});

cartUpdate($target) {
  const itemId = $target.data('cartItemid');
  const $el = $(`#qty-${itemId}`);
  const oldQty = parseInt($el.val(), 10);
  const maxQty = parseInt($el.data('quantityMax'), 10);
  const minQty = parseInt($el.data('quantityMin'), 10);
  const minError = $el.data('quantityMinError');
  const maxError = $el.data('quantityMaxError');
  const newQty = $target.data('action') === 'inc' ? oldQty + 1 : oldQty - 1;
  // Does not quality for min/max quantity
  if (newQty < minQty) {
    return swal({
        text: minError,
        type: 'error',
    });
  } else if (maxQty > 0 && newQty > maxQty) {
    return swal({
        text: maxError,
        type: 'error',
    });
  }
  this.$overlay.show();
  utils.api.cart.itemUpdate(itemId, newQty, (err, response) => {
    this.$overlay.hide();
    if (response.data.status === 'succeed') {
      // if the quantity is changed "1" from "0", we have to remove the row.
      const remove = (newQty === 0);
      this.refreshContent(remove);
    } else {
      $el.val(oldQty);
      swal({
          text: response.data.errors.join('\n'),
          type: 'error',
      });
    }
  });
}

cartRemoveItem(itemId) {
  this.$overlay.show();
  utils.api.cart.itemRemove(itemId, (err, response) => {
    if (response.data.status === 'succeed') {
      this.refreshContent(true);
    } else {
      alert(response.data.errors.join('\n'));
    }
  });
} 

itemUpdate(itemId, qty, callback) {
  let callbackArg = callback;
  let items;
  if (Array.isArray(itemId) && typeof qty === 'function') {
    callbackArg = qty;
    items = itemId;
  } else {
    items = [
        {
            id: itemId,
            quantity: qty,
        },
    ];
  }
  this.update(items, (err, response) => {
    const emitData = {
        items,
        err,
        response,
    };
    Hooks.emit('cart-item-update-remote', emitData);
    callbackArg(err, response);
  });
} 

bindGiftWrappingEvents() {
  const modal = defaultModal();
  $('[data-item-giftwrap]').on('click', event => {
    const itemId = $(event.currentTarget).data('itemGiftwrap');
    const options = {
      template: 'cart/modals/gift-wrapping-form',
    };
    event.preventDefault();
    modal.open();
    utils.api.cart.getItemGiftWrappingOptions(itemId, options, (err, response) => {
      modal.updateContent(response.content);
      this.bindGiftWrappingForm();
    });
  });
}

/**
 * Submit giftwrapping options
 *
 * @param {String} itemId
 * @param {Function} callback
 */
submitItemGiftWrappingOption(itemId, params, callback) {
  this.remoteRequest(`/gift-wrapping/${itemId}`, 'POST', { params }, callback);
}

refreshContent(remove) {
  const $cartItemsRows = $('[data-item-row]', this.$cartContent);
  const $cartPageTitle = $('[data-cart-page-title]');
  const options = {
    template: {
        content: 'cart/content',
        totals: 'cart/totals',
        pageTitle: 'cart/page-title',
        statusMessages: 'cart/status-messages',
    },
  };
  this.$overlay.show();
  // Remove last item from cart? Reload
  if (remove && $cartItemsRows.length === 1) {
    return window.location.reload();
  }
  utils.api.cart.getContent(options, (err, response) => {
    this.$cartContent.html(response.content);
    this.$cartTotals.html(response.totals);
    this.$cartMessages.html(response.statusMessages);
    $cartPageTitle.replaceWith(response.pageTitle);
    this.bindEvents();
    this.$overlay.hide();
    const quantity = $('[data-cart-quantity]', this.$cartContent).data('cart-quantity') || 0;
    $('body').trigger('cart-quantity-update', quantity);
  });
} 

bindEstimatorEvents() {
  const $estimatorContainer = $('.shipping-estimator');
  const $estimatorForm = $('.estimator-form');
  $estimatorForm.on('submit', (event) => {
    const params = {
      country_id: $('[name="shipping-country"]', $estimatorForm).val(),
      state_id: $('[name="shipping-state"]', $estimatorForm).val(),
      city: $('[name="shipping-city"]', $estimatorForm).val(),
      zip_code: $('[name="shipping-zip"]', $estimatorForm).val(),
    };
    event.preventDefault();
    utils.api.cart.getShippingQuotes(params, 'cart/shipping-quotes', (err, response) => {
      $('.shipping-quotes').html(response.content);
      // bind the select button
      $('.select-shipping-quote').on('click', (clickEvent) => {
        const quoteId = $('.shipping-quote:checked').val();
        clickEvent.preventDefault();
        utils.api.cart.submitShippingQuote(quoteId, () => {
          location.reload();
        });
      });
    });
  }); 
}

bindPromoCodeEvents() {
  const $couponContainer = $('.coupon-code');
  const $couponForm = $('.coupon-form');
  const $codeInput = $('[name="couponcode"]', $couponForm);
  $('.coupon-code-add').on('click', (event) => {
    event.preventDefault();
    $(event.currentTarget).hide();
    $couponContainer.show();
    $('.coupon-code-cancel').show();
    $codeInput.focus();
  });
  $('.coupon-code-cancel').on('click', (event) => {
    event.preventDefault();
    $couponContainer.hide();
    $('.coupon-code-cancel').hide();
    $('.coupon-code-add').show();
  });
  $couponForm.on('submit', (event) => {
    const code = $codeInput.val();
    event.preventDefault();
    // Empty code
    if (!code) {
      return alert($codeInput.data('error'));
    }
    utils.api.cart.applyCode(code, (err, response) => {
      if (response.data.status === 'success') {
        this.refreshContent();
      } else {
        alert(response.data.errors.join('\n'));
      }
    });
  });
}

utils.api.cart.applyGiftCertificate(code, (err, resp) => {
  if (resp.data.status === 'success') {
    this.refreshContent();
  } else {
    alert({
      text: resp.data.errors.join('\n'),
      type: 'error',
    });
  }
});

utils.api.countries.getById(countryId, (err, res) => {
  const url = this.endpoint + countryId;
  this.remoteRequest(url, 'GET', {}, callback);
});

callback(err, element) => {
  if(err) {
    console.log(err);
    return;
  }
  if(element) {
    console.log(element);
    //do something
  }
}
$('select[data-field-type="Country"]').on('change', (event) => {
  const countryName = $(event.currentTarget).val();
  if (countryName === '') {
    return;
  }
  utils.api.country.getByName(countryName, (err, response) => {
    if (err) {
      alert(context.state_error);
      return callback(err);
    }
    const $currentInput = $('[data-field-type="State"]');
    if (!_.isEmpty(response.data.states)) {
      // The element may have been replaced with a select, reselect it
      const $selectElement = makeStateRequired($currentInput, context);
      addOptions(response.data, $selectElement, options);
      callback(null, $selectElement);
    } else {
      const newElement = makeStateOptional($currentInput, context);
      callback(null, newElement);
    }
  });
}); 

// Update product attributes. If we're in quick view and the product has options, then also update the initial view in case items are oos
if (_.isEmpty(productAttributesData) && hasOptions) {
  const $productId = $('[name="product_id"]', $form).val();
  utils.api.productAttributes.optionChange($productId, $form.serialize(), (err, response) => {
    const attributesData = response.data || {};
    this.updateProductAttributes(attributesData);
    this.updateView(attributesData);
  });
} else {
  this.updateProductAttributes(productAttributesData);
} 

utils.api.productAttributes.configureInCart(itemId, options, (err, response) => {
  modal.updateContent(response.content);
  this.bindGiftWrappingForm();
});

$('body').on('click', '.quickview', (event) => {
    event.preventDefault();
    const productId = $(event.currentTarget).data('product-id');
    modal.open({ size: 'large' });
    utils.api.product.getById(productId, { template: 'products/quick-view' }, (err, response) => {
      modal.updateContent(response);
      modal.$content.find('.productView').addClass('productView--quickView');
      return new ProductDetails(modal.$content.find('.quickView'), context);
    });
  }); 

const doSearch = _.debounce((searchQuery) => {
  utils.api.search.search(searchQuery, { template: 'search/quick-results' }, (err, response) => {
    if (err) {
      return false;
    }
    $quickSearchResults.html(response);
  });
}, 200);

getCartContent(cartItemHash, onComplete) {
  const options = {
    template: 'cart/preview',
    params: {
        suggest: cartItemHash,
    },
    config: {
        cart: {
            suggestions: {
                limit: 4,
            },
        },
    },
  };
  console.log(options);
  return onComplete(options);
}

{
  "search": {
    "product_results": {
        "limit": 5
    }
  }
}

{
  "brands": {
    "limit": 5
  }
}

{
  "brand": {
    "products": {
      "limit": 5
    }
  }
}

{
  "cart": {
    "suggestions": {
      "limit": 5
    }
  }
}

{
  "product": {
    "videos": {
      "limit": 11
    },
    "images": {
      "limit": 12
    },
    "reviews": {
      "limit": 13
    },
    "related_products": {
      "limit": 14
    },
    "similar_by_views": {
      "limit": 15
    }
  }
}

{
  "blog": {
    "posts": {
      "limit": 5,
      "pages": 3,
      "summary": 10
    }
  }
}

{
  "category": {
    "shop_by_price": false,
    "products": {
      "limit": 5
    }
  }
}

{
  "products": {
    "featured": 3,
    "new": 4,
    "top_sellers": 10
  }
}

{
  "products": {
    "featured": {
      "limit": "5"
    },
    "new": {
      "limit": "10"
    },
    "top_sellers": {
      "limit": "15"
    }
  }
}

{
  "customer": {
    "addresses": false,
    "returns": true,
    "wishlists": {
      "limit": 3
    },
    "orders": {
      "limit": 4
    },
    "recently_viewed_products": true
  },
  "products": {
    "featured": {
      "limit": 3
    },
    "new": {
      "limit": 4
    },
    "top_sellers": {
      "limit": 5
    }
  },
  "carousel": true,
  "blog": {
    "recent_posts": {
      "limit": 7
    },
    "summary": 6
  },
  "cart": true,
  "shipping_messages": true,
  "categories": {
    "description": true
  },
  "shop_by_brand": {
    "limit": 4
  }
}