Update index.js
This commit is contained in:
147
index.js
147
index.js
@@ -1,106 +1,95 @@
|
||||
class IdmBasketHotspot {
|
||||
|
||||
constructor({ selector, products }) {
|
||||
const container = document.querySelector(selector);
|
||||
class IdmQuantityPicker{
|
||||
constructor({selector , min, max, ref}) {
|
||||
const container = selector ? document.querySelector(selector) : ref;
|
||||
if(!container){
|
||||
console.error("IdmBasketHotspotConstructor: container not found.")
|
||||
console.error("IdmQuantityPicker: container not found.");
|
||||
return;
|
||||
}
|
||||
if(!products){
|
||||
console.error("IdmBasketHotspotConstructor: no products")
|
||||
this.container=container;
|
||||
const input = this.container.querySelector(".idm-quantity-picker__input");
|
||||
if(!input){
|
||||
console.error("IdmQuantityPicker: input not found");
|
||||
return;
|
||||
}
|
||||
this.input = input;
|
||||
|
||||
if(typeof min === "undefined"){
|
||||
min = this.input.min;
|
||||
}else{
|
||||
this.input.min=min;
|
||||
}
|
||||
|
||||
if(typeof max === "undefined"){
|
||||
max = this.input.max;
|
||||
}else{
|
||||
this.input.max=max;
|
||||
}
|
||||
|
||||
const minusButton = this.container.querySelector(".idm-quantity-picker__button-minus");
|
||||
const plusButton = this.container.querySelector(".idm-quantity-picker__button-plus");
|
||||
if(!minusButton){
|
||||
console.error("IdmQuantityPicker: minus button not found.");
|
||||
return;
|
||||
}
|
||||
if(!plusButton){
|
||||
console.error("IdmQuantityPicker: plus button not found.");
|
||||
return;
|
||||
}
|
||||
|
||||
this.container = container;
|
||||
this.products = [...products];
|
||||
this.minusButton = minusButton;
|
||||
this.plusButton = plusButton;
|
||||
this.min = min;
|
||||
this.max = max;
|
||||
this._value = Number.parseInt(input.value);
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
updateButtons() {
|
||||
if (!this.minusButton || !this.plusButton) return;
|
||||
|
||||
getCard(){
|
||||
return ` <div class="idm-basket-hotspot-card">
|
||||
<div class="idm-basket-hotspot-card__header">
|
||||
<div class="idm-basket-hostpost-card__photo-wrapper">
|
||||
<img class="idm-basket-hotspot-card__photo" src="https://zooart6.yourtechnicaldomain.com/hpeciai/3c7458124cd2eeb2f579ee61b3bc0232/pol_pm_Plyta-winylowa-Smooth-Criminal-200665_2.jpg" alt="NAZWA PRODUKTU"/>
|
||||
</div>
|
||||
this.minusButton.classList.toggle("idm-quantity-picker__button--disabled", this._value <= this.min);
|
||||
this.plusButton.classList.toggle("idm-quantity-picker__button--disabled", this._value >= this.max);
|
||||
|
||||
<div class="idm-basket-hotspot-card__info">
|
||||
<h4 class="idm-basket-hotspot-card__title">ROYAL CANIN Mini Adult 2x8kg karma sucha dla psów dorosłych, ras małych</h4>
|
||||
<div class="idm-basket-hotspot-card__prices">
|
||||
<div class="idm-basket-hotspot-card__price-group">
|
||||
<span class="idm-basket-hotspot-card__new-price">35,66 zł / szt.</span><span class="idm-basket-hotspot-card__old-price">52,34 zł</span>
|
||||
</div>
|
||||
<div class="idm-basket-hotspot-card__omnibus">44,34 zł - Najniższa cena z ostatnich 30 dni przed obniżką</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="idm-basket-hotspot-card__form">
|
||||
<input id="projector_product_hidden" type="hidden" name="product" value="3814" />
|
||||
<input id="projector_size_hidden" type="hidden" name="size" autocomplete="off" value="uniw" />
|
||||
<div class="idm-quantity-picker">
|
||||
<button type="button" class="idm-quantity-picker__button idm-quantity-picker__button-minus">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M6 13C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H6Z" fill="#4C4C4F"/>
|
||||
</svg>
|
||||
</button>
|
||||
<input type="number" min="1" max="5" class="idm-quantity-picker__input" value="1" name="quantity" readonly="true" />
|
||||
<button type="button" class="idm-quantity-picker__button idm-quantity-picker__button-plus">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M11 13V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V13H16C16.2833 13 16.5208 12.9042 16.7125 12.7125C16.9042 12.5208 17 12.2833 17 12C17 11.7167 16.9042 11.4792 16.7125 11.2875C16.5208 11.0958 16.2833 11 16 11H13V8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8V11H8C7.71667 11 7.47917 11.0958 7.2875 11.2875C7.09583 11.4792 7 11.7167 7 12C7 12.2833 7.09583 12.5208 7.2875 12.7125C7.47917 12.9042 7.71667 13 8 13H11ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="#32B37C"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="idm-basket-hotspot-card__submit">DO KOSZYKA
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3042_4835)">
|
||||
<path d="M3.9375 8.66447C3.465 8.66447 3.06563 8.5023 2.73938 8.17796C2.41312 7.85362 2.25 7.45658 2.25 6.98684C2.25 6.51711 2.41312 6.12007 2.73938 5.79572C3.06563 5.47138 3.465 5.30921 3.9375 5.30921C4.41 5.30921 4.80938 5.47138 5.13563 5.79572C5.46188 6.12007 5.625 6.51711 5.625 6.98684C5.625 7.45658 5.46188 7.85362 5.13563 8.17796C4.80938 8.5023 4.41 8.66447 3.9375 8.66447ZM6.975 5.98026C6.5025 5.98026 6.10313 5.81809 5.77688 5.49375C5.45063 5.16941 5.2875 4.77237 5.2875 4.30263C5.2875 3.83289 5.45063 3.43586 5.77688 3.11151C6.10313 2.78717 6.5025 2.625 6.975 2.625C7.4475 2.625 7.84688 2.78717 8.17313 3.11151C8.49938 3.43586 8.6625 3.83289 8.6625 4.30263C8.6625 4.77237 8.49938 5.16941 8.17313 5.49375C7.84688 5.81809 7.4475 5.98026 6.975 5.98026ZM11.025 5.98026C10.5525 5.98026 10.1531 5.81809 9.82688 5.49375C9.50063 5.16941 9.3375 4.77237 9.3375 4.30263C9.3375 3.83289 9.50063 3.43586 9.82688 3.11151C10.1531 2.78717 10.5525 2.625 11.025 2.625C11.4975 2.625 11.8969 2.78717 12.2231 3.11151C12.5494 3.43586 12.7125 3.83289 12.7125 4.30263C12.7125 4.77237 12.5494 5.16941 12.2231 5.49375C11.8969 5.81809 11.4975 5.98026 11.025 5.98026ZM14.0625 8.66447C13.59 8.66447 13.1906 8.5023 12.8644 8.17796C12.5381 7.85362 12.375 7.45658 12.375 6.98684C12.375 6.51711 12.5381 6.12007 12.8644 5.79572C13.1906 5.47138 13.59 5.30921 14.0625 5.30921C14.535 5.30921 14.9344 5.47138 15.2606 5.79572C15.5869 6.12007 15.75 6.51711 15.75 6.98684C15.75 7.45658 15.5869 7.85362 15.2606 8.17796C14.9344 8.5023 14.535 8.66447 14.0625 8.66447ZM5.38875 15.375C4.8825 15.375 4.45781 15.1821 4.11469 14.7962C3.77156 14.4104 3.6 13.9546 3.6 13.4289C3.6 12.8474 3.79969 12.3385 4.19906 11.9023C4.59844 11.4661 4.995 11.0355 5.38875 10.6105C5.715 10.2638 5.99625 9.88635 6.2325 9.47813C6.46875 9.0699 6.75 8.68684 7.07625 8.32895C7.32375 8.03816 7.61063 7.7977 7.93688 7.60757C8.26313 7.41743 8.6175 7.32237 9 7.32237C9.3825 7.32237 9.73688 7.41184 10.0631 7.59079C10.3894 7.76974 10.6763 8.00461 10.9237 8.29539C11.2388 8.65329 11.5172 9.03914 11.7591 9.45296C12.0009 9.86678 12.285 10.2526 12.6113 10.6105C13.005 11.0355 13.4016 11.4661 13.8009 11.9023C14.2003 12.3385 14.4 12.8474 14.4 13.4289C14.4 13.9546 14.2284 14.4104 13.8853 14.7962C13.5422 15.1821 13.1175 15.375 12.6113 15.375C12.0038 15.375 11.4019 15.3247 10.8056 15.224C10.2094 15.1234 9.6075 15.073 9 15.073C8.3925 15.073 7.79063 15.1234 7.19438 15.224C6.59812 15.3247 5.99625 15.375 5.38875 15.375Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3042_4835">
|
||||
<rect width="18" height="18" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>`;
|
||||
this.minusButton.disabled = this._value <= this.min;
|
||||
this.plusButton.disabled = this._value >= this.max;
|
||||
}
|
||||
|
||||
|
||||
getContent(){
|
||||
return `
|
||||
<div class="idm-basket-hotspot__header">
|
||||
<strong class="idm-basket-hotspot__label">do -50% TANIEJ</strong>
|
||||
<div class="idm-basket-hotspot__text">
|
||||
<h3 class="idm-basket-hotspot__title">Skorzystaj z oferty promocyjnej</h3>
|
||||
<p class="idm-basket-hotspot__description">Kup produkt do 50% taniej.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="idm-basket-hotspot__content">
|
||||
${this.products.map(product => this.getCard(product)).join("")}
|
||||
</div>
|
||||
`
|
||||
updateInput(){
|
||||
this.input.value = this._value;
|
||||
this.updateButtons();
|
||||
}
|
||||
|
||||
// unused
|
||||
get value() {
|
||||
return this._value;
|
||||
}
|
||||
|
||||
set value(newValue) {
|
||||
if (newValue < this.min || newValue > this.max)return;
|
||||
|
||||
this._value = newValue;
|
||||
this.updateInput();
|
||||
}
|
||||
|
||||
handlePlus(){
|
||||
this.value++;
|
||||
|
||||
}
|
||||
|
||||
render(){
|
||||
this.container.innerHTML = this.getContent();
|
||||
handleMinus(){
|
||||
this.value--;
|
||||
}
|
||||
|
||||
initEvents(){
|
||||
const quantityPickers = this.container.querySelectorAll(".idm-quantity-picker");
|
||||
quantityPickers.forEach(picker => new IdmQuantityPicker({ref:picker}));
|
||||
this.minusButton.addEventListener("click", () => this.handleMinus());
|
||||
this.plusButton.addEventListener("click", () => this.handlePlus());
|
||||
}
|
||||
|
||||
|
||||
init(){
|
||||
console.log("IdmBasketHotspot: init.");
|
||||
this.render();
|
||||
console.log("IdmQuantityPicker: init.");
|
||||
this.initEvents();
|
||||
this.updateButtons();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user