Shopify themes, liquid, logos, and UX
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
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
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
great, are you able to code
so can you please share the theme.js code so i will check and let you know
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.com/embed"],' +
'.rte iframe[src*="player.vimeo"],' +
'.custom__item-inner--html iframe[src*="youtube.com/embed"],' +
'.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');
}
}
thanks for code something is missing on this code if possible to add me on staff so i will try
Thank you for your help,
Unfortunately I cannot but can you tell me what is missing ?
i can't see testimonial slider code script
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
thanks for it
please check optioin
https://kenwheeler.github.io/slick/
or add me on staff so i will quick fix
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 ?
try this
also add me staff so i will quick fix
Thank's for the help, however it doesnt work like that, the arrows do not show. Is it correct ?
Do you know why it doesn't show ?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024