Вот моя проблема: я создал собственный нижний колонтитул на своем сайте Shopify, который при просмотре на мобильном устройстве имеет меню, превращающееся в несколько ссылок в стиле аккордеона, где меню сдвигает весь сайт вниз. Я создал нижний колонтитул в Webflow, экспортировал код и немного его изменил. По какой-то причине JavaScript не будет общаться с моим другим кодом. Я добавил файл JS в папку активов и связал его в файле theme.liquid следующим образом:
{{‘Footer-js.js’ | asset_url | script_tag}}
Есть ли другое место, где я должен упомянуть это? Я также попытался сделать это на моем файле footer.liquid.
Вот часть моего HTML, и я не могу включить JS, так как он очень длинный.
Я не думаю, что файл JS должен быть таким длинным только для одной функции. В настоящее время это 134KB автономный.
Примечание ** Я ставлю 'rem' перед каждым классом, чтобы избежать конфликтов с другими классами на сайте Shopify. Также нижний колонтитул выглядит и отвечает именно так, как я хочу, за исключением меню мобильного аккордеона. Спасибо за любую помощь!
<div class="rem-footer-navlink-row w-row">
<div class="w-col w-col-4">
<div class="rem-footer-navlink-column">
<h6 class="rem-h6-heading rem-white">COMPANY</h6><a href="#" class="rem-footer-navlink">About Us</a><a href="#" class="rem-footer-navlink">Contact Us</a><a href="#" class="rem-footer-navlink">Reviews</a><a href="#" class="rem-footer-navlink">FAQ</a></div>
</div>
<div class="w-col w-col-4">
<div class="rem-footer-navlink-column">
<h6 class="rem-h6-heading rem-white">why femininity</h6><a href="#" class="rem-footer-navlink">How It Works</a><a href="#" class="rem-footer-navlink">Vaginal Dryness</a><a href="#" class="rem-footer-navlink">Sea Buckthorn</a></div>
</div>
<div class="w-col w-col-4">
<div class="rem-footer-navlink-column">
<h6 class="rem-h6-heading rem-white">support</h6><a href="#" class="rem-footer-navlink phone">(800) 123-4567</a>
<div class="rem-phone-hours">9am-5pm (Eastern)</div><a href="#" class="rem-footer-navlink">Email Us!</a></div>
</div>
</div>