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
}
Previous
Previous

Audio playER customization

Next
Next

Variant Select Animated Gear Icon