+
- {% if page.title -%}

{{ page.title }} {%- if page.version-badge -%} diff --git a/_sass/modules/_buttons.scss b/_sass/modules/_buttons.scss index 0b7ae31fa..fb0dcde4d 100644 --- a/_sass/modules/_buttons.scss +++ b/_sass/modules/_buttons.scss @@ -66,9 +66,15 @@ font-size: $small-font-size; background: none; border: none; - margin: $spacing-unit / 2 0 $spacing-unit / 2 ($spacing-unit / 4 * -1); + margin: $spacing-unit / 2 0; padding: $spacing-unit / 4; color: $color-slate; + position: sticky; + top: 0; + background-color: $color-white; + width: 100%; + text-align: left; + padding-left: $spacing-unit; @include tablet-and-up { display: none; diff --git a/_sass/modules/_layout.scss b/_sass/modules/_layout.scss index 2ac50c7ce..35757cf81 100644 --- a/_sass/modules/_layout.scss +++ b/_sass/modules/_layout.scss @@ -70,12 +70,16 @@ body { .sidebar__logo { border-bottom: 1px solid $color-blue-4; color: $color-white; + background-color: $color-blue-5; font-size: $base-font-size * 2; font-weight: 300; height: $logo-height; line-height: $logo-height; margin-bottom: 0; text-align: center; + position: sticky; + top: 0; + z-index: 1; // &:after { @@ -102,8 +106,8 @@ body { .sidebar__nav-interior { height: 100%; - // Add a bit more padding at the bottom for consistency. - padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height); + // Add double padding at the bottom for a better experience + padding: $spacing-unit $spacing-unit ($spacing-unit * 2); } .section__header { @@ -116,6 +120,14 @@ body { .section__links + & { margin-top: $spacing-unit; } + + &.subheader { + font-weight: normal; + &::before { + content: '▾'; + margin-right: ($spacing-unit / 2) - 15.5; + } + } } .section__links { diff --git a/_tags/iteration.md b/_tags/iteration.md index 2d68031eb..71fd8f2d4 100644 --- a/_tags/iteration.md +++ b/_tags/iteration.md @@ -87,6 +87,27 @@ Causes the loop to skip the current iteration when it encounters the `continue` 1 2 3 5 ``` +### ifchanged + +Checks the output of a block of code against the previous iteration and only prints the output if it has changed. + +

Input

+```liquid +{%- raw -%} + +{% for item in array %} + {% ifchanged %} + {{ item }} + {% endifchanged %} +{% endfor %} +{% endraw %} +``` + +

Output

+```text +1 2 1 3 +``` + ## for (parameters) ### limit diff --git a/_tags/template.md b/_tags/template.md index 21420354a..080ef4c9d 100644 --- a/_tags/template.md +++ b/_tags/template.md @@ -26,10 +26,10 @@ is {{ verb }} into a comment.

Output

```liquid -{% assign verb = "turned" %} -{% comment %} -{% assign verb = "converted" %} -{% endcomment %} +{% assign verb = "turned" -%} +{% comment -%} +{% assign verb = "converted" -%} +{% endcomment -%} Anything you put between {% comment %} and {% endcomment %} tags is {{ verb }} into a comment. ``` @@ -47,7 +47,7 @@ In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.

Output

```text -{% raw %} +{%- raw -%} In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not. {% endraw %} ``` @@ -107,42 +107,36 @@ Note that you don't need to write the file's `.liquid` extension. The code within the rendered template does **not** automatically have access to the variables assigned using [variable tags]({{ "/tags/variable/" | prepend: site.baseurl }}) within the parent template. Similarly, variables assigned within the rendered template cannot be accessed by code in any other template. -## render (parameters) +### Passing variables and objects to a template -Variables assigned using [variable tags]({{ "/tags/variable/" | prepend: site.baseurl }}) can be passed to a template by listing them as parameters on the `render` tag. +Variables assigned using [variable tags]({{ "/tags/variable/" | prepend: site.baseurl }}) can be passed to a template by listing them as parameters on the `render` tag. Objects can also be passed the same way. ```liquid {%- raw -%} {% assign my_variable = "apples" %} {% render "name", my_variable: my_variable, my_other_variable: "oranges" %} -{% endraw %} -``` - -One or more objects can be passed to a template. -```liquid -{%- raw -%} {% assign featured_product = all_products["product_handle"] %} {% render "product", product: featured_product %} {% endraw %} ``` -### with +### Passing an object using `with` -A single object can be passed to a template by using the `with` and optional `as` parameters. +A single object can be passed to a template by using the `with` and `as` parameters. The `as` parameter is optional, and if missing, it assumes the template name as the variable name. ```liquid {%- raw -%} {% assign featured_product = all_products["product_handle"] %} -{% render "product" with featured_product as product %} +{% render "product" with featured_product as ft_product %} {% endraw %} ``` -In the example above, the `product` variable in the rendered template will hold the value of `featured_product` from the parent template. +In the example above, the `ft_product` variable in the rendered template will hold the value of `featured_product` from the parent template. Without `as ft_product`, the `product` variable (since the template name is "product") will hold this value. -### for +### Rendering iteratively using `for` -A template can be rendered once for each value of an enumerable object by using the `for` and optional `as` parameters. +A template can be rendered once for each value of an enumerable object by using the `for` and `as` parameters. The `as` parameter is optional, and if missing, it assumes the template name as the variable name. ```liquid {%- raw -%} @@ -155,9 +149,7 @@ In the example above, the template will be rendered once for each variant of the When using the `for` parameter, the [`forloop`](https://shopify.dev/docs/themes/liquid/reference/objects/for-loops) object is accessible within the rendered template. -## include - -_The `include` tag is deprecated; please use [`render`](#render) instead._ +## include {%- include version-badge.html version="5.0.0" deprecated=true %} Insert the rendered content of another template within the current template. diff --git a/_tags/variable.md b/_tags/variable.md index cac9be4f8..a6d7f7c50 100644 --- a/_tags/variable.md +++ b/_tags/variable.md @@ -21,7 +21,10 @@ Creates a new named variable.

Output

```text -This statement is valid. +{% assign my_variable = false -%} +{% if my_variable != true -%} + This statement is valid. +{%- endif %} ``` Wrap a value in quotations `"` to save it as a string variable. @@ -36,7 +39,7 @@ Wrap a value in quotations `"` to save it as a string variable.

Output

```text -{% assign foo = "bar" %} +{% assign foo = "bar" -%} {{ foo }} ``` @@ -54,7 +57,8 @@ Captures the string inside of the opening and closing tags and assigns it to a v

Output

```text -I am being captured. +{% capture my_variable %}I am being captured.{% endcapture -%} +{{ my_variable }} ``` Using `capture`, you can create complex strings using other variables created with `assign`. @@ -75,7 +79,14 @@ I am {{ age }} and my favorite food is {{ favorite_food }}.

Output

```text -I am 35 and my favourite food is pizza. +{% assign favorite_food = "pizza" -%} +{% assign age = 35 -%} + +{% capture about_me -%} +I am {{ age }} and my favorite food is {{ favorite_food }}. +{%- endcapture -%} + +{{ about_me }} ``` ## increment @@ -115,7 +126,7 @@ In the example below, a variable named "var" is created using `assign`. The `inc

Output

```text -{% assign var = 10 %} +{% assign var = 10 -%} {% increment var %} {% increment var %} {% increment var %} diff --git a/js/script.js b/js/script.js index ce9abadf8..9d2ab883e 100644 --- a/js/script.js +++ b/js/script.js @@ -1,15 +1,23 @@ var menuButton = document.querySelector('.menu-button') var sidebar = document.querySelector('.sidebar') +var sidebarNav = document.querySelector('.sidebar__nav') var contentOverlay = document.querySelector('.content__overlay') -document.addEventListener('DOMContentLoaded', function () { - menuButton.addEventListener('click', function () { - sidebar.classList.toggle('sidebar--is-visible') - contentOverlay.classList.toggle('content__overlay--is-active') - }) +function toggleSidebar() { + sidebar.classList.toggle('sidebar--is-visible') + contentOverlay.classList.toggle('content__overlay--is-active') +} + +function scrollToFilter(e, filterId) { + var fi = document.getElementById(filterId) + fi.scrollIntoView() + sidebarNav.scrollTo(sidebarNav.scrollLeft, sidebarNav.scrollTop - 150 + fi.getBoundingClientRect().top) + sidebar.getBoundingClientRect().left < 0 && toggleSidebar() + e.preventDefault() + return false +} - contentOverlay.addEventListener('click', function () { - sidebar.classList.toggle('sidebar--is-visible') - contentOverlay.classList.toggle('content__overlay--is-active') - }) +document.addEventListener('DOMContentLoaded', function () { + menuButton.addEventListener('click', toggleSidebar) + contentOverlay.addEventListener('click', toggleSidebar) })