Создание адаптивного ящика быстрого доступа для Magento

Коробка быстрого доступа

В большинстве тем Magento окно быстрого доступа появляется в правом верхнем углу сайта и обычно содержит ссылки на полезные вещи, такие как корзина, оформление заказа и, возможно, окно поиска.

Обработка этого в адаптивном дизайне может быть сложно. Это занимает много места в верхней части страницы, и это не то, что вы хотите полностью удалить из небольшого экрана.

Решение Off Canvas

Одним из решений, которое я предлагаю, является использование контейнера вне холста с переключателем для перемещения содержимого на экран и из него.

Эта форма навигации стала обычным явлением в дизайне мобильных приложений и в основном проявляется в виде скрытой боковой панели.

В журнале Smashing Magazine есть отличная статья о навигации вне холста, если вы хотите узнать больше.

Я реализовал это, используя скрытый флажок и псевдо-селектор :checked Это имеет несколько преимуществ по сравнению с другими методами:

1. Нет JavaScript — это 100% CSS
2. Не изменяет состояние истории браузера. Тот же эффект можно использовать с селектором :targetpseudo

Но есть и недостаток скрытого флажка — плохая семантика.

Файл шаблона

Поле быстрого доступа включено в файл шаблона заголовка (app / design / frontend / base / default / template / page / html / header.phtml) в теме Magento по умолчанию.

Примечание. Вы должны следовать рекомендациям и не редактировать этот файл, а вносить изменения в свою собственную тему.

Две наиболее важные вещи, которые нужно добавить, это флажок и метка для управления состоянием флажка.

Непосредственно перед <div class="quick-access"></div><input type="checkbox" name="quick-access-checkbox" id="quick-access-checkbox"/>

Метка может находиться в любом месте на странице, если она помечена как для только что добавленного флажка. Имейте в виду, что на ярлыке нужно будет нажимать кнопку, когда окно быстрого доступа скрыто, а также когда оно отображается.

Я решил включить метку в блок быстрого доступа и обернуть основное содержимое блока быстрого доступа внутри контейнера div. Таким образом, ярлык может появиться в нижней части окна быстрого доступа и скользить вместе с ним при каждом открытии.

 <div class="quick-access">
    <div class="quick-access-container">
        <?php echo $this->getChildHtml('topSearch') ?>
        <p class="welcome-msg"><?php echo $this->getWelcome() ?> <?php echo $this->getAdditionalHtml() ?></p>
        <?php echo $this->getChildHtml('topLinks') ?>
        <?php echo $this->getChildHtml('store_language') ?>
    </div>
    <label for="quick-access-checkbox" class="menu-toggle-button"><span class="visually-hidden">Menu</span><span aria-hidden="true" data-icon="&#xe000;"></span></label>
</div>

Еще одна вещь, на которую стоит обратить внимание, это то, что я использовал иконку шрифта на ярлыке, но вы можете включить все, что захотите.

 #quick-access-checkbox {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

 .quick-access-container {
    height: 250px;
    overflow-y: auto;
}

.quick-access {
    position: fixed;
    top: -250px; /* Just enough to hide the content */
    left: 0;
    right: 0;
    z-index: 9999; /* Make sure it's on top of everything */
}

 #quick-access-checkbox:checked + .quick-access {
    top: 0;
}

 .quick-access {
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

 @media (min-width: 40em) {
    .quick-access-container {
        height: auto;
    }

    .quick-access {
        position: static;
    }
}