i’m working on a website. it has a component called product category. and this component has 5 products type as a slick sliders format. and thiws website has another page called product page. this porduct page has horizontal products tab. those product types are listed with their description in the products tab. when we click the specific product type in the home page that link should goes to the same exact product in the products tab and open the exact product and its description. also the url should be change respect to the product type name.
this is the code for product type category homepage component code
<div class="slick-track" style="opacity: 1; width: 1410px; transform: translate3d(0px, 0px, 0px);">
<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 242px;">
<div>
<li class="xList-item" style="width: 100%; display: inline-block;">
<a href="/ceylon-tea-products/#black-tea" tabindex="0">
<picture>
<img class="" src="/images/site-specific/home/tea-collection.png" title="Black Tea" alt="Black Tea" varid="var-1573120738681" loading="lazy">
</picture>
<h4>Black Tea<br><br></h4>
</a>
</li>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="1" aria-hidden="false" style="width: 242px;">
<div>
<li class="xList-item" style="width: 100%; display: inline-block;">
<a href="/ceylon-tea-products/#flavoured-tea" tabindex="0">
<picture>
<img class="" src="/images/site-specific/home/tea-collection.png" title="Flavoured Tea" alt="Flavoured Tea" varid="var-1573120738681" loading="lazy">
</picture>
<h4>Flavoured Tea<br><br></h4>
</a>
</li>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="2" aria-hidden="false" style="width: 242px;">
<div>
<li class="xList-item" style="width: 100%; display: inline-block;">
<a href="/ceylon-tea-products/#green-tea" tabindex="0">
<picture>
<img class="" src="/images/site-specific/home/tea-collection.png" title="Green Tea" alt="Green Tea" varid="var-1573120738681" loading="lazy">
</picture>
<h4>Green Tea<br><br></h4>
</a>
</li>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="3" aria-hidden="false" style="width: 242px;">
<div>
<li class="xList-item" style="width: 100%; display: inline-block;">
<a href="/ceylon-tea-products/#herbal-tea" tabindex="0">
<picture>
<img class="" src="/images/site-specific/home/tea-collection.png" title="Herbal Tea" alt="Herbal Tea" varid="var-1573120738681" loading="lazy">
</picture>
<h4>Herbal Tea<br><br></h4>
</a>
</li>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="4" aria-hidden="false" style="width: 242px;">
<div>
<li class="xList-item" style="width: 100%; display: inline-block;">
<a href="/ceylon-tea-products/#red-tea" tabindex="0">
<picture>
<img class="" src="/images/site-specific/home/tea-collection.png" title="Red Tea" alt="Red Tea" varid="var-1573120738681" loading="lazy">
</picture>
<h4>Red Tea<br><br></h4>
</a>
</li>
</div>
</div>
</div>
this is the code for the products in the product tabs
<div class="slick-track" style="opacity: 1; width: 880px; transform: translate3d(0px, 0px, 0px);">
<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 126px;">
<div>
<li id="item_0" class="" style="width: 100%; display: inline-block;"><span>Black Tea</span></li>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="1" aria-hidden="false" style="width: 126px;">
<div>
<li id="item_1" style="width: 100%; display: inline-block;" class="active"><span>Flavoured Tea</span></li>
</div>
55555 </div>
<div class="slick-slide slick-active" data-slick-index="2" aria-hidden="false" style="width: 126px;">
<div>
<li id="item_2" style="width: 100%; display: inline-block;"><span>Green Tea</span></li>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="3" aria-hidden="false" style="width: 126px;">
<div>
<li id="item_3" style="width: 100%; display: inline-block;"><span>Herbal Tea</span></li>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="4" aria-hidden="false" style="width: 126px;">
<div>
<li id="item_4" style="width: 100%; display: inline-block;"><span>Red Tea</span></li>
</div>
</div>
</div>
this is the code for the products description for the each products which are in the product tabs(I have mentioned only the necessary codes)
<li class="xList-item item_0" data-title="Black Tea" data-category="black-tea">//product description will come here</li>
<li class="xList-item item_1 active" data-title="Flavoured Tea" data-category="flavoured-tea">//product description will come here</li>
<li class="xList-item item_2" data-title="Green Tea" data-category="green-tea">//product description will come here</li>
<li class="xList-item item_3" data-title="Herbal Tea" data-category="herbal-tea">//product description will come here</li>
<li class="xList-item item_4" data-title="Red Tea" data-category="red-tea">//product description will come here</li>
this is the javascript code
$( document ).ready(function() {
const tabs = document.querySelectorAll('.slick-slide');
const tabContent = document.querySelectorAll('.xList-item');
// Set the first tab as active by default
tabContent[0].classList.add('active');
tabs.forEach((tab) => {
tab.addEventListener('click', (e) => {
e.preventDefault();
const target = tab.getAttribute('href');
const tabId = tab.getAttribute('id');
let currentTab = document.querySelector('.xList-item.active');
if (currentTab) {
currentTab.classList.remove('active');
}
document.querySelector(`#${tabId}`).classList.add('active');
window.location.hash = target;
});
});
console.log(window.location.hash);
// Parse the URL hash and activate the corresponding tab
const hash = window.location.hash;
if (hash) {
const tabId = hash.replace('#', '');
const tabLink = document.querySelector(`a[href="${hash}"]`);
if (tabLink) {
const tabPane = document.querySelector(`#${tabId}`);
if (tabPane) {
// Remove active class from all tabs
tabContent.forEach((tab) => tab.classList.remove('active'));
// Add active class to the selected tab
tabPane.classList.add('active');
}
}
}
});
// Tab Activation By Hash
addToAutoLoadLibs('/vendor-lib/slick/slick.min.js', scrollToTab);
function scrollToTab(){
const windowHash = window.location.hash;
if (windowHash) {
const windowHashValue = windowHash.replace('#', '');
const $tabListItem = $('.r2g-two-level-tab-horizontal').find(`.products-list[data-hash="${windowHashValue}"]`);
const $xList = $tabListItem.closest('.xList-item');
const classList = $xList[0].classList;
tabId = classList[1];
if (tabId) {
const $tabEl = $(`.tabs-horizontal .title-wrapper li[id="${tabId}"]`);
if($tabEl.length){
$tabEl.click();
$('html, body').animate({
scrollTop: $tabEl.offset().top - 100
}, 1000);
}
}
}
$('.tabs-horizontal .title-wrapper .slick-slide').on('click', function() {
const tabIndex = $(this).attr('data-slick-index');
const tabContent = document.querySelector(`.xList-item.item_${tabIndex}`);
if (tabContent) {
const hashTag = tabContent.getAttribute('data-category');
if (hashTag) {
// Update the URL hash
window.location.hash = hashTag;
}
}
});
}
these are working well. i mean in the desktop view these js codes are working well. but in mobile view it does not work. i used drop down list for showing the product and it’s description instead of products tab in the product page.
this is the code for drop down that used instead of the product tabs
<select class="form-control mobile-only">
<option value="item_0">Black Tea</option>
<option value="item_1">Flavoured Tea</option>
<option value="item_2">Green Tea</option>
<option value="item_3">Herbal Tea</option>
<option value="item_4">Red Tea</option>
</select>
so for this code the the functionalities doesn’t work. means when i click the specific product in the homepage that link only goes to the product page only. it does not go tho the exact product and does not open the exact product and it’s description and url also not updated
i need to work this functionalities also in the mobile view same as desktop.