Debut Theme: Testimonial Slider add Arrows

Store Design
1

Hello Community,

I would like to add some arrows on both sides of my testimonial sliders to help to navigate.

Thank you in advance for your help.

in case : dobblecorsica.fr

pw: dobblecorsica

2 Likes
2

@aeriondigital

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

1 Like
3

I have tried to add this code :

theme.Quotes = (function() {
var config = {
mediaQuerySmall: ‘screen and (max-width: 749px)’,
mediaQueryMediumUp: ‘screen and (min-width: 750px)’,
slideCount: 0
};

var defaults = {
accessibility: true,
arrows: true,
dots: false,
autoplay: false,
touchThresold: 20,
autoplaySpeed: 6000,
slidesToShow: 3,
slidesToScroll: 3
};

but is doesn’t seem to work

1 Like
4

@aeriondigital

great, are you able to code

so can you please share the theme.js code so i will check and let you know

2 Likes
5

I send you the last part of my code as it is too long to share

Thank’s in advance for your help.

theme.ProductRecommendations = (function() {
function ProductRecommendations(container) {
var baseUrl = container.dataset.baseUrl;
var productId = container.dataset.productId;
var recommendationsSectionUrl =
baseUrl +
‘?section_id=product-recommendations&product_id=’ +
productId +
‘&limit=4’;

window.performance.mark(
‘debut:product:fetch_product_recommendations.start’
);

fetch(recommendationsSectionUrl)
.then(function(response) {
return response.text();
})
.then(function(productHtml) {
if (productHtml.trim() === ‘’) return;

container.innerHTML = productHtml;
container.innerHTML = container.firstElementChild.innerHTML;

window.performance.mark(
‘debut:product:fetch_product_recommendations.end’
);

performance.measure(
‘debut:product:fetch_product_recommendations’,
‘debut:product:fetch_product_recommendations.start’,
‘debut:product:fetch_product_recommendations.end’
);
});
}

return ProductRecommendations;
})();

theme.Quotes = (function() {
var config = {
mediaQuerySmall: ‘screen and (max-width: 749px)’,
mediaQueryMediumUp: ‘screen and (min-width: 750px)’,
slideCount: 0
};

var defaults = {
canUseKeyboardArrows: false,
type: ‘slide’,
slidesToShow: 3
};

function Quotes(container) {
this.container = container;
var sectionId = container.getAttribute(‘data-section-id’);
this.slider = document.getElementById(‘Quotes-’ + sectionId);

this.sliderActive = false;

this.mobileOptions = Object.assign({}, defaults, {
canUseTouchEvents: true,
slidesToShow: 1
});

this.desktopOptions = Object.assign({}, defaults, {
slidesToShow: Math.min(
defaults.slidesToShow,
this.slider.getAttribute(‘data-count’)
)
});

this.initMobileSlider = this._initMobileSlider.bind(this);
this.initDesktopSlider = this._initDesktopSlider.bind(this);

this.mqlSmall = window.matchMedia(config.mediaQuerySmall);
this.mqlSmall.addListener(this.initMobileSlider);

this.mqlMediumUp = window.matchMedia(config.mediaQueryMediumUp);
this.mqlMediumUp.addListener(this.initDesktopSlider);

this.initMobileSlider();
this.initDesktopSlider();
}

Quotes.prototype = Object.assign({}, Quotes.prototype, {
onUnload: function() {
this.mqlSmall.removeListener(this.initMobileSlider);
this.mqlMediumUp.removeListener(this.initDesktopSlider);
this.slideshow.destroy();
},

// eslint-disable-next-line no-unused-vars
onBlockSelect: function(evt) {
var slide = document.querySelector(
‘.quotes-slide–’ + evt.detail.blockId
);
var slideIndex = Number(slide.getAttribute(‘data-slider-slide-index’));

if (this.mqlMediumUp.matches) {
slideIndex = Math.max(
0,
Math.min(slideIndex, this.slideshow.slides.length - 3)
);
}

this.slideshow.goToSlideByIndex(slideIndex);
},

_initMobileSlider: function() {
if (this.mqlSmall.matches) {
this._initSlider(this.mobileOptions);
}
},

_initDesktopSlider: function() {
if (this.mqlMediumUp.matches) {
this._initSlider(this.desktopOptions);
}
},

// eslint-disable-next-line no-unused-vars
_initSlider: function(args) {
if (this.sliderActive) {
this.slideshow.destroy();
this.sliderActive = false;
}

this.slideshow = new theme.Slideshow(this.container, args);
this.sliderActive = true;
}
});

return Quotes;
})();

theme.SlideshowSection = (function() {
var selectors = {
sliderMobileContentIndex: ‘[data-slider-mobile-content-index]’
};

function SlideshowSection(container) {
var sectionId = container.dataset.sectionId;

this.container = container;
this.eventHandlers = {};
this.slideshowDom = container.querySelector(‘#Slideshow-’ + sectionId);
this.sliderMobileContentIndex = container.querySelectorAll(
selectors.sliderMobileContentIndex
);

this.slideshow = new theme.Slideshow(container, {
autoplay: this.slideshowDom.getAttribute(‘data-autorotate’) === ‘true’,
slideInterval: this.slideshowDom.getAttribute(‘data-speed’)
});
this._setupEventListeners();
}

return SlideshowSection;
})();

theme.SlideshowSection.prototype = Object.assign(
{},
theme.SlideshowSection.prototype,
{
_setupEventListeners: function() {
this.eventHandlers.onSliderSlideChanged = function(event) {
this._onSliderSlideChanged(event.detail);
}.bind(this);

this.container.addEventListener(
‘slider_slide_changed’,
this.eventHandlers.onSliderSlideChanged
);
},

_onSliderSlideChanged: function(slideIndex) {
var activeClass = ‘slideshow__text-content–mobile-active’;

this.sliderMobileContentIndex.forEach(function(element) {
if (
Number(element.getAttribute(‘data-slider-mobile-content-index’)) ===
slideIndex
) {
element.classList.add(activeClass);
} else {
element.classList.remove(activeClass);
}
});
},

onUnload: function() {
this.slideshow.destroy();
},

onBlockSelect: function(evt) {
if (this.slideshow.adaptHeight) {
this.slideshow.setSlideshowHeight();
}

// Get slide’s index using theme editor’s id
var slide = this.container.querySelector(
‘.slideshow__slide–’ + evt.detail.blockId
);
var slideIndex = slide.getAttribute(‘data-slider-slide-index’);

// Go to selected slide, pause auto-rotate
this.slideshow.setSlide(slideIndex);
this.slideshow.stopAutoplay();
},

onBlockDeselect: function() {
// Resume auto-rotate
this.slideshow.startAutoplay();
}
}
);

window.theme = window.theme || {};

theme.StoreAvailability = (function() {
var selectors = {
storeAvailabilityModalOpen: ‘[data-store-availability-modal-open]’,
storeAvailabilityModalProductTitle:
‘[data-store-availability-modal-product-title]’,
storeAvailabilityModalVariantTitle:
‘[data-store-availability-modal-variant-title]’
};

var classes = {
hidden: ‘hide’
};

function StoreAvailability(container) {
this.container = container;
this.productTitle = this.container.dataset.productTitle;
this.hasOnlyDefaultVariant =
this.container.dataset.hasOnlyDefaultVariant === ‘true’;
}

StoreAvailability.prototype = Object.assign({}, StoreAvailability.prototype, {
updateContent: function(variantId) {
var variantSectionUrl =
this.container.dataset.baseUrl +
‘/variants/’ +
variantId +
‘/?section_id=store-availability’;
var self = this;

var storeAvailabilityModalOpen = self.container.querySelector(
selectors.storeAvailabilityModalOpen
);

this.container.style.opacity = 0.5;
if (storeAvailabilityModalOpen) {
storeAvailabilityModalOpen.disabled = true;
storeAvailabilityModalOpen.setAttribute(‘aria-busy’, true);
}

fetch(variantSectionUrl)
.then(function(response) {
return response.text();
})
.then(function(storeAvailabilityHTML) {
if (storeAvailabilityHTML.trim() === ‘’) {
return;
}
self.container.innerHTML = storeAvailabilityHTML;
self.container.innerHTML = self.container.firstElementChild.innerHTML;
self.container.style.opacity = 1;

// Need to query this again because we updated the DOM
storeAvailabilityModalOpen = self.container.querySelector(
selectors.storeAvailabilityModalOpen
);

if (!storeAvailabilityModalOpen) {
return;
}

storeAvailabilityModalOpen.addEventListener(
‘click’,
self._onClickModalOpen.bind(self)
);

self.modal = self._initModal();
self._updateProductTitle();
if (self.hasOnlyDefaultVariant) {
self._hideVariantTitle();
}
});
},

clearContent: function() {
this.container.innerHTML = ‘’;
},

_onClickModalOpen: function() {
this.container.dispatchEvent(
new CustomEvent(‘storeAvailabilityModalOpened’, {
bubbles: true,
cancelable: true
})
);
},

_initModal: function() {
return new window.Modals(
‘StoreAvailabilityModal’,
‘store-availability-modal’,
{
close: ‘.js-modal-close-store-availability-modal’,
closeModalOnClick: true,
openClass: ‘store-availabilities-modal–active’
}
);
},

_updateProductTitle: function() {
var storeAvailabilityModalProductTitle = this.container.querySelector(
selectors.storeAvailabilityModalProductTitle
);
storeAvailabilityModalProductTitle.textContent = this.productTitle;
},

_hideVariantTitle: function() {
var storeAvailabilityModalVariantTitle = this.container.querySelector(
selectors.storeAvailabilityModalVariantTitle
);
storeAvailabilityModalVariantTitle.classList.add(classes.hidden);
}
});

return StoreAvailability;
})();

theme.VideoSection = (function() {
function VideoSection(container) {
container.querySelectorAll(‘.video’).forEach(function(el) {
theme.Video.init(el);
theme.Video.editorLoadVideo(el.id);
});
}

return VideoSection;
})();

theme.VideoSection.prototype = Object.assign({}, theme.VideoSection.prototype, {
onUnload: function() {
theme.Video.removeEvents();
}
});

theme.heros = {};

theme.HeroSection = (function() {
function HeroSection(container) {
var sectionId = container.getAttribute(‘data-section-id’);
var hero = ‘#Hero-’ + sectionId;
theme.heros[hero] = new theme.Hero(hero, sectionId);
}

return HeroSection;
})();

window.theme = window.theme || {};

var selectors = {
disclosureLocale: ‘[data-disclosure-locale]’,
disclosureCurrency: ‘[data-disclosure-currency]’
};

theme.FooterSection = (function() {
function Footer(container) {
this.container = container;
this.cache = {};
this.cacheSelectors();

if (this.cache.localeDisclosure) {
this.localeDisclosure = new theme.Disclosure(this.cache.localeDisclosure);
}

if (this.cache.currencyDisclosure) {
this.currencyDisclosure = new theme.Disclosure(
this.cache.currencyDisclosure
);
}
}

Footer.prototype = Object.assign({}, Footer.prototype, {
cacheSelectors: function() {
this.cache = {
localeDisclosure: this.container.querySelector(
selectors.disclosureLocale
),
currencyDisclosure: this.container.querySelector(
selectors.disclosureCurrency
)
};
},

onUnload: function() {
if (this.cache.localeDisclosure) {
this.localeDisclosure.destroy();
}

if (this.cache.currencyDisclosure) {
this.currencyDisclosure.destroy();
}
}
});

return Footer;
})();

document.addEventListener(‘DOMContentLoaded’, function() {
var sections = new theme.Sections();

sections.register(‘cart-template’, theme.Cart);
sections.register(‘product’, theme.Product);
sections.register(‘collection-template’, theme.Filters);
sections.register(‘product-template’, theme.Product);
sections.register(‘header-section’, theme.HeaderSection);
sections.register(‘map’, theme.Maps);
sections.register(‘slideshow-section’, theme.SlideshowSection);
sections.register(‘store-availability’, theme.StoreAvailability);
sections.register(‘video-section’, theme.VideoSection);
sections.register(‘quotes’, theme.Quotes);
sections.register(‘hero-section’, theme.HeroSection);
sections.register(‘product-recommendations’, theme.ProductRecommendations);
sections.register(‘footer-section’, theme.FooterSection);

theme.customerTemplates.init();

// Theme-specific selectors to make tables scrollable
var tableSelectors = ‘.rte table,’ + ‘.custom__item-inner–html table’;

slate.rte.wrapTable({
tables: document.querySelectorAll(tableSelectors),
tableWrapperClass: ‘scrollable-wrapper’
});

// Theme-specific selectors to make iframes responsive
var iframeSelectors =
‘.rte iframe[src*=“YouTube”],’ +
‘.rte iframe[src*=“player.vimeo”],’ +
‘.custom__item-inner–html iframe[src*=“YouTube”],’ +
‘.custom__item-inner–html iframe[src*=“player.vimeo”]’;

slate.rte.wrapIframe({
iframes: document.querySelectorAll(iframeSelectors),
iframeWrapperClass: ‘video-wrapper’
});

// Common a11y fixes
slate.a11y.pageLinkFocus(
document.getElementById(window.location.hash.substr(1))
);

var inPageLink = document.querySelector(‘.in-page-link’);
if (inPageLink) {
inPageLink.addEventListener(‘click’, function(evt) {
slate.a11y.pageLinkFocus(
document.getElementById(evt.currentTarget.hash.substr(1))
);
});
}

document.querySelectorAll(‘a[href=“#”]’).forEach(function(anchor) {
anchor.addEventListener(‘click’, function(evt) {
evt.preventDefault();
});
});

slate.a11y.accessibleLinks({
messages: {
newWindow: theme.strings.newWindow,
external: theme.strings.external,
newWindowExternal: theme.strings.newWindowExternal
},
links: document.querySelectorAll(
‘a[href]:not([aria-describedby]), .product-single__thumbnail’
)
});

theme.FormStatus.init();

var selectors = {
image: ‘[data-image]’,
lazyloaded: ‘.lazyloaded’
};

document.addEventListener(‘lazyloaded’, function(evt) {
var image = evt.target;

removeImageLoadingAnimation(image);

if (document.body.classList.contains(‘template-index’)) {
var mainContent = document.getElementById(‘MainContent’);

if (mainContent && mainContent.children && mainContent.children.length) {
var firstSection = document.getElementsByClassName(‘index-section’)[0];

if (!firstSection.contains(image)) return;

window.performance.mark(‘debut:index:first_image_visible’);
}
}

if (image.hasAttribute(‘data-bgset’)) {
var innerImage = image.querySelector(selectors.lazyloaded);

if (innerImage) {
var alt = image.getAttribute(‘data-alt’);
var src=innerImage.hasAttribute(‘data-src’)
? innerImage.getAttribute(‘data-src’)
: image.getAttribute(‘data-bg’);

image.setAttribute(‘alt’, alt ? alt : ‘’);
image.setAttribute(‘src’, src ? src : ‘’);
}
}

if (!image.hasAttribute(‘data-image’)) {
return;
}
});

// When the theme loads, lazysizes might load images before the “lazyloaded”
// event listener has been attached. When this happens, the following function
// hides the loading placeholders.
function onLoadHideLazysizesAnimation() {
var alreadyLazyloaded = document.querySelectorAll(‘.lazyloaded’);
alreadyLazyloaded.forEach(function(image) {
removeImageLoadingAnimation(image);
});
}

onLoadHideLazysizesAnimation();

document.addEventListener(
‘touchstart’,
function() {
theme.Helpers.setTouch();
},
{ once: true }
);

if (document.fonts) {
document.fonts.ready.then(function() {
window.performance.mark(‘debut:fonts_loaded’);
});
}
});

// Youtube API callback
// eslint-disable-next-line no-unused-vars
function onYouTubeIframeAPIReady() {
theme.Video.loadVideos();
theme.ProductVideo.loadVideos(theme.ProductVideo.hosts.youtube);
}

function removeImageLoadingAnimation(image) {
// Remove loading animation
var imageWrapper = image.hasAttribute(‘data-image-loading-animation’)
? image
: image.closest(‘[data-image-loading-animation]’);

if (imageWrapper) {
imageWrapper.removeAttribute(‘data-image-loading-animation’);
}
}

6

@aeriondigital

thanks for code something is missing on this code if possible to add me on staff so i will try

7

Thank you for your help,

Unfortunately I cannot but can you tell me what is missing ?

8

@DCorsica

i can’t see testimonial slider code script

1 Like
9

theme.Quotes = (function() {
var config = {
mediaQuerySmall: ‘screen and (max-width: 749px)’,
mediaQueryMediumUp: ‘screen and (min-width: 750px)’,
slideCount: 0
};

var defaults = {
canUseKeyboardArrows: false,
type: ‘slide’,
slidesToShow: 3
};

It should be this part, otherwise with this link you can have the full theme.js

https://docs.google.com/document/d/1wVf5JGw2JPDQb4UWT-Eor4Mz5RBp9a9VZzZur9dTbyQ/edit?usp=sharing

@KetanKumar

1 Like
10

@DCorsica

thanks for it

please check optioin

https://kenwheeler.github.io/slick/

or add me on staff so i will quick fix

11

Thank you !

So I need to add $(‘.multiple-items’).slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3 });

But can you tell me after which line or which item in the code ?

@KetanKumar

12

@DCorsica

try this

KetanKumar_0-1615226020064.png
KetanKumar_0-1615226020064.png1920×1080 203 KB

also add me staff so i will quick fix

1 Like
13

@KetanKumar

Thank’s for the help, however it doesnt work like that, the arrows do not show. Is it correct ?

Screenshot 2021-03-09 at 10.02.19.png
Screenshot 2021-03-09 at 10.02.19.png1006×456 58.4 KB

Do you know why it doesn’t show ?