Shopify Бесконечная прокрутка остановила продукт Быстрый просмотр и кнопки быстрого добавления в корзину сработали - PullRequest
0 голосов
/ 27 августа 2018

Я использую Shopify «Empire Theme» с быстрым просмотром товара и кнопкой быстрого добавления в корзину, а недавно я добавил бесконечную прокрутку к товарам в каждой коллекции, используя Ajaxinate.js.

Когда я открываю страницу коллекции, она загружается с некоторыми продуктами, которые, как предполагается, должны работать. Продукты, которые уже есть, работают нормально с быстрым просмотром и быстрым добавлением в корзину, а также.

Бесконечная прокрутка работает нормально, и она отлично загружает новый продукт, но проблема возникает, когда новые продукты, загруженные через вызов AJAX, не имеют функции быстрого добавления в корзину и быстрого просмотра.

Короче говоря, продукт, который загружен вызовом AJAX, не имеет функции быстрого просмотра и добавления в корзину, с другой стороны, продукт, который не загружен AJAX и уже существует, имеет вышеупомянутые функции.

Если вы хотите увидеть магазин, здесь есть ссылка. Проверьте первые 8 продуктов, которые вы увидите, что они работают нормально, и значок + (добавить товар в корзину), и быстрый просмотр тоже хорошо. Но после 8 пунктов ничего не работает.

https://www.gyftss.myshopify.com

пароль: 1239

Код для бесконечной прокрутки Ajax:

'use strict';

/* ===================================================================================== @preserve =
 ___  _   _    _
/   || | | |  | |
\__  | | | |  | |  __
/    |/  |/_) |/  /  \_/\/
\___/|__/| \_/|__/\__/  /\_/
              |\
              |/
Ajaxinate
version v2.0.6
https://github.com/Elkfox/Ajaxinate
Copyright (c) 2017 Elkfox Co Pty Ltd
https://elkfox.com
MIT License
================================================================================================= */

var Ajaxinate = function ajaxinateConstructor(config) {
  var settings = config || {};
  /*
    pagination: Selector of pagination container
    method: [options are 'scroll', 'click']
    container: Selector of repeating content
    offset: 0, offset the number of pixels before the bottom to start loading more on scroll
    loadingText: 'Loading', The text changed during loading
    callback: null, function to callback after a new page is loaded
  */
  var defaultSettings = {
    pagination: '.AjaxinatePagination',
    method: 'scroll',
    container: '.AjaxinateLoop',
    offset: 660,
    loadingText: '<img src="https://cdn.shopify.com/s/files/1/0066/5072/4415/files/spinner.gif?16236020128462925067" style="width:40px">',
    callback: null
  };
  // Merge configs
  this.settings = Object.assign(defaultSettings, settings);

  // Bind 'this' to applicable prototype functions
  this.addScrollListeners = this.addScrollListeners.bind(this);
  this.addClickListener = this.addClickListener.bind(this);
  this.checkIfPaginationInView = this.checkIfPaginationInView.bind(this);
  this.stopMultipleClicks = this.stopMultipleClicks.bind(this);
  this.destroy = this.destroy.bind(this);

  // Set up our element selectors
  this.containerElement = document.querySelector(this.settings.container);
  this.paginationElement = document.querySelector(this.settings.pagination);

  this.initialize();
};

Ajaxinate.prototype.initialize = function initializeTheCorrectFunctionsBasedOnTheMethod() {
  // Find and initialise the correct function based on the method set in the config
  if (this.containerElement) {
    var initializers = {
      click: this.addClickListener,
      scroll: this.addScrollListeners
    };
    initializers[this.settings.method]();
  }
};

Ajaxinate.prototype.addScrollListeners = function addEventListenersForScrolling() {
  if (this.paginationElement) {
    document.addEventListener('scroll', this.checkIfPaginationInView);
    window.addEventListener('resize', this.checkIfPaginationInView);
    window.addEventListener('orientationchange', this.checkIfPaginationInView);
  }
};

Ajaxinate.prototype.addClickListener = function addEventListenerForClicking() {
  if (this.paginationElement) {
    this.nextPageLinkElement = this.paginationElement.querySelector('a');
    this.clickActive = true;
    if (typeof this.nextPageLinkElement !== 'undefined') {
      this.nextPageLinkElement.addEventListener('click', this.stopMultipleClicks);
    }
  }
};

Ajaxinate.prototype.stopMultipleClicks = function handleClickEvent(event) {
  event.preventDefault();
  if (this.clickActive) {
    this.nextPageLinkElement.innerHTML = this.settings.loadingText;
    this.nextPageUrl = this.nextPageLinkElement.href;
    this.clickActive = false;
    this.loadMore();
  }
};

Ajaxinate.prototype.checkIfPaginationInView = function handleScrollEvent() {
  var top = this.paginationElement.getBoundingClientRect().top - this.settings.offset;
  var bottom = this.paginationElement.getBoundingClientRect().bottom + this.settings.offset;
  if (top <= window.innerHeight && bottom >= 0) {
    this.nextPageLinkElement = this.paginationElement.querySelector('a');
    this.removeScrollListener();
    if (this.nextPageLinkElement) {
      this.nextPageLinkElement.innerHTML = this.settings.loadingText;
      this.nextPageUrl = this.nextPageLinkElement.href;
      this.loadMore();
    }
  }
};

Ajaxinate.prototype.loadMore = function getTheHtmlOfTheNextPageWithAnAjaxRequest() {
  this.request = new XMLHttpRequest();
  this.request.onreadystatechange = function success() {
    if (this.request.readyState === 4 && this.request.status === 200) {
      var newContainer = this.request.responseXML.querySelectorAll(this.settings.container)[0];
      var newPagination = this.request.responseXML.querySelectorAll(this.settings.pagination)[0];
      this.containerElement.insertAdjacentHTML('beforeend', newContainer.innerHTML);
      this.paginationElement.innerHTML = newPagination.innerHTML;
      if (this.settings.callback && typeof this.settings.callback === 'function') {
        this.settings.callback(this.request.responseXML);
      }
      this.initialize();
    }
  }.bind(this);
  this.request.open('GET', this.nextPageUrl);
  this.request.responseType = 'document';
  this.request.send();
};

Ajaxinate.prototype.removeClickListener = function removeClickEventListener() {
  this.nextPageLinkElement.addEventListener('click', this.stopMultipleClicks);
};

Ajaxinate.prototype.removeScrollListener = function removeScrollEventListener() {
  document.removeEventListener('scroll', this.checkIfPaginationInView);
  window.removeEventListener('resize', this.checkIfPaginationInView);
  window.removeEventListener('orientationchange', this.checkIfPaginationInView);
};

Ajaxinate.prototype.destroy = function removeEventListenersAndReturnThis() {
  // This method is used to unbind event listeners from the DOM
  // This function is called manually to destroy "this" Ajaxinate instance
  var destroyers = {
    click: this.removeClickListener,
    scroll: this.removeScrollListener
  };
  destroyers[this.settings.method]();
  return this;
};

Код инициализации:

    <script>
  document.addEventListener("DOMContentLoaded", function(e) {
    e.preventDefault();
  var endlessScroll = new Ajaxinate();
    offset: 660

});

</script>

Файл javascript для темы можно найти здесь:

https://cdn.shopify.com/s/files/1/0066/5072/4415/t/5/assets/empire.js?11964077371852938126

Заранее спасибо.

1 Ответ

0 голосов
/ 16 января 2019

С помощью этого кода я смог быстро разобраться с империей темы

<script>
var empire_js_o = '<script src="//cdn.shopify.com/s/files/1/1540/2631/t/34/assets/empire.js?9521252849869083980" data-scripts="" data-shopify-api-url="//cdn.shopify.com/s/assets/themes_support/api.jquery-0ea851da22ae87c0290f4eeb24bc8b513ca182f3eb721d147c009ae0f5ce14f9.js" data-shopify-currencies="//cdn.shopify.com/s/javascripts/currencies.js" data-shopify-countries="/services/javascripts/countries.js" data-shopify-common="//cdn.shopify.com/s/assets/themes_support/shopify_common-040322ee69221c50a47032355f2f7e6cbae505567e2157d53dfb0a2e7701839c.js" data-shopify-cart="//cdn.shopify.com/s/files/1/1540/2631/t/34/assets/jquery.cart.js?9521252849869083980" id="empire_js">';
    var NewEmpire = function reload_js() {
        $('#empire_js').remove();
        $(empire_js_o).appendTo('head');
    }

document.addEventListener("DOMContentLoaded", function() {
var endlessScroll = new Ajaxinate({
    method: 'scroll',
    loadingText: 'Loading...',
    callback: NewEmpire
  });
});
</script>
...