Release/15.0.0

assets/constants.js

@@ -6,9 +6,4 @@ const PUB_SUB_EVENTS = {
  optionValueSelectionChange: 'option-value-selection-change',
  variantChange: 'variant-change',
  cartError: 'cart-error',
- sectionRefreshed: 'section-refreshed',
-};
-
-const SECTION_REFRESH_RESOURCE_TYPE = {
- product: 'product',
 };

assets/global.js

@@ -1059,8 +1059,7 @@ class VariantSelects extends HTMLElement {
  connectedCallback() {
  this.addEventListener('change', (event) => {
  const target = this.getInputForEventTarget(event.target);
- this.currentVariant = this.getVariantData(target.id);
- this.updateSelectedSwatchValue(event);
+ this.updateSelectionMetadata(event);
 
  publish(PUB_SUB_EVENTS.optionValueSelectionChange, {
  data: {
@@ -1072,10 +1071,15 @@ class VariantSelects extends HTMLElement {
  });
  }
 
- updateSelectedSwatchValue({ target }) {
+ updateSelectionMetadata({ target }) {
  const { value, tagName } = target;
 
  if (tagName === 'SELECT' && target.selectedOptions.length) {
+ Array.from(target.options)
+ .find((option) => option.getAttribute('selected'))
+ .removeAttribute('selected');
+ target.selectedOptions[0].setAttribute('selected', 'selected');
+
  const swatchValue = target.selectedOptions[0].dataset.optionSwatchValue;
  const selectedDropdownSwatchValue = target
  .closest('.product-form__input')
@@ -1103,16 +1107,8 @@ class VariantSelects extends HTMLElement {
  return target.tagName === 'SELECT' ? target.selectedOptions[0] : target;
  }
 
- getVariantData(inputId) {
- return JSON.parse(this.getVariantDataElement(inputId).textContent);
- }
-
- getVariantDataElement(inputId) {
- return this.querySelector(`script[type="application/json"][data-resource="${inputId}"]`);
- }
-
  get selectedOptionValues() {
- return Array.from(this.querySelectorAll('select, fieldset input:checked')).map(
+ return Array.from(this.querySelectorAll('select option[selected], fieldset input:checked')).map(
  ({ dataset }) => dataset.optionValueId
  );
  }

assets/media-gallery.js

@@ -41,11 +41,13 @@ if (!customElements.get('media-gallery')) {
  activeMedia?.classList?.add('is-active');
 
  if (prepend) {
- activeMedia.parentElement.prepend(activeMedia);
+ activeMedia.parentElement.firstChild !== activeMedia && activeMedia.parentElement.prepend(activeMedia);
+
  if (this.elements.thumbnails) {
  const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);
- activeThumbnail.parentElement.prepend(activeThumbnail);
+ activeThumbnail.parentElement.firstChild !== activeThumbnail && activeThumbnail.parentElement.prepend(activeThumbnail);
  }
+
  if (this.elements.viewer.slider) this.elements.viewer.resetPages();
  }
 

assets/product-info.js

@@ -57,15 +57,6 @@ if (!customElements.get('product-info')) {
  this.postProcessHtmlCallbacks.push((newNode) => {
  window?.Shopify?.PaymentButton?.init();
  window?.ProductModel?.loadShopifyXR();
- publish(PUB_SUB_EVENTS.sectionRefreshed, {
- data: {
- sectionId: this.sectionId,
- resource: {
- type: SECTION_REFRESH_RESOURCE_TYPE.product,
- id: newNode.dataset.productId,
- },
- },
- });
  });
  }
 
@@ -75,13 +66,16 @@ if (!customElements.get('product-info')) {
  this.resetProductFormState();
 
  const productUrl = target.dataset.productUrl || this.pendingRequestUrl || this.dataset.url;
+ this.pendingRequestUrl = productUrl;
  const shouldSwapProduct = this.dataset.url !== productUrl;
- const shouldFetchFullPage = !this.isFeaturedProduct && shouldSwapProduct;
+ const shouldFetchFullPage = this.dataset.updateUrl === 'true' && shouldSwapProduct;
 
  this.renderProductInfo({
  requestUrl: this.buildRequestUrlWithParams(productUrl, selectedOptionValues, shouldFetchFullPage),
  targetId: target.id,
- callback: shouldSwapProduct ? this.handleSwapProduct(productUrl) : this.handleUpdateProductInfo(productUrl),
+ callback: shouldSwapProduct
+ ? this.handleSwapProduct(productUrl, shouldFetchFullPage)
+ : this.handleUpdateProductInfo(productUrl),
  });
  }
 
@@ -91,33 +85,27 @@ if (!customElements.get('product-info')) {
  productForm?.handleErrorMessage();
  }
 
- get isFeaturedProduct() {
- return this.dataset.section.includes('featured_product');
- }
-
- handleSwapProduct(productUrl) {
+ handleSwapProduct(productUrl, updateFullPage) {
  return (html) => {
  this.productModal?.remove();
 
- // Grab the selected variant from the new product info
- const variant = this.getSelectedVariant(html.querySelector(`product-info[data-section=${this.sectionId}]`));
+ const selector = updateFullPage ? "product-info[id^='MainProduct']" : 'product-info';
+ const variant = this.getSelectedVariant(html.querySelector(selector));
  this.updateURL(productUrl, variant?.id);
 
- // If we are in an embedded context (quick add, featured product, etc), only swap product info.
- // Otherwise, refresh the entire page content and sibling sections.
- if (this.dataset.updateUrl === 'false') {
+ if (updateFullPage) {
+  document.querySelector('head title').innerHTML = html.querySelector('head title').innerHTML;
+
  HTMLUpdateUtility.viewTransition(
- this,
- html.querySelector('product-info'),
+ document.querySelector('main'),
+ html.querySelector('main'),
  this.preProcessHtmlCallbacks,
  this.postProcessHtmlCallbacks
  );
  } else {
- document.querySelector('head title').innerHTML = html.querySelector('head title').innerHTML;
-
  HTMLUpdateUtility.viewTransition(
- document.querySelector('main'),
- html.querySelector('main'),
+ this,
+ html.querySelector('product-info'),
  this.preProcessHtmlCallbacks,
  this.postProcessHtmlCallbacks
  );
@@ -129,7 +117,6 @@ if (!customElements.get('product-info')) {
  this.abortController?.abort();
  this.abortController = new AbortController();
 
- this.pendingRequestUrl = requestUrl;
  fetch(requestUrl, { signal: this.abortController.signal })
  .then((response) => response.text())
  .then((responseText) => {
@@ -170,11 +157,7 @@ if (!customElements.get('product-info')) {
  updateOptionValues(html) {
  const variantSelects = html.querySelector('variant-selects');
  if (variantSelects) {
- HTMLUpdateUtility.viewTransition(
- this.variantSelectors,
- variantSelects,
- this.preProcessHtmlCallbacks,
- );
+ HTMLUpdateUtility.viewTransition(this.variantSelectors, variantSelects, this.preProcessHtmlCallbacks);
  }
  }
 
@@ -257,10 +240,13 @@ if (!customElements.get('product-info')) {
  }
 
  updateMedia(html, variantFeaturedMediaId) {
+ if (!variantFeaturedMediaId) return;
+
  const mediaGallerySource = this.querySelector('media-gallery ul');
  const mediaGalleryDestination = html.querySelector(`media-gallery ul`);
 
  const refreshSourceData = () => {
+ if (this.hasAttribute('data-zoom-on-hover')) enableZoomOnHover(2);
  const mediaGallerySourceItems = Array.from(mediaGallerySource.querySelectorAll('li[data-media-id]'));
  const sourceSet = new Set(mediaGallerySourceItems.map((item) => item.dataset.mediaId));
  const sourceMap = new Map(
@@ -312,18 +298,16 @@ if (!customElements.get('product-info')) {
  });
  }
 
- if (variantFeaturedMediaId) {
- // set featured media as active in the media gallery
- this.querySelector(`media-gallery`)?.setActiveMedia?.(
- `${this.dataset.section}-${variantFeaturedMediaId}`,
- true
- );
+ // set featured media as active in the media gallery
+ this.querySelector(`media-gallery`)?.setActiveMedia?.(
+ `${this.dataset.section}-${variantFeaturedMediaId}`,
+ true
+ );
 
- // update media modal
- const modalContent = this.productModal?.querySelector(`.product-media-modal__content`);
- const newModalContent = html.querySelector(`product-modal .product-media-modal__content`);
- if (modalContent && newModalContent) modalContent.innerHTML = newModalContent.innerHTML;
- }
+ // update media modal
+ const modalContent = this.productModal?.querySelector(`.product-media-modal__content`);
+ const newModalContent = html.querySelector(`product-modal .product-media-modal__content`);
+ if (modalContent && newModalContent) modalContent.innerHTML = newModalContent.innerHTML;
  }
 
  setQuantityBoundries() {
@@ -367,6 +351,7 @@ if (!customElements.get('product-info')) {
  }
 
  updateQuantityRules(sectionId, html) {
+ if (!this.quantityInput) return;
  this.setQuantityBoundries();
 
  const quantityFormUpdated = html.getElementById(`Quantity-Form-${sectionId}`);