accelerator-theme.gene.co.uk
Open in
urlscan Pro
185.245.116.115
Public Scan
URL:
https://accelerator-theme.gene.co.uk/
Submission: On January 14 via api from US — Scanned from US
Submission: On January 14 via api from US — Scanned from US
Form analysis 19 forms found in the DOM
GET https://accelerator-theme.gene.co.uk/catalogsearch/result/
<form class="form minisearch" id="search_mini_form" x-ref="form" @submit.prevent="search()" action="https://accelerator-theme.gene.co.uk/catalogsearch/result/" method="get" role="search">
<label class="hidden" for="search" data-role="minisearch-label">
<span>Search</span>
</label>
<input id="search" x-ref="searchInput" type="search" autocomplete="off" name="q" value="" placeholder="Search entire store here..." maxlength="128" class="w-full p-2 text-lg leading-normal transition appearance-none text-grey-800
focus:outline-none focus:border-transparent lg:text-xl" @focus.once="suggest" @input.debounce.300="suggest" @keydown.arrow-down.prevent="focusElement($root.querySelector('[tabindex]'))" @search-open.window.debounce.10="
$el.focus()
$el.select()
">
<template x-if="suggestions.length > 0">
<div class="w-full leading-normal transition appearance-none text-grey-800 flex flex-col mt-1">
<template x-for="suggestion in suggestions">
<div class="flex justify-between p-2 bg-container-lighter even:bg-container mb-1 cursor-pointer
border border-container hover:bg-container-darker" tabindex="0" @click="search(suggestion.title)" @keydown.enter="search(suggestion.title)" @keydown.arrow-up.prevent="
focusElement($event.target.previousElementSibling) || $refs.searchInput.focus()
" @keydown.arrow-down.prevent="focusElement($event.target.nextElementSibling)">
<span x-text="suggestion.title"></span>
<span x-text="suggestion.num_results"></span>
</div>
</template>
</div>
</template>
<button type="submit" title="Search" class="action search sr-only" aria-label="Search"> Search </button>
</form>POST
<form class="form form-login" method="post" @submit.prevent="submitForm();" id="login-form">
<div class="fieldset login">
<div class="field email required">
<label class="label" for="form-login-username" form="login-form">
<span>Email Address</span>
</label>
<div class="control">
<input name="username" id="form-login-username" x-ref="customer-email" @change="errors = 0" type="email" required="" class="form-input input-text">
</div>
</div>
<div class="field password required">
<label for="form-login-password" class="label" form="login-form">
<span>Password</span>
</label>
<div class="control">
<input name="password" id="form-login-password" type="password" class="form-input input-text" required="" x-ref="customer-password" @change="errors = 0">
</div>
</div>
<input name="context" type="hidden" value="checkout">
<div class="actions-toolbar flex justify-between pt-6 pb-2 items-center">
<button type="submit" class="inline-flex btn btn-primary disabled:opacity-75"> Sign In </button>
<a href="https://accelerator-theme.gene.co.uk/customer/account/forgotpassword/">
Forgot Your Password? </a>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/36/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/36/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="36">
<a href="https://accelerator-theme.gene.co.uk/aim-analog-watch.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-36.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/m/g/mg04-bk-0.jpg" loading="lazy" width="360" height="360" alt="Aim Analog Watch" title="Aim Analog Watch">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/aim-analog-watch.html" :id="`slide-desc-36-${$id('slider-id')}`" id="slide-desc-36-slider-id-1">
Aim Analog Watch </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating3665a2b6f58b211()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Aim\u0020Analog\u0020Watch\u0020rating.\u00204\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Aim\u0020Analog\u0020Watch\u0020rating.\u00204\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Aim Analog Watch rating. 4 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating3665a2b6f58b211() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initPriceBox__65a2b6f572e0c() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f572e0c()" @update-prices-36.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="36" data-price-box="product-id-36">
<span x-data="" x-id="['product\u002Dprice\u002D36']" class="price-container price-final_price tax weee">
<span :id="$id('product\u002Dprice\u002D36')" data-price-amount="45" data-price-type="finalPrice" class="price-wrapper " id="product-price-36-1"><span class="price">£45.00</span></span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Aim Analog Watch">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(36)" aria-label="Add to Wish List Aim Analog Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(36)" aria-label="Add to Compare Aim Analog Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/37/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/37/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="37">
<a href="https://accelerator-theme.gene.co.uk/endurance-watch.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-37.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/m/g/mg01-bk-0.jpg" loading="lazy" width="360" height="360" alt="Endurance Watch" title="Endurance Watch">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/endurance-watch.html" :id="`slide-desc-37-${$id('slider-id')}`" id="slide-desc-37-slider-id-1">
Endurance Watch </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating3765a2b6f5999e0()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Endurance\u0020Watch\u0020rating.\u00204.35\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Endurance\u0020Watch\u0020rating.\u00204.35\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Endurance Watch rating. 4.35 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill37">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill37)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
</div>
<script>
'use strict';
function initRating3765a2b6f5999e0() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initPriceBox__65a2b6f599664() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f599664()" @update-prices-37.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="37" data-price-box="product-id-37">
<span x-data="" x-id="['product\u002Dprice\u002D37']" class="price-container price-final_price tax weee">
<span :id="$id('product\u002Dprice\u002D37')" data-price-amount="49" data-price-type="finalPrice" class="price-wrapper " id="product-price-37-1"><span class="price">£49.00</span></span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Endurance Watch">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(37)" aria-label="Add to Wish List Endurance Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(37)" aria-label="Add to Compare Endurance Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/38/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/38/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="38">
<a href="https://accelerator-theme.gene.co.uk/summit-watch.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-38.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/m/g/mg03-br-0.jpg" loading="lazy" width="360" height="360" alt="Summit Watch" title="Summit Watch">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/summit-watch.html" :id="`slide-desc-38-${$id('slider-id')}`" id="slide-desc-38-slider-id-1">
Summit Watch </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating3865a2b6f59b0ad()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Summit\u0020Watch\u0020rating.\u00202.35\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Summit\u0020Watch\u0020rating.\u00202.35\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Summit Watch rating. 2.35 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill38">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill38)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating3865a2b6f59b0ad() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initPriceBox__65a2b6f59abfa() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f59abfa()" @update-prices-38.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="38" data-price-box="product-id-38">
<span x-data="" x-id="['product\u002Dprice\u002D38']" class="price-container price-final_price tax weee">
<span :id="$id('product\u002Dprice\u002D38')" data-price-amount="54" data-price-type="finalPrice" class="price-wrapper " id="product-price-38-1"><span class="price">£54.00</span></span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Summit Watch">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(38)" aria-label="Add to Wish List Summit Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(38)" aria-label="Add to Compare Summit Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/39/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/39/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="39">
<a href="https://accelerator-theme.gene.co.uk/cruise-dual-analog-watch.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-39.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/m/g/mg05-br-0.jpg" loading="lazy" width="360" height="360" alt="Cruise Dual Analog Watch" title="Cruise Dual Analog Watch">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/cruise-dual-analog-watch.html" :id="`slide-desc-39-${$id('slider-id')}`" id="slide-desc-39-slider-id-1">
Cruise Dual Analog Watch </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating3965a2b6f59c54e()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Cruise\u0020Dual\u0020Analog\u0020Watch\u0020rating.\u00203.25\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Cruise\u0020Dual\u0020Analog\u0020Watch\u0020rating.\u00203.25\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Cruise Dual Analog Watch rating. 3.25 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill39">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="25%" stop-color="#f6e05e"></stop>
<stop offset="25%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill39)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating3965a2b6f59c54e() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initPriceBox__65a2b6f59c1dc() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f59c1dc()" @update-prices-39.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="39" data-price-box="product-id-39">
<span x-data="" x-id="['product\u002Dprice\u002D39']" class="price-container price-final_price tax weee">
<span :id="$id('product\u002Dprice\u002D39')" data-price-amount="55" data-price-type="finalPrice" class="price-wrapper " id="product-price-39-1"><span class="price">£55.00</span></span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Cruise Dual Analog Watch">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(39)" aria-label="Add to Wish List Cruise Dual Analog Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(39)" aria-label="Add to Compare Cruise Dual Analog Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/40/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/40/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="40">
<a href="https://accelerator-theme.gene.co.uk/dash-digital-watch.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-40.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/m/g/mg02-bk-0.jpg" loading="lazy" width="360" height="360" alt="Dash Digital Watch" title="Dash Digital Watch">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/dash-digital-watch.html" :id="`slide-desc-40-${$id('slider-id')}`" id="slide-desc-40-slider-id-1">
Dash Digital Watch </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating4065a2b6f59e12f()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Dash\u0020Digital\u0020Watch\u0020rating.\u00203.65\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Dash\u0020Digital\u0020Watch\u0020rating.\u00203.65\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Dash Digital Watch rating. 3.65 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill40">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="65%" stop-color="#f6e05e"></stop>
<stop offset="65%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill40)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating4065a2b6f59e12f() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initPriceBox__65a2b6f59ddc5() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f59ddc5()" @update-prices-40.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="40" data-price-box="product-id-40">
<span x-data="" x-id="['product\u002Dprice\u002D40']" class="price-container price-final_price tax weee">
<span :id="$id('product\u002Dprice\u002D40')" data-price-amount="92" data-price-type="finalPrice" class="price-wrapper " id="product-price-40-1"><span class="price">£92.00</span></span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Dash Digital Watch">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(40)" aria-label="Add to Wish List Dash Digital Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(40)" aria-label="Add to Compare Dash Digital Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/41/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/41/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="41">
<a href="https://accelerator-theme.gene.co.uk/luma-analog-watch.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-41.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/w/g/wg09-gr-0.jpg" loading="lazy" width="360" height="360" alt="Image" title="Image">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/luma-analog-watch.html" :id="`slide-desc-41-${$id('slider-id')}`" id="slide-desc-41-slider-id-1">
Luma Analog Watch </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating4165a2b6f59f574()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Luma\u0020Analog\u0020Watch\u0020rating.\u00204\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Luma\u0020Analog\u0020Watch\u0020rating.\u00204\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Luma Analog Watch rating. 4 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating4165a2b6f59f574() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initPriceBox__65a2b6f59f246() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f59f246()" @update-prices-41.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="41" data-price-box="product-id-41">
<span x-data="" x-id="['product\u002Dprice\u002D41']" class="price-container price-final_price tax weee">
<span :id="$id('product\u002Dprice\u002D41')" data-price-amount="43" data-price-type="finalPrice" class="price-wrapper " id="product-price-41-1"><span class="price">£43.00</span></span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Luma Analog Watch">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(41)" aria-label="Add to Wish List Luma Analog Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(41)" aria-label="Add to Compare Luma Analog Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/42/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/42/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="42">
<a href="https://accelerator-theme.gene.co.uk/bolo-sport-watch.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-42.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/w/g/wg01-bk-0.jpg" loading="lazy" width="360" height="360" alt="Image" title="Image">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/bolo-sport-watch.html" :id="`slide-desc-42-${$id('slider-id')}`" id="slide-desc-42-slider-id-1">
Bolo Sport Watch </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating4265a2b6f5a082f()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Bolo\u0020Sport\u0020Watch\u0020rating.\u00203.35\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Bolo\u0020Sport\u0020Watch\u0020rating.\u00203.35\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Bolo Sport Watch rating. 3.35 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill42">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill42)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating4265a2b6f5a082f() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initPriceBox__65a2b6f5a046b() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f5a046b()" @update-prices-42.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="42" data-price-box="product-id-42">
<span x-data="" x-id="['product\u002Dprice\u002D42']" class="price-container price-final_price tax weee">
<span :id="$id('product\u002Dprice\u002D42')" data-price-amount="49" data-price-type="finalPrice" class="price-wrapper " id="product-price-42-1"><span class="price">£49.00</span></span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Bolo Sport Watch">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(42)" aria-label="Add to Wish List Bolo Sport Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(42)" aria-label="Add to Compare Bolo Sport Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/43/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/43/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="43">
<a href="https://accelerator-theme.gene.co.uk/clamber-watch.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-43.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/w/g/wg03-gr-0.jpg" loading="lazy" width="360" height="360" alt="Clamber Watch" title="Clamber Watch">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/clamber-watch.html" :id="`slide-desc-43-${$id('slider-id')}`" id="slide-desc-43-slider-id-1">
Clamber Watch </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating4365a2b6f5a1d85()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Clamber\u0020Watch\u0020rating.\u00202.65\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Clamber\u0020Watch\u0020rating.\u00202.65\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Clamber Watch rating. 2.65 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill43">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="65%" stop-color="#f6e05e"></stop>
<stop offset="65%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill43)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating4365a2b6f5a1d85() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initPriceBox__65a2b6f5a19d4() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f5a19d4()" @update-prices-43.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="43" data-price-box="product-id-43">
<span x-data="" x-id="['product\u002Dprice\u002D43']" class="price-container price-final_price tax weee">
<span :id="$id('product\u002Dprice\u002D43')" data-price-amount="54" data-price-type="finalPrice" class="price-wrapper " id="product-price-43-1"><span class="price">£54.00</span></span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Clamber Watch">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(43)" aria-label="Add to Wish List Clamber Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(43)" aria-label="Add to Compare Clamber Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/334/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/334/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="334">
<a href="https://accelerator-theme.gene.co.uk/lando-gym-jacket.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-334.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/m/j/mj08-gray_main_1.jpg" loading="lazy" width="360" height="360" alt="Lando Gym Jacket" title="Lando Gym Jacket">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/lando-gym-jacket.html" :id="`slide-desc-334-${$id('slider-id')}`" id="slide-desc-334-slider-id-2">
Lando Gym Jacket </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating33465a2b6f5a60b6()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Lando\u0020Gym\u0020Jacket\u0020rating.\u00203.35\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Lando\u0020Gym\u0020Jacket\u0020rating.\u00203.35\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Lando Gym Jacket rating. 3.35 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill334">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill334)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating33465a2b6f5a60b6() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initConfigurableSwatchOptions_334() {
const configurableOptionsComponent = initConfigurableOptions('334', {
"attributes": {
"155": {
"id": "155",
"code": "size",
"label": "Size",
"options": [{
"id": "166",
"label": "XS",
"products": ["319", "320", "321"]
}, {
"id": "167",
"label": "S",
"products": ["322", "323", "324"]
}, {
"id": "168",
"label": "M",
"products": ["325", "326", "327"]
}, {
"id": "169",
"label": "L",
"products": ["328", "329", "330"]
}, {
"id": "170",
"label": "XL",
"products": ["331", "332", "333"]
}],
"position": "0"
},
"93": {
"id": "93",
"code": "color",
"label": "Color",
"options": [{
"id": "50",
"label": "Blue",
"products": ["319", "322", "325", "328", "331"]
}, {
"id": "52",
"label": "Gray",
"products": ["320", "323", "326", "329", "332"]
}, {
"id": "53",
"label": "Green",
"products": ["321", "324", "327", "330", "333"]
}],
"position": "1"
}
},
"template": "\u00a3<%- data.price %>",
"currencyFormat": "\u00a3%s",
"optionPrices": {
"319": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"320": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"321": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"322": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"323": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"324": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"325": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"326": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"327": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"328": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"329": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"330": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"331": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"332": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"333": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
}
},
"priceFormat": {
"pattern": "\u00a3%s",
"precision": 2,
"requiredPrecision": 2,
"decimalSymbol": ".",
"groupSymbol": ",",
"groupLength": 3,
"integerRequired": false
},
"prices": {
"baseOldPrice": {
"amount": 99
},
"oldPrice": {
"amount": 99
},
"basePrice": {
"amount": 99
},
"finalPrice": {
"amount": 99
}
},
"productId": "334",
"chooseText": "Choose an Option...",
"images": [],
"index": {
"319": {
"155": "166",
"93": "50"
},
"320": {
"155": "166",
"93": "52"
},
"321": {
"155": "166",
"93": "53"
},
"322": {
"155": "167",
"93": "50"
},
"323": {
"155": "167",
"93": "52"
},
"324": {
"155": "167",
"93": "53"
},
"325": {
"155": "168",
"93": "50"
},
"326": {
"155": "168",
"93": "52"
},
"327": {
"155": "168",
"93": "53"
},
"328": {
"155": "169",
"93": "50"
},
"329": {
"155": "169",
"93": "52"
},
"330": {
"155": "169",
"93": "53"
},
"331": {
"155": "170",
"93": "50"
},
"332": {
"155": "170",
"93": "52"
},
"333": {
"155": "170",
"93": "53"
}
},
"salable": [],
"canDisplayShowOutOfStockStatus": false,
"channel": "website",
"salesChannelCode": "base",
"sku": {
"319": "MJ08-XS-Blue",
"320": "MJ08-XS-Gray",
"321": "MJ08-XS-Green",
"322": "MJ08-S-Blue",
"323": "MJ08-S-Gray",
"324": "MJ08-S-Green",
"325": "MJ08-M-Blue",
"326": "MJ08-M-Gray",
"327": "MJ08-M-Green",
"328": "MJ08-L-Blue",
"329": "MJ08-L-Gray",
"330": "MJ08-L-Green",
"331": "MJ08-XL-Blue",
"332": "MJ08-XL-Gray",
"333": "MJ08-XL-Green"
}
});
const swatchOptionsComponent = initSwatchOptions({
"155": {
"166": {
"type": "0",
"value": "XS",
"label": "XS"
},
"167": {
"type": "0",
"value": "S",
"label": "S"
},
"168": {
"type": "0",
"value": "M",
"label": "M"
},
"169": {
"type": "0",
"value": "L",
"label": "L"
},
"170": {
"type": "0",
"value": "XL",
"label": "XL"
},
"additional_data": "{\"swatch_input_type\":\"text\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
},
"93": {
"50": {
"type": "1",
"value": "#1857f7",
"label": "Blue"
},
"52": {
"type": "1",
"value": "#8f8f8f",
"label": "Gray"
},
"53": {
"type": "1",
"value": "#53a828",
"label": "Green"
},
"additional_data": "{\"swatch_input_type\":\"visual\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
}
});
return Object.assign(configurableOptionsComponent, swatchOptionsComponent, {
mediaCallback: "https\u003A\u002F\u002Faccelerator\u002Dtheme.gene.co.uk\u002Fswatches\u002Fajax\u002Fmedia\u002F",
changeOption(optionId, value, skipUpdateGallery) {
if (value === '') {
this.selectedValues = this.removeAttrFromSelection(this.selectedValues, optionId)
} else {
this.selectedValues[optionId] = value;
}
this.findSimpleIndex();
this.findAllowedAttributeOptions();
this.updatePrices();
!skipUpdateGallery && this.updateGallery();
window.dispatchEvent(new CustomEvent('listing-configurable-selection-changed', {
detail: {
productId: this.productId,
optionId,
value,
productIndex: this.productIndex,
selectedValues: this.selectedValues,
candidates: this.findProductIdsForPartialSelection(this.selectedValues),
}
}));
},
updateGallery() {
if (!this.productIndex) {
return;
}
fetch(`${this.mediaCallback}?product_id=${this.productIndex}&isAjax=true`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(response => {
return response.json()
}).then(data => {
if (data.errors) {
// non critical failure only console logged
console.warn(data.errors);
} else {
const image = data && data.medium;
image && window.dispatchEvent(new CustomEvent("update-gallery-334", {
detail: image
}));
}
}).catch(error => {
console.warn(error)
});
},
preselectQuerystringItems() {
// pre-select option like ?size=167
const urlQueryParams = new URLSearchParams(window.location.search.replace('?', ''));
Object.values(this.optionConfig.attributes).map(attribute => {
// Don't update images on load, since PLPs already set the main image to the selected options
const skipUpdateGallery = true;
urlQueryParams.get(attribute.code) && this.changeOption(attribute.id, urlQueryParams.get(attribute.code), skipUpdateGallery);
});
},
mouseDown: false,
startX: 0,
maxScroll: 0,
scrollLeft: null,
slider: null,
scrollEvents: {
['@mousedown'](e) {
this.slider = e.target.closest('.snap');
if (!this.slider) {
return;
}
this.maxScroll = this.slider.scrollWidth - this.slider.offsetWidth;
this.startX = e.pageX - this.slider.offsetLeft;
this.scrollLeft = this.slider.scrollLeft;
this.mouseDown = true;
},
['@mouseout.self']() {
this.mouseDown = false;
},
['@mouseup']() {
this.mouseDown = false;
},
['@mousemove'](e) {
e.preventDefault();
if (!this.mouseDown) {
return;
}
const x = e.pageX - this.slider.offsetLeft;
const scroll = x - this.startX;
const scrollLeft = this.scrollLeft - scroll;
if (scrollLeft > this.maxScroll) {
this.slider.scrollLeft = this.maxScroll;
return
}
this.slider.scrollLeft = this.scrollLeft - scroll;
},
['@onselectstart']() {
return false;
}
},
resizeEvent() {
Array.from(this.$root.querySelectorAll('.snap')).forEach(slider => {
slider.scrollLeft = 0;
})
}
});
}
</script>
<div x-data="initConfigurableSwatchOptions_334()" x-init="findAllowedAttributeOptions(); initShowSwatchesIntersect();" @private-content-loaded.window="onGetCartData($event.detail.data)" @resize.window="resizeEvent()" class="mb-2 relative">
<div>
<div class="swatch-attribute border-t last:border-b border-container
size">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-334-155" role="radiogroup" x-bind="scrollEvents" aria-label="Size">
<template x-for="(item, index) in optionConfig.attributes[155].options" :key="item.id">
<div x-id="['attribute-option-334-'+item.id]">
<template x-if="optionIsEnabled(155, item.id) && optionIsActive(155, item.id)">
<label :for="$id('attribute-option-334-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[155] === item.id),
'border-container-darker':
(selectedValues[155] !== item.id),
'w-6 h-6' : !isTextSwatch(155, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('155',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '155',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-334-'+item.id)" :value="item.id" name="super_attribute[155]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(155, $event.target.value)" x-on:click="clearOptionIfActive(155, item.id)" x-model="selectedValues[155]" :required="getAllowedAttributeOptions(155).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(155, item.id)" aria-describedby="attribute-label-334-155">
<template x-if="isTextSwatch(155, item.id)">
<div x-html="getSwatchText(155, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(155, item.id) && !optionIsActive(155, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(155, item.id),
}" :style="getSwatchBackgroundStyle('155',item.id)">
<div x-html="getSwatchText(155, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(155, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
<div class="swatch-attribute border-t last:border-b border-container
color">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-334-93" role="radiogroup" x-bind="scrollEvents" aria-label="Color">
<template x-for="(item, index) in optionConfig.attributes[93].options" :key="item.id">
<div x-id="['attribute-option-334-'+item.id]">
<template x-if="optionIsEnabled(93, item.id) && optionIsActive(93, item.id)">
<label :for="$id('attribute-option-334-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[93] === item.id),
'border-container-darker':
(selectedValues[93] !== item.id),
'w-6 h-6' : !isTextSwatch(93, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('93',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '93',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-334-'+item.id)" :value="item.id" name="super_attribute[93]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(93, $event.target.value)" x-on:click="clearOptionIfActive(93, item.id)" x-model="selectedValues[93]" :required="getAllowedAttributeOptions(93).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(93, item.id)" aria-describedby="attribute-label-334-93">
<template x-if="isTextSwatch(93, item.id)">
<div x-html="getSwatchText(93, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(93, item.id) && !optionIsActive(93, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(93, item.id),
}" :style="getSwatchBackgroundStyle('93',item.id)">
<div x-html="getSwatchText(93, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(93, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
<template x-if="isTooltipVisible()">
<div class="absolute pointer-events-none select-none" :style="getTooltipPosition()">
<div class="shadow-lg">
<div class="absolute top-0 left-0 z-10 min-w-20 p-2 -mt-6 text-sm leading-tight text-black
transform -translate-x-1/2 -translate-y-full bg-white rounded-lg shadow-lg text-center" :class="{'-translate-x-5' : isFirstItemCol()}">
<template x-if="isVisualSwatch(activeTooltipItem.attribute, activeTooltipItem.item)">
<div class="inline-block border shadow-sm border-container" :style="getTooltipImageStyle(activeTooltipItem.attribute, activeTooltipItem.item)"></div>
</template>
<span class="mx-2 text-lg font-semibold whitespace-nowrap subtitle" x-html="getTooltipLabel()"></span>
</div>
<svg class="absolute z-10 w-8 h-8 text-white transform -translate-x-1/5
-translate-y-8 fill-current stroke-current" width="12" height="12">
<rect x="12" y="-12" width="12" height="12" transform="rotate(45)" class="shadow-xl"></rect>
</svg>
</div>
</div>
</template>
</div>
<script>
function initPriceBox__65a2b6f5a55af() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f5a55af()" @update-prices-334.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="334" data-price-box="product-id-334"><span class="normal-price">
<span x-data="" x-id="['product\u002Dprice\u002D334']" class="price-container price-final_price tax weee">
<span class="price-label">As low as</span>
<span :id="$id('product\u002Dprice\u002D334')" data-price-amount="99" data-price-type="finalPrice" class="price-wrapper " id="product-price-334-1"><span class="price">£99.00</span></span>
</span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Lando Gym Jacket">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(334)" aria-label="Add to Wish List Lando Gym Jacket" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(334)" aria-label="Add to Compare Lando Gym Jacket" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/44/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/44/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="44">
<a href="https://accelerator-theme.gene.co.uk/didi-sport-watch.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-44.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/w/g/wg02-bk-0.jpg" loading="lazy" width="360" height="360" alt="Didi Sport Watch" title="Didi Sport Watch">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/didi-sport-watch.html" :id="`slide-desc-44-${$id('slider-id')}`" id="slide-desc-44-slider-id-2">
Didi Sport Watch </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating4465a2b6f5b1f64()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Didi\u0020Sport\u0020Watch\u0020rating.\u00203.5\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Didi\u0020Sport\u0020Watch\u0020rating.\u00203.5\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Didi Sport Watch rating. 3.5 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill44">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="50%" stop-color="#f6e05e"></stop>
<stop offset="50%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill44)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating4465a2b6f5b1f64() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initPriceBox__65a2b6f5b1c5d() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f5b1c5d()" @update-prices-44.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="44" data-price-box="product-id-44">
<span x-data="" x-id="['product\u002Dprice\u002D44']" class="price-container price-final_price tax weee">
<span :id="$id('product\u002Dprice\u002D44')" data-price-amount="92" data-price-type="finalPrice" class="price-wrapper " id="product-price-44-1"><span class="price">£92.00</span></span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Didi Sport Watch">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(44)" aria-label="Add to Wish List Didi Sport Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(44)" aria-label="Add to Compare Didi Sport Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/40/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/40/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="40">
<a href="https://accelerator-theme.gene.co.uk/dash-digital-watch.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-40.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/m/g/mg02-bk-0.jpg" loading="lazy" width="360" height="360" alt="Dash Digital Watch" title="Dash Digital Watch">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/dash-digital-watch.html" :id="`slide-desc-40-${$id('slider-id')}`" id="slide-desc-40-slider-id-2">
Dash Digital Watch </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating4065a2b6f59e12f()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Dash\u0020Digital\u0020Watch\u0020rating.\u00203.65\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Dash\u0020Digital\u0020Watch\u0020rating.\u00203.65\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Dash Digital Watch rating. 3.65 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill40">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="65%" stop-color="#f6e05e"></stop>
<stop offset="65%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill40)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating4065a2b6f59e12f() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initPriceBox__65a2b6f59ddc5() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f59ddc5()" @update-prices-40.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="40" data-price-box="product-id-40">
<span x-data="" x-id="['product\u002Dprice\u002D40']" class="price-container price-final_price tax weee">
<span :id="$id('product\u002Dprice\u002D40')" data-price-amount="92" data-price-type="finalPrice" class="price-wrapper " id="product-price-40-2"><span class="price">£92.00</span></span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Dash Digital Watch">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(40)" aria-label="Add to Wish List Dash Digital Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(40)" aria-label="Add to Compare Dash Digital Watch" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/1268/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/1268/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="1268">
<a href="https://accelerator-theme.gene.co.uk/ingrid-running-jacket.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-1268.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/w/j/wj04-white_main_1.jpg" loading="lazy" width="360" height="360" alt="Ingrid Running Jacket" title="Ingrid Running Jacket">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/ingrid-running-jacket.html" :id="`slide-desc-1268-${$id('slider-id')}`" id="slide-desc-1268-slider-id-2">
Ingrid Running Jacket </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating126865a2b6f5b348a()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Ingrid\u0020Running\u0020Jacket\u0020rating.\u00204.5\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Ingrid\u0020Running\u0020Jacket\u0020rating.\u00204.5\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Ingrid Running Jacket rating. 4.5 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill1268">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="50%" stop-color="#f6e05e"></stop>
<stop offset="50%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill1268)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
</div>
<script>
'use strict';
function initRating126865a2b6f5b348a() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initConfigurableSwatchOptions_1268() {
const configurableOptionsComponent = initConfigurableOptions('1268', {
"attributes": {
"155": {
"id": "155",
"code": "size",
"label": "Size",
"options": [{
"id": "166",
"label": "XS",
"products": ["1253", "1254", "1255"]
}, {
"id": "167",
"label": "S",
"products": ["1256", "1257", "1258"]
}, {
"id": "168",
"label": "M",
"products": ["1259", "1260", "1261"]
}, {
"id": "169",
"label": "L",
"products": ["1262", "1263", "1264"]
}, {
"id": "170",
"label": "XL",
"products": ["1265", "1266", "1267"]
}],
"position": "0"
},
"93": {
"id": "93",
"code": "color",
"label": "Color",
"options": [{
"id": "56",
"label": "Orange",
"products": ["1253", "1256", "1259", "1262", "1265"]
}, {
"id": "58",
"label": "Red",
"products": ["1254", "1257", "1260", "1263", "1266"]
}, {
"id": "59",
"label": "White",
"products": ["1255", "1258", "1261", "1264", "1267"]
}],
"position": "1"
}
},
"template": "\u00a3<%- data.price %>",
"currencyFormat": "\u00a3%s",
"optionPrices": {
"1253": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1254": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1255": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1256": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1257": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1258": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1259": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1260": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1261": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1262": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1263": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1264": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1265": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1266": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1267": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
}
},
"priceFormat": {
"pattern": "\u00a3%s",
"precision": 2,
"requiredPrecision": 2,
"decimalSymbol": ".",
"groupSymbol": ",",
"groupLength": 3,
"integerRequired": false
},
"prices": {
"baseOldPrice": {
"amount": 84
},
"oldPrice": {
"amount": 84
},
"basePrice": {
"amount": 84
},
"finalPrice": {
"amount": 84
}
},
"productId": "1268",
"chooseText": "Choose an Option...",
"images": [],
"index": {
"1253": {
"155": "166",
"93": "56"
},
"1254": {
"155": "166",
"93": "58"
},
"1255": {
"155": "166",
"93": "59"
},
"1256": {
"155": "167",
"93": "56"
},
"1257": {
"155": "167",
"93": "58"
},
"1258": {
"155": "167",
"93": "59"
},
"1259": {
"155": "168",
"93": "56"
},
"1260": {
"155": "168",
"93": "58"
},
"1261": {
"155": "168",
"93": "59"
},
"1262": {
"155": "169",
"93": "56"
},
"1263": {
"155": "169",
"93": "58"
},
"1264": {
"155": "169",
"93": "59"
},
"1265": {
"155": "170",
"93": "56"
},
"1266": {
"155": "170",
"93": "58"
},
"1267": {
"155": "170",
"93": "59"
}
},
"salable": [],
"canDisplayShowOutOfStockStatus": false,
"channel": "website",
"salesChannelCode": "base",
"sku": {
"1253": "WJ04-XS-Orange",
"1254": "WJ04-XS-Red",
"1255": "WJ04-XS-White",
"1256": "WJ04-S-Orange",
"1257": "WJ04-S-Red",
"1258": "WJ04-S-White",
"1259": "WJ04-M-Orange",
"1260": "WJ04-M-Red",
"1261": "WJ04-M-White",
"1262": "WJ04-L-Orange",
"1263": "WJ04-L-Red",
"1264": "WJ04-L-White",
"1265": "WJ04-XL-Orange",
"1266": "WJ04-XL-Red",
"1267": "WJ04-XL-White"
}
});
const swatchOptionsComponent = initSwatchOptions({
"155": {
"166": {
"type": "0",
"value": "XS",
"label": "XS"
},
"167": {
"type": "0",
"value": "S",
"label": "S"
},
"168": {
"type": "0",
"value": "M",
"label": "M"
},
"169": {
"type": "0",
"value": "L",
"label": "L"
},
"170": {
"type": "0",
"value": "XL",
"label": "XL"
},
"additional_data": "{\"swatch_input_type\":\"text\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
},
"93": {
"56": {
"type": "1",
"value": "#eb6703",
"label": "Orange"
},
"58": {
"type": "1",
"value": "#ff0000",
"label": "Red"
},
"59": {
"type": "1",
"value": "#ffffff",
"label": "White"
},
"additional_data": "{\"swatch_input_type\":\"visual\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
}
});
return Object.assign(configurableOptionsComponent, swatchOptionsComponent, {
mediaCallback: "https\u003A\u002F\u002Faccelerator\u002Dtheme.gene.co.uk\u002Fswatches\u002Fajax\u002Fmedia\u002F",
changeOption(optionId, value, skipUpdateGallery) {
if (value === '') {
this.selectedValues = this.removeAttrFromSelection(this.selectedValues, optionId)
} else {
this.selectedValues[optionId] = value;
}
this.findSimpleIndex();
this.findAllowedAttributeOptions();
this.updatePrices();
!skipUpdateGallery && this.updateGallery();
window.dispatchEvent(new CustomEvent('listing-configurable-selection-changed', {
detail: {
productId: this.productId,
optionId,
value,
productIndex: this.productIndex,
selectedValues: this.selectedValues,
candidates: this.findProductIdsForPartialSelection(this.selectedValues),
}
}));
},
updateGallery() {
if (!this.productIndex) {
return;
}
fetch(`${this.mediaCallback}?product_id=${this.productIndex}&isAjax=true`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(response => {
return response.json()
}).then(data => {
if (data.errors) {
// non critical failure only console logged
console.warn(data.errors);
} else {
const image = data && data.medium;
image && window.dispatchEvent(new CustomEvent("update-gallery-1268", {
detail: image
}));
}
}).catch(error => {
console.warn(error)
});
},
preselectQuerystringItems() {
// pre-select option like ?size=167
const urlQueryParams = new URLSearchParams(window.location.search.replace('?', ''));
Object.values(this.optionConfig.attributes).map(attribute => {
// Don't update images on load, since PLPs already set the main image to the selected options
const skipUpdateGallery = true;
urlQueryParams.get(attribute.code) && this.changeOption(attribute.id, urlQueryParams.get(attribute.code), skipUpdateGallery);
});
},
mouseDown: false,
startX: 0,
maxScroll: 0,
scrollLeft: null,
slider: null,
scrollEvents: {
['@mousedown'](e) {
this.slider = e.target.closest('.snap');
if (!this.slider) {
return;
}
this.maxScroll = this.slider.scrollWidth - this.slider.offsetWidth;
this.startX = e.pageX - this.slider.offsetLeft;
this.scrollLeft = this.slider.scrollLeft;
this.mouseDown = true;
},
['@mouseout.self']() {
this.mouseDown = false;
},
['@mouseup']() {
this.mouseDown = false;
},
['@mousemove'](e) {
e.preventDefault();
if (!this.mouseDown) {
return;
}
const x = e.pageX - this.slider.offsetLeft;
const scroll = x - this.startX;
const scrollLeft = this.scrollLeft - scroll;
if (scrollLeft > this.maxScroll) {
this.slider.scrollLeft = this.maxScroll;
return
}
this.slider.scrollLeft = this.scrollLeft - scroll;
},
['@onselectstart']() {
return false;
}
},
resizeEvent() {
Array.from(this.$root.querySelectorAll('.snap')).forEach(slider => {
slider.scrollLeft = 0;
})
}
});
}
</script>
<div x-data="initConfigurableSwatchOptions_1268()" x-init="findAllowedAttributeOptions(); initShowSwatchesIntersect();" @private-content-loaded.window="onGetCartData($event.detail.data)" @resize.window="resizeEvent()" class="mb-2 relative">
<div>
<div class="swatch-attribute border-t last:border-b border-container
size">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-1268-155" role="radiogroup" x-bind="scrollEvents" aria-label="Size">
<template x-for="(item, index) in optionConfig.attributes[155].options" :key="item.id">
<div x-id="['attribute-option-1268-'+item.id]">
<template x-if="optionIsEnabled(155, item.id) && optionIsActive(155, item.id)">
<label :for="$id('attribute-option-1268-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[155] === item.id),
'border-container-darker':
(selectedValues[155] !== item.id),
'w-6 h-6' : !isTextSwatch(155, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('155',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '155',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-1268-'+item.id)" :value="item.id" name="super_attribute[155]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(155, $event.target.value)" x-on:click="clearOptionIfActive(155, item.id)" x-model="selectedValues[155]" :required="getAllowedAttributeOptions(155).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(155, item.id)" aria-describedby="attribute-label-1268-155">
<template x-if="isTextSwatch(155, item.id)">
<div x-html="getSwatchText(155, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(155, item.id) && !optionIsActive(155, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(155, item.id),
}" :style="getSwatchBackgroundStyle('155',item.id)">
<div x-html="getSwatchText(155, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(155, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
<div class="swatch-attribute border-t last:border-b border-container
color">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-1268-93" role="radiogroup" x-bind="scrollEvents" aria-label="Color">
<template x-for="(item, index) in optionConfig.attributes[93].options" :key="item.id">
<div x-id="['attribute-option-1268-'+item.id]">
<template x-if="optionIsEnabled(93, item.id) && optionIsActive(93, item.id)">
<label :for="$id('attribute-option-1268-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[93] === item.id),
'border-container-darker':
(selectedValues[93] !== item.id),
'w-6 h-6' : !isTextSwatch(93, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('93',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '93',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-1268-'+item.id)" :value="item.id" name="super_attribute[93]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(93, $event.target.value)" x-on:click="clearOptionIfActive(93, item.id)" x-model="selectedValues[93]" :required="getAllowedAttributeOptions(93).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(93, item.id)" aria-describedby="attribute-label-1268-93">
<template x-if="isTextSwatch(93, item.id)">
<div x-html="getSwatchText(93, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(93, item.id) && !optionIsActive(93, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(93, item.id),
}" :style="getSwatchBackgroundStyle('93',item.id)">
<div x-html="getSwatchText(93, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(93, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
<template x-if="isTooltipVisible()">
<div class="absolute pointer-events-none select-none" :style="getTooltipPosition()">
<div class="shadow-lg">
<div class="absolute top-0 left-0 z-10 min-w-20 p-2 -mt-6 text-sm leading-tight text-black
transform -translate-x-1/2 -translate-y-full bg-white rounded-lg shadow-lg text-center" :class="{'-translate-x-5' : isFirstItemCol()}">
<template x-if="isVisualSwatch(activeTooltipItem.attribute, activeTooltipItem.item)">
<div class="inline-block border shadow-sm border-container" :style="getTooltipImageStyle(activeTooltipItem.attribute, activeTooltipItem.item)"></div>
</template>
<span class="mx-2 text-lg font-semibold whitespace-nowrap subtitle" x-html="getTooltipLabel()"></span>
</div>
<svg class="absolute z-10 w-8 h-8 text-white transform -translate-x-1/5
-translate-y-8 fill-current stroke-current" width="12" height="12">
<rect x="12" y="-12" width="12" height="12" transform="rotate(45)" class="shadow-xl"></rect>
</svg>
</div>
</div>
</template>
</div>
<script>
function initPriceBox__65a2b6f5b2f66() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f5b2f66()" @update-prices-1268.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="1268" data-price-box="product-id-1268"><span class="normal-price">
<span x-data="" x-id="['product\u002Dprice\u002D1268']" class="price-container price-final_price tax weee">
<span class="price-label">As low as</span>
<span :id="$id('product\u002Dprice\u002D1268')" data-price-amount="84" data-price-type="finalPrice" class="price-wrapper " id="product-price-1268-1"><span class="price">£84.00</span></span>
</span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Ingrid Running Jacket">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(1268)" aria-label="Add to Wish List Ingrid Running Jacket" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(1268)" aria-label="Add to Compare Ingrid Running Jacket" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/1396/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/1396/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="1396">
<a href="https://accelerator-theme.gene.co.uk/olivia-1-4-zip-light-jacket.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-1396.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/w/j/wj12-blue_main_1.jpg" loading="lazy" width="360" height="360" alt="Olivia 1/4 Zip Light Jacket" title="Olivia 1/4 Zip Light Jacket">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/olivia-1-4-zip-light-jacket.html" :id="`slide-desc-1396-${$id('slider-id')}`" id="slide-desc-1396-slider-id-2">
Olivia 1/4 Zip Light Jacket </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating139665a2b6f5b7b1a()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" title="Be the first to review this product" tabindex="0"
:aria-label="reviewsSection
? 'Olivia\u00201\u002F4\u0020Zip\u0020Light\u0020Jacket\u0020rating.\u00200\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Olivia\u00201\u002F4\u0020Zip\u0020Light\u0020Jacket\u0020rating.\u00200\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Olivia 1/4 Zip Light Jacket rating. 0 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-200 w-6 h-6" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-200 w-6 h-6" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-200 w-6 h-6" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-200 w-6 h-6" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-200 w-6 h-6" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating139665a2b6f5b7b1a() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initConfigurableSwatchOptions_1396() {
const configurableOptionsComponent = initConfigurableOptions('1396', {
"attributes": {
"155": {
"id": "155",
"code": "size",
"label": "Size",
"options": [{
"id": "166",
"label": "XS",
"products": ["1381", "1382", "1383"]
}, {
"id": "167",
"label": "S",
"products": ["1384", "1385", "1386"]
}, {
"id": "168",
"label": "M",
"products": ["1387", "1388", "1389"]
}, {
"id": "169",
"label": "L",
"products": ["1390", "1391", "1392"]
}, {
"id": "170",
"label": "XL",
"products": ["1393", "1394", "1395"]
}],
"position": "0"
},
"93": {
"id": "93",
"code": "color",
"label": "Color",
"options": [{
"id": "49",
"label": "Black",
"products": ["1381", "1384", "1387", "1390", "1393"]
}, {
"id": "50",
"label": "Blue",
"products": ["1382", "1385", "1388", "1391", "1394"]
}, {
"id": "57",
"label": "Purple",
"products": ["1383", "1386", "1389", "1392", "1395"]
}],
"position": "1"
}
},
"template": "\u00a3<%- data.price %>",
"currencyFormat": "\u00a3%s",
"optionPrices": {
"1381": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1382": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1383": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1384": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1385": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1386": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1387": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1388": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1389": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1390": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1391": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1392": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1393": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1394": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1395": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
}
},
"priceFormat": {
"pattern": "\u00a3%s",
"precision": 2,
"requiredPrecision": 2,
"decimalSymbol": ".",
"groupSymbol": ",",
"groupLength": 3,
"integerRequired": false
},
"prices": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
}
},
"productId": "1396",
"chooseText": "Choose an Option...",
"images": [],
"index": {
"1381": {
"155": "166",
"93": "49"
},
"1382": {
"155": "166",
"93": "50"
},
"1383": {
"155": "166",
"93": "57"
},
"1384": {
"155": "167",
"93": "49"
},
"1385": {
"155": "167",
"93": "50"
},
"1386": {
"155": "167",
"93": "57"
},
"1387": {
"155": "168",
"93": "49"
},
"1388": {
"155": "168",
"93": "50"
},
"1389": {
"155": "168",
"93": "57"
},
"1390": {
"155": "169",
"93": "49"
},
"1391": {
"155": "169",
"93": "50"
},
"1392": {
"155": "169",
"93": "57"
},
"1393": {
"155": "170",
"93": "49"
},
"1394": {
"155": "170",
"93": "50"
},
"1395": {
"155": "170",
"93": "57"
}
},
"salable": [],
"canDisplayShowOutOfStockStatus": false,
"channel": "website",
"salesChannelCode": "base",
"sku": {
"1381": "WJ12-XS-Black",
"1382": "WJ12-XS-Blue",
"1383": "WJ12-XS-Purple",
"1384": "WJ12-S-Black",
"1385": "WJ12-S-Blue",
"1386": "WJ12-S-Purple",
"1387": "WJ12-M-Black",
"1388": "WJ12-M-Blue",
"1389": "WJ12-M-Purple",
"1390": "WJ12-L-Black",
"1391": "WJ12-L-Blue",
"1392": "WJ12-L-Purple",
"1393": "WJ12-XL-Black",
"1394": "WJ12-XL-Blue",
"1395": "WJ12-XL-Purple"
}
});
const swatchOptionsComponent = initSwatchOptions({
"155": {
"166": {
"type": "0",
"value": "XS",
"label": "XS"
},
"167": {
"type": "0",
"value": "S",
"label": "S"
},
"168": {
"type": "0",
"value": "M",
"label": "M"
},
"169": {
"type": "0",
"value": "L",
"label": "L"
},
"170": {
"type": "0",
"value": "XL",
"label": "XL"
},
"additional_data": "{\"swatch_input_type\":\"text\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
},
"93": {
"49": {
"type": "1",
"value": "#000000",
"label": "Black"
},
"50": {
"type": "1",
"value": "#1857f7",
"label": "Blue"
},
"57": {
"type": "1",
"value": "#ef3dff",
"label": "Purple"
},
"additional_data": "{\"swatch_input_type\":\"visual\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
}
});
return Object.assign(configurableOptionsComponent, swatchOptionsComponent, {
mediaCallback: "https\u003A\u002F\u002Faccelerator\u002Dtheme.gene.co.uk\u002Fswatches\u002Fajax\u002Fmedia\u002F",
changeOption(optionId, value, skipUpdateGallery) {
if (value === '') {
this.selectedValues = this.removeAttrFromSelection(this.selectedValues, optionId)
} else {
this.selectedValues[optionId] = value;
}
this.findSimpleIndex();
this.findAllowedAttributeOptions();
this.updatePrices();
!skipUpdateGallery && this.updateGallery();
window.dispatchEvent(new CustomEvent('listing-configurable-selection-changed', {
detail: {
productId: this.productId,
optionId,
value,
productIndex: this.productIndex,
selectedValues: this.selectedValues,
candidates: this.findProductIdsForPartialSelection(this.selectedValues),
}
}));
},
updateGallery() {
if (!this.productIndex) {
return;
}
fetch(`${this.mediaCallback}?product_id=${this.productIndex}&isAjax=true`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(response => {
return response.json()
}).then(data => {
if (data.errors) {
// non critical failure only console logged
console.warn(data.errors);
} else {
const image = data && data.medium;
image && window.dispatchEvent(new CustomEvent("update-gallery-1396", {
detail: image
}));
}
}).catch(error => {
console.warn(error)
});
},
preselectQuerystringItems() {
// pre-select option like ?size=167
const urlQueryParams = new URLSearchParams(window.location.search.replace('?', ''));
Object.values(this.optionConfig.attributes).map(attribute => {
// Don't update images on load, since PLPs already set the main image to the selected options
const skipUpdateGallery = true;
urlQueryParams.get(attribute.code) && this.changeOption(attribute.id, urlQueryParams.get(attribute.code), skipUpdateGallery);
});
},
mouseDown: false,
startX: 0,
maxScroll: 0,
scrollLeft: null,
slider: null,
scrollEvents: {
['@mousedown'](e) {
this.slider = e.target.closest('.snap');
if (!this.slider) {
return;
}
this.maxScroll = this.slider.scrollWidth - this.slider.offsetWidth;
this.startX = e.pageX - this.slider.offsetLeft;
this.scrollLeft = this.slider.scrollLeft;
this.mouseDown = true;
},
['@mouseout.self']() {
this.mouseDown = false;
},
['@mouseup']() {
this.mouseDown = false;
},
['@mousemove'](e) {
e.preventDefault();
if (!this.mouseDown) {
return;
}
const x = e.pageX - this.slider.offsetLeft;
const scroll = x - this.startX;
const scrollLeft = this.scrollLeft - scroll;
if (scrollLeft > this.maxScroll) {
this.slider.scrollLeft = this.maxScroll;
return
}
this.slider.scrollLeft = this.scrollLeft - scroll;
},
['@onselectstart']() {
return false;
}
},
resizeEvent() {
Array.from(this.$root.querySelectorAll('.snap')).forEach(slider => {
slider.scrollLeft = 0;
})
}
});
}
</script>
<div x-data="initConfigurableSwatchOptions_1396()" x-init="findAllowedAttributeOptions(); initShowSwatchesIntersect();" @private-content-loaded.window="onGetCartData($event.detail.data)" @resize.window="resizeEvent()" class="mb-2 relative">
<div>
<div class="swatch-attribute border-t last:border-b border-container
size">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-1396-155" role="radiogroup" x-bind="scrollEvents" aria-label="Size">
<template x-for="(item, index) in optionConfig.attributes[155].options" :key="item.id">
<div x-id="['attribute-option-1396-'+item.id]">
<template x-if="optionIsEnabled(155, item.id) && optionIsActive(155, item.id)">
<label :for="$id('attribute-option-1396-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[155] === item.id),
'border-container-darker':
(selectedValues[155] !== item.id),
'w-6 h-6' : !isTextSwatch(155, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('155',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '155',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-1396-'+item.id)" :value="item.id" name="super_attribute[155]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(155, $event.target.value)" x-on:click="clearOptionIfActive(155, item.id)" x-model="selectedValues[155]" :required="getAllowedAttributeOptions(155).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(155, item.id)" aria-describedby="attribute-label-1396-155">
<template x-if="isTextSwatch(155, item.id)">
<div x-html="getSwatchText(155, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(155, item.id) && !optionIsActive(155, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(155, item.id),
}" :style="getSwatchBackgroundStyle('155',item.id)">
<div x-html="getSwatchText(155, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(155, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
<div class="swatch-attribute border-t last:border-b border-container
color">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-1396-93" role="radiogroup" x-bind="scrollEvents" aria-label="Color">
<template x-for="(item, index) in optionConfig.attributes[93].options" :key="item.id">
<div x-id="['attribute-option-1396-'+item.id]">
<template x-if="optionIsEnabled(93, item.id) && optionIsActive(93, item.id)">
<label :for="$id('attribute-option-1396-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[93] === item.id),
'border-container-darker':
(selectedValues[93] !== item.id),
'w-6 h-6' : !isTextSwatch(93, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('93',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '93',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-1396-'+item.id)" :value="item.id" name="super_attribute[93]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(93, $event.target.value)" x-on:click="clearOptionIfActive(93, item.id)" x-model="selectedValues[93]" :required="getAllowedAttributeOptions(93).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(93, item.id)" aria-describedby="attribute-label-1396-93">
<template x-if="isTextSwatch(93, item.id)">
<div x-html="getSwatchText(93, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(93, item.id) && !optionIsActive(93, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(93, item.id),
}" :style="getSwatchBackgroundStyle('93',item.id)">
<div x-html="getSwatchText(93, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(93, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
<template x-if="isTooltipVisible()">
<div class="absolute pointer-events-none select-none" :style="getTooltipPosition()">
<div class="shadow-lg">
<div class="absolute top-0 left-0 z-10 min-w-20 p-2 -mt-6 text-sm leading-tight text-black
transform -translate-x-1/2 -translate-y-full bg-white rounded-lg shadow-lg text-center" :class="{'-translate-x-5' : isFirstItemCol()}">
<template x-if="isVisualSwatch(activeTooltipItem.attribute, activeTooltipItem.item)">
<div class="inline-block border shadow-sm border-container" :style="getTooltipImageStyle(activeTooltipItem.attribute, activeTooltipItem.item)"></div>
</template>
<span class="mx-2 text-lg font-semibold whitespace-nowrap subtitle" x-html="getTooltipLabel()"></span>
</div>
<svg class="absolute z-10 w-8 h-8 text-white transform -translate-x-1/5
-translate-y-8 fill-current stroke-current" width="12" height="12">
<rect x="12" y="-12" width="12" height="12" transform="rotate(45)" class="shadow-xl"></rect>
</svg>
</div>
</div>
</template>
</div>
<script>
function initPriceBox__65a2b6f5b7610() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f5b7610()" @update-prices-1396.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="1396" data-price-box="product-id-1396"><span class="normal-price">
<span x-data="" x-id="['product\u002Dprice\u002D1396']" class="price-container price-final_price tax weee">
<span class="price-label">As low as</span>
<span :id="$id('product\u002Dprice\u002D1396')" data-price-amount="77" data-price-type="finalPrice" class="price-wrapper " id="product-price-1396-1"><span class="price">£77.00</span></span>
</span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Olivia 1/4 Zip Light Jacket">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(1396)" aria-label="Add to Wish List Olivia 1/4 Zip Light Jacket" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(1396)" aria-label="Add to Compare Olivia 1/4 Zip Light Jacket" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/1380/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/1380/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="1380">
<a href="https://accelerator-theme.gene.co.uk/juno-jacket.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-1380.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/w/j/wj06-purple_main_1.jpg" loading="lazy" width="360" height="360" alt="Juno Jacket" title="Juno Jacket">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/juno-jacket.html" :id="`slide-desc-1380-${$id('slider-id')}`" id="slide-desc-1380-slider-id-2">
Juno Jacket </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating138065a2b6f5bc074()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Juno\u0020Jacket\u0020rating.\u00204.35\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Juno\u0020Jacket\u0020rating.\u00204.35\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Juno Jacket rating. 4.35 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill1380">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill1380)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
</div>
<script>
'use strict';
function initRating138065a2b6f5bc074() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initConfigurableSwatchOptions_1380() {
const configurableOptionsComponent = initConfigurableOptions('1380', {
"attributes": {
"155": {
"id": "155",
"code": "size",
"label": "Size",
"options": [{
"id": "166",
"label": "XS",
"products": ["1365", "1366", "1367"]
}, {
"id": "167",
"label": "S",
"products": ["1368", "1369", "1370"]
}, {
"id": "168",
"label": "M",
"products": ["1371", "1372", "1373"]
}, {
"id": "169",
"label": "L",
"products": ["1374", "1375", "1376"]
}, {
"id": "170",
"label": "XL",
"products": ["1377", "1378", "1379"]
}],
"position": "0"
},
"93": {
"id": "93",
"code": "color",
"label": "Color",
"options": [{
"id": "50",
"label": "Blue",
"products": ["1365", "1368", "1371", "1374", "1377"]
}, {
"id": "53",
"label": "Green",
"products": ["1366", "1369", "1372", "1375", "1378"]
}, {
"id": "57",
"label": "Purple",
"products": ["1367", "1370", "1373", "1376", "1379"]
}],
"position": "1"
}
},
"template": "\u00a3<%- data.price %>",
"currencyFormat": "\u00a3%s",
"optionPrices": {
"1365": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1366": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1367": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1368": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1369": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1370": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1371": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1372": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1373": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1374": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1375": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1376": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1377": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1378": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1379": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
}
},
"priceFormat": {
"pattern": "\u00a3%s",
"precision": 2,
"requiredPrecision": 2,
"decimalSymbol": ".",
"groupSymbol": ",",
"groupLength": 3,
"integerRequired": false
},
"prices": {
"baseOldPrice": {
"amount": 77
},
"oldPrice": {
"amount": 77
},
"basePrice": {
"amount": 77
},
"finalPrice": {
"amount": 77
}
},
"productId": "1380",
"chooseText": "Choose an Option...",
"images": [],
"index": {
"1365": {
"155": "166",
"93": "50"
},
"1366": {
"155": "166",
"93": "53"
},
"1367": {
"155": "166",
"93": "57"
},
"1368": {
"155": "167",
"93": "50"
},
"1369": {
"155": "167",
"93": "53"
},
"1370": {
"155": "167",
"93": "57"
},
"1371": {
"155": "168",
"93": "50"
},
"1372": {
"155": "168",
"93": "53"
},
"1373": {
"155": "168",
"93": "57"
},
"1374": {
"155": "169",
"93": "50"
},
"1375": {
"155": "169",
"93": "53"
},
"1376": {
"155": "169",
"93": "57"
},
"1377": {
"155": "170",
"93": "50"
},
"1378": {
"155": "170",
"93": "53"
},
"1379": {
"155": "170",
"93": "57"
}
},
"salable": [],
"canDisplayShowOutOfStockStatus": false,
"channel": "website",
"salesChannelCode": "base",
"sku": {
"1365": "WJ06-XS-Blue",
"1366": "WJ06-XS-Green",
"1367": "WJ06-XS-Purple",
"1368": "WJ06-S-Blue",
"1369": "WJ06-S-Green",
"1370": "WJ06-S-Purple",
"1371": "WJ06-M-Blue",
"1372": "WJ06-M-Green",
"1373": "WJ06-M-Purple",
"1374": "WJ06-L-Blue",
"1375": "WJ06-L-Green",
"1376": "WJ06-L-Purple",
"1377": "WJ06-XL-Blue",
"1378": "WJ06-XL-Green",
"1379": "WJ06-XL-Purple"
}
});
const swatchOptionsComponent = initSwatchOptions({
"155": {
"166": {
"type": "0",
"value": "XS",
"label": "XS"
},
"167": {
"type": "0",
"value": "S",
"label": "S"
},
"168": {
"type": "0",
"value": "M",
"label": "M"
},
"169": {
"type": "0",
"value": "L",
"label": "L"
},
"170": {
"type": "0",
"value": "XL",
"label": "XL"
},
"additional_data": "{\"swatch_input_type\":\"text\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
},
"93": {
"50": {
"type": "1",
"value": "#1857f7",
"label": "Blue"
},
"53": {
"type": "1",
"value": "#53a828",
"label": "Green"
},
"57": {
"type": "1",
"value": "#ef3dff",
"label": "Purple"
},
"additional_data": "{\"swatch_input_type\":\"visual\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
}
});
return Object.assign(configurableOptionsComponent, swatchOptionsComponent, {
mediaCallback: "https\u003A\u002F\u002Faccelerator\u002Dtheme.gene.co.uk\u002Fswatches\u002Fajax\u002Fmedia\u002F",
changeOption(optionId, value, skipUpdateGallery) {
if (value === '') {
this.selectedValues = this.removeAttrFromSelection(this.selectedValues, optionId)
} else {
this.selectedValues[optionId] = value;
}
this.findSimpleIndex();
this.findAllowedAttributeOptions();
this.updatePrices();
!skipUpdateGallery && this.updateGallery();
window.dispatchEvent(new CustomEvent('listing-configurable-selection-changed', {
detail: {
productId: this.productId,
optionId,
value,
productIndex: this.productIndex,
selectedValues: this.selectedValues,
candidates: this.findProductIdsForPartialSelection(this.selectedValues),
}
}));
},
updateGallery() {
if (!this.productIndex) {
return;
}
fetch(`${this.mediaCallback}?product_id=${this.productIndex}&isAjax=true`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(response => {
return response.json()
}).then(data => {
if (data.errors) {
// non critical failure only console logged
console.warn(data.errors);
} else {
const image = data && data.medium;
image && window.dispatchEvent(new CustomEvent("update-gallery-1380", {
detail: image
}));
}
}).catch(error => {
console.warn(error)
});
},
preselectQuerystringItems() {
// pre-select option like ?size=167
const urlQueryParams = new URLSearchParams(window.location.search.replace('?', ''));
Object.values(this.optionConfig.attributes).map(attribute => {
// Don't update images on load, since PLPs already set the main image to the selected options
const skipUpdateGallery = true;
urlQueryParams.get(attribute.code) && this.changeOption(attribute.id, urlQueryParams.get(attribute.code), skipUpdateGallery);
});
},
mouseDown: false,
startX: 0,
maxScroll: 0,
scrollLeft: null,
slider: null,
scrollEvents: {
['@mousedown'](e) {
this.slider = e.target.closest('.snap');
if (!this.slider) {
return;
}
this.maxScroll = this.slider.scrollWidth - this.slider.offsetWidth;
this.startX = e.pageX - this.slider.offsetLeft;
this.scrollLeft = this.slider.scrollLeft;
this.mouseDown = true;
},
['@mouseout.self']() {
this.mouseDown = false;
},
['@mouseup']() {
this.mouseDown = false;
},
['@mousemove'](e) {
e.preventDefault();
if (!this.mouseDown) {
return;
}
const x = e.pageX - this.slider.offsetLeft;
const scroll = x - this.startX;
const scrollLeft = this.scrollLeft - scroll;
if (scrollLeft > this.maxScroll) {
this.slider.scrollLeft = this.maxScroll;
return
}
this.slider.scrollLeft = this.scrollLeft - scroll;
},
['@onselectstart']() {
return false;
}
},
resizeEvent() {
Array.from(this.$root.querySelectorAll('.snap')).forEach(slider => {
slider.scrollLeft = 0;
})
}
});
}
</script>
<div x-data="initConfigurableSwatchOptions_1380()" x-init="findAllowedAttributeOptions(); initShowSwatchesIntersect();" @private-content-loaded.window="onGetCartData($event.detail.data)" @resize.window="resizeEvent()" class="mb-2 relative">
<div>
<div class="swatch-attribute border-t last:border-b border-container
size">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-1380-155" role="radiogroup" x-bind="scrollEvents" aria-label="Size">
<template x-for="(item, index) in optionConfig.attributes[155].options" :key="item.id">
<div x-id="['attribute-option-1380-'+item.id]">
<template x-if="optionIsEnabled(155, item.id) && optionIsActive(155, item.id)">
<label :for="$id('attribute-option-1380-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[155] === item.id),
'border-container-darker':
(selectedValues[155] !== item.id),
'w-6 h-6' : !isTextSwatch(155, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('155',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '155',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-1380-'+item.id)" :value="item.id" name="super_attribute[155]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(155, $event.target.value)" x-on:click="clearOptionIfActive(155, item.id)" x-model="selectedValues[155]" :required="getAllowedAttributeOptions(155).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(155, item.id)" aria-describedby="attribute-label-1380-155">
<template x-if="isTextSwatch(155, item.id)">
<div x-html="getSwatchText(155, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(155, item.id) && !optionIsActive(155, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(155, item.id),
}" :style="getSwatchBackgroundStyle('155',item.id)">
<div x-html="getSwatchText(155, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(155, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
<div class="swatch-attribute border-t last:border-b border-container
color">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-1380-93" role="radiogroup" x-bind="scrollEvents" aria-label="Color">
<template x-for="(item, index) in optionConfig.attributes[93].options" :key="item.id">
<div x-id="['attribute-option-1380-'+item.id]">
<template x-if="optionIsEnabled(93, item.id) && optionIsActive(93, item.id)">
<label :for="$id('attribute-option-1380-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[93] === item.id),
'border-container-darker':
(selectedValues[93] !== item.id),
'w-6 h-6' : !isTextSwatch(93, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('93',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '93',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-1380-'+item.id)" :value="item.id" name="super_attribute[93]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(93, $event.target.value)" x-on:click="clearOptionIfActive(93, item.id)" x-model="selectedValues[93]" :required="getAllowedAttributeOptions(93).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(93, item.id)" aria-describedby="attribute-label-1380-93">
<template x-if="isTextSwatch(93, item.id)">
<div x-html="getSwatchText(93, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(93, item.id) && !optionIsActive(93, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(93, item.id),
}" :style="getSwatchBackgroundStyle('93',item.id)">
<div x-html="getSwatchText(93, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(93, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
<template x-if="isTooltipVisible()">
<div class="absolute pointer-events-none select-none" :style="getTooltipPosition()">
<div class="shadow-lg">
<div class="absolute top-0 left-0 z-10 min-w-20 p-2 -mt-6 text-sm leading-tight text-black
transform -translate-x-1/2 -translate-y-full bg-white rounded-lg shadow-lg text-center" :class="{'-translate-x-5' : isFirstItemCol()}">
<template x-if="isVisualSwatch(activeTooltipItem.attribute, activeTooltipItem.item)">
<div class="inline-block border shadow-sm border-container" :style="getTooltipImageStyle(activeTooltipItem.attribute, activeTooltipItem.item)"></div>
</template>
<span class="mx-2 text-lg font-semibold whitespace-nowrap subtitle" x-html="getTooltipLabel()"></span>
</div>
<svg class="absolute z-10 w-8 h-8 text-white transform -translate-x-1/5
-translate-y-8 fill-current stroke-current" width="12" height="12">
<rect x="12" y="-12" width="12" height="12" transform="rotate(45)" class="shadow-xl"></rect>
</svg>
</div>
</div>
</template>
</div>
<script>
function initPriceBox__65a2b6f5bbbe9() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f5bbbe9()" @update-prices-1380.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="1380" data-price-box="product-id-1380"><span class="normal-price">
<span x-data="" x-id="['product\u002Dprice\u002D1380']" class="price-container price-final_price tax weee">
<span class="price-label">As low as</span>
<span :id="$id('product\u002Dprice\u002D1380')" data-price-amount="77" data-price-type="finalPrice" class="price-wrapper " id="product-price-1380-1"><span class="price">£77.00</span></span>
</span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Juno Jacket">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(1380)" aria-label="Add to Wish List Juno Jacket" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(1380)" aria-label="Add to Compare Juno Jacket" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/1220/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/1220/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="1220">
<a href="https://accelerator-theme.gene.co.uk/stellar-solar-jacket.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-1220.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/w/j/wj01-red_main_1.jpg" loading="lazy" width="360" height="360" alt="Stellar Solar Jacket" title="Stellar Solar Jacket">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/stellar-solar-jacket.html" :id="`slide-desc-1220-${$id('slider-id')}`" id="slide-desc-1220-slider-id-2">
Stellar Solar Jacket </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating122065a2b6f5c0181()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" tabindex="0" :aria-label="reviewsSection
? 'Stellar\u0020Solar\u0020Jacket\u0020rating.\u00203.35\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Stellar\u0020Solar\u0020Jacket\u0020rating.\u00203.35\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Stellar Solar Jacket rating. 3.35 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" viewBox="3 0 20 20" style="color: #f6e05e" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 20 20" fill="currentColor" class="w-6 h-6" aria-hidden="true">
<defs>
<linearGradient id="partialFill1220">
<stop offset="0%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#f6e05e"></stop>
<stop offset="35%" stop-color="#cbd5e0"></stop>
<stop offset="100%" stop-color="#cbd5e0"></stop>
</linearGradient>
</defs>
<g fill="url(#partialFill1220)">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969
0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-6 h-6" style="color: #cbd5e0" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0
1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating122065a2b6f5c0181() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initConfigurableSwatchOptions_1220() {
const configurableOptionsComponent = initConfigurableOptions('1220', {
"attributes": {
"155": {
"id": "155",
"code": "size",
"label": "Size",
"options": [{
"id": "167",
"label": "S",
"products": ["1211", "1212", "1213"]
}, {
"id": "168",
"label": "M",
"products": ["1214", "1215", "1216"]
}, {
"id": "169",
"label": "L",
"products": ["1217", "1218", "1219"]
}],
"position": "0"
},
"93": {
"id": "93",
"code": "color",
"label": "Color",
"options": [{
"id": "50",
"label": "Blue",
"products": ["1211", "1214", "1217"]
}, {
"id": "58",
"label": "Red",
"products": ["1212", "1215", "1218"]
}, {
"id": "60",
"label": "Yellow",
"products": ["1213", "1216", "1219"]
}],
"position": "1"
}
},
"template": "\u00a3<%- data.price %>",
"currencyFormat": "\u00a3%s",
"optionPrices": {
"1211": {
"baseOldPrice": {
"amount": 75
},
"oldPrice": {
"amount": 75
},
"basePrice": {
"amount": 75
},
"finalPrice": {
"amount": 75
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1212": {
"baseOldPrice": {
"amount": 75
},
"oldPrice": {
"amount": 75
},
"basePrice": {
"amount": 75
},
"finalPrice": {
"amount": 75
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1213": {
"baseOldPrice": {
"amount": 75
},
"oldPrice": {
"amount": 75
},
"basePrice": {
"amount": 75
},
"finalPrice": {
"amount": 75
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1214": {
"baseOldPrice": {
"amount": 75
},
"oldPrice": {
"amount": 75
},
"basePrice": {
"amount": 75
},
"finalPrice": {
"amount": 75
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1215": {
"baseOldPrice": {
"amount": 75
},
"oldPrice": {
"amount": 75
},
"basePrice": {
"amount": 75
},
"finalPrice": {
"amount": 75
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1216": {
"baseOldPrice": {
"amount": 75
},
"oldPrice": {
"amount": 75
},
"basePrice": {
"amount": 75
},
"finalPrice": {
"amount": 75
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1217": {
"baseOldPrice": {
"amount": 75
},
"oldPrice": {
"amount": 75
},
"basePrice": {
"amount": 75
},
"finalPrice": {
"amount": 75
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1218": {
"baseOldPrice": {
"amount": 75
},
"oldPrice": {
"amount": 75
},
"basePrice": {
"amount": 75
},
"finalPrice": {
"amount": 75
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"1219": {
"baseOldPrice": {
"amount": 75
},
"oldPrice": {
"amount": 75
},
"basePrice": {
"amount": 75
},
"finalPrice": {
"amount": 75
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
}
},
"priceFormat": {
"pattern": "\u00a3%s",
"precision": 2,
"requiredPrecision": 2,
"decimalSymbol": ".",
"groupSymbol": ",",
"groupLength": 3,
"integerRequired": false
},
"prices": {
"baseOldPrice": {
"amount": 75
},
"oldPrice": {
"amount": 75
},
"basePrice": {
"amount": 75
},
"finalPrice": {
"amount": 75
}
},
"productId": "1220",
"chooseText": "Choose an Option...",
"images": [],
"index": {
"1211": {
"155": "167",
"93": "50"
},
"1212": {
"155": "167",
"93": "58"
},
"1213": {
"155": "167",
"93": "60"
},
"1214": {
"155": "168",
"93": "50"
},
"1215": {
"155": "168",
"93": "58"
},
"1216": {
"155": "168",
"93": "60"
},
"1217": {
"155": "169",
"93": "50"
},
"1218": {
"155": "169",
"93": "58"
},
"1219": {
"155": "169",
"93": "60"
}
},
"salable": [],
"canDisplayShowOutOfStockStatus": false,
"channel": "website",
"salesChannelCode": "base",
"sku": {
"1211": "WJ01-S-Blue",
"1212": "WJ01-S-Red",
"1213": "WJ01-S-Yellow",
"1214": "WJ01-M-Blue",
"1215": "WJ01-M-Red",
"1216": "WJ01-M-Yellow",
"1217": "WJ01-L-Blue",
"1218": "WJ01-L-Red",
"1219": "WJ01-L-Yellow"
}
});
const swatchOptionsComponent = initSwatchOptions({
"155": {
"167": {
"type": "0",
"value": "S",
"label": "S"
},
"168": {
"type": "0",
"value": "M",
"label": "M"
},
"169": {
"type": "0",
"value": "L",
"label": "L"
},
"additional_data": "{\"swatch_input_type\":\"text\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
},
"93": {
"50": {
"type": "1",
"value": "#1857f7",
"label": "Blue"
},
"58": {
"type": "1",
"value": "#ff0000",
"label": "Red"
},
"60": {
"type": "1",
"value": "#ffd500",
"label": "Yellow"
},
"additional_data": "{\"swatch_input_type\":\"visual\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
}
});
return Object.assign(configurableOptionsComponent, swatchOptionsComponent, {
mediaCallback: "https\u003A\u002F\u002Faccelerator\u002Dtheme.gene.co.uk\u002Fswatches\u002Fajax\u002Fmedia\u002F",
changeOption(optionId, value, skipUpdateGallery) {
if (value === '') {
this.selectedValues = this.removeAttrFromSelection(this.selectedValues, optionId)
} else {
this.selectedValues[optionId] = value;
}
this.findSimpleIndex();
this.findAllowedAttributeOptions();
this.updatePrices();
!skipUpdateGallery && this.updateGallery();
window.dispatchEvent(new CustomEvent('listing-configurable-selection-changed', {
detail: {
productId: this.productId,
optionId,
value,
productIndex: this.productIndex,
selectedValues: this.selectedValues,
candidates: this.findProductIdsForPartialSelection(this.selectedValues),
}
}));
},
updateGallery() {
if (!this.productIndex) {
return;
}
fetch(`${this.mediaCallback}?product_id=${this.productIndex}&isAjax=true`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(response => {
return response.json()
}).then(data => {
if (data.errors) {
// non critical failure only console logged
console.warn(data.errors);
} else {
const image = data && data.medium;
image && window.dispatchEvent(new CustomEvent("update-gallery-1220", {
detail: image
}));
}
}).catch(error => {
console.warn(error)
});
},
preselectQuerystringItems() {
// pre-select option like ?size=167
const urlQueryParams = new URLSearchParams(window.location.search.replace('?', ''));
Object.values(this.optionConfig.attributes).map(attribute => {
// Don't update images on load, since PLPs already set the main image to the selected options
const skipUpdateGallery = true;
urlQueryParams.get(attribute.code) && this.changeOption(attribute.id, urlQueryParams.get(attribute.code), skipUpdateGallery);
});
},
mouseDown: false,
startX: 0,
maxScroll: 0,
scrollLeft: null,
slider: null,
scrollEvents: {
['@mousedown'](e) {
this.slider = e.target.closest('.snap');
if (!this.slider) {
return;
}
this.maxScroll = this.slider.scrollWidth - this.slider.offsetWidth;
this.startX = e.pageX - this.slider.offsetLeft;
this.scrollLeft = this.slider.scrollLeft;
this.mouseDown = true;
},
['@mouseout.self']() {
this.mouseDown = false;
},
['@mouseup']() {
this.mouseDown = false;
},
['@mousemove'](e) {
e.preventDefault();
if (!this.mouseDown) {
return;
}
const x = e.pageX - this.slider.offsetLeft;
const scroll = x - this.startX;
const scrollLeft = this.scrollLeft - scroll;
if (scrollLeft > this.maxScroll) {
this.slider.scrollLeft = this.maxScroll;
return
}
this.slider.scrollLeft = this.scrollLeft - scroll;
},
['@onselectstart']() {
return false;
}
},
resizeEvent() {
Array.from(this.$root.querySelectorAll('.snap')).forEach(slider => {
slider.scrollLeft = 0;
})
}
});
}
</script>
<div x-data="initConfigurableSwatchOptions_1220()" x-init="findAllowedAttributeOptions(); initShowSwatchesIntersect();" @private-content-loaded.window="onGetCartData($event.detail.data)" @resize.window="resizeEvent()" class="mb-2 relative">
<div>
<div class="swatch-attribute border-t last:border-b border-container
size">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-1220-155" role="radiogroup" x-bind="scrollEvents" aria-label="Size">
<template x-for="(item, index) in optionConfig.attributes[155].options" :key="item.id">
<div x-id="['attribute-option-1220-'+item.id]">
<template x-if="optionIsEnabled(155, item.id) && optionIsActive(155, item.id)">
<label :for="$id('attribute-option-1220-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[155] === item.id),
'border-container-darker':
(selectedValues[155] !== item.id),
'w-6 h-6' : !isTextSwatch(155, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('155',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '155',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-1220-'+item.id)" :value="item.id" name="super_attribute[155]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(155, $event.target.value)" x-on:click="clearOptionIfActive(155, item.id)" x-model="selectedValues[155]" :required="getAllowedAttributeOptions(155).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(155, item.id)" aria-describedby="attribute-label-1220-155">
<template x-if="isTextSwatch(155, item.id)">
<div x-html="getSwatchText(155, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(155, item.id) && !optionIsActive(155, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(155, item.id),
}" :style="getSwatchBackgroundStyle('155',item.id)">
<div x-html="getSwatchText(155, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(155, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
<div class="swatch-attribute border-t last:border-b border-container
color">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-1220-93" role="radiogroup" x-bind="scrollEvents" aria-label="Color">
<template x-for="(item, index) in optionConfig.attributes[93].options" :key="item.id">
<div x-id="['attribute-option-1220-'+item.id]">
<template x-if="optionIsEnabled(93, item.id) && optionIsActive(93, item.id)">
<label :for="$id('attribute-option-1220-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[93] === item.id),
'border-container-darker':
(selectedValues[93] !== item.id),
'w-6 h-6' : !isTextSwatch(93, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('93',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '93',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-1220-'+item.id)" :value="item.id" name="super_attribute[93]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(93, $event.target.value)" x-on:click="clearOptionIfActive(93, item.id)" x-model="selectedValues[93]" :required="getAllowedAttributeOptions(93).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(93, item.id)" aria-describedby="attribute-label-1220-93">
<template x-if="isTextSwatch(93, item.id)">
<div x-html="getSwatchText(93, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(93, item.id) && !optionIsActive(93, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(93, item.id),
}" :style="getSwatchBackgroundStyle('93',item.id)">
<div x-html="getSwatchText(93, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(93, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
<template x-if="isTooltipVisible()">
<div class="absolute pointer-events-none select-none" :style="getTooltipPosition()">
<div class="shadow-lg">
<div class="absolute top-0 left-0 z-10 min-w-20 p-2 -mt-6 text-sm leading-tight text-black
transform -translate-x-1/2 -translate-y-full bg-white rounded-lg shadow-lg text-center" :class="{'-translate-x-5' : isFirstItemCol()}">
<template x-if="isVisualSwatch(activeTooltipItem.attribute, activeTooltipItem.item)">
<div class="inline-block border shadow-sm border-container" :style="getTooltipImageStyle(activeTooltipItem.attribute, activeTooltipItem.item)"></div>
</template>
<span class="mx-2 text-lg font-semibold whitespace-nowrap subtitle" x-html="getTooltipLabel()"></span>
</div>
<svg class="absolute z-10 w-8 h-8 text-white transform -translate-x-1/5
-translate-y-8 fill-current stroke-current" width="12" height="12">
<rect x="12" y="-12" width="12" height="12" transform="rotate(45)" class="shadow-xl"></rect>
</svg>
</div>
</div>
</template>
</div>
<script>
function initPriceBox__65a2b6f5bfc94() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f5bfc94()" @update-prices-1220.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="1220" data-price-box="product-id-1220"><span class="normal-price">
<span x-data="" x-id="['product\u002Dprice\u002D1220']" class="price-container price-final_price tax weee">
<span class="price-label">As low as</span>
<span :id="$id('product\u002Dprice\u002D1220')" data-price-amount="75" data-price-type="finalPrice" class="price-wrapper " id="product-price-1220-1"><span class="price">£75.00</span></span>
</span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Stellar Solar Jacket">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(1220)" aria-label="Add to Wish List Stellar Solar Jacket" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(1220)" aria-label="Add to Compare Stellar Solar Jacket" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/254/
<form method="post" action="https://accelerator-theme.gene.co.uk/checkout/cart/add/uenc/%25uenc%25/product/254/" class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full ">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <input type="hidden" name="product" value="254">
<a href="https://accelerator-theme.gene.co.uk/marco-lightweight-active-hoodie.html" class="product photo product-item-photo block mx-auto mb-3 " tabindex="-1">
<img class="hover:shadow-sm object-contain product-image-photo" x-data="" @update-gallery-254.window="$root.src = $event.detail" src="https://accelerator-theme.gene.co.uk/media/catalog/product/cache/0325b608f1b2f4f570e43141521a0172/m/h/mh13-blue_main_2.jpg" loading="lazy" width="360" height="360" alt="Marco Lightweight Active Hoodie" title="Marco Lightweight Active Hoodie">
</a>
<div class="product-info flex flex-col grow">
<div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-center ">
<a class="product-item-link" href="https://accelerator-theme.gene.co.uk/marco-lightweight-active-hoodie.html" :id="`slide-desc-254-${$id('slider-id')}`" id="slide-desc-254-slider-id-2">
Marco Lightweight Active Hoodie </a>
</div>
<div class="py-1 mx-auto ">
<div x-data="initRating25465a2b6f5c3976()" @keyup.enter="scrollToRatings()" @click="scrollToRatings()" class="rating-summary flex" :class="{'cursor-pointer' : reviewsSection}" title="Be the first to review this product" tabindex="0"
:aria-label="reviewsSection
? 'Marco\u0020Lightweight\u0020Active\u0020Hoodie\u0020rating.\u00200\u0020out\u0020of\u00205\u0020stars.\u0020Click\u0020to\u0020go\u0020to\u0020reviews.'
: 'Marco\u0020Lightweight\u0020Active\u0020Hoodie\u0020rating.\u00200\u0020out\u0020of\u00205\u0020stars'
" role="group" aria-label="Marco Lightweight Active Hoodie rating. 0 out of 5 stars">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-200 w-6 h-6" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-200 w-6 h-6" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-200 w-6 h-6" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-200 w-6 h-6" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-200 w-6 h-6" viewBox="3 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1
1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<script>
'use strict';
function initRating25465a2b6f5c3976() {
return {
reviewsSection: document.getElementById('customer-review-list') || document.getElementById('customer-reviews') || document.getElementById('review-form'),
scrollToRatings() {
let scrollTimeout = null
if (!this.reviewsSection) {
return
}
addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (this.reviewsSection) {
this.reviewsSection.focus()
}
}, 50);
}, {
once: true
});
this.reviewsSection.scrollIntoView({
behavior: 'smooth'
})
}
}
}
</script>
</div>
<script>
function initConfigurableSwatchOptions_254() {
const configurableOptionsComponent = initConfigurableOptions('254', {
"attributes": {
"155": {
"id": "155",
"code": "size",
"label": "Size",
"options": [{
"id": "166",
"label": "XS",
"products": ["239", "240", "241"]
}, {
"id": "167",
"label": "S",
"products": ["242", "243", "244"]
}, {
"id": "168",
"label": "M",
"products": ["245", "246", "247"]
}, {
"id": "169",
"label": "L",
"products": ["248", "249", "250"]
}, {
"id": "170",
"label": "XL",
"products": ["251", "252", "253"]
}],
"position": "0"
},
"93": {
"id": "93",
"code": "color",
"label": "Color",
"options": [{
"id": "50",
"label": "Blue",
"products": ["239", "242", "245", "248", "251"]
}, {
"id": "53",
"label": "Green",
"products": ["240", "243", "246", "249", "252"]
}, {
"id": "54",
"label": "Lavender",
"products": ["241", "244", "247", "250", "253"]
}],
"position": "1"
}
},
"template": "\u00a3<%- data.price %>",
"currencyFormat": "\u00a3%s",
"optionPrices": {
"239": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"240": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"241": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"242": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"243": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"244": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"245": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"246": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"247": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"248": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"249": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"250": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"251": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"252": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
},
"253": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
},
"tierPrices": [],
"msrpPrice": {
"amount": 0
}
}
},
"priceFormat": {
"pattern": "\u00a3%s",
"precision": 2,
"requiredPrecision": 2,
"decimalSymbol": ".",
"groupSymbol": ",",
"groupLength": 3,
"integerRequired": false
},
"prices": {
"baseOldPrice": {
"amount": 74
},
"oldPrice": {
"amount": 74
},
"basePrice": {
"amount": 74
},
"finalPrice": {
"amount": 74
}
},
"productId": "254",
"chooseText": "Choose an Option...",
"images": [],
"index": {
"239": {
"155": "166",
"93": "50"
},
"240": {
"155": "166",
"93": "53"
},
"241": {
"155": "166",
"93": "54"
},
"242": {
"155": "167",
"93": "50"
},
"243": {
"155": "167",
"93": "53"
},
"244": {
"155": "167",
"93": "54"
},
"245": {
"155": "168",
"93": "50"
},
"246": {
"155": "168",
"93": "53"
},
"247": {
"155": "168",
"93": "54"
},
"248": {
"155": "169",
"93": "50"
},
"249": {
"155": "169",
"93": "53"
},
"250": {
"155": "169",
"93": "54"
},
"251": {
"155": "170",
"93": "50"
},
"252": {
"155": "170",
"93": "53"
},
"253": {
"155": "170",
"93": "54"
}
},
"salable": [],
"canDisplayShowOutOfStockStatus": false,
"channel": "website",
"salesChannelCode": "base",
"sku": {
"239": "MH13-XS-Blue",
"240": "MH13-XS-Green",
"241": "MH13-XS-Lavender",
"242": "MH13-S-Blue",
"243": "MH13-S-Green",
"244": "MH13-S-Lavender",
"245": "MH13-M-Blue",
"246": "MH13-M-Green",
"247": "MH13-M-Lavender",
"248": "MH13-L-Blue",
"249": "MH13-L-Green",
"250": "MH13-L-Lavender",
"251": "MH13-XL-Blue",
"252": "MH13-XL-Green",
"253": "MH13-XL-Lavender"
}
});
const swatchOptionsComponent = initSwatchOptions({
"155": {
"166": {
"type": "0",
"value": "XS",
"label": "XS"
},
"167": {
"type": "0",
"value": "S",
"label": "S"
},
"168": {
"type": "0",
"value": "M",
"label": "M"
},
"169": {
"type": "0",
"value": "L",
"label": "L"
},
"170": {
"type": "0",
"value": "XL",
"label": "XL"
},
"additional_data": "{\"swatch_input_type\":\"text\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
},
"93": {
"50": {
"type": "1",
"value": "#1857f7",
"label": "Blue"
},
"53": {
"type": "1",
"value": "#53a828",
"label": "Green"
},
"54": {
"type": "1",
"value": "#ce64d4",
"label": "Lavender"
},
"additional_data": "{\"swatch_input_type\":\"visual\",\"update_product_preview_image\":1,\"use_product_image_for_swatch\":0}"
}
});
return Object.assign(configurableOptionsComponent, swatchOptionsComponent, {
mediaCallback: "https\u003A\u002F\u002Faccelerator\u002Dtheme.gene.co.uk\u002Fswatches\u002Fajax\u002Fmedia\u002F",
changeOption(optionId, value, skipUpdateGallery) {
if (value === '') {
this.selectedValues = this.removeAttrFromSelection(this.selectedValues, optionId)
} else {
this.selectedValues[optionId] = value;
}
this.findSimpleIndex();
this.findAllowedAttributeOptions();
this.updatePrices();
!skipUpdateGallery && this.updateGallery();
window.dispatchEvent(new CustomEvent('listing-configurable-selection-changed', {
detail: {
productId: this.productId,
optionId,
value,
productIndex: this.productIndex,
selectedValues: this.selectedValues,
candidates: this.findProductIdsForPartialSelection(this.selectedValues),
}
}));
},
updateGallery() {
if (!this.productIndex) {
return;
}
fetch(`${this.mediaCallback}?product_id=${this.productIndex}&isAjax=true`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(response => {
return response.json()
}).then(data => {
if (data.errors) {
// non critical failure only console logged
console.warn(data.errors);
} else {
const image = data && data.medium;
image && window.dispatchEvent(new CustomEvent("update-gallery-254", {
detail: image
}));
}
}).catch(error => {
console.warn(error)
});
},
preselectQuerystringItems() {
// pre-select option like ?size=167
const urlQueryParams = new URLSearchParams(window.location.search.replace('?', ''));
Object.values(this.optionConfig.attributes).map(attribute => {
// Don't update images on load, since PLPs already set the main image to the selected options
const skipUpdateGallery = true;
urlQueryParams.get(attribute.code) && this.changeOption(attribute.id, urlQueryParams.get(attribute.code), skipUpdateGallery);
});
},
mouseDown: false,
startX: 0,
maxScroll: 0,
scrollLeft: null,
slider: null,
scrollEvents: {
['@mousedown'](e) {
this.slider = e.target.closest('.snap');
if (!this.slider) {
return;
}
this.maxScroll = this.slider.scrollWidth - this.slider.offsetWidth;
this.startX = e.pageX - this.slider.offsetLeft;
this.scrollLeft = this.slider.scrollLeft;
this.mouseDown = true;
},
['@mouseout.self']() {
this.mouseDown = false;
},
['@mouseup']() {
this.mouseDown = false;
},
['@mousemove'](e) {
e.preventDefault();
if (!this.mouseDown) {
return;
}
const x = e.pageX - this.slider.offsetLeft;
const scroll = x - this.startX;
const scrollLeft = this.scrollLeft - scroll;
if (scrollLeft > this.maxScroll) {
this.slider.scrollLeft = this.maxScroll;
return
}
this.slider.scrollLeft = this.scrollLeft - scroll;
},
['@onselectstart']() {
return false;
}
},
resizeEvent() {
Array.from(this.$root.querySelectorAll('.snap')).forEach(slider => {
slider.scrollLeft = 0;
})
}
});
}
</script>
<div x-data="initConfigurableSwatchOptions_254()" x-init="findAllowedAttributeOptions(); initShowSwatchesIntersect();" @private-content-loaded.window="onGetCartData($event.detail.data)" @resize.window="resizeEvent()" class="mb-2 relative">
<div>
<div class="swatch-attribute border-t last:border-b border-container
size">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-254-155" role="radiogroup" x-bind="scrollEvents" aria-label="Size">
<template x-for="(item, index) in optionConfig.attributes[155].options" :key="item.id">
<div x-id="['attribute-option-254-'+item.id]">
<template x-if="optionIsEnabled(155, item.id) && optionIsActive(155, item.id)">
<label :for="$id('attribute-option-254-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[155] === item.id),
'border-container-darker':
(selectedValues[155] !== item.id),
'w-6 h-6' : !isTextSwatch(155, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('155',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '155',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-254-'+item.id)" :value="item.id" name="super_attribute[155]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(155, $event.target.value)" x-on:click="clearOptionIfActive(155, item.id)" x-model="selectedValues[155]" :required="getAllowedAttributeOptions(155).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(155, item.id)" aria-describedby="attribute-label-254-155">
<template x-if="isTextSwatch(155, item.id)">
<div x-html="getSwatchText(155, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(155, item.id) && !optionIsActive(155, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(155, item.id),
}" :style="getSwatchBackgroundStyle('155',item.id)">
<div x-html="getSwatchText(155, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(155, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
<div class="swatch-attribute border-t last:border-b border-container
color">
<div class="w-full overflow-x-hidden swatch-attribute-options min-h-14">
<template x-if="showSwatches">
<div class="flex flex-nowrap w-full overflow-auto snap items-center py-1" id="attribute-label-254-93" role="radiogroup" x-bind="scrollEvents" aria-label="Color">
<template x-for="(item, index) in optionConfig.attributes[93].options" :key="item.id">
<div x-id="['attribute-option-254-'+item.id]">
<template x-if="optionIsEnabled(93, item.id) && optionIsActive(93, item.id)">
<label :for="$id('attribute-option-254-'+item.id)" class="swatch-option relative shadow-sm cursor-pointer select-none bg-container-lighter product-option-value-label" :class="{
'border-container-lighter ring ring-primary/50':
(selectedValues[93] === item.id),
'border-container-darker':
(selectedValues[93] !== item.id),
'w-6 h-6' : !isTextSwatch(93, item.id),
'border-container-lighter ring ring-primary/75' : focusedLabel === item.id
}" :style="getSwatchBackgroundStyle('93',item.id)" @mouseenter.self="activeTooltipItem = {
attribute: '93',
item: item.id,
index
}; tooltipPositionElement = $event.target;" @mouseleave.self="activeTooltipItem = false">
<input :id="$id('attribute-option-254-'+item.id)" :value="item.id" name="super_attribute[93]" type="radio" class="inline-block absolute p-0 border-0 focus:border-0 focus:ring-0 product-option-value-input" style="z-index:-1"
x-on:focus="focusLabel(item.id)" x-on:blur="blurLabel()" x-on:change="changeOption(93, $event.target.value)" x-on:click="clearOptionIfActive(93, item.id)" x-model="selectedValues[93]" :required="getAllowedAttributeOptions(93).filter(
attributeOption => selectedValues[attributeOption]
).length === 0" :aria-label="getSwatchText(93, item.id)" aria-describedby="attribute-label-254-93">
<template x-if="isTextSwatch(93, item.id)">
<div x-html="getSwatchText(93, item.id)" class="pointer-events-none select-none whitespace-nowrap" aria-hidden="true"></div>
</template>
</label>
</template>
<template x-if="optionIsEnabled(93, item.id) && !optionIsActive(93, item.id)">
<div class="relative border-2 shadow-sm opacity-50 cursor-pointer select-none border-container-darker swatch-option bg-container-lighter" :class="{
'w-6 h-6' : !isTextSwatch(93, item.id),
}" :style="getSwatchBackgroundStyle('93',item.id)">
<div x-html="getSwatchText(93, item.id)" class="whitespace-nowrap" :class="{ 'sr-only' : !isTextSwatch(93, item.id) }"></div>
<svg class="absolute inset-0 w-full h-full text-gray-500 bg-white/25">
<line x1="0" y1="100%" x2="100%" y2="0" class="stroke-current stroke-1"></line>
</svg>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
<template x-if="isTooltipVisible()">
<div class="absolute pointer-events-none select-none" :style="getTooltipPosition()">
<div class="shadow-lg">
<div class="absolute top-0 left-0 z-10 min-w-20 p-2 -mt-6 text-sm leading-tight text-black
transform -translate-x-1/2 -translate-y-full bg-white rounded-lg shadow-lg text-center" :class="{'-translate-x-5' : isFirstItemCol()}">
<template x-if="isVisualSwatch(activeTooltipItem.attribute, activeTooltipItem.item)">
<div class="inline-block border shadow-sm border-container" :style="getTooltipImageStyle(activeTooltipItem.attribute, activeTooltipItem.item)"></div>
</template>
<span class="mx-2 text-lg font-semibold whitespace-nowrap subtitle" x-html="getTooltipLabel()"></span>
</div>
<svg class="absolute z-10 w-8 h-8 text-white transform -translate-x-1/5
-translate-y-8 fill-current stroke-current" width="12" height="12">
<rect x="12" y="-12" width="12" height="12" transform="rotate(45)" class="shadow-xl"></rect>
</svg>
</div>
</div>
</template>
</div>
<script>
function initPriceBox__65a2b6f5c3435() {
return {
updatePrice(priceData) {
const regularPriceLabel = this.$root.querySelector('.normal-price .price-label');
const regularPriceElement = this.$root.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price');
const basePriceElement = this.$root.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price');
if (priceData.finalPrice.amount < priceData.oldPrice.amount) {
regularPriceLabel.classList.add('hidden');
} else {
regularPriceLabel.classList.remove('hidden');
}
regularPriceElement && (regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount));
basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount));
}
}
}
</script>
<div class="pt-1 text-gray-900" x-data="initPriceBox__65a2b6f5c3435()" @update-prices-254.window="updatePrice($event.detail);">
<div class="price-box price-final_price" data-role="priceBox" data-product-id="254" data-price-box="product-id-254"><span class="normal-price">
<span x-data="" x-id="['product\u002Dprice\u002D254']" class="price-container price-final_price tax weee">
<span class="price-label">As low as</span>
<span :id="$id('product\u002Dprice\u002D254')" data-price-amount="74" data-price-type="finalPrice" class="price-wrapper " id="product-price-254-1"><span class="price">£74.00</span></span>
</span>
</span>
</div>
</div>
<div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
<button class="w-auto btn btn-primary justify-center text-sm
mr-auto" aria-label="Add to Cart Marco Lightweight Active Hoodie">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="h-6 w-6 border-current inline" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"></path>
</svg>
<span class="ml-2 inline md:ml-0 md:hidden lg:ml-2 lg:inline"> Add to Cart </span>
</button>
<button x-data="initWishlist()" @click.prevent="addToWishlist(254)" aria-label="Add to Wish List Marco Lightweight Active Hoodie" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-red-600 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.171a4 4 0 1 1 5.656 5.656L10 17.657l-6.828-6.829a4 4 0 0 1 0-5.656Z" clip-rule="evenodd"></path>
</svg>
</button>
<button x-data="initCompareOnProductList()" @click.prevent="addToCompare(254)" aria-label="Add to Compare Marco Lightweight Active Hoodie" type="button"
class="rounded-full w-9 h-9 bg-gray-200 p-0 border-0 inline-flex shrink-0 items-center justify-center text-gray-500 hover:text-yellow-500 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5" width="25" height="25" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5.002 5.002 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5.002 5.002 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
</svg>
</button>
</div>
</div>
</form>POST https://accelerator-theme.gene.co.uk/newsletter/subscriber/new/
<form class="form subscribe" action="https://accelerator-theme.gene.co.uk/newsletter/subscriber/new/" method="post" x-data="initNewsletterForm()" @submit.prevent="submitForm()" id="newsletter-validate-detail" aria-label="Subscribe to Newsletter">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font" id="footer-newsletter-heading"> Newsletter </h2>
<div class="flex flex-wrap justify-center gap-2 md:justify-start">
<label for="newsletter-subscribe" class="sr-only"> Email Address </label>
<input name="email" type="email" required="" id="newsletter-subscribe" class="form-input inline-flex w-full" placeholder="Enter your email address" aria-describedby="footer-newsletter-heading">
<input name="form_key" type="hidden" value="WfuSJSpU3TmSPXUQ"> <button class="inline-flex shrink-0 ml-auto xl:mt-0 btn btn-primary"> Subscribe </button>
</div>
<div>
<template x-if="displayErrorMessage">
<p class="flex items-center text-red">
<span class="inline-block w-8 h-8 mr-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24" role="img">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
<title>exclamation-circle</title>
</svg>
</span>
<template x-for="errorMessage in errorMessages">
<span x-html="errorMessage"></span>
</template>
</p>
</template>
</div>
</form>Text Content
Skip to Content
Sign In Create an Account
Toggle minicart, Cart is empty shopping-cart 0
Search
Search
My Cart 10 of 0 products in cart displayed
Cart is empty
Cart is empty
x
Subtotal:
Checkout or View and Edit Cart
loader
Loading...
x
Checkout using your account
Email Address
Password
Sign In Forgot Your Password?
Checkout as a new customer
Creating an account has many benefits:
* See order and shipping status
* Track order history
* Check out faster
Create an Account
* What's New
* Women
* Women
* View All
* Tops
* Bottoms
* Men
* Men
* View All
* Tops
* Bottoms
* Gear
* Gear
* View All
* Bags
* Fitness Equipment
* Watches
* Training
* Training
* View All
* Video Download
* Sale
* Gift Cards
* What's New
* Women Show submenu for Women category
* Tops
* Bottoms
* Men Show submenu for Men category
* Tops
* Bottoms
* Gear Show submenu for Gear category
* Bags
* Fitness Equipment
* Watches
* Training Show submenu for Training category
* Video Download
* Sale
* Gift Cards
HYVÄ THEMES
ECOMMERCE MADE HAPPY.
Visit hyva.io chevron-double-right
THIS IS THE DEFAULT HYVÄ THEME.
We've rebuilt the standard Magento 2 frontend with a new technology stack. It
combines the best parts of Magento frontend development with modern tools that
developers love, like AlpineJS and TailwindCSS.
It's high-performant out of the box and reduces the development time of custom
Magento frontends. It will make you and your customers happy.
Buy it or Visit Hyvä
WATCHES
Navigating through the elements of the carousel is possible using the tab key.
You can skip the carousel or go straight to carousel navigation using the skip
links. Press to skip carousel Press to go to carousel navigation
Aim Analog Watch
£45.00
Add to Cart
Endurance Watch
£49.00
Add to Cart
Summit Watch
£54.00
Add to Cart
Cruise Dual Analog Watch
£55.00
Add to Cart
Dash Digital Watch
£92.00
Add to Cart
Luma Analog Watch
£43.00
Add to Cart
Bolo Sport Watch
£49.00
Add to Cart
Clamber Watch
£54.00
Add to Cart
POPULAR PRODUCTS
Navigating through the elements of the carousel is possible using the tab key.
You can skip the carousel or go straight to carousel navigation using the skip
links. Press to skip carousel Press to go to carousel navigation
Lando Gym Jacket
As low as £99.00
Add to Cart
Didi Sport Watch
£92.00
Add to Cart
Dash Digital Watch
£92.00
Add to Cart
Ingrid Running Jacket
As low as £84.00
Add to Cart
Olivia 1/4 Zip Light Jacket
As low as £77.00
Add to Cart
Juno Jacket
As low as £77.00
Add to Cart
Stellar Solar Jacket
As low as £75.00
Add to Cart
Marco Lightweight Active Hoodie
As low as £74.00
Add to Cart
COMPANY
* About
* My Account
* Orders and Returns
* Search Terms
* Contact
LEGAL
* Privacy
* Terms and Conditions
NEWSLETTER
Email Address Subscribe
exclamation-circle
© 2020 Hyva Themes B.V. — @hyva_io