Product tags in js

Viewed 50

Has anyone have advice on what needs to be added to call products that are of the same product tags in js therefore showing as recommnedations within our CSS container?

the _loadrecommendations is where we need to focus I believe however js is new to me so any help is appreciated.

CSS class - MatchingSet


  "use strict";

  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  /* harmony import */var __WEBPACK_IMPORTED_MODULE_0__components_Carousel__ = __webpack_require__(2);
  /* harmony import */var __WEBPACK_IMPORTED_MODULE_1__components_ProductItemColorSwatch__ = __webpack_require__(4);

  var MatchingSetSection = function () {
    function MatchingSetSection(container) {
      _classCallCheck(this, MatchingSetSection);

      this.element = container;
      this.options = JSON.parse(this.element.getAttribute('data-section-settings'));

      if (this.options['useRecommendations']) {
        this._loadRecommendations().then(this._createSlideshow.bind(this));
      } else {
        this._createSlideshow();
      }
    }

    _createClass(MatchingSetSection, [{
      key: 'onUnload',
      value: function onUnload() {
        this.carousel.destroy();
      }
    }, {
      key: '_loadRecommendations',
      value: function _loadRecommendations() {
        var _this58 = this;

        var url = window.routes.productRecommendationsUrl + '?section_id=Matching-set&product_id=' + this.options['productId'] + '&limit=' + this.options['recommendationsCount'];

        return fetch(url).then(function (response) {
          return response.text().then(function (content) {
            var container = document.createElement('div');
            container.innerHTML = content;

            _this58.element.querySelector('.MatchingSet').innerHTML = container.querySelector('.MatchingSet').innerHTML;
          });
        });
      }
    }, {
      key: '_createSlideshow',
      value: function _createSlideshow() {
        this.carousel = new __WEBPACK_IMPORTED_MODULE_0__components_Carousel__["default"](this.element.querySelector('[data-flickity-config]'));

        // Setup product item color swatch
        new __WEBPACK_IMPORTED_MODULE_1__components_ProductItemColorSwatch__["default"](this.element);
      }
    }]);

    return MatchingSetSection;
  }();
  /* harmony export (immutable) */

  __webpack_exports__["default"] = MatchingSetSection;

  /***/
},
0 Answers
Related