What is the way to integrate custom html,css,js dropdown to phtml file
-
15-04-2021 - |
Pregunta
I am created a dropdown design using html, css and js.
<!doctype html>
<html lang="en">
<head>
<style>
.dropdown-menu {
max-width: max-content;
width: 400px;
}
.popupmenu-body {
max-width: max-content;
width: 400px;
}
.location-label {
font-size: 16px;
color: #545454;
}
.location-name {
font: normal normal bold 19px Laca;
letter-spacing: 0px;
color: #545454;
}
.location-change {
font: 17px Laca;
letter-spacing: 0px;
color: #F1592A;
cursor: pointer;
}
.nearest-store-title {
font: normal normal bold 21px Laca;
letter-spacing: 0px;
color: #545454;
}
.btn-view-all-store {
display: inline-block;
width: 360px;
height: 50px;
padding: 0px 30px;
background-color: #F1592A;
border-radius: 4px;
border: 0;
color: #FFFFFF;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.7px;
cursor: pointer;
}
.btn-view-all-store:hover {
color: #FFFFFF;
background-color: #f1582aad;
}
.btn-update {
display: inline-block;
padding: 0px 30px;
background-color: #fff;
border-radius: 4px;
border-width: 1px;
border-color: #F1592A;
color: #F1592A;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.7px;
cursor: pointer;
}
.btn-update:hover {}
.location-change-data {
font: 17px Laca;
letter-spacing: 0px;
color: #F1592A;
cursor: pointer;
}
.location-name {
font: normal normal bold 18px Laca;
color: #545454;
}
.location-address {
font: normal normal normal 17px Laca;
color: #545454;
}
.location-distance {
font: normal normal normal 14px Laca;
color: #545454;
}
.location-btn {
font: normal normal medium 1 15px Laca;
color: #F1592A;
cursor: pointer;
}
.location-btn:hover {
color: #a52600;
}
</style>
<meta charset="utf-8">
<title>Popoversample</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script>
var carName = "Volvo";
</script>
</head>
<body>
<div class="dropdown show">
<a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Click Me
</a>
<div class="dropdown-menu popupmenu-body" aria-labelledby="dropdownMenuLink" (click)="$event.stopPropagation()">
<p>hi</p>
</div>
</div>
</body>
</html>
I have a custom link on the header,
<div class="my-custom-link">
....
....
....
</div>
If click this div i want to show my dropdown.
I am using a custom theme, app\design\frontend\Zero\my_theme\Magento_Theme\templates\custom_link.phtml
How to add my custom dropdown to this phtml file
No hay solución correcta
Licenciado bajo: CC-BY-SA con atribución
No afiliado a magento.stackexchange