HTML Tabel pop-up in Function.php
Hopelijk is hier iemand die mij kan helpen met een HTML/CSS code.
Ik probeer een link aanmaken op Woocommerce single product page.
De bedoeling is dat er een pop-up opengaat met een tabel. Deze gebruik ik als size chart.
Ik heb een HTML en CSS code gevonden en aangepast die mij erg aanspreekt en deze wil ik dan gebruiken op de website.
Deze zet ik hieronder!
Ik wil geen Javascript window. Die vind ik heel erg lelijk. Dus weet niet zo goed of de onderstaande code überhaupt bruikbaar is.
En stel je je voor dat ik de HTML code toch erin krijg, hoe maak ik dan connectie met style.css om het gewenste ontwerp te krijgen?
Let wel op; ik gebruik de child theme. Dus liever wil ik alles daarin.
Is er wel een manier om dit op te lossen? Alvast mijn grote dank!!!!!
P.S. Op dit moment heb ik trouwens deze code staan in function.php om de size-chart button/link laten verschijnen in de single product page (javascript code is puur een voorbeeld wat wel functioneert maar is niet echt waar ik op zoek naar ben):
add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );
function my_extra_button_on_product_page() {
global $product;
echo "<a href onclick=\"window.open('https://www.nu.nl', 'newwindow', 'width=1000,height=800');return false;
\">
Size Chart
</a>";
}
Wat ik zoek:
<code>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want USE: inline-block (for box vorm)*/
.popup {
position: relative;
position: fixed;
cursor: pointer;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0)
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 80%;
background-color: #fff;
opacity:0.8;
color: #fff;
text-align: center;
border-radius: 0px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: -400px;
left: 0%;
top: 0%;
right: 0%;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 0.8;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 0.8;}
}
table {
font-family: Roboto, sans-erif;
width: 100%;
color: #112a26;
font-weight: 100;
border: none !important;
}
td, th {
text-align: center;
padding: 20px;
border: none !important;
}
</style>
</head>
<body style="text-align:center">
<div style="color:#112a26" class="popup" onclick="myFunction()">Size chart
<span class="popuptext" id="myPopup">
<table>
<tr>
<th>Sizes</th>
<th>AU</th>
<th>USA</th>
<th>UK</th>
<th>EU</th>
</tr>
<tr>
<td>S</td>
<td>6</td>
<td>6</td>
<td>8</td>
<td>38</td>
</tr>
<tr>
<td>M</td>
<td>8</td>
<td>8</td>
<td>10</td>
<td>40</td>
</tr>
<tr>
<td>L</td>
<td>10</td>
<td>10</td>
<td>12</td>
<td>44</td>
</tr>
</table>
</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
</html>
</code>
Gewijzigd op 06/01/2020 08:55:24 door Amin Haghighi
Zou je jouw code tussen code-tags willen plaatsen? Dan is het beter leesbaar.
Dat je een child-theme gebruikt is al een goede opzet.
Gewijzigd op 06/01/2020 07:38:07 door - Ariën -
Ik heb geen idee hoe dat moet eerlijk gezegd.
Ik zie niet heel veel opties staan hier. Ook met <code> tags lukt het even niet.
Het is inderdaad onleesbaar op deze manier.
Gewijzigd op 06/01/2020 08:59:33 door Amin Haghighi
[code] en [/code]. HTML werkt hier uiteraard niet.
maar je hebt al al een mooi script gevonden? Waarop loop je vast met implementeren ervan?
Gewijzigd op 06/01/2020 09:23:54 door - Ariën -
Bedankt voor je snelle reactie.
Ik wil een code met twee functies namelijk.
1. Informatie opvragen van de server met behulp van een html bestand of iets dergelijks. Dus de tabel met bijhorende css code die als html of php bestand op de server is opgeslagen.
2. Het tonen van de tabel op de website.
Ik wil een vergelijkbare code (zie hieronder) gebruiken om dit allemaal voor elkaar te krijgen. Maar de vraag is hoe en wat is de juiste code en de path waar ik het html bestand zou kunnen opslaan. De code wat hieronder staat werkt prima. Die maakt een venster open en Nu.nl verschijnt etc.
Maar wat ik graag wil is het vervangen van window.open command of die hele echo command door iets die html/php code kan opvragen en verwerken op de website.
Het kan ook zijn dat ik de html en css codes gewoon mag gebruiken in function.php en dat het veel makkelijker zou zijn dan ik had verwacht. Alleen weet ik dus niet hoe.
add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );
function my_extra_button_on_product_page() {
global $product;
echo "<a href onclick=\"window.open('https://www.nu.nl', 'newwindow', 'width=1000,height=800');return false;
\">
Size Chart
</a>";
}
Alvast erg dank voor je reactie.