<div class="product-data js-product-data">
<div class="grid">
<div class="grid__col grid__col--xs-4 grid__col--lg-9">
<div class="grid grid--equalheight product-data__products">
<div class="grid__col grid__col--xs-4 grid__col--sm-2">
<div class="product-container js-product-container">
<div>
<h2 class="product-container__title">HAULOTTE COMPACT 10N</h2>
<div class="product-container__thumbnail">
<figure class="image product-container__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/09/haulotte20compact10N-600x600.jpg" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
<div class="product-container__bottom">
<div class="product-container__specs">
<div class="product-container__spec">
<p class="product-container__spec-text">Pinge</p>
<p class="product-container__spec-text">36V</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Lõiketera pikkus</p>
<p class="product-container__spec-text">0.5m</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Kaal</p>
<p class="product-container__spec-text">3,1kg</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Oksa diameeter, max</p>
<p class="product-container__spec-text">ø 20 mm</p>
</div>
</div>
<a href="/" class="button button--secondary">
<span class="button__inner">
<span class="button__text">Toote leht ja lisainfo</span>
</span>
</a>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--sm-2">
<div class="product-container js-product-container">
<div>
<h2 class="product-container__title">HAULOTTE COMPACT 10N</h2>
<div class="product-container__thumbnail">
<figure class="image product-container__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/09/haulotte20compact10N-600x600.jpg" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
<div class="product-container__bottom">
<div class="product-container__specs">
<div class="product-container__spec">
<p class="product-container__spec-text">Pinge</p>
<p class="product-container__spec-text">36V</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Lõiketera pikkus</p>
<p class="product-container__spec-text">0.5m</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Kaal</p>
<p class="product-container__spec-text">3,1kg</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Oksa diameeter, max</p>
<p class="product-container__spec-text">ø 20 mm</p>
</div>
</div>
<a href="/" class="button button--secondary">
<span class="button__inner">
<span class="button__text">Toote leht ja lisainfo</span>
</span>
</a>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--sm-2">
<div class="product-container js-product-container">
<div>
<h2 class="product-container__title">HAULOTTE COMPACT 10N</h2>
<div class="product-container__thumbnail">
<figure class="image product-container__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/09/haulotte20compact10N-600x600.jpg" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
<div class="product-container__bottom">
<div class="product-container__specs">
<div class="product-container__spec">
<p class="product-container__spec-text">Pinge</p>
<p class="product-container__spec-text">36V</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Lõiketera pikkus</p>
<p class="product-container__spec-text">0.5m</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Kaal</p>
<p class="product-container__spec-text">3,1kg</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Oksa diameeter, max</p>
<p class="product-container__spec-text">ø 20 mm</p>
</div>
</div>
<a href="/" class="button button--secondary">
<span class="button__inner">
<span class="button__text">Toote leht ja lisainfo</span>
</span>
</a>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--sm-2">
<div class="product-container js-product-container">
<div>
<h2 class="product-container__title">HAULOTTE COMPACT 10N</h2>
<div class="product-container__thumbnail">
<figure class="image product-container__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/09/haulotte20compact10N-600x600.jpg" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
<div class="product-container__bottom">
<div class="product-container__specs">
<div class="product-container__spec">
<p class="product-container__spec-text">Pinge</p>
<p class="product-container__spec-text">36V</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Lõiketera pikkus</p>
<p class="product-container__spec-text">0.5m</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Kaal</p>
<p class="product-container__spec-text">3,1kg</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Oksa diameeter, max</p>
<p class="product-container__spec-text">ø 20 mm</p>
</div>
</div>
<a href="/" class="button button--secondary">
<span class="button__inner">
<span class="button__text">Toote leht ja lisainfo</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-data__load-more-products">
<button type="button" class="button button--text js-product-data-load-more-products">
<span class="button__inner">
<span class="button__text">Lae variatsioone juurde</span>
</span>
</button>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--lg-3 product-data__sidebar-wrap">
<div class="product-data__sidebar">
<div class="price-block">
<div class="price-block__header">
<p class="text-inverted">Hind</p>
</div>
<div class="price-block__content">
<p class="price-block__heading text-medium">Päeva hind:</p>
<p>
<span class="price-block__price--success-bg text-medium">42.50€</span>
<span> KM-ga: 51.00€</span>
</p>
<div class="divider"></div>
<p class="price-block__heading text-medium">Kohustusliku Riskikaitse ühe päeva hind:</p>
<p>
<span class="price-block__price--success-bg text-medium">2.13€</span>
<span> KM-ga: 2.55€</span>
</p>
<div class="divider "></div>
<p class="price-block__heading text-medium">Tasuta rendipäevi nädalas:</p>
<p>6 – pühapäeva ei arveldata juhul kui seadet pühapäeval ei kasutata</p>
<button type="button" class="button button--block price-block__button">
<span class="button__inner">
<span class="button__text">Vaata saadavust</span>
</span>
</button>
</div>
</div>
<div class="add-to-cart js-add-to-cart">
<div class="add-to-cart__header">
<p class="text-inverted">Lisa toode rendikorvi</p>
</div>
<div class="add-to-cart__content">
<form action="/">
<div class="pickup-method js-pickup-method">
<div class="pickup-method__method-selection js-pickup-method-selection">
<fieldset class="choice-group
">
<legend class="choice-group__label h-visually-hidden"></legend>
<div class="choice-group__inner">
<div class="radio
radio--blue choice-group__item">
<input type="radio" id="self-pickup" name="radio" value="" class="radio__input">
<label for="self-pickup" class="radio__label">
<span class="radio__indicator"></span>
<span class="radio__text">Tulen ise järele</span>
</label>
</div>
<div class="radio
radio--blue choice-group__item">
<input type="radio" id="require-transport" name="radio" value="" class="radio__input">
<label for="require-transport" class="radio__label">
<span class="radio__indicator"></span>
<span class="radio__text">Soovin transporti</span>
</label>
</div>
</div>
</fieldset>
</div>
<div class="js-pickup-method-fields">
<div class="pickup-method__select" data-radio1="true">
<div class="textfield select ">
<label class="textfield__label select__label " for="rental-point">
Rentimispunkt
</label>
<div class="textfield__inner">
<select name="rentalPoint" id="rental-point" class="textfield__input select__input">
<option value="placeholder" disabled selected>
Vali nimekirjast
</option>
<option value="1">
Tallinn, Laki
</option>
<option value="2">
Tallinn, Peterburi tee
</option>
<option value="3">
Tallinn, Peterburi tee
</option>
<option value="4">
Tallinn, Peterburi tee
</option>
<option value="5">
Tallinn, Peterburi tee
</option>
<option value="5">
Tallinn, Peterburi tee
</option>
<option value="5">
Tallinn, Peterburi tee
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#"></use>
</svg>
</div>
</div>
</div>
<div class="pickup-method__address js-pickup-method-address" data-radio2="true">
<div class="textfield textfield--icon-right">
<label class="textfield__label " for="address">
Sinu aadress
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="address" name="address" placeholder="Sisesta aadress">
<svg class="icon textfield__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#map"></use>
</svg>
</div>
</div>
</div>
<div class="pickup-method__product-amount" data-radio1="true" data-radio2="true">
<div class="number-input js-number-input">
<label class="number-input__label" for="product-amount">Renditava toote arv</label>
<button class="number-input__change number-input__change--disabled js-number-input-decrease" type="button" aria-label="Vähenda kogust">
<span class="number-input__sign number-input__sign--horizontal"></span>
</button>
<input id="product-amount" class="number-input__input js-number-input-field" type="number" value="1" max="99" min="1" step="1" inputmode="numeric">
<button class="number-input__change js-number-input-increase" type="button" aria-label="Suurenda kogust">
<span class="number-input__sign number-input__sign--vertical"></span>
<span class="number-input__sign number-input__sign--horizontal"></span>
</button>
</div>
</div>
<div class="pickup-method__rental-period" data-radio1="true" data-radio2="true">
<p class="pickup-method__label">
Rentimisperiood
</p>
<div class="pickup-method__input-wrap">
<div>
<div class="textfield js-rental-start">
<label class="textfield__label h-visually-hidden" for="rental-start">
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="rental-start" name="textfield" placeholder="Vali" readonly>
</div>
</div>
<div class="pickup-method__calendar-label">Algus</div>
</div>
<div>
<div class="textfield js-rental-end">
<label class="textfield__label h-visually-hidden" for="rental-end">
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="rental-end" name="textfield" placeholder="Vali" readonly>
</div>
</div>
<div class="pickup-method__calendar-label">Lõpp</div>
</div>
</div>
</div>
<div class="pickup-method__delivery-time js-pickup-method-delivery-time">
<div class="time-slot js-time-slot">
<fieldset>
<legend class="h-visually-hidden">Kohaletoimetamise aeg</legend>
<div class="time-slot__items">
<input type="radio" id="pickup-time--1" class="radio__input">
<label class="time-slot__label js-time-slot-label" for="pickup-time--1">
<span class="time-slot__icon">
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
</svg>
</span>
<span>8:00</span> - <span>10:00</span>
</label>
<input type="radio" id="pickup-time--2" class="radio__input">
<label class="time-slot__label js-time-slot-label time-slot__label--active" for="pickup-time--2">
<span class="time-slot__icon">
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
</svg>
</span>
<span>8:00</span> - <span>10:00</span>
</label>
<input type="radio" id="pickup-time--3" class="radio__input">
<label class="time-slot__label js-time-slot-label time-slot__label--disabled" for="pickup-time--3">
<span class="time-slot__icon">
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
</svg>
</span>
<span>8:00</span> - <span>10:00</span>
</label>
<input type="radio" id="pickup-time--4" class="radio__input">
<label class="time-slot__label js-time-slot-label time-slot__label--disabled" for="pickup-time--4">
<span class="time-slot__icon">
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
</svg>
</span>
<span>8:00</span> - <span>10:00</span>
</label>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<button type="submit" class="button button--block js-add-to-cart-button" disabled>
<span class="button__inner">
<span class="button__text">Lisa rendikorvi</span>
</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="product-meta js-product-meta">
<p class="product-meta__product-description">
Lorem ipsum dolor sit amet, consecteur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniamconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamconsectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<div class="product-meta__category-wrap">
<p>Kategooria: <span class="product-meta__category">Akukäärtõstukid</span></p>
<p>Tooterühm: <span class="bold">2633320</span></p>
</div>
<p>Isikukaitsevahendid ja ohutus:</p>
<div class="product-meta__safety-tags">
<div class="safety-tags">
<div class="safety-tag">
<div class="safety-tag__image-wrap">
<figure class="image safety-tag__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="safety-tag__name">Kõrvatropid/klapid</div>
</div>
<div class="safety-tag">
<div class="safety-tag__image-wrap">
<figure class="image safety-tag__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="safety-tag__name">Kõrvatropid/klapid</div>
</div>
<div class="safety-tag">
<div class="safety-tag__image-wrap">
<figure class="image safety-tag__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="safety-tag__name">Kõrvatropid/klapid</div>
</div>
</div>
</div>
</div>
<div class="divider divider--lg"></div>
</div>
<div class="product-data js-product-data">
<div class="grid">
<div class="grid__col grid__col--xs-4 grid__col--lg-9">
<div class="grid grid--equalheight product-data__products">
{% for product in data.products %}
{% if data.products|length % 2 == 0 %}
<div class="grid__col grid__col--xs-4 grid__col--sm-2">
{% include '@product-container' with { data: product } %}
</div>
{% else %}
<div class="grid__col grid__col--xs-4 grid__col--sm-2 grid__col--xl-4">
{% include '@product-container' with { data: product } %}
</div>
{% endif %}
{% endfor %}
</div>
<div class="product-data__load-more-products">
{% include '@button' with { class: 'js-product-data-load-more-products', modifier: 'button--text', data: data.loadMoreButton} %}
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--lg-3 product-data__sidebar-wrap">
<div class="product-data__sidebar">
{% include '@price-block' with { data: data.priceBlock } %}
{% include '@add-to-cart' with { data: data.addToCartBlock } %}
</div>
</div>
</div>
{% include '@product-meta' %}
{% include '@divider' with { modifier: 'divider--lg' } %}
</div>
{
"language": "en-US",
"data": {
"products": [
{
"title": "HAULOTTE COMPACT 10N",
"thumbnailSrc": "https://www.ramirent.ee/wp-content/uploads/2022/09/STIHL20HSA2066PRO_02-600x400.jpg",
"specs": [
{
"key": "Pinge",
"value": "36V"
},
{
"key": "Lõiketera pikkus",
"value": "0.5m"
},
{
"key": "Kaal",
"value": "3,1kg"
},
{
"key": "Oksa diameeter, max",
"value": "ø 20 mm"
}
],
"button": {
"text": "Toote leht ja lisainfo",
"link": "/"
},
"image": {
"srcset": "https://www.ramirent.ee/wp-content/uploads/2022/09/haulotte20compact10N-600x600.jpg",
"sources": null
}
},
{
"title": "HAULOTTE COMPACT 10N",
"thumbnailSrc": "https://www.ramirent.ee/wp-content/uploads/2022/09/STIHL20HSA2066PRO_02-600x400.jpg",
"specs": [
{
"key": "Pinge",
"value": "36V"
},
{
"key": "Lõiketera pikkus",
"value": "0.5m"
},
{
"key": "Kaal",
"value": "3,1kg"
},
{
"key": "Oksa diameeter, max",
"value": "ø 20 mm"
}
],
"button": {
"text": "Toote leht ja lisainfo",
"link": "/"
},
"image": {
"srcset": "https://www.ramirent.ee/wp-content/uploads/2022/09/haulotte20compact10N-600x600.jpg",
"sources": null
}
},
{
"title": "HAULOTTE COMPACT 10N",
"thumbnailSrc": "https://www.ramirent.ee/wp-content/uploads/2022/09/STIHL20HSA2066PRO_02-600x400.jpg",
"specs": [
{
"key": "Pinge",
"value": "36V"
},
{
"key": "Lõiketera pikkus",
"value": "0.5m"
},
{
"key": "Kaal",
"value": "3,1kg"
},
{
"key": "Oksa diameeter, max",
"value": "ø 20 mm"
}
],
"button": {
"text": "Toote leht ja lisainfo",
"link": "/"
},
"image": {
"srcset": "https://www.ramirent.ee/wp-content/uploads/2022/09/haulotte20compact10N-600x600.jpg",
"sources": null
}
},
{
"title": "HAULOTTE COMPACT 10N",
"thumbnailSrc": "https://www.ramirent.ee/wp-content/uploads/2022/09/STIHL20HSA2066PRO_02-600x400.jpg",
"specs": [
{
"key": "Pinge",
"value": "36V"
},
{
"key": "Lõiketera pikkus",
"value": "0.5m"
},
{
"key": "Kaal",
"value": "3,1kg"
},
{
"key": "Oksa diameeter, max",
"value": "ø 20 mm"
}
],
"button": {
"text": "Toote leht ja lisainfo",
"link": "/"
},
"image": {
"srcset": "https://www.ramirent.ee/wp-content/uploads/2022/09/haulotte20compact10N-600x600.jpg",
"sources": null
}
}
],
"priceBlock": {
"button": {
"text": "Vaata saadavust"
}
},
"addToCartBlock": {
"button": {
"text": "Lisa rendikorvi",
"attributes": "disabled"
},
"pickupMethod": {
"rentalStartInput": {
"id": "rental-start",
"name": "textfield",
"placeholder": "Vali",
"icon": null,
"iconPosition": "right",
"isLabelHidden": true,
"attributes": "readonly"
},
"rentalEndInput": {
"id": "rental-end",
"name": "textfield",
"placeholder": "Vali",
"icon": null,
"iconPosition": "right",
"isLabelHidden": true,
"attributes": "readonly"
},
"transportMethod": {
"type": "radio",
"isLabelHidden": true,
"choices": [
{
"id": "self-pickup",
"label": "Tulen ise järele",
"name": "radio",
"modifier": "radio--blue"
},
{
"id": "require-transport",
"label": "Soovin transporti",
"name": "radio",
"modifier": "radio--blue"
}
]
},
"select": {
"label": "Rentimispunkt",
"id": "rental-point",
"name": "rentalPoint",
"placeholder": "Vali nimekirjast",
"options": [
{
"name": "Tallinn, Laki",
"value": "1"
},
{
"name": "Tallinn, Peterburi tee",
"value": "2",
"span": "(1.5km)"
},
{
"name": "Tallinn, Peterburi tee",
"value": "3",
"span": "(1.5km)"
},
{
"name": "Tallinn, Peterburi tee",
"value": "4",
"span": "(1.5km)"
},
{
"name": "Tallinn, Peterburi tee",
"value": "5",
"span": "(1.5km)"
},
{
"name": "Tallinn, Peterburi tee",
"value": "5",
"span": "(1.5km)"
},
{
"name": "Tallinn, Peterburi tee",
"value": "5",
"span": "(1.5km)"
}
]
},
"address": {
"label": "Sinu aadress",
"id": "address",
"name": "address",
"placeholder": "Sisesta aadress",
"icon": "map"
},
"timeSlots": [
{
"start": "8:00",
"end": "10:00"
},
{
"start": "8:00",
"end": "10:00",
"active": true
},
{
"start": "8:00",
"end": "10:00",
"disabled": true
},
{
"start": "8:00",
"end": "10:00",
"disabled": true
}
]
}
},
"safetyTags": [
{
"image": {
"srcset": "https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png",
"sources": null
},
"name": "Kõrvatropid/klapid"
},
{
"image": {
"srcset": "https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png",
"sources": null
},
"name": "Kõrvatropid/klapid"
},
{
"image": {
"srcset": "https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png",
"sources": null
},
"name": "Kõrvatropid/klapid"
}
],
"loadMoreButton": {
"text": "Lae variatsioone juurde"
}
}
}
.product-data {
position: relative;
}
.grid__col {
.product-data__products & {
&:nth-child(n+4) {
display: none;
@include bp(sm-min) {
display: block;
}
}
}
}
.product-data__load-more-products {
text-align: center;
font-weight: $font-weight-medium;
letter-spacing: $letter-spacing-50;
line-height: 1.5;
margin: 24px 0 8px;
color: $L-text-strong;
cursor: pointer;
@include bp(sm-min) {
display: none;
}
}
.product-data__sidebar-wrap {
position: relative;
}
.product-data__sidebar {
width: 100%;
@include bp(lg-min) {
position: absolute;
top: 0;
right: calc($grid-gutter / 2);
width: calc(100% - $grid-gutter);
}
}
import './product-data.scss';
import Component from '../../components/component/component';
export default class ProductData extends Component {
static initSelector: string = '.js-product-data';
loadMoreProducts: HTMLElement;
productContainers: NodeListOf<HTMLElement>;
constructor(target: HTMLElement) {
super(target);
this.loadMoreProducts = target.querySelector('.js-product-data-load-more-products');
this.productContainers = target.querySelectorAll('.product-data__products .grid__col');
this.handleClick();
}
handleClick(): void {
this.loadMoreProducts.addEventListener('click', () => {
this.productContainers.forEach((el:HTMLElement) => {
el.style.display = 'block';
this.loadMoreProducts.parentElement.style.display = 'none';
});
});
}
}