library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add shop select

Browse Source
This commit is contained in:
Jeremy Thomas 2024-06-11 01:30:26 +01:00
parent 83fcfdcf5e
commit 1a6164b836
2 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
docs/assets/javascript/shop.js
View File

@ -452,29 +452,34 @@ document.addEventListener("DOMContentLoaded", () => {
const buildOptions = (el, product) => {
const { variants } = product;
const $options = El(
"shop-product-variants buttons has-addons are-small variants",
);
$options.className += variants.length > 1 ? " multiple" : " single";
const $select = El("shop-product-variants select is-success");
const $options = El("shop-product-select", "select");
if (variants.length > 1) {
variants.forEach((variant) => {
const { id, title } = variant;
const $option = El("button", "button");
const $option = El("", "option");
$option.dataset.id = id;
$option.innerText = title;
$option.addEventListener("click", (event) => {
event.preventDefault();
product.selectedVariant = id;
update();
});
// $option.addEventListener("click", (event) => {
// event.preventDefault();
// product.selectedVariant = id;
// update();
// });
$options.appendChild($option);
});
el.appendChild($options);
$select.addEventListener("change", (event) => {
event.preventDefault();
product.selectedVariant = id;
update();
});
$select.appendChild($options);
el.appendChild($select);
}
};
@ -715,17 +720,17 @@ document.addEventListener("DOMContentLoaded", () => {
`.shop-product-${getId(product.id)}`,
);
$blocs.forEach(($bloc) => {
const $variants = $bloc.querySelectorAll(`.variants .button`);
// $blocs.forEach(($bloc) => {
// const $variants = $bloc.querySelectorAll(`.variants .button`);
$variants.forEach(($el) => {
if ($el.dataset.id === product.selectedVariant) {
$el.classList.add(`is-${THEME_COLOR}`);
} else {
$el.classList.remove(`is-${THEME_COLOR}`);
}
});
});
// $variants.forEach(($el) => {
// if ($el.dataset.id === product.selectedVariant) {
// $el.classList.add(`is-${THEME_COLOR}`);
// } else {
// $el.classList.remove(`is-${THEME_COLOR}`);
// }
// });
// });
});
};

4
docs/shop.html
View File

@ -225,6 +225,10 @@ breadcrumb:
margin-top: 1em;
}
.shop-product-select {
width: 100%;
}
.shop-product-description {
display: flex;
flex-grow: 1;