☰

ShopperStop Product Gallery Modifications

Image and buttons modification for ShopperStop product gallery

  1. // ==UserScript==
  2. // @name         ShopperStop Product Gallery Modifications
  3. // @description  Image and buttons modification for ShopperStop product gallery
  4. // @author       https://github.com/amitpatil321
  5. // @namespace    https://github.com/amitpatil321/ShopperStop-Product-Gallery-Modifications-Tampermonkey
  6. // @version      0.1
  7. // @match        https://www.shoppersstop.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=shoppersstop.com
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13.  
  14. (function () {
  15.     'use strict';
  16.  
  17.     function resizeGallery(){
  18.         const dialog = document.querySelector('[data-testid="PdpDialogImageCarousel"]');
  19.         if (!dialog) return;
  20.  
  21.         const image = dialog.querySelector(".pdp-dialog-image");
  22.         if(image){
  23.             image.style.maxWidth = "600px";
  24.         }
  25.  
  26.         // Next prev image resize
  27.         const galleryButtons = dialog.querySelectorAll(".slick-slider .slick-arrow");
  28.         if(galleryButtons){
  29.             galleryButtons.forEach(button => {
  30.                 button.style.width = "60px";
  31.                 button.style.height = "60px";
  32.             });
  33.         }
  34.     }
  35.  
  36.  
  37.     document.body.addEventListener('click', function (event) {
  38.         const productImage = event.target.closest('img.object-contain');
  39.         if (productImage) {
  40.             setTimeout(() => resizeGallery(), 50);
  41.         }
  42.         const navButtons = event.target.closest('.slick-next');
  43.         if (navButtons) {
  44.             setTimeout(() => resizeGallery(), 550);
  45.         }
  46.     });
  47. })();