Untitled

mail@pastecode.io avatar
unknown
handlebars
a year ago
26 kB
6
Indexable
<style>
    .PapathemesWidgetProductList .card-img-container {
        position: relative;
    }

    .PapathemesWidgetProductList .card-buttons ._qty {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .PapathemesWidgetProductList .card-buttons ._qty .card-figcaption-button {
        margin: 0;
    }

    .PapathemesWidgetProductList .card-buttons ._qty .form-increment {
        display: flex;
    }

    .PapathemesWidgetProductList .card-buttons ._qty .form-increment .form-input {
        width: unset;
        min-width: 50px;
        margin-bottom: 0.75rem;
    }

    .PapathemesWidgetProductList .card-footer {
        position: relative;
    }

    .PapathemesWidgetProductList .card-footer .card-buttons {
        position: static;
        padding: 0.375rem 0.75rem;
        transform: none;
    }

    .PapathemesWidgetProductList .card-footer .card-buttons+.card-buttons {
        padding-top: 0;
    }

    .PapathemesWidgetProductList .card-footer .card-buttons--alt .button {
        flex: 1;
    }

    .PapathemesWidgetProductList .card-footer .card-buttons--alt .card-figcaption-button--compare {
        flex: 0;
    }

        {
            {
            #if button.alwaysVisible
        }
    }

    .PapathemesWidgetProductList .card-footer ._card-buttons-main {
        opacity: 1;
        visibility: visible;
    }

    .PapathemesWidgetProductList .card:hover .card-footer ._card-buttons-main {
        padding-top: 0.375rem;
    }

    .PapathemesWidgetProductList .card:hover .card-footer .card-buttons+.card-buttons {
        padding-top: 0;
    }

        {
            {
            #if button.position '==' 'below_image'
        }
    }

    .PapathemesWidgetProductList .card-figure .card-figcaption {
        position: static;
        height: auto;
        opacity: 1;
    }

    .PapathemesWidgetProductList .card-figcaption-body {
        transform: none;
        position: static;
    }

    .PapathemesWidgetProductList ._card-buttons-main {
        position: static;
        visibility: visible;
        opacity: 1;
        clip: auto;
        transform: none;
        padding: 0;
    }

        {
            {
            /if
        }
    }

        {
            {
            /if
        }
    }

        {
            {
            #if quickview.alwaysVisible
        }
    }

    .PapathemesWidgetProductList .card-footer ._card-buttons-quickview {
        opacity: 1;
        visibility: visible;
    }

    .PapathemesWidgetProductList .card:hover .card-footer ._card-buttons-quickview {
        padding-top: 0.375rem;
    }

    .PapathemesWidgetProductList .card:hover .card-footer .card-buttons+.card-buttons {
        padding-top: 0;
    }

        {
            {
            #if quickview.position '==' 'below_image'
        }
    }

    .PapathemesWidgetProductList .card-figure .card-figcaption {
        position: static;
        height: auto;
        opacity: 1;
    }

    .PapathemesWidgetProductList .card-figcaption-body {
        transform: none;
        position: static;
    }

    .PapathemesWidgetProductList ._card-buttons-quickview {
        position: static;
        visibility: visible;
        opacity: 1;
        clip: auto;
        transform: none;
    }

        {
            {
            /if
        }
    }

        {
            {
            /if
        }
    }

        {
            {
            #unless useCommonClass
        }
    }

    .PapathemesWidgetProductList__productGrid {
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 0.75rem;
        list-style: none;
    }

    .PapathemesWidgetProductList__card-figure {
        position: relative;
        overflow: hidden;
    }

    .PapathemesWidgetProductList__card-img-container {
        position: relative;
    }

    .PapathemesWidgetProductList__card-img-container::after {
        content: '';
        display: block;
        height: 0;
        padding-bottom: 100%;
        width: 100%;
    }

    .PapathemesWidgetProductList__card-image {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border: 0;
        font-family: "object-fit: contain;";
        max-height: 100%;
        object-fit: contain;
        width: 100%;
    }

    .PapathemesWidgetProductList__card-figcaption {
        display: block;
        margin: 0;
    }

    .PapathemesWidgetProductList__card-figcaption-body {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
        margin-top: 0.75rem;
    }

    .PapathemesWidgetProductList__card-buttons {
        flex: 1;
    }

    .PapathemesWidgetProductList__card-buttons .button {
        width: 100%;
    }

    .PapathemesWidgetProductList__card-body {
        text-align: center;
    }

    .PapathemesWidgetProductList__card-title {
        margin-bottom: 0.75rem;
        font-weight: 700;
    }

    .PapathemesWidgetProductList__card-text {
        margin-bottom: 0.75rem;
    }

    @media (min-width: 801px) {
        .PapathemesWidgetProductList__productGrid {
            grid-template-columns: 25% 25% 25% 25%;
            gap: 1.5rem;
        }

        .PapathemesWidgetProductList__card-figcaption-body {
            flex-wrap: nowrap;
        }

        .PapathemesWidgetProductList__card-buttons {
            flex: 0;
        }
    }

        {
            {
            /unless
        }
    }
</style>
<div class="PapathemesWidgetProductList PapathemesWidgetProductList-{{_.id}}" id="PapathemesWidgetProductList-{{_.id}}"
    data-test="papathemes-widget-product-list">
    {{#if products.value.length '>' 0}}
    <ul class="{{#unless useCommonClass}}PapathemesWidgetProductList__{{/unless}}productGrid">
        {{#each products.value as |product|}}
        {{#each ../_.data.site.products.edges as |productResource|}}
        {{#withHash root=../../this}}
        {{#if (isEqual productResource.node.entityId product.productId)}}
        <li class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}product">
            <article class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card"
                data-event-type="list" data-entity-id="{{productResource.node.entityId}}" data-position=""
                data-name="{{productResource.node.name}}" data-product-category=""
                data-product-brand="{{productResource.node.brand.name}}" data-product-price="{{#or productResource.node.priceWithTax.price productResource.node.priceWithoutTax.price}}
                      {{#if (isEqual root._.data.site.settings.tax.plp 'EX')}}
                        {{productResource.node.priceWithoutTax.price.value}}
                      {{else}}
                        {{productResource.node.priceWithTax.price.value}}
                      {{/if}}
                    {{else}}
                      Login for pricing
                    {{/or}}">
                <figure class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-figure">
                    {{#unless productResource.node.inventory.isInStock}}
                    <div class="sale-flag-side sale-flag-side--outstock">
                        <span class="sale-text">{{root._.data.site.settings.inventory.defaultOutOfStockMessage}}</span>
                    </div>
                    {{/unless}}
                    {{#or productResource.node.priceWithTax.salePrice productResource.node.priceWithoutTax.salePrice}}
                    <div class="sale-flag-sash">
                        <span class="sale-text">On Sale</span>
                    </div>
                    {{/or}}
                    {{#if (isEqual root.productImage 'show')}}
                    <a href="{{productResource.node.path}}" data-event-type="product-click">
                        <div
                            class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-img-container">
                            <img src="{{productResource.node.defaultImage.url320wide}}" srcset="{{productResource.node.defaultImage.url80wide}} 80w,
                                      {{productResource.node.defaultImage.url160wide}} 160w,
                                      {{productResource.node.defaultImage.url320wide}} 320w,
                                      {{productResource.node.defaultImage.url640wide}} 640w,
                                      {{productResource.node.defaultImage.url960wide}} 960w,
                                      {{productResource.node.defaultImage.url1280wide}} 1280w,
                                      {{productResource.node.defaultImage.url1920wide}}"
                                alt="{{productResource.node.name}}"
                                class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-image"
                                loading="lazy">
                        </div>
                    </a>
                    {{/if}} <figcaption
                        class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-figcaption">
                        <div
                            class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-figcaption-body">
                            {{#if root.button.position '==' 'below_image'}}
                            {{#if root.button.visibility '==' 'show'}}
                            <div
                                class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-buttons _card-buttons-main">
                                {{#if productResource.node.showCartAction}}
                                <div
                                    class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}_qty">
                                    {{#if root.button.qty}}
                                    {{assignVar 'qtyBoxRand' (random 0 1000000)}}
                                    <div class="form-field form-field--increments">
                                        <label class="form-label form-label--alternate is-srOnly"
                                            for="qty_{{id}}_{{incrementVar 'qtyBoxUID'}}_{{getVar 'qtyBoxRand'}}">{{root.button.qtyLabel}}</label>
                                        <div class="form-increment" data-card-quantity-change>
                                            <button class="button button--icon" data-action="dec"><span
                                                    class="is-srOnly">{{root.button.decLabel}}</span>-</button>
                                            <input class="form-input form-input--incrementTotal"
                                                id="qty_{{id}}_{{getVar 'qtyBoxUID'}}_{{getVar 'qtyBoxRand'}}"
                                                name="qty_{{id}}" type="tel"
                                                value="{{#if productResource.node.minPurchaseQuantity}}{{productResource.node.minPurchaseQuantity}}{{else}}1{{/if}}"
                                                data-quantity-min="{{productResource.node.minPurchaseQuantity}}"
                                                data-quantity-max="{{productResource.node.maxPurchaseQuantity}}" min="1"
                                                pattern="[0-9]*" aria-live="polite">
                                            <button class="button button--icon" data-action="inc"><span
                                                    class="is-srOnly">{{root.button.incLabel}}</span>+</button>
                                        </div>
                                    </div>
                                    {{/if}}
                                    {{#if productResource.node.productOptions.edges.length '>' 0}}
                                    <a href="{{productResource.node.path}}" data-event-type="product-click"
                                        class="button button--small button--primary card-figcaption-button quickview-alt"
                                        data-product-id="{{productResource.node.entityId}}">{{root.button.chooseOptionsLabel}}</a>
                                    {{else if productResource.node.availabilityV2.status '==' 'Preorder'}}
                                    <a href="{{productResource.node.path}}" data-event-type="product-click"
                                        class="button button--small button--primary card-figcaption-button">{{root.button.preOrderLabel}}</a>
                                    {{else if productResource.node.addToCartUrl}}
                                    {{#if productResource.node.inventory.isInStock}}
                                    <a href="{{productResource.node.addToCartUrl}}" data-event-type="product-click"
                                        class="button button--small button--primary card-figcaption-button"
                                        data-papathemes-cart-item-add data-emthemesmodez-cart-item-add
                                        data-chiara-cart-item-add>{{root.button.addToCartLabel}}</a>
                                    {{/if}}
                                    {{/if}}
                                    {{#unless productResource.node.inventory.isInStock}}
                                    <a href="{{productResource.node.path}}" data-event-type="product-click"
                                        class="button button--small card-figcaption-button _outstock"
                                        data-product-id="{{productResource.node.entityId}}">
                                        {{root._.data.site.settings.inventory.defaultOutOfStockMessage}}
                                    </a>
                                    {{/unless}}
                                </div>
                                {{/if}}
                            </div>
                            {{/if}}
                            {{/if}}
                            {{#if root.quickview.position '==' 'below_image'}}
                            {{#if root.quickview.visibility '==' 'show'}}
                            <div
                                class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-buttons {{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-buttons--alt _card-buttons-quickview">
                                <a class="button button--small card-figcaption-button quickview"
                                    data-event-type="product-click"
                                    data-product-id="{{productResource.node.entityId}}">{{root.quickview.label}}</a>
                                {{#if root._.data.site.settings.storefront.catalog.productComparisonsEnabled}}
                                <button type="button"
                                    class="button button--small card-figcaption-button card-figcaption-button--compare"
                                    data-compare-id="{{productResource.node.entityId}}"
                                    data-compare-image="{{productResource.node.defaultImage.url160wide}}"
                                    data-compare-title="{{productResource.node.name}}">Compare</button>
                                {{/if}}
                            </div>
                            {{/if}}
                            {{/if}}
                        </div>
                    </figcaption>
                </figure>
                <div class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-body">
                    {{#if root.productName '==' 'show'}}
                    <h4 class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-title">
                        <a href="{{productResource.node.path}}" data-instantload
                            data-event-type="product-click">{{productResource.node.name}}</a>
                    </h4>
                    {{/if}}

                    {{#if root.brand '==' 'show'}}
                    {{#if productResource.node.brand.name}}
                    <p class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-text {{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-text--brand"
                        data-test-info-type="brandName">{{productResource.node.brand.name}}</p>
                    {{/if}}
                    {{/if}}

                    {{#if root.sku '==' 'show'}}
                    {{#if productResource.node.sku}}
                    <p class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-text {{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-text--sku"
                        data-test-info-type="sku">{{productResource.node.sku}}</p>
                    {{/if}}
                    {{/if}}

                    {{#if root.swatches '==' 'show'}}
                    <div class="card-text card-text--colorswatches"></div>
                    {{/if}}

                    {{#if root.productRating '==' 'show'}}
                    {{#if productResource.node.reviewSummary.numberOfReviews '>' 0}}
                    <p class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-text {{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-text--rating"
                        data-test-info-type="productRating">
                        <span class="rating--small">
                            {{#for 1 5}}
                            {{#if (divide productResource.node.reviewSummary.summationOfRatings
                            productResource.node.reviewSummary.numberOfReviews) '>=' $index}}
                            <span class="icon icon--ratingFull">
                                <svg>
                                    <use href="#icon-star" />
                                </svg>
                            </span>
                            {{else}}
                            <span class="icon icon--ratingEmpty">
                                <svg>
                                    <use href="#icon-star" />
                                </svg>
                            </span>
                            {{/if}}
                            {{/for}}
                        </span>
                    </p>
                    {{/if}}
                    {{/if}}
                    {{#if root.price '==' 'show'}}
                    {{> components/price}}
                    {{/if}}

                    <div class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-footer">
                        {{#if root.button.position '==' 'below_card'}}
                        {{#if root.button.visibility '==' 'show'}}
                        <div
                            class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-buttons _card-buttons-main">
                            {{#if productResource.node.showCartAction}}
                            <div class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}_qty">
                                {{#if root.button.qty}}
                                {{assignVar 'qtyBoxRand' (random 0 1000000)}}
                                <div class="form-field form-field--increments">
                                    <label class="form-label form-label--alternate is-srOnly"
                                        for="qty_{{id}}_{{incrementVar 'qtyBoxUID'}}_{{getVar 'qtyBoxRand'}}">{{root.button.qtyLabel}}</label>
                                    <div class="form-increment" data-card-quantity-change>
                                        <button class="button button--icon" data-action="dec"><span
                                                class="is-srOnly">{{root.button.decLabel}}</span>-</button>
                                        <input class="form-input form-input--incrementTotal"
                                            id="qty_{{id}}_{{getVar 'qtyBoxUID'}}_{{getVar 'qtyBoxRand'}}"
                                            name="qty_{{id}}" type="tel"
                                            value="{{#if productResource.node.minPurchaseQuantity}}{{productResource.node.minPurchaseQuantity}}{{else}}1{{/if}}"
                                            data-quantity-min="{{productResource.node.minPurchaseQuantity}}"
                                            data-quantity-max="{{productResource.node.maxPurchaseQuantity}}" min="1"
                                            pattern="[0-9]*" aria-live="polite">
                                        <button class="button button--icon" data-action="inc"><span
                                                class="is-srOnly">{{root.button.incLabel}}</span>+</button>
                                    </div>
                                </div>
                                {{/if}}
                                {{#if productResource.node.productOptions.edges.length '>' 0}}
                                <a href="{{productResource.node.path}}" data-event-type="product-click"
                                    class="button button--small button--primary card-figcaption-button quickview-alt"
                                    data-product-id="{{productResource.node.entityId}}">{{root.button.chooseOptionsLabel}}</a>
                                {{else if productResource.node.availabilityV2.status '==' 'Preorder'}}
                                <a href="{{productResource.node.path}}" data-event-type="product-click"
                                    class="button button--small button--primary card-figcaption-button">{{root.button.preOrderLabel}}</a>
                                {{else if productResource.node.addToCartUrl}}
                                {{#if productResource.node.inventory.isInStock}}
                                <a href="{{productResource.node.addToCartUrl}}" data-event-type="product-click"
                                    class="button button--small button--primary card-figcaption-button"
                                    data-papathemes-cart-item-add data-emthemesmodez-cart-item-add
                                    data-chiara-cart-item-add>{{root.button.addToCartLabel}}</a>
                                {{/if}}
                                {{/if}}
                                {{#unless productResource.node.inventory.isInStock}}
                                <a href="{{productResource.node.path}}" data-event-type="product-click"
                                    class="button button--small card-figcaption-button _outstock"
                                    data-product-id="{{productResource.node.entityId}}">
                                    {{root._.data.site.settings.inventory.defaultOutOfStockMessage}}
                                </a>
                                {{/unless}}
                            </div>
                            {{/if}}
                        </div>
                        {{/if}}
                        {{/if}}

                        {{#if root.quickview.position '==' 'below_card'}}
                        {{#if root.quickview.visibility '==' 'show'}}
                        <div
                            class="{{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-buttons {{#unless root.useCommonClass}}PapathemesWidgetProductList__{{/unless}}card-buttons--alt _card-buttons-quickview">
                            <a class="button button--small card-figcaption-button quickview"
                                data-event-type="product-click"
                                data-product-id="{{productResource.node.entityId}}">{{root.quickview.label}}</a>
                            {{#if root._.data.site.settings.storefront.catalog.productComparisonsEnabled}}
                            <button type="button"
                                class="button button--small card-figcaption-button card-figcaption-button--compare"
                                data-compare-id="{{productResource.node.entityId}}"
                                data-compare-image="{{productResource.node.defaultImage.url160wide}}"
                                data-compare-title="{{productResource.node.name}}">
                                Compare
                            </button>
                            {{/if}}
                        </div>
                        {{/if}}
                        {{/if}}
                    </div>
                    <script type="application/ld+json">
      {
        "@context": "https://schema.org/",
        "@type": "Product",
        "name": "{{productResource.node.name}}",
        "image": "{{productResource.node.defaultImage.url}}",
        "description": "{{productResource.node.plainTextDescription}}",
        "sku": "{{productResource.node.sku}}",
        "aggregateRating": {
          "@type": "AggregateRating",
          {{#if productResource.node.reviewSummary.summationOfRatings '==' 0}}
            "ratingValue": "0",
          {{else}}
            "ratingValue": "{{divide productResource.node.reviewSummary.summationOfRatings productResource.node.reviewSummary.numberOfReviews}}",
          {{/if}}
          "reviewCount": "{{productResource.node.reviewSummary.numberOfReviews}}"
        },
        "offers": {
          "@type": "Offer",
          {{#if root._.data.site.settings.tax.plp '==' 'EX'}}
            "priceCurrency": "{{productResource.node.priceWithoutTax.price.currencyCode}}",
            "price": "{{productResource.node.priceWithoutTax.price.value}}",
          {{else}}
            "priceCurrency": "{{productResource.node.priceWithTax.price.currencyCode}}",
            "price": "{{productResource.node.priceWithTax.price.value}}",
          {{/if}}
          "seller": {
            "@type": "Organization",
            "name": "{{root._.data.site.settings.storeName}}"
          }
        }
      }
      </script>
                    {{/if}}{{/if}}{{/withHash}}{{/each}}{{/each}}
    </ul>{{else}}
    <p>Select some products from your catalog to feature on this page.</p>{{/if}}
</div>