THUMBNAIL SLIDER SHOPIFY DEBUT THEME

-----------------------------------------------------------------------------------------------------------------------------------------------

1) CHANGE TRAP FOCUS WITH BELOW CODE IN SHOPIFY IN THEME JS FILE

Read More:

https://www.youtube.com/watch?v=gB9ATxrjlCs

-----------------------------------------------------------------------------------------------------------------------------------------------

/**
* Traps the focus in a particular container
* @param {object} options - Options to be used
* @param {jQuery} options.$container - Container to trap focus within
* @param {jQuery} options.$elementToFocus - Element to be focused when focus leaves container
* @param {string} options.namespace - Namespace used for new focus event handler
*/
trapFocus: function(options) {
var eventName = options.namespace
? 'focusin.' + options.namespace
: 'focusin';
if (!options.$elementToFocus) {
options.$elementToFocus = options.$container;
}
options.$container.attr('tabindex', '-1');
options.$elementToFocus.focus();
$(document).off('focusin');

$(document).on(eventName, function(evt) {
if (
options.$container[0] !== evt.target &&
!options.$container.has(evt.target).length
) {
options.$container.focus();
}
});
},
/**
* Removes the trap of focus in a particular container
* @param {object} options - Options to be used
* @param {jQuery} options.$container - Container to trap focus within
* @param {string} options.namespace - Namespace used for new focus event handler
*/
removeTrapFocus: function(options) {
var eventName = options.namespace
? 'focusin.' + options.namespace
: 'focusin';
if (options.$container && options.$container.length) {
options.$container.removeAttr('tabindex');
}
$(document).off(eventName);
}
};

-----------------------------------------------------------------------------------------------------------------------------------------------

2) REMOVE BELOW ADD ARIA CODE IN SHOPIFY IN THEME JS FILE

-----------------------------------------------------------------------------------------------------------------------------------------------

/**
* Add aria-describedby attribute to external and new window links
*
* @param {object} options - Options to be used
* @param {object} options.messages - Custom messages to be used
* @param {jQuery} options.$links - Specific links to be targeted
*/
accessibleLinks: function(options) {
var body = document.querySelector('body');
var idSelectors = {
newWindow: 'a11y-new-window-message',
external: 'a11y-external-message',
newWindowExternal: 'a11y-new-window-external-message'
};
if (options.$links === undefined || !options.$links.jquery) {
options.$links = $('a[href]:not([aria-describedby])');
}
function generateHTML(customMessages) {
if (typeof customMessages !== 'object') {
customMessages = {};
}
var messages = $.extend(
{
newWindow: 'Opens in a new window.',
external: 'Opens external website.',
newWindowExternal: 'Opens external website in a new window.'
},
customMessages
);
var container = document.createElement('ul');
var htmlMessages = '';
for (var message in messages) {
htmlMessages +=
'<li id=' + idSelectors[message] + '>' + messages[message] + '</li>';
}
container.setAttribute('hidden', true);
container.innerHTML = htmlMessages;
body.appendChild(container);
}
function _externalSite($link) {
var hostname = window.location.hostname;
return $link[0].hostname !== hostname;
}
$.each(options.$links, function() {
var $link = $(this);
var target = $link.attr('target');
var rel = $link.attr('rel');
var isExternal = _externalSite($link);
var isTargetBlank = target === '_blank';
if (isExternal) {
$link.attr('aria-describedby', idSelectors.external);
}
if (isTargetBlank) {
if (rel === undefined || rel.indexOf('noopener') === -1) {
$link.attr('rel', function(i, val) {
var relValue = val === undefined ? '' : val + ' ';
return relValue + 'noopener';
});
}
$link.attr('aria-describedby', idSelectors.newWindow);
}
if (isExternal && isTargetBlank) {
$link.attr('aria-describedby', idSelectors.newWindowExternal);
}
});
generateHTML(options.messages);
}
};

-----------------------------------------------------------------------------------------------------------------------------------------------

3) CHANGE INTBREAKPOINT WITH BELOW CODE IN SHOPIFY IN THEME JS FILE

-----------------------------------------------------------------------------------------------------------------------------------------------

_initBreakpoints: function() {
var self = this;
enquire.register(this.settings.mediaQuerySmall, {
match: function() {
// initialize thumbnail slider on mobile if more than three thumbnails
if ($(self.selectors.productThumbImages).length > 1) {
self._initThumbnailSlider();
}
// destroy image zooming if enabled
if (self.settings.zoomEnabled) {
$(self.selectors.productImageWraps).each(function() {
_destroyZoom(this);
});
}
self.settings.bpSmall = true;
},
unmatch: function() {          
if (self.settings.sliderActive) {
self._destroyThumbnailSlider();
}
self.settings.bpSmall = false;
}
});
enquire.register(this.settings.mediaQueryMediumUp, {
match: function() {
if ($(self.selectors.productThumbImages).length > 1) {
self._initThumbnailSlider();
}
if (self.settings.zoomEnabled) {
$(self.selectors.productImageWraps).each(function() {            
_enableZoom(this);        
});
}
}
});
},

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

THUMBNAIL WRAPPER CODE CHANGE IN SECTION FOLDER PRODUCT TEMPLATE LIQUID FILE

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link  thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
{% include 'icon-chevron-left' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
</button>
{% endif %}
<ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}">
{% for image in product.images %}
<li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item no-clear">
<a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ image.id }}"
{% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link  thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
{% include 'icon-chevron-right' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
</button>
{% endif %}
</div>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

ADD CSS CODE IN theme.scss.liquid

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

@include media-query($medium-up) { 
.no-clear {
clear: none !important; 
}
.thumbnails-slider_prev.thumbnails-slider_prev--product-template {
display: inline-block;
position: absolute;
left: -9%;
top: 60%;
transform: translateY(-60%);
z-index: 10000;
padding-left: 0;
}
.thumbnails-slider_next.thumbnails-slider_next--product-template {
display: inline-block;
position: absolute;
right: -9%;
top: 60%;
transform: translateY(-60%);
z-index: 10000;
}
.product-single__photos {
position: relative; 
padding-left: 0;
}
.product-single__thumbnails-item.js.no-clear.slick-slide.slick-active {
padding-top: 0;
}
.thumbnails-wrapper.thumbnails-slider--active {
position: relative;
}
.left--arrow {
position: absolute;
top: 60%;
transform: translateY(-60%);
left: -9%;
z-index: 10000;
}
.right--arrow {
position: absolute;
top: 60%;
transform: translateY(-60%);
right: -9%;
z-index: 10000;
}
.slick-hidden { 
display: none !important; 
}
.slick-track {
margin-top: 10px;
}
.thumbnails-slider--active {
max-width: 92%;
margin: 0 auto;
}
.product-single__thumbnail {
margin: 3px 8px;
}
}
.thumbnails-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.thumbnails-slider__prev {
left: -50px;
}
.thumbnails-slider__next {
right: -50px;
}
@media screen and (max-width: 749px) {
.thumbnails-slider__prev {
left: -20px;
}
.thumbnails-slider__next {
right: -20px;
}
}

-----------------------------------------------------------------------------------------------------------------------------------------------

Search This Blog

Shopify Login

THUMBNAIL SLIDER SHOPIFY DEBUT THEME

Comments

Post a Comment

Popular posts from this blog

ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣

SLICK SLIDER SOURCES

ADD RECENTLY VIEWED PRODUCTS IN SHOPIFY