Copy environment

Product Meta 

<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>
 
{% set BEM -%}
    product-meta js-product-meta
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
{%- endset %}

<div class="{{ BEM }}">
    <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>
    {% if data.safetyTags|length > 0 %}
        <p>Isikukaitsevahendid ja ohutus:</p>
        <div class="product-meta__safety-tags">
            {% include '@safety-tags' with { data: data.safetyTags } %}
        </div>
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "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"
      }
    ]
  }
}
  • Content: 
    .product-meta {
    width: 100%;
    margin-top: 24px;
}

p {
    .product-meta & {
        margin-bottom: 16px;
    }
}

.product-meta__category {
    text-transform: uppercase;
    color: $L-text-strong;
    margin-right: 24px;
}

.product-meta__category-wrap {
    display: flex;
    flex-wrap: wrap;
}

.product-meta__product-description {
    max-width: 572px;

    .product-meta--full-width & {
        max-width: none;
    }
}

.product-meta__product-description--hidden {
    display: none;

    &.st-show {
        display: block;
    }
}

.product-meta__read-more {
    color: $L-text-strong;
    text-decoration: underline;
    cursor: pointer;
}

.product-meta__safety-tags {
    @include bp(lg-min) {
        max-width: 460px;
    }
}
  • URL: /components/raw/product-meta/product-meta.scss
  • Filesystem Path: src/patterns/components/product-meta/product-meta.scss
  • Size: 748 Bytes
  • Content: 
    import './product-meta.scss';

import Component from '../component/component';

export default class ProductMeta extends Component {
    static initSelector: string = '.js-product-meta';

    textMaxLength: number;
    productDescription: HTMLElement;
    readMore: HTMLElement;
    el: HTMLElement;
    hiddenText: HTMLElement;
    readLess: HTMLElement;

    constructor(target: HTMLElement) {
        super(target);
        this.textMaxLength = 260;
        this.productDescription = target.querySelector('.product-meta__product-description');
        this.el = target;
        if (!this.productDescription) {
            return;
        }
        this.gapText();
    }

    gapText(): void {
        const text: string = this.productDescription.textContent;

        if (text.length > this.textMaxLength) {
            const begin: string = text.substring(0, this.textMaxLength);
            const end: string = text.substring(this.textMaxLength);

            this.readMore = document.createElement('span');

            this.hiddenText = document.createElement('div');

            this.readMore.innerText = 'Loe rohkem';
            this.readMore.className = 'product-meta__read-more';

            this.hiddenText.innerText = end;
            this.hiddenText.className = 'product-meta__product-description--hidden';

            this.productDescription.innerHTML = begin + '... ';
            this.productDescription.appendChild(this.readMore);
            this.productDescription.appendChild(this.hiddenText);

            this.displayHiddenText(begin, end);
        }
    }

    displayHiddenText(begin: string, end: string): void {
        this.el.querySelector('.product-meta__read-more').addEventListener('click', () => {
            this.productDescription.innerHTML = begin + end;
            this.readLess = document.createElement('span');
            this.readLess.innerText = 'Näita vähem';
            this.readLess.className = 'product-meta__read-more product-meta__read-more--less';
            this.productDescription.appendChild(this.readLess);
            this.hideText(begin);
        });
    }

    hideText(begin: string): void {
        this.el.querySelector('.product-meta__read-more--less').addEventListener('click', () => {
            this.productDescription.innerHTML = begin + '... ';
            this.productDescription.appendChild(this.readMore);
        });
    }
}
  • URL: /components/raw/product-meta/product-meta.ts
  • Filesystem Path: src/patterns/components/product-meta/product-meta.ts
  • Size: 2.4 KB