Skip to content

Commit

Permalink
icons map POC
Browse files Browse the repository at this point in the history
  • Loading branch information
Oksydan committed Sep 28, 2023
1 parent 4f112be commit 3dafb71
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 1 deletion.
23 changes: 22 additions & 1 deletion modules/ps_shoppingcart/ps_shoppingcart.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,28 @@
<span class="header-block__action-btn">
{/if}

<i class="material-icons header-block__icon" aria-hidden="true">shopping_cart</i>
{*
OLD ICON
<i class="material-icons header-block__icon" aria-hidden="true">shopping_cart</i>
*}

{renderThemeIcon
iconName="cart"
extraAttributes=[
"aria-hidden" => "true",
"class" => "header-block__icon"
]
}

{renderThemeIconSvg
iconName="cart"
extraAttributes=[
"aria-hidden" => "true",
"viewBox" => "0 -960 960 960",
"class" => "header-block__icon"
]
}

<span class="d-none d-md-flex header-block__title">{l s='Cart' d='Shop.Theme.Checkout'}</span>
<span class="header-block__badge">{$cart.products_count}</span>

Expand Down
13 changes: 13 additions & 0 deletions src/scss/partials/_fonts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,16 @@
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
}

/**
* Generic svg-icon class that sets basic styles to make icons act like a icon font, but with the benefits of an svg.
*/
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
display: inline-block;
font-size: 24px; // To match the Material Icons font-size POC only
overflow: hidden;
vertical-align: middle;
}
63 changes: 63 additions & 0 deletions templates/_partials/helpers.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,66 @@
>
</a>
{/function}

{assign
var=iconsMap
value=[
"cart" => "shopping_cart"
]
scope="global"
}


{** SVG SPRITE **}

<svg class="d-none">
<defs>
<g id="shopping_cart">
<path
d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM208-800h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Z"/>
</g>
</defs>
</svg>


{**
* @param string iconName
* @param array extraAttributes
* @return string
* @example
* {renderIcon name='cart' extraAttributes=['class' => 'my-extra-class']}
*}
{function renderThemeIcon iconName="" extraAttributes=[]}
{if $iconName && !empty($iconsMap[$iconName])}

<span
class="material-icons {if !empty($extraAttributes['class'])}{$extraAttributes['class']}{/if}"
{foreach $extraAttributes as $key => $value}
{if $key != 'class'}
{$key}="{$value}"
{/if}
{/foreach}
>
{$iconsMap[$iconName]}
</span>


{/if}
{/function}

{** DIFFERENT NAME ONLY FOR POC TO DISPLAY POSIBILITES **}
{function renderThemeIconSvg iconName="" extraAttributes=[]}
{if $iconName && !empty($iconsMap[$iconName])}
<svg
class="svg-icon {if !empty($extraAttributes['class'])}{$extraAttributes['class']}{/if}"
{foreach $extraAttributes as $key => $value}
{if $key != 'class'}
{$key}="{$value}"
{/if}
{/foreach}
>
<use xlink:href="#{$iconsMap[$iconName]}"></use>
</svg>
{/if}
{/function}

0 comments on commit 3dafb71

Please sign in to comment.