Skip to content

Revert "feat: add slider on gallery images (#4446)" #4468

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vytisbulkevicius merged 1 commit into from
Dec 17, 2025
+83 −245
Merged

Revert "feat: add slider on gallery images (#4446)" #4468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 82 additions & 145 deletions assets/js/src/shop/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,158 +1,95 @@
/* jshint esversion: 6 */
/* global jQuery, CustomEvent */
/* global neveShopSlider */
/* global CustomEvent */
import { tns } from 'tiny-slider/src/tiny-slider';

(function ($) {
/**
* Init shop.
*/
function initShop() {
const $body = $('body');
if ($body.hasClass('woocommerce')) {
handleShopSidebar();
}

const countExclusive = $('.exclusive-products li.product').length;

if ($body.hasClass('nv-exclusive') && countExclusive > 4) {
handleExclusiveSlider();
}

if (
'1' !== neveShopSlider.isSparkActive &&
$body.hasClass('single-product')
) {
handleGallerySlider();
}
/**
* Init shop.
*/
function initShop() {
if (document.body.classList.contains('woocommerce')) {
handleShopSidebar();
}

/**
* Add prev and next
*
* @param {Node} targetNode
* @param {Node} slider
* @param {string} vertical
*/
function addNextPrev(targetNode, slider, vertical = false) {
const $next = $('<span/>')
.addClass('next dashicons')
.addClass(
'dashicons-arrow-' + (vertical ? 'down' : 'right') + '-alt2'
);
const $prev = $('<span/>')
.addClass('prev dashicons')
.addClass(
'dashicons-arrow-' + (vertical ? 'up' : 'left') + '-alt2'
);

$prev.on('click', () => slider.goTo('prev'));
const countExclusive = document.querySelectorAll(
'.exclusive-products li.product'
).length;

$next.on('click', () => slider.goTo('next'));

const $target = $(targetNode);
$prev.insertBefore($target);
$next.insertAfter($target);
if (
document.body.classList.contains('nv-exclusive') &&
countExclusive > 4
) {
handleExclusiveSlider();
}

/**
* Handle the shop sidebar.
*/
function handleShopSidebar() {
const $sidebar = $('.shop-sidebar');
if (0 === $sidebar.length) {
return;
}
const $html = $('html');
const $toggles = $('.nv-sidebar-toggle');
$toggles.each(function () {
$(this).on('click', function (e) {
e.preventDefault();
$sidebar.toggleClass('sidebar-open');
$html.toggleClass('menu-openend');
});
});
}

/**
* Handle the shop sidebar.
*/
function handleShopSidebar() {
const sidebar = document.querySelector('.shop-sidebar');
if (sidebar === null) {
return;
}

/**
* Handle Exclusive Products Slider
*/
function handleExclusiveSlider() {
const $items = $('ul.exclusive-products');

if (0 === $items.length) return;

const responsive = {
0: { items: 2, gutter: 21 },
768: { items: 4, gutter: 27 },
1200: { items: 4, gutter: 30 },
};

const slider = tns({
container: 'ul.exclusive-products',
slideBy: 1,
arrowKeys: true,
loop: true,
autoplay: true,
items: 4,
edgePadding: 0,
autoplayButtonOutput: false,
autoplayHoverPause: true,
speed: 1000,
autoplayTimeout: 3000,
autoplayButton: false,
controls: false,
navPosition: 'bottom',
navContainer: '.dots-nav',
navAsThumbnails: true,
responsive,
const html = document.querySelector('html');
const toggles = document.querySelectorAll('.nv-sidebar-toggle') || [];
toggles.forEach((toggle) => {
toggle.addEventListener('click', function (e) {
e.preventDefault();
sidebar.classList.toggle('sidebar-open');
html.classList.toggle('menu-openend');
});
});
}

/**
* Handle Exclusive Products Slider
*/
function handleExclusiveSlider() {
const items = document.querySelector('ul.exclusive-products');

if (items === null) return false;

const responsive = {
0: { items: 2, gutter: 21 },
768: { items: 4, gutter: 27 },
1200: { items: 4, gutter: 30 },
};

const slider = tns({
container: 'ul.exclusive-products',
slideBy: 1,
arrowKeys: true,
loop: true,
autoplay: true,
items: 4,
edgePadding: 0,
autoplayButtonOutput: false,
autoplayHoverPause: true,
speed: 1000,
autoplayTimeout: 3000,
autoplayButton: false,
controls: false,
navPosition: 'bottom',
navContainer: '.dots-nav',
navAsThumbnails: true,
responsive,
});

// [If Sparks Variation Swatches is enabled and ] Initialize Sparks Variation Swatches for cloned products.
if ($('body').hasClass('sparks-vs-shop-attribute')) {
slider.events.on('transitionEnd', () => {
document.dispatchEvent(
new CustomEvent('sparksVSNeedsInit', {
detail: { container: '.products.exclusive' },
})
);
});
}
}

/**
* Handle Gallery Image Slider
*/
function handleGallerySlider() {
const $galleryNav = $('ol.flex-control-nav');

if (0 === $galleryNav.length) return;

const isDesktop = window.innerWidth >= 992;

const slider = tns({
container: 'ol.flex-control-nav',
items: 4,
axis: isDesktop ? 'vertical' : 'horizontal',
slideBy: 'page',
rewind: true,
loop: false,
nav: false,
controls: false,
mouseDrag: true,
// [If Sparks Variation Swatches is enabled and ] Initialize Sparks Variation Swatches for cloned products.
if (document.body.classList.contains('sparks-vs-shop-attribute')) {
slider.events.on('transitionEnd', () => {
document.dispatchEvent(
new CustomEvent('sparksVSNeedsInit', {
detail: {
container: '.products.exclusive',
},
})
);
});

addNextPrev(
$('.woocommerce-product-gallery .tns-inner')[0],
slider,
isDesktop
);
}
}

/**
* Run JS on load.
*/
$(function () {
initShop();
});
})(jQuery);
/**
* Run JS on load.
*/
window.addEventListener('load', initShop);
92 changes: 0 additions & 92 deletions assets/scss/components/compat/woocommerce/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,95 +56,3 @@
}
}
}

body:not(.nv-left-gallery):not(.sp-slider-gallery):not([class*="related-products-columns-"]) {

.tns-ovh {
display: flex;
align-items: center;
cursor: pointer;
}

.tns-inner {
overflow: hidden;
}

.tns-visually-hidden {
display: none;
}

/* Make WooCommerce gallery vertical on desktop */
@media (min-width: 992px) {

div.product {

.onsale {
left: 110px;
}

div.images {
display: flex;
flex-direction: row-reverse;
gap: 10px;

.tns-ovh {
width: 100px;
flex-direction: column;
position: relative;

.dashicons {
position: absolute;
z-index: 1;
color: var(--nv-text-color);
width: 100px;
text-align: center;

&.prev {
top: 0;
}

&.next {
bottom: 0;
}

&:hover {
background-color: var(--nv-site-bg);
}
}
}

.flex-viewport {
width: calc(100% - 100px);
}

.flex-control-nav {
display: flex;
flex-direction: column;
width: 100px;
margin-top: -5px;

li {
width: 100px;
}
}
}
}
}

/* On mobile, keep horizontal layout */
@media (max-width: 991px) {

div.product {

div.images {

.flex-control-nav {
flex-direction: row;
width: auto;
max-height: none;
display: flex;
}
}
}
}
}
9 changes: 1 addition & 8 deletions inc/core/front_end.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -465,16 +465,9 @@ private function add_scripts() {
}

if ( class_exists( 'WooCommerce', false ) && is_woocommerce() ) {
wp_register_script( 'neve-shop-script', NEVE_ASSETS_URL . 'js/build/modern/shop.js', array( 'jquery', 'wc-single-product' ), NEVE_VERSION, true );
wp_register_script( 'neve-shop-script', NEVE_ASSETS_URL . 'js/build/modern/shop.js', array(), NEVE_VERSION, true );
wp_enqueue_script( 'neve-shop-script' );
wp_script_add_data( 'neve-shop-script', 'async', true );
wp_localize_script(
'neve-shop-script',
'neveShopSlider',
array(
'isSparkActive' => is_plugin_active( 'sparks-for-woocommerce/sparks-for-woocommerce.php' ),
)
);
}

if ( $this->should_load_comments_reply() ) {
Expand Down
Loading