FROM CACHE - de_header

Rechner auf Shopify Seite veröffentlichen

blackforest22
Neues Mitglied
19 0 0

Guten Tag, 

 

Ich würde gerne einen Rechner auf meiner Shopify Website veröffentlichen. Er soll auf dieser Seite ausgegeben werden: https://iynxtools.de/pages/granit-rechner

 

 

Ich habe diese Seite einer eigener Layout-Vorlage zugewiesen. 

 

Ich habe folgenden Code erhalten. Bestehend aus: HTML Datei, CSS Datei und JS Datei. 

 

HTML 

 

<!DOCTYPE html>
<html>
<head>
<title>Granit Gewichtsrechner</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="calculator">
<h1>Granit Gewichtsrechner</h1>
<form>
<label for="length">Länge (cm):</label>
<input type="number" id="length" name="length" min="0" required>

<label for="width">Breite (cm):</label>
<input type="number" id="width" name="width" min="0" required>

<label for="thickness">Dicke (cm):</label>
<input type="number" id="thickness" name="thickness" min="0" required>

<label for="density">Dichte (kg/m³):</label>
<input type="number" id="density" name="density" min="0" required>

<button type="button" onclick="calculateWeight()">Berechnen</button>
</form>

<p id="result"></p>
</div>

<script src="script.js"></script>
</body>
</html>

 

CSS Datei

 

 

.calculator {
margin: 0 auto;
width: 50%;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}

h1 {
text-align: center;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-top: 10px;
}

input {
padding: 5px;
margin-bottom: 10px;
}

button {
margin-top: 10px;
padding: 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #3e8e41;
}

#result {
margin-top: 10px;
text-align: center;
font-size: 24px;
font-weight: bold;
}

 

 

JS Datei

 

function calculateWeight() {
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
var thickness = document.getElementById("thickness").value;
var density = document.getElementById("density").value;
var result = document.getElementById("result");

var volume = length * width * thickness / 1000000;
var weight = volume * density;

result.innerHTML = "Das Gewicht beträgt " + weight.toFixed(2) + " kg.";
}

 

 

Leider wie und wo ich die HTML Datei einfügen soll. Ich habe ja die theme.liquid mit einem bereits bestehenden doctype. Kann ich  das einfach dazwischen bzw. an letzter stelle vor </html> einfügen?

 

Danke

 

3 ANTWORTEN 3

Finer
Shopify Expert
1986 411 709

@blackforest22 In der Vorlage solltest du die Möglichkeit haben einen "Custom HTML" Abschnitt einfügen zu können. Alternativ kannst du auch auf der Seite (Backend) in der Beschreibung rechts oben den Button "<>" sehen. Dadruch kommst du in die HTML-Ansicht und kannst dort den Code einfügen.

 

Denk aber daran, das Script in die entsprechenden Tags zu setzen:

<script>[...Javascript code..]</script>

 

Das gilt auch für den CSS Abschnitt:

<style>CSS ABschnitt</style>

 

Da beides (CSS und JS) bereits auf der Seite sind, kannst du das HTML auf Folgendes kürzen:

<div class="calculator">
<h1>Granit Gewichtsrechner</h1>
<form>
<label for="length">Länge (cm):</label>
<input type="number" id="length" name="length" min="0" required>

<label for="width">Breite (cm):</label>
<input type="number" id="width" name="width" min="0" required>

<label for="thickness">Dicke (cm):</label>
<input type="number" id="thickness" name="thickness" min="0" required>

<label for="density">Dichte (kg/m³):</label>
<input type="number" id="density" name="density" min="0" required>

<button type="button" onclick="calculateWeight()">Berechnen</button>
</form>

<p id="result"></p>
</div>

 

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
blackforest22
Neues Mitglied
19 0 0

Vielen Dank Finer. 

 

Das hat sehr geholfen. Ich habe den Code im Backend wie beschrieben im HTML Feld eingefügt. Er gibt jetzt auch eine Lösung aus. Ich denke er übernimmt das CSS nicht richtig. Ich kann mich aber auch täuschen. 

 

Hier ist der von mir eingefügte Code nach deiner Anleitung:

 

<script>// <![CDATA[
.calculator {
margin: 0 auto;
width: 50%;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}

h1 {
text-align: center;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-top: 10px;
}

input {
padding: 5px;
margin-bottom: 10px;
}

button {
margin-top: 10px;
padding: 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #3e8e41;
}

#result {
margin-top: 10px;
text-align: center;
font-size: 24px;
font-weight: bold;
}
// ]]></script>
<script>// <![CDATA[
function calculateWeight() {
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
var thickness = document.getElementById("thickness").value;
var density = document.getElementById("density").value;
var result = document.getElementById("result");

var volume = length * width * thickness / 1000000;
var weight = volume * density;

result.innerHTML = "Das Gewicht beträgt " + weight.toFixed(2) + " kg.";
}
// ]]></script>

<div class="calculator">
<h1>Granit Gewichtsrechner</h1>
<form>
<label for="length">Länge (cm):</label> <input type="number" id="length" name="length" min="0" required=""> <label for="width">Breite (cm):</label> <input type="number" id="width" name="width" min="0" required=""> <label for="thickness">Dicke (cm):</label> <input type="number" id="thickness" name="thickness" min="0" required=""> <label for="density">Dichte (kg/m³):</label> <input type="number" id="density" name="density" min="0" required=""> <button type="button" onclick="calculateWeight()">Berechnen</button>
</form>
<p id="result"> </p>
</div>

Finer
Shopify Expert
1986 411 709

Das ist von den HTML-Tags her nicht korrekt. Probiere folgendes aus:

 

<div class="calculator">
<h1>Granit Gewichtsrechner</h1>
<form>
<label for="length">Länge (cm):</label>
<input type="number" id="length" name="length" min="0" required>

<label for="width">Breite (cm):</label>
<input type="number" id="width" name="width" min="0" required>

<label for="thickness">Dicke (cm):</label>
<input type="number" id="thickness" name="thickness" min="0" required>

<label for="density">Dichte (kg/m³):</label>
<input type="number" id="density" name="density" min="0" required>

<button type="button" onclick="calculateWeight()">Berechnen</button>
</form>

<p id="result"></p>
</div>

 

<style>

.calculator {
margin: 0 auto;
width: 50%;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}

h1 {
text-align: center;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-top: 10px;
}

input {
padding: 5px;
margin-bottom: 10px;
}

button {
margin-top: 10px;
padding: 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #3e8e41;
}

#result {
margin-top: 10px;
text-align: center;
font-size: 24px;
font-weight: bold;
}
</style>

 

 

<script>
function calculateWeight() {
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
var thickness = document.getElementById("thickness").value;
var density = document.getElementById("density").value;
var result = document.getElementById("result");

var volume = length * width * thickness / 1000000;
var weight = volume * density;

result.innerHTML = "Das Gewicht beträgt " + weight.toFixed(2) + " kg.";
}
</script>

 

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency