Untitled
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>