בקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש

[בנימין מחשבים]

@cannon חבר'ה, אם אתם כבר כאן אולי מישהו יכול לפתוח להם אתר חדש ודי...
האתר הזה עבר הרבה שינויים ושכלולים בשביל להפוך אותו לאתר-הכי-לא-נח-ברשת...

[עדלאידע]

@יום-חדש-מתחיל לשים בטמפרמונקי, נשאר במצב שבחרת גם אחרי רענון.

// ==UserScript==
// @name         כיווץ הסרגל כלים של משנת יוסף
// @namespace    http://tampermonkey.net/
// @version      1
// @description  הוספת כפתור כיווץ לסרגל כלים של משנת יוסף
// @match        https://mishnatyosef.org/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
'use strict';

GM_addStyle(`
  .sidebar nav > a,
  .sidebar nav > div,
  .sidebar div.px-2 > a.h-10 {
    margin-bottom: 4px !important;
  }
  .sidebar nav > .text-slate-400 {
    margin: 32px 0 8px !important;
  }
`);

const selectors = {
  sidebar: 'div.sidebar',
  container: 'div.md\\:flex.md\\:w-\\[196px\\]',
  main: '.md\\:pr-\\[196px\\]',
  topbar: 'div.fixed.z-30.bg-primary-900'
};

const classes = {
  expanded: 'md:w-[196px]',
  collapsed: 'md:w-20'
};

const widths = {
  expanded: '196px',
  collapsed: '69px'
};

const storageKey = 'sidebarIsCollapsed';

const waitFor = (selector, callback) => {
  const interval = setInterval(() => {
    const el = document.querySelector(selector);
    if (el) {
      clearInterval(interval);
      callback(el);
    }
  }, 200);
};

waitFor(selectors.sidebar, sidebar => {
  const container = document.querySelector(selectors.container);
  const main = document.querySelector(selectors.main);
  const topbar = document.querySelector(selectors.topbar);
  if (!container || !main || !topbar) return setTimeout(() => waitFor(selectors.sidebar, sidebar), 1000);

  [container, main].forEach(el => el.style.transition = 'width .3s, padding-right .3s');

  const logo = container.querySelector('img.logo');
  const logoContainer = logo?.closest('div.items-center');
  const badges = container.querySelectorAll('.bg-secondary-200');
  const headers = [...container.querySelectorAll('.text-slate-400')];
  const bottomSection = container.querySelector('.mb-\\[30px\\]');
  const nav = sidebar.querySelector('nav');

  if (nav) Object.assign(nav.style, {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between'
  });

  const navItems = [...container.querySelectorAll('nav a, .pointer-events-none, button.h-10')];
  navItems.forEach(el => {
    if (!el.querySelector('.sidebar-text')) {
      const text = el.innerText.trim();
      const icon = el.querySelector('.material-symbols-rounded');
      el.innerHTML = icon
        ? icon.outerHTML + `<span class="sidebar-text">${text.replace(icon.innerText, '').trim()}</span>`
        : `<span class="sidebar-text">${text}</span>`;
    }
  });

  const collapseBtn = document.createElement('a');
  collapseBtn.style.cursor = 'pointer';
  collapseBtn.className = 'group flex items-center px-2 py-2 text-base font-medium rounded-[4px] text-primary-200 hover:text-primary-500 hover:bg-purple_semantic h-10';
  collapseBtn.innerHTML = `<span class="material-symbols-rounded">chevron_right</span><span class="sidebar-text"> כווץ סרגל</span>`;
  collapseBtn.onclick = e => {
    e.preventDefault();
    const isCollapsed = container.classList.contains(classes.collapsed);
    toggleSidebar(!isCollapsed);
    localStorage.setItem(storageKey, !isCollapsed);
  };

  const wrap = document.createElement('div');
  wrap.className = 'flex flex-col px-2';
  wrap.append(collapseBtn);
  bottomSection?.before(wrap);

  function toggleSidebar(collapsed) {
    main.style.paddingRight = collapsed ? widths.collapsed : widths.expanded;
    container.classList.toggle(classes.expanded, !collapsed);
    container.classList.toggle(classes.collapsed, collapsed);

    topbar.style.right = `calc(${collapsed ? widths.collapsed : widths.expanded} - 1px)`;
    topbar.classList.remove('xl:w-[calc(100%-196px)]');

    nav?.querySelector('[style*="flex-grow: 1"]')?.style.setProperty('display', collapsed ? 'block' : 'none');

    if (logo) logo.style.width = collapsed ? '50px' : '';
    if (logoContainer) Object.assign(logoContainer.style, {
      marginTop: collapsed ? '8px' : '',
      marginBottom: collapsed ? '20px' : ''
    });

    badges.forEach(b => b.style.display = collapsed ? 'none' : '');
    headers.forEach(h => h.style.justifyContent = collapsed ? 'center' : '');

    navItems.forEach(el => {
      el.querySelector('.sidebar-text')?.style.setProperty('display', collapsed ? 'none' : 'inline');
      const icon = el.querySelector('.material-symbols-rounded');
      if (icon) icon.classList.toggle('ml-2', !collapsed);
      el.style.justifyContent = collapsed ? 'center' : '';
    });

    const icon = collapseBtn.querySelector('.material-symbols-rounded');
    const text = collapseBtn.querySelector('.sidebar-text');
    icon.textContent = collapsed ? 'chevron_left' : 'chevron_right';
    text.style.display = collapsed ? 'none' : 'inline';
    collapseBtn.style.justifyContent = collapsed ? 'center' : '';
  }

  toggleSidebar(localStorage.getItem(storageKey) === 'true');
});
})();

[יום חדש מתחיל]

@cannon @עדלאידע
עשיתם דברים מדהימים!!!
אני רק מעדכן שכבר נפתחה ההזמנה במשנת יוסף, ואם תוכלו להמשיך את הקוד גם לגבי המלבן שבצד שמאל. כרגע של שניכם לא עובד על זה.

האתר של משנת יוסף

Spoiler

@cannon במה שאתה עשית, אחרי סגירת הסרגל הימני, נוצר סוג של פס אפור בתחתית המסך, ראה בצילום המצורף.

[a.y.f.]

@יום-חדש-מתחיל למה שלא תבקש ממשנת יוסף

[י. פל.]

@a.y.f. כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

@יום-חדש-מתחיל למה שלא תבקש ממשנת יוסף

כתבתי להם את זה עוד כשזה היה זמין רק למספר משתמשים מצומצם, ועלה בגורלי ליפול ברשת...
מאז הם הפכו את האתר לעוד יותר גרוע, עדיף כבר לשתוק...

[י. פל.]

@עדלאידע
אדיר!!!
רק תטפל כעת בסל הקניות... תודה עצומה!!!

[cannon]

@יום-חדש-מתחיל הפתרון של @עדלאידע מוצלח יותר פשוט תחכה שהוא ישדרג את הקוד שלו
(אלא א"כ יש לך העדפה לתוסף)

[עדלאידע]

@יום-חדש-מתחיל @י.-פל.

// ==UserScript==
// @name         כיווץ הסרגל כלים והסל קניות של משנת יוסף
// @namespace    http://tampermonkey.net/
// @version      v2
// @author       ShlomoH
// @description  הוספת כפתור כיווץ לסרגל כלים וסל הקניות באתר משנת יוסף
// @match        https://mishnatyosef.org/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
  section, .flex.flex-row.gap-\\[36px\\] {
     transition: width .3s ease-in-out, gap .3s ease-in-out, flex-basis .3s ease-in-out !important;
  }
  #cart.cart-collapsed {
    width: 100px !important;
  }

  #cart.cart-collapsed #cart-title,
  #cart.cart-collapsed div.bg-gray_semantic,
  #cart.cart-collapsed .item p:not(.font-bold.text-primary-900),
  #cart.cart-collapsed .item input,
  #cart.cart-collapsed > button,


  #cart.cart-collapsed .item button[data-v-f81940d1] {
    display: none !important;
  }

  #cart.cart-collapsed .item > div[data-v-986e9b24] {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0px 0 5px !important;
    position: relative;
  }
  #cart.cart-collapsed .item img {
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
  }
  #cart.cart-collapsed .item p.font-bold.text-primary-900 {
    display: block !important;
    font-size: 12px;
    text-align: center;
    margin-top: 4px;
  }

  #cart.cart-collapsed .item button.absolute {
    display: flex !important;
    position: absolute !important;
    top: auto !important;
    left: 50% !important;
    bottom: -45px;
    transform: translateX(-50%) scale(0.9);
  }

  #cart.cart-collapsed .custom-scroll-bar {
    padding-bottom: 100px;
  }
  #cart.cart-collapsed .text-grays-900,
  #cart.cart-collapsed .text-primary-700 {
    font-size: 12px !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
`);
    const observer = new MutationObserver(() => {
        const el = document.querySelector(
            '#cart.cart-collapsed .hidden.xl\\:flex.flex-none.flex-row.items-center.justify-start.py-\\[16px\\].border-t.border-grays-400.px-\\[14px\\]'
        );
        if (el) {
            observer.disconnect();

            Object.assign(el.style, {
                position: 'absolute',
                bottom: '50px',
                left: '0',
                width: '100%',
                background: 'white',
                zIndex: '9999',
                borderTop: '1px solid #ccc',
                padding: '0px 0px',
                boxSizing: 'border-box'
            });
            const cartContainer = document.querySelector('#cart.cart-collapsed .relative.w-full.h-screen.flex.flex-col.justify-between.bg-white');
            if (cartContainer) {
                Object.assign(cartContainer.style, {
                    background: 'white',
                    paddingBottom: '100px'
                });
            }

            const totalSpan = el.querySelector('.text-primary-700');
            if (totalSpan) {
                totalSpan.innerHTML = totalSpan.innerHTML.replace('סך הכל', 'סה״כ');
            }

        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    const selectors = {
        sidebar: 'div.sidebar',
        container: 'div.md\\:flex.md\\:w-\\[196px\\]',
        main: '.md\\:pr-\\[196px\\]',
        topbar: 'div.fixed.z-30.bg-primary-900',
        cart: '#cart'
    };

    const classes = {
        expanded: 'md:w-[196px]',
        collapsed: 'md:w-20'
    };

    const widths = {
        expanded: '196px',
        collapsed: '69px'
    };

    const storageKey = 'sidebarIsCollapsed';

    const waitFor = (selector, callback) => {
        const interval = setInterval(() => {
            const el = document.querySelector(selector);
            if (el) {
                clearInterval(interval);
                callback(el);
            }
        }, 200);
    };


    function toggleRightSidebar(collapsed, elements) {
        const {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        } = elements;

        main.style.paddingRight = collapsed ? widths.collapsed : widths.expanded;
        container.classList.toggle(classes.expanded, !collapsed);
        container.classList.toggle(classes.collapsed, collapsed);
        topbar.style.right = `calc(${collapsed ? widths.collapsed : widths.expanded} - 1px)`;
        topbar.classList.remove('xl:w-[calc(100%-196px)]');
        nav?.querySelector('[style*="flex-grow: 1"]')?.style.setProperty('display', collapsed ? 'block' : 'none');
        if (logo) logo.style.width = collapsed ? '50px' : '';
        if (logoContainer) Object.assign(logoContainer.style, {
            marginTop: collapsed ? '8px' : '',
            marginBottom: collapsed ? '20px' : ''
        });
        badges.forEach(b => b.style.display = collapsed ? 'none' : '');
        headers.forEach(h => h.style.justifyContent = collapsed ? 'center' : '');
        navItems.forEach(el => {
            el.querySelector('.sidebar-text')?.style.setProperty('display', collapsed ? 'none' : 'inline');
            const icon = el.querySelector('.material-symbols-rounded');
            if (icon) icon.classList.toggle('ml-2', !collapsed);
            el.style.justifyContent = collapsed ? 'center' : '';
        });
        const icon = collapseBtn.querySelector('.material-symbols-rounded');
        const text = collapseBtn.querySelector('.sidebar-text');
        icon.textContent = collapsed ? 'chevron_left' : 'chevron_right';
        text.style.display = collapsed ? 'none' : 'inline';
        collapseBtn.style.justifyContent = collapsed ? 'center' : '';
    }

    function toggleLeftCart(collapsed, mainElement) {
        const cart = document.querySelector(selectors.cart);
        const cartContainer = cart ? cart.closest('section') : null;

        if (cart && cartContainer && mainElement) {
            cart.classList.toggle('cart-collapsed', collapsed);
            cartContainer.style.flex = collapsed ? '0 0 40px' : '0 0 300px';
        }
    }

    waitFor(selectors.sidebar, sidebar => {
        const container = document.querySelector(selectors.container);
        const main = document.querySelector(selectors.main);
        const topbar = document.querySelector(selectors.topbar);

        if (!container || !main || !topbar) return;

        container.style.transition = 'width .3s ease-in-out';
        main.style.transition = 'padding-right .3s ease-in-out, padding-left .3s ease-in-out';

        const logo = container.querySelector('img.logo');
        const logoContainer = logo?.closest('div.items-center');
        const badges = container.querySelectorAll('.bg-secondary-200');
        const headers = [...container.querySelectorAll('.text-slate-400')];
        const bottomSection = container.querySelector('.mb-\\[30px\\]');
        const nav = sidebar.querySelector('nav');
        if (nav) Object.assign(nav.style, {
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between'
        });
        const navItems = [...container.querySelectorAll('nav a, .pointer-events-none, button.h-10')];
        navItems.forEach(el => {
            if (!el.querySelector('.sidebar-text')) {
                const text = el.innerText.trim();
                const icon = el.querySelector('.material-symbols-rounded');
                el.innerHTML = icon ? icon.outerHTML + `<span class="sidebar-text">${text.replace(icon.innerText, '').trim()}</span>` : `<span class="sidebar-text">${text}</span>`;
            }
        });

        const collapseBtn = document.createElement('a');
        collapseBtn.style.cursor = 'pointer';
        collapseBtn.className = 'group flex items-center px-2 py-2 text-base font-medium rounded-[4px] text-primary-200 hover:text-primary-500 hover:bg-purple_semantic h-10';
        collapseBtn.innerHTML = `<span class="material-symbols-rounded">chevron_right</span><span class="sidebar-text"> כווץ סרגל</span>`;

        const rightSidebarElements = {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        };

        collapseBtn.onclick = e => {
            e.preventDefault();
            const isCollapsed = container.classList.contains(classes.collapsed);
            const shouldBeCollapsed = !isCollapsed;
            localStorage.setItem(storageKey, shouldBeCollapsed);
            toggleRightSidebar(shouldBeCollapsed, rightSidebarElements);
            toggleLeftCart(shouldBeCollapsed, main);
        };

        const wrap = document.createElement('div');
        wrap.className = 'flex flex-col px-2';
        wrap.append(collapseBtn);
        bottomSection?.before(wrap);

        toggleRightSidebar(localStorage.getItem(storageKey) === 'true', rightSidebarElements);
    });

    waitFor(selectors.cart, () => {
        const main = document.querySelector(selectors.main);
        toggleLeftCart(localStorage.getItem(storageKey) === 'true', main);
    });

})();

[יום חדש מתחיל]

@עדלאידע

ייש"כ גדול, זה נראה ממש מדהים!!

א. תוסיף את זה לתחילת הקוד [סתם ליופי]:

// @icon         https://www.google.com/s2/favicons?sz=64&domain=mishnatyosef.org

ב. יש בעורך של tampermonkey אזהרות של eslint על הקוד. תיקנתי את זה, מצורף הקוד המתוקן בספוילר.

Spoiler

// ==UserScript==
// @name         כיווץ הסרגל כלים והסל קניות של משנת יוסף
// @namespace    http://tampermonkey.net/
// @version      v2
// @author       ShlomoH
// @description  הוספת כפתור כיווץ לסרגל כלים וסל הקניות באתר משנת יוסף
// @match        https://mishnatyosef.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=mishnatyosef.org
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
  section, .flex.flex-row.gap-\\[36px\\] {
     transition: width .3s ease-in-out, gap .3s ease-in-out, flex-basis .3s ease-in-out !important;
  }
  #cart.cart-collapsed {
    width: 100px !important;
  }

  #cart.cart-collapsed #cart-title,
  #cart.cart-collapsed div.bg-gray_semantic,
  #cart.cart-collapsed .item p:not(.font-bold.text-primary-900),
  #cart.cart-collapsed .item input,
  #cart.cart-collapsed > button,


  #cart.cart-collapsed .item button[data-v-f81940d1] {
    display: none !important;
  }

  #cart.cart-collapsed .item > div[data-v-986e9b24] {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0px 0 5px !important;
    position: relative;
  }
  #cart.cart-collapsed .item img {
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
  }
  #cart.cart-collapsed .item p.font-bold.text-primary-900 {
    display: block !important;
    font-size: 12px;
    text-align: center;
    margin-top: 4px;
  }

  #cart.cart-collapsed .item button.absolute {
    display: flex !important;
    position: absolute !important;
    top: auto !important;
    left: 50% !important;
    bottom: -45px;
    transform: translateX(-50%) scale(0.9);
  }

  #cart.cart-collapsed .custom-scroll-bar {
    padding-bottom: 100px;
  }
  #cart.cart-collapsed .text-grays-900,
  #cart.cart-collapsed .text-primary-700 {
    font-size: 12px !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
`);
    const observer = new MutationObserver(() => {
        const el = document.querySelector(
            '#cart.cart-collapsed .hidden.xl\\:flex.flex-none.flex-row.items-center.justify-start.py-\\[16px\\].border-t.border-grays-400.px-\\[14px\\]'
        );
        if (el) {
            observer.disconnect();

            Object.assign(el.style, {
                position: 'absolute',
                bottom: '50px',
                left: '0',
                width: '100%',
                background: 'white',
                zIndex: '9999',
                borderTop: '1px solid #ccc',
                padding: '0px 0px',
                boxSizing: 'border-box'
            });
            const cartContainer = document.querySelector('#cart.cart-collapsed .relative.w-full.h-screen.flex.flex-col.justify-between.bg-white');
            if (cartContainer) {
                Object.assign(cartContainer.style, {
                    background: 'white',
                    paddingBottom: '100px'
                });
            }

            const totalSpan = el.querySelector('.text-primary-700');
            if (totalSpan) {
                totalSpan.innerHTML = totalSpan.innerHTML.replace('סך הכל', 'סה״כ');
            }

        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    const selectors = {
        sidebar: 'div.sidebar',
        container: 'div.md\\:flex.md\\:w-\\[196px\\]',
        main: '.md\\:pr-\\[196px\\]',
        topbar: 'div.fixed.z-30.bg-primary-900',
        cart: '#cart'
    };

    const classes = {
        expanded: 'md:w-[196px]',
        collapsed: 'md:w-20'
    };

    const widths = {
        expanded: '196px',
        collapsed: '69px'
    };

    const storageKey = 'sidebarIsCollapsed';

    const waitFor = (selector, callback) => {
        const interval = setInterval(() => {
            const el = document.querySelector(selector);
            if (el) {
                clearInterval(interval);
                callback(el);
            }
        }, 200);
    };


    function toggleRightSidebar(collapsed, elements) {
        const {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        } = elements;

        main.style.paddingRight = collapsed ? widths.collapsed : widths.expanded;
        container.classList.toggle(classes.expanded, !collapsed);
        container.classList.toggle(classes.collapsed, collapsed);
        topbar.style.right = `calc(${collapsed ? widths.collapsed : widths.expanded} - 1px)`;
        topbar.classList.remove('xl:w-[calc(100%-196px)]');
        nav?.querySelector('[style*="flex-grow: 1"]')?.style.setProperty('display', collapsed ? 'block' : 'none');
        if (logo) {
            logo.style.width = collapsed ? '50px' : '';
        }
        if (logoContainer) {
            Object.assign(logoContainer.style, {
                marginTop: collapsed ? '8px' : '',
                marginBottom: collapsed ? '20px' : ''
            });
        }
        badges.forEach(b => {
            b.style.display = collapsed ? 'none' : '';
        });
        headers.forEach(h => {
            h.style.justifyContent = collapsed ? 'center' : '';
        });
        navItems.forEach(el => {
            el.querySelector('.sidebar-text')?.style.setProperty('display', collapsed ? 'none' : 'inline');
            const icon = el.querySelector('.material-symbols-rounded');
            if (icon) {
                icon.classList.toggle('ml-2', !collapsed);
            }
            el.style.justifyContent = collapsed ? 'center' : '';
        });
        const icon = collapseBtn.querySelector('.material-symbols-rounded');
        const text = collapseBtn.querySelector('.sidebar-text');
        icon.textContent = collapsed ? 'chevron_left' : 'chevron_right';
        text.style.display = collapsed ? 'none' : 'inline';
        collapseBtn.style.justifyContent = collapsed ? 'center' : '';
    }

    function toggleLeftCart(collapsed, mainElement) {
        const cart = document.querySelector(selectors.cart);
        const cartContainer = cart ? cart.closest('section') : null;

        if (cart && cartContainer && mainElement) {
            cart.classList.toggle('cart-collapsed', collapsed);
            cartContainer.style.flex = collapsed ? '0 0 40px' : '0 0 300px';
        }
    }

    waitFor(selectors.sidebar, sidebar => {
        const container = document.querySelector(selectors.container);
        const main = document.querySelector(selectors.main);
        const topbar = document.querySelector(selectors.topbar);

        if (!container || !main || !topbar) return;

        container.style.transition = 'width .3s ease-in-out';
        main.style.transition = 'padding-right .3s ease-in-out, padding-left .3s ease-in-out';

        const logo = container.querySelector('img.logo');
        const logoContainer = logo?.closest('div.items-center');
        const badges = container.querySelectorAll('.bg-secondary-200');
        const headers = [...container.querySelectorAll('.text-slate-400')];
        const bottomSection = container.querySelector('.mb-\\[30px\\]');
        const nav = sidebar.querySelector('nav');
        if (nav) {
            Object.assign(nav.style, {
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between'
            });
        }
        const navItems = [...container.querySelectorAll('nav a, .pointer-events-none, button.h-10')];
        navItems.forEach(el => {
            if (!el.querySelector('.sidebar-text')) {
                const text = el.innerText.trim();
                const icon = el.querySelector('.material-symbols-rounded');
                el.innerHTML = icon ? icon.outerHTML + `<span class="sidebar-text">${text.replace(icon.innerText, '').trim()}</span>` : `<span class="sidebar-text">${text}</span>`;
            }
        });

        const collapseBtn = document.createElement('a');
        collapseBtn.style.cursor = 'pointer';
        collapseBtn.className = 'group flex items-center px-2 py-2 text-base font-medium rounded-[4px] text-primary-200 hover:text-primary-500 hover:bg-purple_semantic h-10';
        collapseBtn.innerHTML = `<span class="material-symbols-rounded">chevron_right</span><span class="sidebar-text"> כווץ סרגל</span>`;

        const rightSidebarElements = {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        };

        collapseBtn.onclick = e => {
            e.preventDefault();
            const isCollapsed = container.classList.contains(classes.collapsed);
            const shouldBeCollapsed = !isCollapsed;
            localStorage.setItem(storageKey, shouldBeCollapsed);
            toggleRightSidebar(shouldBeCollapsed, rightSidebarElements);
            toggleLeftCart(shouldBeCollapsed, main);
        };

        const wrap = document.createElement('div');
        wrap.className = 'flex flex-col px-2';
        wrap.append(collapseBtn);
        bottomSection?.before(wrap);

        toggleRightSidebar(localStorage.getItem(storageKey) === 'true', rightSidebarElements);
    });

    waitFor(selectors.cart, () => {
        const main = document.querySelector(selectors.main);
        toggleLeftCart(localStorage.getItem(storageKey) === 'true', main);
    });

})();

ג. מה זה החיצים הכחולים הקטנים, וכן הפסים לרוחב הכחולים הקטנים שיש בצד [סתם לא באמת חשוב...]

[עדלאידע]

@יום-חדש-מתחיל כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

ג. מה זה החיצים הכחולים הקטנים, וכן הפסים לרוחב הכחולים הקטנים שיש בצד [סתם לא באמת חשוב...]

זה חלק של הטולטיפ שמוצג כשמרפים על מוצר, אני עובד על זה.