Jump to content

Polivantage

Member
  • Posts

    18
  • Joined

  • Last visited

Everything posted by Polivantage

  1. here is the solution: (replace exampleProductUrl with a product page that has at least 2 images - in my case it is https://www.polivantage.com/shop/p/infinity but yours would be custom to your site) <!--Add Product image arrows in shop categories--> <script> document.addEventListener('DOMContentLoaded', function() { const subString = 'shop'; const subStringTwo = 'shop/p/'; const getURL = window.location.href; const exampleProductUrl = "https://www.polivantage.com/shop/p/infinity"; if (getURL.includes(subString) && !getURL.includes(subStringTwo)) { const headerActions = document.querySelector('.header-actions'); let isTouch = false; function checkHeader() { const styles = window.getComputedStyle(headerActions); isTouch = styles.getPropertyValue('display') !== 'flex'; } function fetchAndCacheProductHtml(url) { if (!isTouch) { const cachedHtml = localStorage.getItem('cachedProductHtml'); if (cachedHtml) { cloneImageArrows(cachedHtml); } else { fetch(url) .then(response => response.text()) .then(html => { localStorage.setItem('cachedProductHtml', html); cloneImageArrows(html); }) .catch(error => { console.error('Error fetching product HTML:', error); }); } } else { fetch(url) .then(response => response.text()) .then(html => { cloneImageArrows(html); }) .catch(error => { console.error('Error fetching product HTML:', error); }); } } function cloneImageArrows(html) { const tempDiv = document.createElement('div'); tempDiv.innerHTML = html; const elementToClone = tempDiv.querySelector('.ProductItem-gallery-carousel-controls'); const products = document.querySelectorAll('.product-lists-item'); products.forEach((product, index) => { const allImages = product.querySelectorAll('.grid-item-image'); if (allImages.length >= 2) { const clonedElement = elementToClone.cloneNode(true); const productImage = product.querySelector('.grid-image'); productImage.prepend(clonedElement); clonedElement.id = `carousel${index + 1}`; clonedElement.classList.add('carousel', 'categoryArrows'); const leftArrow = clonedElement.querySelector('.ProductItem-gallery-prev'); const rightArrow = clonedElement.querySelector('.ProductItem-gallery-next'); leftArrow.classList.add('arrowButton', 'arrowPrev'); rightArrow.classList.add('arrowButton', 'arrowNext'); leftArrow.type = 'button'; rightArrow.type = 'button'; function adjustImageArrows() { if (!isTouch) { leftArrow.style.position = 'absolute'; leftArrow.style.left = '-14%'; leftArrow.style.transform = 'scale(0.333)'; rightArrow.style.position = 'absolute'; rightArrow.style.right = '-14%'; rightArrow.style.transform = 'scale(0.333)'; } else { leftArrow.style.position = 'absolute'; leftArrow.style.left = '0%'; leftArrow.style.transform = 'scale(1.2)'; rightArrow.style.position = 'absolute'; rightArrow.style.right = '0%'; rightArrow.style.transform = 'scale(1.2)'; } } adjustImageArrows(); productImage.addEventListener('click', function(event) { const clickedArrow = event.target.closest('.arrowButton'); if (!clickedArrow) return; event.preventDefault(); const direction = clickedArrow.classList.contains('arrowPrev') ? 'left' : 'right'; handleArrowClick(direction, allImages); }); function handleArrowClick(direction, images) { const imagesArray = Array.from(images); const currentImage = imagesArray.find(image => image.style.display === 'block' || image.style.opacity === '1'); let currentIndex = imagesArray.indexOf(currentImage); let newIndex; if (direction === 'left') { newIndex = currentIndex > 0 ? currentIndex - 1 : imagesArray.length - 1; } else { newIndex = currentIndex < imagesArray.length - 1 ? currentIndex + 1 : 0; } currentImage.style.display = 'none'; //currentImage.style.opacity = '0'; currentImage.classList.remove('active'); imagesArray[newIndex].style.display = 'block'; //imagesArray[newIndex].style.opacity = '1'; imagesArray[newIndex].classList.remove('grid-image-hover'); imagesArray[newIndex].classList.add('active'); } window.addEventListener('resize', function(event) { const prevIsTouch = isTouch; checkHeader(); if (isTouch !== prevIsTouch) { adjustImageArrows(); } }); } }); } checkHeader(); fetchAndCacheProductHtml(exampleProductUrl); } }); </script> and some css: .carousel { z-index: 9999; position: absolute; width: 100%; height: 100%; display: flex; align-items: center; } .grid-item-image { color: transparent; transition: opacity 1s ease-in-out !important; } .grid-item-image.active { opacity: 100% !important; }
  2. Hi, I am trying to add carousel controls, just as they are on individual product pages, onto the image previews of products inside shop categories. So that as you browse products, you can also preview all the individual images without actually going into the product page. Ideally it would be done with JS and maybe some CSS. I was able to identify the carousel controls class, on product page, as "ProductItem-gallery-carousel-controls" However, document.getElementsByClassName('ProductItem-gallery-carousel-controls')[0]; Returns only a valid element if they are already present. How do i create this exact element, or rather clone it (from where?), without it actually being loaded? Thanks, Leo. P.S. In case you are interested https://www.polivantage.com/shop/ <- thats where the carousel controls should go on every image (and subcategories) https://www.polivantage.com/shop/p/cloudy-zip-hoodie <- thats where i can identify the arrows (example product)
  3. i would like a solution for this polivantage.com same problem, but even on two different 4k screens, elements differ in size significantly with no other zoom options applied.
  4. i have the same issue. Would love some code to do this on desktop. Currently i have 3 images side by side, i want landscape ones to take up 2/3 spaces horizontally. Thanks in advance.
  5. I solved it. Here is the solution: <!--SEARCH BAR--> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> $(function(){ var getURL = window.location.href; var subString = 'shop'; let searchBlock = $('#block-yui_3_17_2_1_1717927882701_20949').attr('id','').addClass('header-search-bar'); if (getURL.includes(subString)) { $(searchBlock).insertAfter($('.nested-category-title')); $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content')); } else { searchBlock.remove(); } }) </script>
  6. Hi, I need some help with javascript. I want to remove a search bar (in mobile view especially) from my footer. - I (successfully) identify whether the url has shop in it. - then i have an "if" statement that should remove the whole search bar if shop is NOT mentioned in the url. - beforehand i am doing a function to move my search bar into another element on the page. This works well My problem is removing the search bar. <!--SEARCH BAR--> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> var getURL = window.location.href; var subString = 'shop'; $(function(){ let searchBlock = $('#block-yui_3_17_2_1_1717927882701_20949').attr('id','').addClass('header-search-bar'); $(searchBlock).insertAfter($('.nested-category-title')); $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content')); }) if (getURL.includes(subString)) { console.log('The URL contains the string "' + subString + '".'); } else { console.log('The URL does not contain the string "' + subString + '".'); $('#block-yui_3_17_2_1_1717927882701_20949').remove(); } </script> Please help! polivantage.com/shop
  7. I have the same white flashing issue on page change. my background is set to one color everywhere. still every time i navigate to a different page - prolonged white flash. Additionally when images start to load they first fill their space with white. Id rather have it transparent or same as background color. Can someone please help? I'd love some css or java if necessary.
  8. i have the same issue, any solution? also when images load gradually, they first appear white as the image is scanned in, can i change that to 0 opacity?
  9. Yes, like that! that would be amazing. How do I achieve this with css? PS: How do i display my shop categories on mobile within a category? Let's say I am in Shop->Category ; now i have no UI on mobile except for the header and footer, Id like an accessible way to change categories from within a category (on mobile). Why does the category menu disappear when i enter a category?
  10. could someone please help me achieve this? I want the button to gently scroll up to the top of the page, It has to appear when the user no longer sees the header and be sticky.
  11. I also would like to know how to add a button to the shopping cart page, that empties the cart.
  12. I need this too, how do I target that view options button in css?
  13. Same question, I want to display the product category in its own page, and also whenever you see it, let's say in the "all" category. So that I don't have to specify the type of product each time in the name, and it won't look silly when you are in its own category. Preferably with css, not java, can anyone do this? I imagine it isn't hard. I am looking into the solution myself, but alas, I am a noob.
  14. i can't do this via the app either. there is no setting for it, is there some code i can use? please help.
  15. Hi! I have the opposite issue whereby by mobile view is perfect, but i want the desktop view gallery to be smaller. https://www.polivantage.com/583544494043
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.