FROM CACHE - de_header

benutzerdefiniertes HTML funktioniert in neuem Shopify Theme nicht mehr

ninja196
Besucher
3 0 0

Guten Morgen!

Ich habe folgendes Problem:
Am Anfang habe ich das Theme "Brooklyn" genutzt und dort auch benutzerdefinierte HTML Blöcke genutzt.
Nun möchte ich auf das Theme "Spotlight" wechseln und dort funktioniert einer meiner Codes nicht mehr. Der andere funktioniert einwandfrei, ohne, dass ich etwas ändern musste. 
Liegt es daran, dass es nun ein benutzerdefiniertes Liquid ist oder verträgt sich irgendetwas mit dem Theme Code nicht? 

Jedenfalls funktioniert weder die Animation, noch wird das obere Bild angezeigt.
In meinem alten Theme und auch HTML Generatoren funktioniert er problemlos. Ich hab die Bilder und Label hierfür geändert.

 

<div class="slider-container">
  <figure>
    <div id="compare"></div>
    <div class="bottomleft">foto1</div>
    <div class="bottomright">foto2</div>
  </figure>
  <input oninput="beforeAfter()" onchange="beforeAfter()" type="range" min="0" max="100" value="50" id="slider">

  
</div>

<style>
body {
	margin: 0;
}


.slider-container { 
	height: 80vw;
	margin: auto;
	max-height: 340px;
	max-width: 400px;
	overflow: hidden;
	width: 90vw;
}
.slider-container figure { 
	background-image: url(https://burst.shopifycdn.com/photos/shopify/small-business-interior_540x.jpg);
	background-size: cover;
	font-size: 0;
	height: 100%;
	margin: 0; 
	position: relative;
	width: 100%; 
}
#compare {
	background-image: url(https://burst.shopifycdn.com/photos/shopify/online-shopping_540x.jpg);
	background-size: cover;
	bottom: 0;
	border-right: 3px solid rgba(255,255,255,0.4);
	height: 100%;
	overflow: visible;
	position: absolute;
	width: 50%; 
	animation: first 2s 1 normal ease-in-out 0.1s; 
	-webkit-animation: first 2s 1 normal ease-in-out 0.1s;
}

input#slider {
	-moz-appearance: none;
	-webkit-appearance: none;
	border: none; 
	background: transparent;
	cursor: col-resize;
	height: 100vw;
	left: 0;
	margin: 0;
	outline: none; 
	padding: 0;
	position: relative;
	top: -100vw;
	width: 100%;
}
input#slider::-moz-range-track { 
	background: transparent; 
}
input#slider::-ms-track {
	border: none; 
	background-color: transparent;
	height: 100vw; 
	left: 0; 
	outline: none; 
	position: relative;
	top: -100vw; 
	width: 100%;
	margin: 0;
	padding: 0;
	cursor: col-resize;
	color:transparent;
}
input#slider::-ms-fill-lower {
	background-color:transparent;
}
input#slider::-webkit-slider-thumb {
	-webkit-appearance:none;
	height: 100vw;
	width: 4%;
	opacity: 0;
}
input#slider::-moz-range-thumb {
	-moz-appearance: none;
	height: 100vw;
	width: 4%;
	opacity: 0;
}   
input#slider::-ms-thumb {
	height: 100vw;
	width: 4%; 
	opacity:0;
}
input#slider::-ms-tooltip {
	display:none;
}
#compare::before {
	content: " ";
	float: right;
	height: 100%;
	margin-right: -27px;
	position: relative;
	top:0;
	width: 50px;
}

@keyframes first {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}
@-webkit-keyframes first {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}

.bottomleft {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-size: 14px;
  color: #000000;
}

.bottomright {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 14px;
  color: #000000;
}

</style>

<script>
let slider = document.getElementById('slider');

function beforeAfter() {
  document.getElementById('compare').style.width = document.getElementById('slider').value + "%";
}

slider.addEventListener('mouseup', function() {
  let targetValue = 50;
  let animationDuration = 1000;

  let animateSlider = setInterval(function() {
    if (slider.value == targetValue) {
      clearInterval(animateSlider);
    } else if (slider.value < targetValue) {
      slider.value++;
      beforeAfter();
    } else if (slider.value > targetValue) {
      slider.value--;
      beforeAfter();
    }
  }, animationDuration / 100);
});


slider.addEventListener('mousemove', beforeAfter);

slider.addEventListener('touchend', function(e) {
  let targetValue = 50;
  let animationDuration = 1000;

  let animateSlider = setInterval(function() {
    if (slider.value == targetValue) {
      clearInterval(animateSlider);
    } else if (slider.value < targetValue) {
      slider.value++;
      beforeAfter();
    } else if (slider.value > targetValue) {
      slider.value--;
      beforeAfter();
    }
  }, animationDuration / 100);
});

</script>

 

3 ANTWORTEN 3

Gabe
Shopify Staff
15963 2532 3778

Hey @ninja196 

 

Danke für den Code aber das Spotlight Theme ist eigentlich nur für den Starter Plan gedacht und somit etwas "Barebone" in den Coding Möglichkeiten. Wie wäre es eins unserer anderen Free Themes wie Dawn oder Ride stattdessen zu verwenden, dass dir viel mehr Möglichkeiten bietet? Wenn das Spotlight Theme aber doch für deine Zwecke am besten ist dann könnte das Problem, dass du mit deinem benutzerdefinierten HTML- und JavaScript-Code beim Wechsel vom Shopify-Theme "Brooklyn" zu "Spotlight" erlebst, mehrere Ursachen haben.

 

JavaScript- und CSS-Kompatibilität:

  • Themes in Shopify haben ihre eigene JavaScript- und CSS-Struktur. Dein Code könnte Konflikte mit dem vordefinierten JavaScript oder CSS des "Spotlight"-Themes haben. Überprüfe, ob im "Spotlight"-Theme funktionelle JavaScript- oder CSS-Codes Einschränkungen existieren, die deine Codeausführung beeinträchtigen könnten. Du kannst auch versuchen, deinen JavaScript- und CSS-Code zu isolieren, indem du ihn in einem IFrame oder mit einem Namespace versiehst.

Lade-Reihenfolge der Skripte:

  • Möglicherweise wird dein JavaScript-Code zu einem Zeitpunkt ausgeführt, an dem bestimmte DOM-Elemente noch nicht geladen oder bereit sind. Stelle sicher, dass dein Skript nach dem vollständigen Laden der Seite ausgeführt wird. Dies kann oft durch das Platzieren des Skripts am Ende des Body-Tags oder durch Verwendung von Event-Listenern wie DOMContentLoaded erreicht werden.

Fehlende oder geänderte Elemente im neuen Theme:

  • Dein Code könnte auf spezifische DOM-Elemente oder Klassen angewiesen sein, die im neuen Spotlight Theme möglicherweise eingeschränkt oder anders benannt oder strukturiert sind. Überprüfe, ob alle HTML-Elemente und CSS-Klassen, auf die sich dein Skript bezieht, im neuen Theme vorhanden und korrekt benannt sind.

CSS-Überschreibungen:

  • Deine benutzerdefinierten Styles könnten von den im "Spotlight"-Theme definierten Styles überschrieben werden. Verwende spezifischere CSS-Selektoren oder die !important-Regel, um sicherzustellen, dass deine Styles Vorrang haben.

Browser-Kompatibilitätsprobleme:

  • Es könnte Browser-spezifische Kompatibilitätsprobleme geben, insbesondere, wenn du moderne JavaScript-Features ohne Transpilation verwendest. Teste deinen Code in verschiedenen Browsern und verwende gegebenenfalls Polyfills oder Babel, um eine breitere Kompatibilität sicherzustellen.

Debugging und Testing

  • Browser-Konsole nutzen: Überprüfe die Browser-Konsole auf Fehlermeldungen, die Hinweise auf das Problem geben könnten.
  • Schrittweises Debugging: Kommentiere Teile des Codes aus oder füge console.log-Anweisungen ein, um die genaue Ursache des Problems zu lokalisieren.

Hoffe das hilft dir weiter! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

ninja196
Besucher
3 0 0

Hallo Gabe,

 

danke für deine Antwort. Dass das Spotlight Theme nur für den Starter Plan gedacht ist, hab ich so jetzt nicht gelesen - aber auch in Dawn oder Ride funktioniert der Code nicht.
Erst, wenn ich ein kostenpflichtiges Theme ausprobiere, bei dem der Abschnitt auch "benutzerdefiniertes HTML/Liquid" heißt, funktioniert der Code.
Also muss es definitiv am Liquid selbst liegen.
Leider finde ich keine Möglichkeit, den Code irgendwie in Liquid zu übersetzen. 

Gabe
Shopify Staff
15963 2532 3778

@ninja196 

 

Ja da hast du recht. Ich habe z. B. einen roten Sale Menüpunkt in meinen Test Free Themes und auch in den kostenpflichtigen Themes getestet und bestimmte Codes funzen in einem Theme und nicht im anderen:

 

In den Free Themes funzt dieser Code der aber nicht in den kostenpflichtigen Themes funzt:

 

.list-menu li:last-child a {
 color: red !important;
}

 

In den kostenpflichtigen Themes funzt stattdessen ein Menü mit dem folgenden Titel:

 

<span style="color: #DE2A2A;">SALE</span>

 

image.png

 

image.png

 

Du kannst auch deine Frage in unserem spezialisten Design Forum hier posten und da dürfte einer unserer Programmierer aus Indien schnell antworten.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog