// Select the section container const headerSection = document.querySelector('.dt-sc-header-logo-sec .dt-sc-flex-space-between'); // Create a new link element const rightLink = document.createElement('a'); rightLink.href = 'tel:855-89-42525'; // Updated tel link rightLink.target = '_self'; // Open in the same tab for tel links rightLink.textContent = 'Call Us Now : 855-89-HALAL(42525)'; // Updated text // Style the link to align it to the right rightLink.style.position = 'absolute'; rightLink.style.right = '20px'; // Adjust spacing from the right edge rightLink.style.top = '50%'; // Vertically center rightLink.style.transform = 'translateY(-50%)'; rightLink.style.color = '#ffffff'; // White text rightLink.style.textDecoration = 'none'; rightLink.style.fontSize = '14px'; rightLink.style.cursor = 'pointer'; // Add hover effect (optional) rightLink.addEventListener('mouseover', () => { rightLink.style.textDecoration = 'underline'; // Underline on hover }); rightLink.addEventListener('mouseout', () => { rightLink.style.textDecoration = 'none'; // Remove underline on mouse out }); // Ensure the section container has relative positioning for alignment headerSection.style.position = 'relative'; // Append the new link to the section headerSection.appendChild(rightLink); function forceReplaceColor(oldColor, newColor) { // Utility function to convert hex to rgb function hexToRgb(hex) { hex = hex.replace('#', ''); let r = parseInt(hex.substring(0, 2), 16); let g = parseInt(hex.substring(2, 4), 16); let b = parseInt(hex.substring(4, 6), 16); return `rgb(${r}, ${g}, ${b})`; } // Convert hex colors to RGB for more robust comparison const oldRgb = hexToRgb(oldColor); const newRgb = hexToRgb(newColor); // Replace the color in inline styles let elements = document.querySelectorAll('*'); elements.forEach(element => { if (element.style) { for (let i = 0; i < element.style.length; i++) { let property = element.style[i]; let currentValue = element.style[property]; // Check if the value matches the old color (both hex and rgb) if (currentValue === oldColor || currentValue === oldRgb) { element.style[property] = newColor; } } } }); // Replace the color in stylesheets let stylesheets = document.styleSheets; for (let i = 0; i < stylesheets.length; i++) { let sheet = stylesheets[i]; try { let rules = sheet.rules || sheet.cssRules; for (let j = 0; j < rules.length; j++) { let rule = rules[j]; if (rule.style) { for (let k = 0; k < rule.style.length; k++) { let property = rule.style[k]; let currentValue = rule.style[property]; // Check for the old color in various formats (hex, rgb, etc.) if (currentValue === oldColor || currentValue === oldRgb) { rule.style[property] = newColor; } } } } } catch (e) { // Handle cross-origin restrictions for external stylesheets console.error('Error accessing stylesheet', e); } } } // Call the function to replace the color forceReplaceColor('#508C14', '#344A3A'); document.addEventListener('DOMContentLoaded', () => { // Select the header container const header = document.querySelector('#SearchDrawer'); if (header) { // Select all buttons with class 'dt-sc-btn' inside the header const searchButtons = header.querySelectorAll('.dt-sc-btn'); searchButtons.forEach((button) => { // Forcefully clear any content inside the button while (button.firstChild) { button.removeChild(button.firstChild); } // Create an element for the SVG const searchIcon = document.createElement('img'); searchIcon.src = 'https://i.ibb.co/pWgjYjm/c00fef5b-9cfb-41c8-b4eb-b20e63a54d72.png'; searchIcon.alt = 'Search Icon'; // Add alt text for accessibility searchIcon.style.width = '20px'; // Set icon width searchIcon.style.height = '20px'; // Set icon height searchIcon.style.display = 'inline-block'; // Ensure proper layout // Append the SVG to the button button.appendChild(searchIcon); // Apply brute-force styling to the button itself button.style.display = 'flex'; // Use flex for alignment button.style.alignItems = 'center'; // Center vertically button.style.justifyContent = 'center'; // Center horizontally button.style.padding = '10px'; // Add padding for spacing button.style.backgroundColor = '#ffffff'; // Ensure default background button.style.border = 'none'; // Remove any border button.style.borderRadius = '50px'; // Make it rounded if desired }); } }); // Ensure the script runs after the DOM is fully loaded document.addEventListener('DOMContentLoaded', () => { // Select the product title element const productTitle = document.querySelector('.grid-link__title a'); // Check if the element exists if (productTitle) { // Change the color of the product title productTitle.style.color = '#384c3c'; } }); document.addEventListener('DOMContentLoaded', () => { // Check if the current page is the Contact Information page if (window.location.pathname === '/policies/contact-information') { // Select the div containing the contact information const rteDiv = document.querySelector('.rte'); if (rteDiv) { // Remove the entire existing contact section rteDiv.innerHTML = ''; // Create new content const newContent = `

Contact Us – My Halal Pantry

We’re here to help! Feel free to contact us through any of the following methods:

📞 Phone:
855-89-42525

📧 Email:
manager@myhalalpantry.com

🌐 Website:
myhalalpantry.com

`; // Append new content to the div rteDiv.innerHTML = ne wContent; } } }); document.addEventListener("DOMContentLoaded", function() { // Select all quantity-control wrappers on the page (in case you have multiples) document.querySelectorAll(".quantity-control").forEach(function(control) { const minusBtn = control.querySelector(".minus"); const plusBtn = control.querySelector(".plus"); const qtyField = control.querySelector(".qty-field"); // Decrease quantity minusBtn.addEventListener("click", function() { let currentVal = parseInt(qtyField.value, 10) || 0; if (currentVal > parseInt(qtyField.min, 10)) { qtyField.value = currentVal - 1; } }); // Increase quantity plusBtn.addEventListener("click", function() { let currentVal = parseInt(qtyField.value, 10) || 0; const maxVal = parseInt(qtyField.max, 10) || 999; if (currentVal < maxVal) { qtyField.value = currentVal + 1; } }); }); }); document.addEventListener("DOMContentLoaded", function () { function removeVendorFromTitle(vendorSelector, titleSelector) { const vendorElement = document.querySelector(vendorSelector); const titleElement = document.querySelector(titleSelector); if (vendorElement && titleElement) { const vendorName = vendorElement.textContent.trim(); const titleText = titleElement.textContent.trim(); // Ensure we only remove vendor if it's at the start const newTitle = titleText.replace(new RegExp("^" + vendorName + "\\s*", "i"), ""); titleElement.textContent = newTitle; } } // Collection Page (Grid view) document.querySelectorAll(".product-detail").forEach((product) => { const vendorElement = product.querySelector(".product-vendor span"); const titleElement = product.querySelector(".grid-link__title a"); if (vendorElement && titleElement) { const vendorName = vendorElement.textContent.trim(); const newTitle = titleElement.textContent.replace(new RegExp("^" + vendorName + "\\s*", "i"), ""); titleElement.textContent = newTitle; } }); // Product Page (Detailed View) - Now Correctly Targeting Vendor & Title removeVendorFromTitle(".product-attributes a[title]", ".product-title"); }); document.addEventListener("DOMContentLoaded", function() { // Only run the script on mobile screens (e.g., max-width 768px) if (window.innerWidth > 768) return; // Select the main header container var headerContainer = document.querySelector('.dt-sc-flex-space-between'); if (!headerContainer) return; // Add equal left/right padding to the header container headerContainer.style.padding = '0 20px'; // Turn the header container into a flex container to line up children in one row headerContainer.style.display = 'flex'; headerContainer.style.alignItems = 'center'; // Retrieve the existing elements var logo = headerContainer.querySelector('.logo'); var searchSection = headerContainer.querySelector('.dt-sc-list-inline'); var headerLinks = headerContainer.querySelector('.site-header__links'); // Create a left wrapper for the logo (35% width) var leftWrapper = document.createElement('div'); leftWrapper.style.width = '35%'; leftWrapper.style.display = 'flex'; leftWrapper.style.alignItems = 'center'; // Create a right wrapper for the buttons (65% width) var rightWrapper = document.createElement('div'); rightWrapper.style.width = '65%'; rightWrapper.style.display = 'flex'; rightWrapper.style.alignItems = 'center'; rightWrapper.style.justifyContent = 'flex-end'; // Move the logo into the left wrapper, and adjust the logo image sizing if (logo) { var logoImg = logo.querySelector('img'); if (logoImg) { logoImg.style.maxWidth = '100%'; logoImg.style.height = 'auto'; } leftWrapper.appendChild(logo); } // Move the search section and header links into the right wrapper if (searchSection) { rightWrapper.appendChild(searchSection); } if (headerLinks) { rightWrapper.appendChild(headerLinks); } // Clear out the original header container's content headerContainer.innerHTML = ''; // Append the new wrappers back into the header container headerContainer.appendChild(leftWrapper); headerContainer.appendChild(rightWrapper); }); document.addEventListener("DOMContentLoaded", function() { // Function to set the text color of the Add to Cart button to white function setWhiteColor(button) { button.style.setProperty('color', 'white', 'important'); // If there is a span inside, ensure its text is white as well const span = button.querySelector('span'); if (span) { span.style.setProperty('color', 'white', 'important'); } } // Apply the style to any existing buttons const addToCartButtons = document.querySelectorAll('button.dT_AddToCart'); addToCartButtons.forEach(setWhiteColor); // Create a MutationObserver to handle dynamically added buttons const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { mutation.addedNodes.forEach((node) => { // Only process element nodes if (node.nodeType === 1) { // If the node itself is a button with the Add to Cart class, style it if (node.matches('button.dT_AddToCart')) { setWhiteColor(node); } // Also check within the node for any matching buttons const newButtons = node.querySelectorAll('button.dT_AddToCart'); newButtons.forEach(setWhiteColor); } }); }); }); // Start observing the document body for added nodes observer.observe(document.body, { childList: true, subtree: true }); }); document.addEventListener("DOMContentLoaded", function() { let logoImg = document.querySelector(".logo a img"); if (logoImg) { // GIF URL (Plays Once) let gifURL = "https://cdn.shopify.com/s/files/1/0562/4817/2705/files/36-PM-unscreen-ezgif.com-crop.gif?v=1738551723"; // Static Final Frame Image (Same Size as GIF) let finalFrameURL = "https://cdn.shopify.com/s/files/1/0562/4817/2705/files/converted_image-removebg-preview__1_-removebg-preview.png?v=1738553458"; // Set the initial source to the GIF logoImg.src = gifURL; logoImg.alt = "My Halal Pantry Animated Logo"; function applyResponsiveSize() { let widthPercentage; if (window.innerWidth <= 768) { // Mobile View (Smaller Size) widthPercentage = "100%"; } else { // Desktop View (Larger Size) widthPercentage = "70%"; } // Apply the same size to both GIF and static image logoImg.style.width = widthPercentage; logoImg.style.height = "auto"; logoImg.style.maxWidth = "none"; logoImg.style.maxHeight = "none"; logoImg.style.objectFit = "contain"; // Ensures consistency } // Run on page load applyResponsiveSize(); // Adjust dynamically when window resizes window.addEventListener("resize", applyResponsiveSize); // Replace GIF with the static image after GIF duration (4.5s) let gifDuration = 4500; // 4.5 seconds in milliseconds setTimeout(function() { logoImg.src = finalFrameURL; applyResponsiveSize(); // Ensure the static image keeps the same size }, gifDuration); } }); document.addEventListener('DOMContentLoaded', function() { function setAddToCartBackgroundColor() { const addToCartButton = document.querySelector('.dT_AddToCart'); if (addToCartButton) { addToCartButton.style.setProperty('background-color', '#404c44', 'important'); } } setAddToCartBackgroundColor(); // Call on initial load window.addEventListener('resize', setAddToCartBackgroundColor); // Call on resize/orientation change // MutationObserver to handle dynamic changes (if needed) const targetNode = document.querySelector('.dt-sc-btn-group'); // Observe a parent element if (targetNode){ const observer = new MutationObserver(setAddToCartBackgroundColor); const config = { attributes: true, childList: true, subtree: true }; // Observe changes in attributes, children, and descendants observer.observe(targetNode, config); } }); document.addEventListener("DOMContentLoaded", function() { // Detect if the device is touch-capable var isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0); // Select only top-level menu items var menuItems = document.querySelectorAll("ul.dropdown-content > li"); menuItems.forEach(function(li) { var submenu = li.querySelector("ul.child"); if (submenu) { // Mark li as having a submenu for CSS arrow styling li.classList.add("has-child"); // Ensure the submenu is hidden by default submenu.style.display = "none"; // Identify the parent link which toggles the submenu var parentLink = li.querySelector("a"); // Toggle submenu on click of the parent link parentLink.addEventListener("click", function(e) { // Prevent default action (navigation) e.preventDefault(); // Stop the event from bubbling to parent li e.stopPropagation(); // Toggle submenu display and open class if (submenu.style.display === "none") { submenu.style.display = "block"; li.classList.add("open"); } else { submenu.style.display = "none"; li.classList.remove("open"); } }); // Prevent clicks inside the submenu from closing it submenu.addEventListener("click", function(e) { e.stopPropagation(); }); // For non-touch devices, you can also use hover events if (!isTouchDevice) { li.addEventListener("mouseenter", function() { submenu.style.display = "block"; li.classList.add("open"); }); li.addEventListener("mouseleave", function() { submenu.style.display = "none"; li.classList.remove("open"); }); } } }); // Optional: Hide any open submenu when clicking anywhere else in the document document.addEventListener("click", function() { menuItems.forEach(function(li) { var submenu = li.querySelector("ul.child"); if (submenu) { submenu.style.display = "none"; li.classList.remove("open"); } }); }); });

Your Cart

Kassatly Grenadine Syrup 20oz

Price:

Vendor:

Availability:

Quantity:

Enquiry about product?

Let us know abour your query!

Recently Viewed Products

NEWSLETTER

Call Us Now : 855-89-HALAL (42525)

Call Us Now : 855-89-HALAL (42525)