forked from brooksbingham/theme-elegance
311 lines
9.3 KiB
JavaScript
311 lines
9.3 KiB
JavaScript
/**
|
|
* Copyright since 2007 PrestaShop SA and Contributors
|
|
* PrestaShop is an International Registered Trademark & Property of PrestaShop SA
|
|
*
|
|
* NOTICE OF LICENSE
|
|
*
|
|
* This source file is subject to the Academic Free License 3.0 (AFL-3.0)
|
|
* that is bundled with this package in the file LICENSE.md.
|
|
* It is also available through the world-wide-web at this URL:
|
|
* https://opensource.org/licenses/AFL-3.0
|
|
* If you did not receive a copy of the license and are unable to
|
|
* obtain it through the world-wide-web, please send an email
|
|
* to license@prestashop.com so we can send you a copy immediately.
|
|
*
|
|
* DISCLAIMER
|
|
*
|
|
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
|
|
* versions in the future. If you wish to customize PrestaShop for your
|
|
* needs please refer to https://devdocs.prestashop.com/ for more information.
|
|
*
|
|
* @author PrestaShop SA and Contributors <contact@prestashop.com>
|
|
* @copyright Since 2007 PrestaShop SA and Contributors
|
|
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
|
|
*/
|
|
import $ from "jquery";
|
|
import prestashop from "prestashop";
|
|
// eslint-disable-next-line
|
|
import "velocity-animate";
|
|
import updateSources from "./components/update-sources";
|
|
import ProductMinitature from "./components/product-miniature";
|
|
|
|
|
|
|
|
$(document).ready(() => {
|
|
const move = (direction) => {
|
|
const THUMB_MARGIN = 20;
|
|
const $thumbnails = $(".js-qv-product-images");
|
|
const thumbHeight =
|
|
$(".js-qv-product-images li img").height() + THUMB_MARGIN;
|
|
const currentPosition = $thumbnails.position().top;
|
|
$thumbnails.velocity(
|
|
{
|
|
translateY:
|
|
direction === "up"
|
|
? currentPosition + thumbHeight
|
|
: currentPosition - thumbHeight,
|
|
},
|
|
() => {
|
|
if ($thumbnails.position().top >= 0) {
|
|
$(".arrow-up").css("opacity", ".2");
|
|
} else if (
|
|
$thumbnails.position().top + $thumbnails.height() <=
|
|
$(".js-qv-mask").height()
|
|
) {
|
|
$(".arrow-down").css("opacity", ".2");
|
|
}
|
|
},
|
|
);
|
|
};
|
|
|
|
const productConfig = (qv) => {
|
|
const MAX_THUMBS = 4;
|
|
const $arrows = $(prestashop.themeSelectors.product.arrows);
|
|
const $thumbnails = qv.find(".js-qv-product-images");
|
|
$(prestashop.themeSelectors.product.thumb).on("click", (event) => {
|
|
// Swap active classes on thumbnail
|
|
if ($(prestashop.themeSelectors.product.thumb).hasClass("selected")) {
|
|
$(prestashop.themeSelectors.product.thumb).removeClass("selected");
|
|
}
|
|
$(event.currentTarget).addClass("selected");
|
|
|
|
// Get data from thumbnail and update cover src, alt and title
|
|
$(prestashop.themeSelectors.product.cover).attr(
|
|
"src",
|
|
$(event.target).data("image-large-src"),
|
|
);
|
|
$(prestashop.themeSelectors.product.cover).attr(
|
|
"alt",
|
|
$(event.target).attr("alt"),
|
|
);
|
|
$(prestashop.themeSelectors.product.cover).attr(
|
|
"title",
|
|
$(event.target).attr("title"),
|
|
);
|
|
|
|
// Get data from thumbnail and update cover sources
|
|
updateSources(
|
|
$(prestashop.themeSelectors.product.cover),
|
|
$(event.target).data("image-large-sources"),
|
|
);
|
|
});
|
|
if ($thumbnails.find("li").length <= MAX_THUMBS) {
|
|
$arrows.hide();
|
|
} else {
|
|
$arrows.on("click", (event) => {
|
|
if (
|
|
$(event.target).hasClass("arrow-up") &&
|
|
$(".js-qv-product-images").position().top < 0
|
|
) {
|
|
move("up");
|
|
$(prestashop.themeSelectors.arrowDown).css("opacity", "1");
|
|
} else if (
|
|
$(event.target).hasClass("arrow-down") &&
|
|
$thumbnails.position().top + $thumbnails.height() >
|
|
$(".js-qv-mask").height()
|
|
) {
|
|
move("down");
|
|
$(prestashop.themeSelectors.arrowUp).css("opacity", "1");
|
|
}
|
|
});
|
|
}
|
|
qv.find(prestashop.selectors.quantityWanted).TouchSpin({
|
|
verticalbuttons: true,
|
|
min: 1,
|
|
max: 1000000,
|
|
});
|
|
|
|
$(prestashop.themeSelectors.touchspin).off("touchstart.touchspin");
|
|
};
|
|
|
|
prestashop.on("clickQuickView", (elm) => {
|
|
const data = {
|
|
action: "quickview",
|
|
id_product: elm.dataset.idProduct,
|
|
id_product_attribute: elm.dataset.idProductAttribute,
|
|
};
|
|
$.post(prestashop.urls.pages.product, data, null, "json")
|
|
.then((resp) => {
|
|
$("body").append(resp.quickview_html);
|
|
const productModal = $(
|
|
`#quickview-modal-${resp.product.id}-${resp.product.id_product_attribute}`,
|
|
);
|
|
productModal.modal("show");
|
|
productConfig(productModal);
|
|
productModal.on("hidden.bs.modal", () => {
|
|
productModal.remove();
|
|
});
|
|
})
|
|
.fail((resp) => {
|
|
prestashop.emit("handleError", {
|
|
eventType: "clickQuickView",
|
|
resp,
|
|
});
|
|
});
|
|
});
|
|
|
|
$("body").on(
|
|
"click",
|
|
prestashop.themeSelectors.listing.searchFilterToggler,
|
|
() => {
|
|
$(prestashop.themeSelectors.listing.searchFiltersWrapper).removeClass(
|
|
"hidden-sm-down",
|
|
);
|
|
$(prestashop.themeSelectors.contentWrapper).addClass("hidden-sm-down");
|
|
$(prestashop.themeSelectors.footer).addClass("hidden-sm-down");
|
|
},
|
|
);
|
|
$(
|
|
`${prestashop.themeSelectors.listing.searchFilterControls} ${prestashop.themeSelectors.clear}`,
|
|
).on("click", () => {
|
|
$(prestashop.themeSelectors.listing.searchFiltersWrapper).addClass(
|
|
"hidden-sm-down",
|
|
);
|
|
$(prestashop.themeSelectors.contentWrapper).removeClass("hidden-sm-down");
|
|
$(prestashop.themeSelectors.footer).removeClass("hidden-sm-down");
|
|
});
|
|
$(`${prestashop.themeSelectors.listing.searchFilterControls} .ok`).on(
|
|
"click",
|
|
() => {
|
|
$(prestashop.themeSelectors.listing.searchFiltersWrapper).addClass(
|
|
"hidden-sm-down",
|
|
);
|
|
$(prestashop.themeSelectors.contentWrapper).removeClass("hidden-sm-down");
|
|
$(prestashop.themeSelectors.footer).removeClass("hidden-sm-down");
|
|
},
|
|
);
|
|
|
|
const parseSearchUrl = function (event) {
|
|
if (event.target.dataset.searchUrl !== undefined) {
|
|
return event.target.dataset.searchUrl;
|
|
}
|
|
|
|
if ($(event.target).parent()[0].dataset.searchUrl === undefined) {
|
|
throw new Error("Can not parse search URL");
|
|
}
|
|
|
|
return $(event.target).parent()[0].dataset.searchUrl;
|
|
};
|
|
|
|
function updateProductListDOM(data) {
|
|
$(prestashop.themeSelectors.listing.searchFilters).replaceWith(
|
|
data.rendered_facets,
|
|
);
|
|
$(prestashop.themeSelectors.listing.activeSearchFilters).replaceWith(
|
|
data.rendered_active_filters,
|
|
);
|
|
$(prestashop.themeSelectors.listing.listTop).replaceWith(
|
|
data.rendered_products_top,
|
|
);
|
|
|
|
const renderedProducts = $(data.rendered_products);
|
|
const productSelectors = $(prestashop.themeSelectors.listing.product);
|
|
|
|
if (productSelectors.length > 0) {
|
|
productSelectors
|
|
.removeClass()
|
|
.addClass(productSelectors.first().attr("class"));
|
|
} else {
|
|
productSelectors
|
|
.removeClass()
|
|
.addClass(renderedProducts.first().attr("class"));
|
|
}
|
|
|
|
$(prestashop.themeSelectors.listing.list).replaceWith(renderedProducts);
|
|
|
|
$(prestashop.themeSelectors.listing.listBottom).replaceWith(
|
|
data.rendered_products_bottom,
|
|
);
|
|
if (data.rendered_products_header) {
|
|
$(prestashop.themeSelectors.listing.listHeader).replaceWith(
|
|
data.rendered_products_header,
|
|
);
|
|
}
|
|
|
|
$('#show-filters').on('click.offcanvas', () => {
|
|
$('#product-list-top-filters').show();
|
|
});
|
|
|
|
$('#hide-filters').on('click.offcanvas', () => {
|
|
$('#product-list-top-filters').hide();
|
|
$('#overlay').hide();
|
|
});
|
|
|
|
$('#show-filters').click(function() {
|
|
$('#overlay').show();
|
|
});
|
|
|
|
$('#product-list-top-filters').show();
|
|
|
|
function checkAndShowOverlay() {
|
|
if ($('#product-list-top-filters').is(':visible')) {
|
|
$('#overlay').show();
|
|
} else {
|
|
$('#overlay').hide();
|
|
}
|
|
}
|
|
|
|
$('#product-list-top-filters').show(function() {
|
|
checkAndShowOverlay();
|
|
});
|
|
|
|
$('#overlay').on('click', function() {
|
|
$('#product-list-top-filters').hide();
|
|
$('#overlay').hide();
|
|
|
|
});
|
|
|
|
$('.th-accordion').thaccordion();
|
|
|
|
const productMinitature = new ProductMinitature();
|
|
productMinitature.init();
|
|
}
|
|
|
|
|
|
|
|
$("body").on(
|
|
"change",
|
|
`${prestashop.themeSelectors.listing.searchFilters} input[data-search-url]`,
|
|
(event) => {
|
|
prestashop.emit("updateFacets", parseSearchUrl(event));
|
|
},
|
|
);
|
|
|
|
$("body").on(
|
|
"click",
|
|
prestashop.themeSelectors.listing.searchFiltersClearAll,
|
|
(event) => {
|
|
prestashop.emit("updateFacets", parseSearchUrl(event));
|
|
},
|
|
);
|
|
|
|
$("body").on(
|
|
"click",
|
|
prestashop.themeSelectors.listing.searchLink,
|
|
(event) => {
|
|
event.preventDefault();
|
|
prestashop.emit("updateFacets", $(event.target).closest("a").get(0).href);
|
|
},
|
|
);
|
|
|
|
window.addEventListener("popstate", (e) => {
|
|
if (e.state && e.state.current_url) {
|
|
window.location.href = e.state.current_url;
|
|
}
|
|
});
|
|
|
|
$("body").on(
|
|
"change",
|
|
`${prestashop.themeSelectors.listing.searchFilters} select`,
|
|
(event) => {
|
|
const form = $(event.target).closest("form");
|
|
prestashop.emit("updateFacets", `?${form.serialize()}`);
|
|
},
|
|
);
|
|
|
|
prestashop.on("updateProductList", (data) => {
|
|
updateProductListDOM(data);
|
|
window.scrollTo(0, 0);
|
|
});
|
|
});
|