Rozbudowa RWD
This commit is contained in:
178
IdoSellAddOn/script.js
Normal file
178
IdoSellAddOn/script.js
Normal file
@@ -0,0 +1,178 @@
|
||||
function idmObserveEachOnce(elements, callback, options = {}) {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries, obs) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!entry.isIntersecting) return;
|
||||
|
||||
callback(entry);
|
||||
obs.unobserve(entry.target);
|
||||
});
|
||||
},
|
||||
{
|
||||
threshold: 0.1,
|
||||
...options,
|
||||
}
|
||||
);
|
||||
|
||||
elements.forEach((el) => observer.observe(el));
|
||||
return observer;
|
||||
}
|
||||
|
||||
idmObserveEachOnce(
|
||||
document.querySelectorAll(".idm_picture__module"),
|
||||
(entry) => {
|
||||
idmPictureModuleProducts(entry.target);
|
||||
}
|
||||
);
|
||||
|
||||
function idmGetSingleProdGraphQL(prodId) {
|
||||
const IDM_PRICE_QUERY = (priceType) => `price {
|
||||
rebateCodeActive
|
||||
price {
|
||||
${priceType} {
|
||||
value
|
||||
formatted
|
||||
}
|
||||
}
|
||||
omnibusPrice {
|
||||
${priceType} {
|
||||
value
|
||||
formatted
|
||||
}
|
||||
}
|
||||
omnibusPriceDetails {
|
||||
unit {
|
||||
${priceType} {
|
||||
value
|
||||
formatted
|
||||
}
|
||||
}
|
||||
youSavePercent
|
||||
omnibusPriceIsHigherThanSellingPrice
|
||||
newPriceEffectiveUntil {
|
||||
formatted
|
||||
}
|
||||
}
|
||||
max {
|
||||
${priceType} {
|
||||
value
|
||||
formatted
|
||||
}
|
||||
}
|
||||
unit {
|
||||
${priceType} {
|
||||
value
|
||||
formatted
|
||||
}
|
||||
}
|
||||
unitConvertedPrice {
|
||||
${priceType} {
|
||||
value
|
||||
formatted
|
||||
}
|
||||
}
|
||||
youSavePercent
|
||||
beforeRebate {
|
||||
${priceType} {
|
||||
value
|
||||
formatted
|
||||
}
|
||||
}
|
||||
beforeRebateDetails {
|
||||
youSavePercent
|
||||
unit {
|
||||
${priceType} {
|
||||
value
|
||||
formatted
|
||||
}
|
||||
}
|
||||
}
|
||||
advancePrice {
|
||||
${priceType} {
|
||||
value
|
||||
formatted
|
||||
}
|
||||
}
|
||||
suggested {
|
||||
${priceType} {
|
||||
value
|
||||
formatted
|
||||
}
|
||||
}
|
||||
rebateNumber {
|
||||
number
|
||||
${priceType} {
|
||||
value
|
||||
formatted
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
return `
|
||||
prod${prodId}: product(productId: ${prodId}) {
|
||||
product {
|
||||
id
|
||||
name
|
||||
link
|
||||
${IDM_PRICE_QUERY(app_shop.vars.priceType)}
|
||||
}
|
||||
}`;
|
||||
}
|
||||
async function idmPictureModuleProducts(containerEL) {
|
||||
try {
|
||||
const allProdEl = containerEL.querySelectorAll(".product_info[data-id]");
|
||||
const productsId = [];
|
||||
allProdEl.forEach((prodEl) => {
|
||||
if (prodEl.dataset?.id) productsId.push(prodEl.dataset?.id);
|
||||
});
|
||||
|
||||
const res = await fetch("/graphql/v1/", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: `{${productsId.reduce(
|
||||
(acc, val, index) => acc + `${idmGetSingleProdGraphQL(val)}`,
|
||||
""
|
||||
)}}`,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
const products = Object.values(data?.data)?.map((prod) => prod.product);
|
||||
|
||||
allProdEl.forEach((prodEl) => {
|
||||
const prodData = products.find((p) => p.id === +prodEl.dataset.id);
|
||||
if (!prodData) return;
|
||||
|
||||
prodEl.classList.add("--mod-init");
|
||||
prodEl.innerHTML = `
|
||||
<a class="product_name" href="${prodData.link}">${prodData.name}</a>
|
||||
<span class="product_price">${
|
||||
prodData.price?.price?.[app_shop.vars.priceType]?.formatted
|
||||
}</span>
|
||||
`;
|
||||
});
|
||||
|
||||
containerEL.querySelectorAll(".product_info:not(.--mod-init)");
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", (e) => {
|
||||
if (app_shop.vars.view === 3 || app_shop.vars.view === 4) return;
|
||||
const prodContainerEl = e.target.closest(".idm_picture__product");
|
||||
if (!prodContainerEl) return;
|
||||
if (prodContainerEl.classList.contains("--show"))
|
||||
return prodContainerEl.classList.remove("--show");
|
||||
|
||||
const moduleContainer = prodContainerEl.closest(".idm_picture__module");
|
||||
if (!moduleContainer) return;
|
||||
|
||||
moduleContainer
|
||||
.querySelectorAll(".idm_picture__product.--show")
|
||||
.forEach((prodConEl) => prodConEl.classList.remove("--show"));
|
||||
prodContainerEl.classList.add("--show");
|
||||
});
|
||||
208
IdoSellAddOn/style.html
Normal file
208
IdoSellAddOn/style.html
Normal file
@@ -0,0 +1,208 @@
|
||||
<style>
|
||||
.idm_picture__module{
|
||||
--photo-prod-box-bg: #fff;
|
||||
--photo-prod-box-text: #111;
|
||||
--photo-prod-point-shadow: rgba(255,255,255,.5);
|
||||
|
||||
--photo-prod-box-pad-top: 1rem;
|
||||
--photo-prod-box-pad-left: 2rem;
|
||||
|
||||
--photo-prod-box-width: 30rem;
|
||||
--photo-prod-point-size: 24px;
|
||||
|
||||
--photo-prod-box-radius-br: 0px 20px 20px 20px;
|
||||
--photo-prod-box-radius-bl: 20px 0px 20px 20px;
|
||||
--photo-prod-box-radius-tl: 20px 20px 0px 20px;
|
||||
--photo-prod-box-radius-tr: 20px 20px 20px 0px;
|
||||
|
||||
|
||||
--photo-prod-point-desktop-top: 0%;
|
||||
--photo-prod-point-desktop-left: 0%;
|
||||
--photo-prod-point-tablet-top: 0%;
|
||||
--photo-prod-point-tablet-left: 0%;
|
||||
--photo-prod-point-mobile-top: 0%;
|
||||
--photo-prod-point-mobile-left: 0%;
|
||||
|
||||
|
||||
--photo-box-offset: 1rem;
|
||||
}
|
||||
|
||||
.idm_picture__module{
|
||||
position: relative;
|
||||
}
|
||||
.idm_picture__product{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
.idm_picture__img{
|
||||
width: 100%;
|
||||
}
|
||||
.idm_picture__overlay{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
/* =========================
|
||||
PRODUCT POINT ( + )
|
||||
========================= */
|
||||
|
||||
.idm_picture__product_point{
|
||||
position: relative;
|
||||
width: var(--photo-prod-point-size);
|
||||
height: var(--photo-prod-point-size);
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--photo-prod-box-bg);
|
||||
color: var(--photo-prod-box-text);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Pulsating halo */
|
||||
.idm_picture__product_point::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--photo-prod-point-shadow);
|
||||
|
||||
animation: idmPulse 1.5s ease-in-out infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Optional: stop pulse on hover */
|
||||
.idm_picture__product:hover .idm_picture__product_point:before{
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Focus accessibility */
|
||||
.idm_picture__product_point:focus-visible{
|
||||
outline: 2px solid #000;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
PULSE ANIMATION
|
||||
========================= */
|
||||
@keyframes idmPulse{
|
||||
0%{
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0px 0px var(--photo-prod-point-shadow);
|
||||
}
|
||||
70%{
|
||||
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100%{
|
||||
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.product_info{
|
||||
background: var(--photo-prod-box-bg);
|
||||
/* display: flex; */
|
||||
flex-direction: column;
|
||||
padding: var(--photo-prod-box-pad-top) var(--photo-prod-box-pad-left);
|
||||
gap: 0.5rem;
|
||||
display: none;
|
||||
max-width: var(--photo-prod-box-width);
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
|
||||
box-shadow: 0px 0px 10px 1px #000;
|
||||
}
|
||||
.product_info::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
|
||||
height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.product_info{
|
||||
bottom: var(--photo-prod-box-dir-t, auto);
|
||||
top: var(--photo-prod-box-dir-b, auto);
|
||||
right: var(--photo-prod-box-dir-l, auto);
|
||||
left: var(--photo-prod-box-dir-r, auto);
|
||||
|
||||
border-radius: var(--photo-prod-box-radius);
|
||||
}
|
||||
.product_info::before{
|
||||
top: var(--photo-prod-box-dir-t-before, auto);
|
||||
bottom: var(--photo-prod-box-dir-b-before, auto);
|
||||
right: var(--photo-prod-box-dir-r-before, auto);
|
||||
left: var(--photo-prod-box-dir-l-before, auto);
|
||||
}
|
||||
|
||||
.idm_picture__product .product_info .product_name{
|
||||
font-size: 1.6rem;
|
||||
color: var(--photo-prod-box-text);
|
||||
}
|
||||
.idm_picture__product .product_info .product_name:hover{
|
||||
color: var(--primary-color, #000)!important;
|
||||
}
|
||||
|
||||
.idm_picture__product .product_info .product_price{
|
||||
font-size: 1.6rem;
|
||||
color: var(--photo-prod-box-text);
|
||||
}
|
||||
|
||||
@media(min-width: 979px){
|
||||
.idm_picture__product:hover .product_info{
|
||||
display: flex;
|
||||
animation: idmShowUp 0.3s ease-in-out;
|
||||
/* opacity: 1; */
|
||||
}
|
||||
}
|
||||
@media(max-width: 978px){
|
||||
.idm_picture__product.--show .product_info{
|
||||
display: flex;
|
||||
animation: idmShowUp 0.3s ease-in-out;
|
||||
/* opacity: 1; */
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes idmShowUp{
|
||||
from{
|
||||
opacity: 0;
|
||||
}
|
||||
to{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.idm_picture__product{
|
||||
top: var(--photo-prod-point-mobile-top);
|
||||
left: var(--photo-prod-point-mobile-left);
|
||||
display: var(--photo-prod-point-mobile-display, block);
|
||||
}
|
||||
@media(min-width: 757px){
|
||||
.idm_picture__product{
|
||||
top: var(--photo-prod-point-tablet-top);
|
||||
left: var(--photo-prod-point-tablet-left);
|
||||
display: var(--photo-prod-point-tablet-display, block);
|
||||
}
|
||||
}
|
||||
@media(min-width: 979px){
|
||||
.idm_picture__product{
|
||||
top: var(--photo-prod-point-desktop-top);
|
||||
left: var(--photo-prod-point-desktop-left);
|
||||
display: var(--photo-prod-point-desktop-display, block);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user