- Shopify Community

blackforest22 · ‎03-09-2023

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>

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

Finer · ‎03-09-2023

@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 · ‎03-09-2023

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:

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 · ‎03-09-2023

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

Rechner auf Shopify Seite veröffentlichen

Community Blog Artikel