Replacing Bullet points with real bullets
This one does two things. Firstly the CSS makes sure that all unnumbered lists which usually begin with a dot ("•"), have instead an icon of a bullet in front of them. Secondly it finds all characters of a list dot, and restructures the text into a list. This was necessary because the CSS alone works fine for when I actually write a list. However, when adding product information through a third-party implementation, the lists are converted to just paragraphs with the dot ("•") characters inside them. Now whenever there is a list dot on the product page, it automatically restructures the text to insert bullet icons instead.
HTML:
JAVASCRIPT: document.addEventListener("DOMContentLoaded", function() { //Bullet points const subString = 'shop'; const getURL = window.location.href; if (getURL.includes(subString)){ const textNodes = []; function getTextNodes(node) { if (node.nodeType === Node.TEXT_NODE) { textNodes.push(node); } else { node.childNodes.forEach(getTextNodes); } } getTextNodes(document.body); textNodes.forEach(node => { const text = node.nodeValue; if (text.includes("•")) { const items = text.split("•").map(item => item.trim()).filter(item => item.length > 0); if (items.length > 0) { const ul = document.createElement("ul"); items.forEach(item => { const li = document.createElement("li"); const paragraph = document.createElement('p'); paragraph.textContent = item; paragraph.classList.add('preFade', 'fadeIn', 'p-with-before'); paragraph.style.whiteSpace = 'pre-wrap'; li.appendChild(paragraph); ul.appendChild(li); }); node.parentNode.insertBefore(ul, node); node.parentNode.removeChild(node); let nextSibling = ul.nextSibling; while (nextSibling) { if (nextSibling.nodeType === Node.ELEMENT_NODE && nextSibling.tagName === 'BR') { nextSibling.parentNode.removeChild(nextSibling); } nextSibling = nextSibling.nextSibling; } } } }); } //Links no focus const links = document.querySelectorAll('a'); links.forEach(link => { //link.setAttribute('tabindex', '-1'); link.addEventListener('focus', (event) => { event.target.blur(); }); }); });
CSS: ul { list-style: none; padding-left: 0; } ul:not(.accordion-items-container) > li > p::before { content: " " !important; background-image: url(https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/31b85fc9-5f5f-469d-8e71-8d50545821f4/BulletPointRightIcon1.png) !important; background-size: contain; background-position: center top 6px ; background-repeat: no-repeat; margin-right: 20px !important; margin-left: 0px !important; margin-top: 0rem; margin-bottom: 0.5rem; padding-bottom: 0px; width:40px !important; height: 40px !important; display: inline-block; } .bullet { background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/31b85fc9-5f5f-469d-8e71-8d50545821f4/BulletPointRightIcon1.png); height: auto; width: 50px }
COMMENTS:
Leave a comment: