Inkonsistente JavaScript -Modulausführung im Shopify Dev Store ⇐ JavaScript

[Anonymous]

Ich arbeite an einem benutzerdefinierten JavaScript -Setup für einen Shopify -Entwicklungsgeschäft. Ich benutze Vite, um alles in eine einzelne JS -Datei zu bündeln, die über: < /p>
enthalten ist

Code: Select all

{{ 'bundle.js' | asset_url | script_tag }}

Das Problem
Auf einigen Seite verhalten sich alle Protokolle und Funktionalität wie erwartet. Der DOM-abhängige Code kann nicht ausgeführt werden. />
Ganzes Entfernen von Vite und Verwendung von einfachen Tags - gleiches Problem. /> Beispiel 1: Gesamt -JS -Initialisierungslogik < /strong>
Ich initiale viele Funktionen und Dienstprogramme aus verschiedenen Modulen wie SO: < /p>

Code: Select all

import { initA, initB } from './module-a.js';
import { initC, initD } from './module-b.js';
import { setupLightbox } from './lightbox.js';

const initialize = () => {
initA();
initB();
initC();
initD();

if (window.location.href.includes('custom-config')) {
initCustomFeature();
}
};

document.addEventListener('DOMContentLoaded', () => {
console.log('DOM loaded');
initialize();

setupLightbox({
selector: '.lightbox',
loop: true,
touchNavigation: true,
});
});
< /code>
Obwohl Domcontent -Brände und -protokolle angezeigt werden, funktionieren einige Module nicht ordnungsgemäß - insbesondere diejenigen, die sich auf DOM -Elemente, die von Shopify -Abschnitten oder Apps hinzugefügt wurden, nicht ordnungsgemäß funktionieren.export const exampleFeature = {
initialize() {
this.sizeContainer = document.querySelector('.size-options');
this.countSelector = document.querySelector('.count-selector');

this.setupEventListeners();
this.updateCountOptions('4');
},

setupEventListeners() {
this.sizeContainer?.addEventListener('click', (e) => {
const selected = e.target.closest('.size-option');
if (!selected) return;

document.querySelectorAll('.size-option').forEach((el) => el.classList.remove('active'));
selected.classList.add('active');

this.updateCountOptions(selected.dataset.size);
});

this.countSelector?.addEventListener('change', (e) => {
const value = e.target.value;
this.updateSelectionUI(value);
});
},

updateCountOptions(size) {
// Logic to update count options
},

updateSelectionUI(value) {
// Update UI or internal state
},
};

Dieses Modul schlägt oft lautlos aus: Entweder feuern die Ereignishörer nicht oder die DOM -Elemente kehren bei Auswahl zurück>