Chọn mẫu mã bằng cách nhấp vào hình ảnh

Thông thường, mẫu mã được chọn trong menu thả xuống. Bạn có thể muốn khách hàng có thể chọn mẫu mã sản phẩm bằng cách nhấp vào hình ảnh mẫu mã.

nhấp vào hình ảnh để thay đổi ví dụ mẫu mã

Chú ý:

  • Giải pháp này sẽ không hoạt động trong các chủ đề Boundless, Express hoặc Narrative. Nếu bạn sử dụng chủ đề Brooklyn, giải pháp sẽ hoạt động nhưng bạn cần cài đặt loại hộp chọn thành menu thả xuống trên trang sản phẩm.
  • Mỗi hình ảnh mẫu mã phải là duy nhất thì giải pháp này mới hoạt động.
  • Hầu hết các chủ đề đều cập nhật hình ảnh chính khi chọn mẫu mã có hình ảnh. Tuy nhiên, hoạt động cập nhật không bao giờ diễn ra theo cả hai hướng, vì tự động cập nhật lựa chọn mẫu mã khi thay đổi hình ảnh chính có thể khiến người mua bối rối, dẫn đến thêm nhầm mẫu mã vào giỏ hàng. Vì vậy, hãy thận trọng khi áp dụng tùy chỉnh này cho cửa hàng của bạn.

Để chọn mẫu mã sản phẩm bằng cách nhấp vào hình ảnh mẫu mã:

  1. Mở tệp theme.js hoặc theme.js.liquid trong thư mục Phần tử.

  2. Ở cuối tệp, dán mã sau:

const selectVariantByClickingImage = {
  // Create variant images from productJson object
  _createVariantImage: function (product) {
    const variantImageObject = {};
    product.variants.forEach((variant) => {
      if (
        typeof variant.featured_image !== 'undefined' &&
        variant.featured_image !== null
      ) {
        const variantImage = variant.featured_image.src
          .split('?')[0]
          .replace(/http(s)?:/, '');
        variantImageObject[variantImage] =
          variantImageObject[variantImage] || {};
        product.options.forEach((option, index) => {
          const optionValue = variant.options[index];
          const optionKey = `option-${index}`;
          if (
            typeof variantImageObject[variantImage][optionKey] === 'undefined'
          ) {
            variantImageObject[variantImage][optionKey] = optionValue;
          } else {
            const oldValue = variantImageObject[variantImage][optionKey];
            if (oldValue !== null && oldValue !== optionValue) {
              variantImageObject[variantImage][optionKey] = null;
            }
          }
        });
      }
    });
    return variantImageObject;
  },
  _updateVariant: function (event, id, product, variantImages) {
    const arrImage = event.target.src
      .split('?')[0]
      .replace(/http(s)?:/, '')
      .split('.');
    const strExtention = arrImage.pop();
    const strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/, '');
    const strNewImage = `${arrImage.join('.')}.${strRemaining}.${strExtention}`;
    if (typeof variantImages[strNewImage] !== 'undefined') {
      product.variants.forEach((option, index) => {
        const optionValue = variantImages[strNewImage][`option-${index}`];
        if (optionValue !== null && optionValue !== undefined) {
          const selects = document.querySelectorAll('#'+ id + ' [class*=single-option-selector]');
          const options = selects[index].options;
          for (let option, n = 0; (option = options[n]); n += 1) {
            if (option.value === optionValue) {
              selects[index].selectedIndex = n;
              selects[index].dispatchEvent(new Event('change'));
              break;
            }
          }
        }
      });
    }
  },
  _selectVariant: function() {
    const productJson = document.querySelectorAll('[id^=ProductJson-');
    if (productJson.length > 0) {
      productJson.forEach((product) => {
        const sectionId = product.id.replace("ProductJson-", "shopify-section-");
        const thumbnails = document.querySelectorAll('#'+ sectionId + ' img[src*="/products/"]');
        if (thumbnails.length > 1) {
          const productObject = JSON.parse(product.innerHTML);
          const variantImages = this._createVariantImage(productObject);
          // need to check variants > 1
          if (productObject.variants.length > 1) {
            thumbnails.forEach((thumbnail) => {
              thumbnail.addEventListener('click', (e) =>
                this._updateVariant(e, sectionId, productObject, variantImages),
              );
            });
          }
        }
      });
    }
  },
};
if (document.readyState !== 'loading') {
  selectVariantByClickingImage._selectVariant();
} else {
  document.addEventListener(
    'DOMContentLoaded',
    selectVariantByClickingImage._selectVariant(),
  );
}
  1. Nhấp vào Save (Lưu).

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí