Skip to content

Commit

Permalink
TECH-779 reworked table alignment
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmegalo
cmegalo committed Oct 30, 2024
1 parent ad27c79 commit f8f8eca
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 47 deletions.
49 changes: 25 additions & 24 deletions assets/quick-order-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,30 @@ if (!customElements.get('quick-order-list-remove-all-button')) {
this.toggleConfirmation(true, false);
}
});

const checkAll = document.getElementById('check-all');
const variantCheckboxes = document.querySelectorAll(
'input[name="variant"]',
);
checkAll.addEventListener('change', onCheckAllChange);
variantCheckboxes.forEach((input) =>
input.addEventListener('change', onVariantCheckboxChange),
);
function onCheckAllChange() {
variantCheckboxes.forEach(
(input) => (input.checked = checkAll.checked),
);
document.getElementById('selectedCount').innerHTML =
document.querySelectorAll('input[name="variant"]:checked').length;
}
function onVariantCheckboxChange() {
let allChecked = Array.from(variantCheckboxes).every(
(input) => input.checked,
);
checkAll.checked = allChecked;
document.getElementById('selectedCount').innerHTML =
document.querySelectorAll('input[name="variant"]:checked').length;
}
}

toggleConfirmation(showConfirmation, showInfo) {
Expand Down Expand Up @@ -117,30 +141,6 @@ if (!customElements.get('quick-order-list')) {
window.pageNumber = decodeURIComponent(pageParams.get('page') || '');
form.addEventListener('submit', this.onSubmit.bind(this));
this.addMultipleDebounce();

const checkAll = document.getElementById('check-all');
const variantCheckboxes = document.querySelectorAll(
'input[name="variant"]',
);
checkAll.addEventListener('change', onCheckAllChange);
variantCheckboxes.forEach((input) =>
input.addEventListener('change', onVariantCheckboxChange),
);
function onCheckAllChange() {
variantCheckboxes.forEach(
(input) => (input.checked = checkAll.checked),
);
document.getElementById('selectedCount').innerHTML =
document.querySelectorAll('input[name="variant"]:checked').length;
}
function onVariantCheckboxChange() {
let allChecked = Array.from(variantCheckboxes).every(
(input) => input.checked,
);
checkAll.checked = allChecked;
document.getElementById('selectedCount').innerHTML =
document.querySelectorAll('input[name="variant"]:checked').length;
}
}

cartUpdateUnsubscriber = undefined;
Expand Down Expand Up @@ -322,6 +322,7 @@ if (!customElements.get('quick-order-list')) {
this.ids.length > 0
) {
this.ids.flat().forEach((i) => {
console.log(`#Variant-${i}`);
elementToReplace.querySelector(`#Variant-${i}`).innerHTML =
this.getSectionInnerHTML(
parsedState.sections[section.section],
Expand Down
13 changes: 4 additions & 9 deletions snippets/quick-order-list-row.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,7 @@
data-variant-id='{{ variant.id }}'
data-cart-qty='{{ cart_qty }}'
>
<td class='variant-item__inner twcss-flex{% unless sku and show_sku %} variant-item__inner--no-sku{% endunless %}'>
{%- if product.has_only_default_variant -%}
{%- else -%}
<input id='variant-{{ variant.id }}' type='checkbox' name='variant' value='{{ variant.id }}'>
<label for='variant-{{ variant.id }}' class='visually-hidden'>{{ item.title | escape }}</label>
{%- endif -%}
<td class='lg:twcss-w-[37%] !twcss-pl-8 variant-item__inner{% unless sku and show_sku %} variant-item__inner--no-sku{% endunless %}'>
{%- if show_image -%}
<div class='variant-item__media'>
<div class='variant-item__image-container global-media-settings{% unless is_modal %} gradient{% endunless %}{% unless image %} variant-item__image-container--no-img{% endunless %}'>
Expand Down Expand Up @@ -172,7 +167,7 @@
{% # theme-check-enable %}
</td>

<td class='variant-item__quantity'>
<td class='lg:twcss-w-[23%] variant-item__quantity'>
{%- liquid
assign check_against_inventory = true
if variant.inventory_management != 'shopify' or variant.inventory_policy == 'continue'
Expand Down Expand Up @@ -341,7 +336,7 @@
</quantity-popover>
</td>
{%- assign item_price = item.price | money -%}
<td class='variant-item__price small-hide medium-hide'>
<td class='lg:twcss-w-[20%] variant-item__price small-hide medium-hide'>
{%- if item.compare_at_price -%}
<dl class='variant-item__discounted-prices'>
<dt class='visually-hidden'>
Expand Down Expand Up @@ -440,7 +435,7 @@
</div>
{%- endif -%}
</td>
<td class='variant-item__totals right small-hide medium-hide'>
<td class='lg:twcss-w-[20%] variant-item__totals right small-hide medium-hide'>
{%- render 'loading-spinner' -%}
{% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
{% # theme-check-disable %}
Expand Down
55 changes: 41 additions & 14 deletions snippets/quick-order-list.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
{{ 'sections.cart.title' | t }}
</caption>
<thead>
<tr>
<tr class='twcss-flex twcss-justify-between'>
<th class='caption-with-letter-spacing' scope='col'>
{%- if product.has_only_default_variant -%}
{{ 'sections.quick_order_list.product' | t }}
Expand All @@ -47,26 +47,32 @@
{{ 'sections.quick_order_list.variant' | t }}
{%- endif -%}
</th>
<th class='large-up-hide right caption-with-letter-spacing' scope='col'>
<th
class='twcss-flex twcss-items-end twcss-justify-end large-up-hide right caption-with-letter-spacing'
scope='col'
>
{%- if product.has_only_default_variant -%}
{{ 'sections.quick_order_list.product_total' | t }}
{%- else -%}
{{ 'sections.quick_order_list.variant_total' | t }}
{%- endif -%}
</th>
<th
class='quick-order-list__table-heading--wide small-hide medium-hide caption-with-letter-spacing'
class='lg:twcss-flex lg:twcss-items-end lg:twcss-w-[23%] quick-order-list__table-heading--wide small-hide medium-hide caption-with-letter-spacing'
scope='col'
>
{{ 'products.product.quantity.label' | t }}
</th>
<th
class='quick-order-list__table-heading--wide small-hide medium-hide caption-with-letter-spacing'
class='lg:twcss-flex lg:twcss-items-end lg:twcss-justify-end lg:twcss-w-[20%] quick-order-list__table-heading--wide small-hide medium-hide caption-with-letter-spacing'
scope='col'
>
{{ 'sections.cart.headings.price' | t }}
</th>
<th class='small-hide medium-hide right caption-with-letter-spacing' scope='col'>
<th
class='lg:twcss-flex lg:twcss-items-end lg:twcss-justify-end lg:twcss-w-[20%] small-hide medium-hide right caption-with-letter-spacing'
scope='col'
>
{%- if product.has_only_default_variant -%}
{{ 'sections.quick_order_list.product_total' | t }}
{%- else -%}
Expand All @@ -90,15 +96,36 @@
{%- else -%}
<p id='variants' class='visually-hidden'>Select all variants to edit</p>
{%- for variant in product.variants -%}
{%- render 'quick-order-list-row',
item: variant,
image: variant.image,
sku: variant.sku,
variant: variant,
show_image: show_image,
show_sku: show_sku,
is_modal: is_modal
-%}
<tr class='twcss-relative twcss-flex twcss-justify-evenly'>
<td class='twcss-w-full'>
<table class='quick-order-list__table'>
<tbody>
{%- render 'quick-order-list-row',
item: variant,
image: variant.image,
sku: variant.sku,
variant: variant,
show_image: show_image,
show_sku: show_sku,
is_modal: is_modal
-%}
<tr class='twcss-absolute twcss-top-0 twcss-mt-4 lg:twcss-mt-12'>
<td>
<input
id='variant-{{ variant.id }}'
type='checkbox'
name='variant'
value='{{ variant.id }}'
>
<label for='variant-{{ variant.id }}' class='visually-hidden'>
{{- item.title | escape -}}
</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
{%- endfor -%}
{%- endif -%}
</tbody>
Expand Down

0 comments on commit f8f8eca

Please sign in to comment.