কীভাবে On click to Show Search অ্যাড করবেন

কীভাবে Scroll Up button অ্যাড করবেন

১.ই-দোকান এর ম্যানেজ প্যানেল থেকে Shop > Design ক্লিক করুন

২.JvavScript অপশন এ ক্লিক করুন

৩.Add New তে ক্লিক করে একটা new javascript ফাইল ক্রিয়েট করুন ৪.জাভাস্ক্রিপ্ট এর কোড তা copy করে ওই খানে সেট করে আপডেট করুন ৫.আবার Shop > Design > Custom CSS এ ক্লিক করুন ৬.স্ক্রোল করে নিছে css কোড তা পেস্ট করুন

###CSS Code

//style
@media (min-width: 992px){
input[type=search] {
    border: 1px solid gray;
    width: 0 !important;
    height: 50px;
    border-top: none;
    border-left: none;
    border-right: none;
    opacity: 0;
    transition: .3s;
     
}

.show-search{
    display: block !important;
    min-width: 450px !important;
    opacity: 1 !important;
    transition: .3s;
    position: absolute;
     z-index: 100;
}
/* close Button */
#navbar-row-1 > div > div > div:nth-child(4) > ul > li:nth-child(2){
    display: none;
}
.close-search{
    display: inline-block !important;
}
/* Search button */
.search-none{
    display: none !important;
}
}

###Script Code

//Script
document.addEventListener("DOMContentLoaded", function(e) {
    // Remove href from a tag
    const anchorElement = document.querySelector("#navbar-row-1 > div > div > div:nth-child(4) > ul > li:nth-child(1) > a");
    const closeAnchor = document.querySelector("#navbar-row-1 > div > div > div:nth-child(4) > ul > li:nth-child(2) > a");
    let toggle = false; // Fixed typo and moved `toggle` outside to ensure scope.
   let imageSection = document.querySelector("#navbar-row-1 > div > div > div:nth-child(4) > ul > li:nth-child(1) > a");

// Create an image element
let image = document.createElement("img");
image.className = "nav-icon d-none";
image.src = "https://bd-1.edkncdn.net/img/1920x1920/stores/671e1ada2daa259c9d23e7d0/banner/1733031974453-OSNPXt2pQUuhAfRNEbgk2.webp";
image.alt = "close";

if (imageSection) {
    // Insert the image as the last child of the selected element
    imageSection.insertAdjacentElement("beforeend", image);
}
    if (anchorElement) {
        anchorElement.removeAttribute('href');
    }

    if(closeAnchor){
        closeAnchor.removeAttribute('href')
    }

    // Search Button
    if (anchorElement) {
        anchorElement.addEventListener("click", function() {
            toggle = !toggle; // Properly toggling the value of `toggle`
            const searchInput = document.querySelector("#navbar-row-1 > div > div > div.align-self-center.collapse.flex-grow-0.d-md-flex > form > div > input");
            const closeSearchBtn= document.querySelector("#navbar-row-1 > div > div > div:nth-child(4) > ul > li:nth-child(1) > a > img:nth-child(3)");
            const searchNone = document.querySelector("#navbar-row-1 > div > div > div:nth-child(4) > ul > li:nth-child(1) > a > img:nth-child(1)")
            if (searchInput) {
                if (toggle) {
                    searchInput.classList.add('show-search'); // Corrected class name usage
                    searchNone.classList.add('d-none');
                    closeSearchBtn.classList.remove('d-none')
                   
                } else {
                    searchInput.classList.remove('show-search');
                    closeSearchBtn.classList.add('d-none');
                    searchNone.classList.remove('d-none');
                   
                }
            }
        });
    }
});