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 buildOptions = (el, product) => {
const { variants } = product; const { variants } = product;
const $options = El( const $select = El("shop-product-variants select is-success");
"shop-product-variants buttons has-addons are-small variants", const $options = El("shop-product-select", "select");
);
$options.className += variants.length > 1 ? " multiple" : " single";
if (variants.length > 1) { if (variants.length > 1) {
variants.forEach((variant) => { variants.forEach((variant) => {
const { id, title } = variant; const { id, title } = variant;
const $option = El("button", "button"); const $option = El("", "option");
$option.dataset.id = id; $option.dataset.id = id;
$option.innerText = title; $option.innerText = title;
$option.addEventListener("click", (event) => { // $option.addEventListener("click", (event) => {
event.preventDefault(); // event.preventDefault();
product.selectedVariant = id; // product.selectedVariant = id;
update(); // update();
}); // });
$options.appendChild($option); $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)}`, `.shop-product-${getId(product.id)}`,
); );
$blocs.forEach(($bloc) => { // $blocs.forEach(($bloc) => {
const $variants = $bloc.querySelectorAll(`.variants .button`); // const $variants = $bloc.querySelectorAll(`.variants .button`);
$variants.forEach(($el) => { // $variants.forEach(($el) => {
if ($el.dataset.id === product.selectedVariant) { // if ($el.dataset.id === product.selectedVariant) {
$el.classList.add(`is-${THEME_COLOR}`); // $el.classList.add(`is-${THEME_COLOR}`);
} else { // } else {
$el.classList.remove(`is-${THEME_COLOR}`); // $el.classList.remove(`is-${THEME_COLOR}`);
} // }
}); // });
}); // });
}); });
}; };

4
docs/shop.html
View File

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