https://cdn.cafe24.com/web-components/cafe24-web-components.js
/* Product card style */
.product-layout {
display: flex;
justify-content: center;
}
.product-card {
width: 100%;
max-width: 46rem;
min-width: 320px;
background-color: #fff;
border-radius: 0.75rem;
overflow: auto;
}
.product-card__container {
display: flex;
flex-direction: column;
padding: 1.1rem;
gap: 1.5rem;
box-sizing: border-box;
}
@media (min-width: 768px) {
.product-card__container {
flex-direction: row;
}
}
.product-card__media {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.product-card__main-image img {
border-radius: 0.3rem;
width: 100%;
max-width: 420px;
}
.product-card__details {
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;
}
.product-card__info {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.product-card__title {
font-size: 1.2rem;
font-weight: 700;
margin: 0;
color: #111;
word-break: break-word;
}
.product-card__price {
display: flex;
gap: 0.5rem;
font-weight: 500;
font-size: 1rem;
}
.product-card__compare-price {
text-decoration: line-through;
opacity: 0.5;
}
.product-card__buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.product-card__buttons button {
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
transition: background-color 0.2s, color 0.2s;
border: 2px solid #000;
}
.product-card__add-button {
background-color: #000;
color: #fff;
border-radius: 0.75rem;
padding: 1rem;
font-size: 1rem;
width: 100%;
}
.product-card__add-button:hover:not(:disabled) {
background: #fff;
color: #000;
}
.product-card__add-button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.product-card__buy-button {
background-color: #fff;
color: #000;
border-radius: 0.75rem;
padding: 1rem;
font-size: 1rem;
width: 100%;
}
.product-card__buy-button:hover:not(:disabled) {
background: #f5f5f5;
}
.product-card__buy-button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* Thumbnail images */
.product-card__images {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
width: 320px;
margin-top: 8px;
}
.product-card__image-small {
cursor: pointer;
transition: opacity 0.2s ease;
}
.product-card__image-small img {
border: 1px solid transparent;
width: 100px;
height: 100px;
border-radius: 4px;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.product-card__image-small img:hover {
opacity: 1;
}
.product-card__image-small.selected img {
opacity: 1;
border: 1px solid #ccc;
}
/* Placeholder styles */
.placeholder.contents {
display: contents;
}
.skeleton-box {
box-sizing: border-box;
display: block;
position: relative;
background-color: #e5e5e5;
border-radius: 4px;
overflow: hidden;
}
.skeleton-box::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.3) 20%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0)
);
animation: shimmer 1.5s infinite;
content: ”;
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
/** Thumbnail Image Selector **/
function waitForElement(selector, callback) {
const observer = new MutationObserver((mutations, observer) => {
if (document.querySelector(selector)) {
observer.disconnect();
callback(document.querySelector(selector));
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
// 첫 번째 썸네일 기본 선택
waitForElement(‘.product-card__image-small img’, () => {
const images = document.querySelectorAll(‘.product-card__image-small img’);
if (images.length) {
images[0].parentElement.classList.add(‘selected’);
}
});
function selectThumbnail(event) {
const clickedMedia = event.target.closest(‘.product-card__image-small’);
if (!clickedMedia) return;
const clickedImg = clickedMedia.querySelector(‘img’);
if (!clickedImg) return;
const mainImage = document.querySelector(‘.product-card__main-image img’);
if (mainImage) {
mainImage.src = clickedImg.src;
}
const thumbnails = document.querySelectorAll(‘.product-card__image-small’);
thumbnails.forEach(thumb => thumb.classList.remove(‘selected’));
clickedMedia.classList.add(‘selected’);
}
댓글 남기기