Adds standard styling for header, cart, and search
Applies new styling to the header, shopping cart, and search bar components. Creates new scss files for header and swiper layouts. Replaces x.svg. These changes create a more consistent and modern user interface.
This commit is contained in:
@ -0,0 +1,19 @@
|
||||
<div class="col flex-grow-0 header-top__block header-top__block--favorite js-favorite-top-content">
|
||||
<a
|
||||
class="header-top__link"
|
||||
rel="nofollow"
|
||||
href="{$favoritePageUrl}"
|
||||
>
|
||||
<div class="header-top__icon-container">
|
||||
{capture name="svg_output"}{svg_icon file='heart.svg'}{/capture}
|
||||
{if $smarty.capture.svg_output}
|
||||
{$smarty.capture.svg_output nofilter}
|
||||
{else}
|
||||
<span class="header-top__icon material-icons">favorite</span>
|
||||
{/if}
|
||||
<span class="header-top__badge">
|
||||
{$favoriteProductsCount}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
<div class="header-top__block header-top__block--search col-12 col-md mt-2 mt-lg-0">
|
||||
<div id="search_from">
|
||||
<form class="search-form js-search-form" data-search-controller-url="{$ajax_search_url}" method="get" action="{$search_controller_url}">
|
||||
<div class="search-form__form-group">
|
||||
<input type="hidden" name="controller" value="search">
|
||||
<input class="js-search-input search-form__input form-control"
|
||||
placeholder="{l s='Enter what you are looking for' d='Modules.Issearchbar.Form'}"
|
||||
type="text"
|
||||
name="s"
|
||||
value="{$search_string}">
|
||||
<button type="submit" class="search-form__btn btn">
|
||||
<span class="material-icons">search</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,89 @@
|
||||
{**
|
||||
* 2007-2020 PrestaShop and Contributors
|
||||
*
|
||||
* NOTICE OF LICENSE
|
||||
*
|
||||
* This source file is subject to the Academic Free License 3.0 (AFL-3.0)
|
||||
* that is bundled with this package in the file LICENSE.txt.
|
||||
* It is also available through the world-wide-web at this URL:
|
||||
* https://opensource.org/licenses/AFL-3.0
|
||||
* If you did not receive a copy of the license and are unable to
|
||||
* obtain it through the world-wide-web, please send an email
|
||||
* to license@prestashop.com so we can send you a copy immediately.
|
||||
*
|
||||
* @author PrestaShop SA <contact@prestashop.com>
|
||||
* @copyright 2007-2020 PrestaShop SA and Contributors
|
||||
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
|
||||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
|
||||
<div class="header-top__block header-top__block--cart col flex-grow-0">
|
||||
<div class="js-blockcart blockcart cart-preview dropdown" data-refresh-url="{$refresh_url}">
|
||||
<a href="#" role="button" id="cartDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
|
||||
class="header-top__link d-lg-block d-none">
|
||||
<div class="header-top__icon-container">
|
||||
{capture name="svg_output"}{svg_icon file='bag.svg'}{/capture}
|
||||
{if $smarty.capture.svg_output}
|
||||
{$smarty.capture.svg_output nofilter}
|
||||
{else}
|
||||
<span class="header-top__icon material-icons">shopping_basket</span>
|
||||
{/if}
|
||||
<span class="header-top__badge {if $cart.products_count > 9}header-top__badge--smaller{/if}">
|
||||
{$cart.products_count}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="{$cart_url}" class="d-flex d-lg-none header-top__link">
|
||||
<div class="header-top__icon-container">
|
||||
{capture name="svg_output"}{svg_icon file='bag.svg'}{/capture}
|
||||
{if $smarty.capture.svg_output}
|
||||
{$smarty.capture.svg_output nofilter}
|
||||
{else}
|
||||
<span class="header-top__icon material-icons">shopping_basket</span>
|
||||
{/if}
|
||||
<span class="header-top__badge {if $cart.products_count > 9}header-top__badge--smaller{/if}">
|
||||
{$cart.products_count}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu blockcart__dropdown cart-dropdown dropdown-menu-right" aria-labelledby="cartDropdown">
|
||||
<div class="cart-dropdown__content keep-open js-cart__card-body cart__card-body">
|
||||
<div class="cart-loader">
|
||||
<div class="spinner-border text-primary" role="status"><span
|
||||
class="sr-only">{l s='Loading...' d='Shop.Theme.Global'}</span></div>
|
||||
</div>
|
||||
<div class="cart-dropdown__title d-flex align-items-center mb-3">
|
||||
<p class="h5 mb-0 mr-2">
|
||||
{l s='Your cart' d='Modules.Isshoppingcart.Isshoppingcart'}
|
||||
</p>
|
||||
<a data-toggle="dropdown" href="#" class="cart-dropdown__close dropdown-close ml-auto cursor-pointer text-decoration-none">
|
||||
<i class="material-icons d-block">close</i>
|
||||
</a>
|
||||
</div>
|
||||
{if $cart.products_count > 0}
|
||||
<div class="cart-dropdown__products pt-3 mb-3">
|
||||
{foreach from=$cart.products item=product}
|
||||
{include 'module:is_shoppingcart/views/templates/front/is_shoppingcart-product-line.tpl' product=$product}
|
||||
{/foreach}
|
||||
</div>
|
||||
|
||||
<div class="cart-summary-line cart-total">
|
||||
<span class="label">{$cart.totals.total.label}</span>
|
||||
<span class="value">{$cart.totals.total.value}</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<a href="{$cart_url}" class="btn btn-sm btn-primary btn-block dropdown-close">
|
||||
{l s='Proceed to checkout' d='Shop.Theme.Actions'}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{else}
|
||||
<div class="alert alert-warning">
|
||||
{l s='Unfortunately your basket is empty' d='Modules.Isshoppingcart.Isshoppingcart'}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user