Vechtsport Online Components for Magento 2

Toolbar: Pager 

<div class="toolbar ">
    <div class="toolbar__limiter">
        <div class="select toolbar__limiter-wrapper">
            <label class="label toolbar__limiter-label" for="Sorteren op">
                Toon
            </label>
            <select id="Sorteren op" class="select__field toolbar__limiter-select " name="sort-by">
                <option value="12">
                    12
                </option>
                <option value="24">
                    24
                </option>
                <option value="36">
                    36
                </option>
            </select>
        </div>
    </div>
    <div class="toolbar__sorter">
        <div class="select toolbar__sorter-wrapper">
            <label class="label toolbar__sorter-label" for="sort-by">
                Sorteren op
            </label>
            <select id="sort-by" class="select__field toolbar__sorter-select " name="sort-by">
                <option value="prijs high to low">
                    Prijs hoog - laag
                </option>
                <option value="prijs low to high">
                    Prijs laag - hoog
                </option>
                <option value="new">
                    Nieuw
                </option>
                <option value="best reviewd">
                    Best beoordeeld
                </option>
            </select>
        </div>

    </div>
</div>
 
<div class="toolbar {{ class }}" {{{ attributes }}}>
    <div class="{{ limiter.class }}">
        {{> '@select' limiter.select }}
    </div>
    <div class="toolbar__sorter">
        {{render '@select' sortBy }}
    </div>
</div>
 
{
  "amount": "1630",
  "found": "producten gevonden",
  "show": "Toon",
  "perpage": "producten per pagina",
  "sortBy": {
    "class": "toolbar__sorter-wrapper",
    "label": {
      "attributes": "",
      "text": "Sorteren op",
      "class": "toolbar__sorter-label"
    },
    "field": {
      "id": "sort-by",
      "name": "sort-by",
      "class": "toolbar__sorter-select"
    },
    "options": [
      {
        "text": "Prijs hoog - laag",
        "value": "prijs high to low"
      },
      {
        "text": "Prijs laag - hoog",
        "value": "prijs low to high"
      },
      {
        "text": "Nieuw",
        "value": "new"
      },
      {
        "text": "Best beoordeeld",
        "value": "best reviewd"
      }
    ]
  },
  "limiter": {
    "class": "toolbar__limiter",
    "select": {
      "class": "toolbar__limiter-wrapper",
      "label": {
        "attributes": "",
        "text": "Toon",
        "class": "toolbar__limiter-label"
      },
      "field": {
        "id": "Sorteren op",
        "name": "sort-by",
        "class": "toolbar__limiter-select"
      },
      "options": [
        {
          "text": "12",
          "value": "12"
        },
        {
          "text": "24",
          "value": "24"
        },
        {
          "text": "36",
          "value": "36"
        }
      ]
    },
    "suffix": ""
  },
  "showPager": true,
  "pager": {
    "arrowLeftVisible": false,
    "arrowRightVisible": true,
    "pages": [
      {
        "pageNo": 1,
        "class": "link--invert",
        "active": false
      },
      {
        "pageNo": 2,
        "class": "link--invert",
        "active": false
      },
      {
        "pageNo": 3,
        "class": "link--invert",
        "active": false
      }
    ]
  }
}
  • Content: 
    .toolbar {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    @include mq($screen-l) {
        justify-content: flex-end;
    }

    @include mq($screen-m) {
        padding: $spacer--2 0 $spacer--1;
    }

    &__limiter,
    &__sorter {
        width: 100%;

        @include mq($screen-l) {
            width: auto;
        }

        &-label {
            display: none;
        }

        &-select {
            background-color: #ecf5f4;
            padding: 0 2.5rem 0 1rem;
            width: 100%;
            height: 48px;

            @include mq($screen-l) {
                height: 36px;
            }
        }
    }

    &__limiter {
        margin-right: $spacer--1;
        width: 30%;

        @include mq($screen-l) {
            width: auto;
        }
    }

    &__sorter {
        width: 70%;

        @include mq($screen-l) {
            width: auto;
        }
    }

    & .select {
        margin-bottom: 0;

        @include mq($screen-m) {
            width: auto;
        }
    }
}

.toolbar--bottom {
    font-family: $font-family-saira;
    font-size: $font-size-base;
    letter-spacing: 0.02em;

    display: flex;
    flex-basis: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    @include mq($screen-m) {
        justify-content: flex-start;
        flex-basis: 70%;
        margin: 0;
        padding: 0;
    }

    &-amount {
        display: flex;
        justify-content: flex-start;

    }

    &-limiter {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        border-left: 1px solid #e6e6e6;
        padding: 0 16px;
        margin: 0 16px;

        width: unset;

        & .toolbar__limiter-select {
            background-color: #ecf5f4;
            margin: 0 16px;
            width: unset;
        }
        & .toolbar__limiter-wrapper {
            margin: 0;
        }
    }


}
  • URL: /components/raw/toolbar/_toolbar.scss
  • Filesystem Path: build/components/03-modules/toolbar/_toolbar.scss
  • Size: 2 KB

There are no notes for this item.