Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix misalignment of total items in quick order list #2923

Merged
merged 9 commits into from
Aug 3, 2023
Merged

Fix misalignment of total items in quick order list #2923

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e50e09a
Fix font for quick order list
sofiamatulis Jul 21, 2023
dd05f12
Update opacity
sofiamatulis Aug 1, 2023
bcbeb66
Set width and margin for total-items
eugenekasimov Jul 28, 2023
4729e6e
Add width 100% to image
eugenekasimov Jul 31, 2023
a94cc30
Add a rule for product with volume pricing
eugenekasimov Aug 1, 2023
06e3a91
Add qty rules as a condition
eugenekasimov Aug 1, 2023
d00933f
Refactor liquid logic
eugenekasimov Aug 2, 2023
1a90ae0
Roll back changes. Account for 15px info icon.
eugenekasimov Aug 2, 2023
cfad5a8
Add center alignment for total items
eugenekasimov Aug 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions assets/quick-order-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ quick-order-list .quantity__button {

.variant-item__image {
height: 100%;
width: 100%;
object-fit: cover;
}

Expand Down Expand Up @@ -215,6 +216,7 @@ quick-order-list .quantity__button {
.variant-item__sold-out {
opacity: 0.7;
font-size: 1.6rem;
color: rgb(var(--color-foreground));
}

quick-order-list-remove-button {
Expand Down Expand Up @@ -561,9 +563,14 @@ quick-order-list-remove-button:hover .icon-remove {
}

eugenekasimov marked this conversation as resolved.
Show resolved Hide resolved
.quick-order-list__total-items {
padding-left: calc(((11rem / var(--font-body-scale) + var(--inputs-border-width) * 2)/ 4) + 4.5rem);
width: calc(((11rem / var(--font-body-scale) + var(--inputs-border-width) * 2)));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we are setting the width, perhaps it makes sense to center align total items to account for long translations:

https://screenshot.click/02-47-l0f8z-3y6qy.mp4

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That sounds reasonable. Added here.

margin-left: 4.9rem;
flex-direction: column;
}

.has-info-icon .quick-order-list__total-items {
margin-left: calc(15px + 3.4rem);
eugenekasimov marked this conversation as resolved.
Show resolved Hide resolved
}
}

quick-order-list-remove-button {
Expand Down Expand Up @@ -598,10 +605,11 @@ quick-order-list-remove-button {
align-items: center;
}

.quick-order-list__total-items h3,
.quick-order-list__total-items span,
eugenekasimov marked this conversation as resolved.
Show resolved Hide resolved
.totals__subtotal-value {
margin-top: 0;
margin-bottom: 0;
color: rgb(var(--color-foreground));
}

.quick-order-list__total-items p,
Expand Down Expand Up @@ -658,7 +666,7 @@ quick-order-list-remove-button {
}

.totals__subtotal-value,
.quick-order-list__total-items h3 {
.quick-order-list__total-items span {
margin-right: 1.2rem;
}

Expand Down
24 changes: 19 additions & 5 deletions sections/quick-order-list.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,19 @@
</thead>

<tbody>
{%- assign has_quantity_rules = false -%}
{%- if product.has_only_default_variant -%}
{%- render 'quick-order-list-row',
item: product,
image: product.featured_media,
sku: product.selected_or_first_available_variant.sku,
variant: product.selected_or_first_available_variant
-%}
{% liquid
if product.selected_or_first_available_variant.quantity_rule.min > 1 or product.selected_or_first_available_variant.quantity_rule.max != null or product.selected_or_first_available_variant.quantity_rule.increment > 1
assign has_quantity_rules = true
endif
%}
{%- else -%}
{%- for variant in product.variants -%}
{%- render 'quick-order-list-row',
Expand All @@ -97,6 +103,11 @@
sku: variant.sku,
variant: variant
-%}
{% liquid
if variant.quantity_rule.min > 1 or variant.quantity_rule.max != null or variant.quantity_rule.increment > 1
assign has_quantity_rules = true
endif
-%}
{%- endfor -%}
{%- endif -%}
</tbody>
Expand Down Expand Up @@ -128,7 +139,10 @@
{% comment %} Populated by JS {% endcomment %}
</span>
{%- else -%}
<div class="quick-order-list__total gradient" id="quick-order-list-total">
<div
class="quick-order-list__total{% if product.quantity_price_breaks_configured? or has_quantity_rules %} has-info-icon{% endif %} gradient"
eugenekasimov marked this conversation as resolved.
Show resolved Hide resolved
id="quick-order-list-total"
>
<div class="quick-order-list-total__info">
<div class="quick-order-list-total__column small-hide medium-hide">
<div class="quick-order-list-buttons">
Expand Down Expand Up @@ -160,9 +174,9 @@
</span>
</div>
<div class="quick-order-list__total-items">
<h3>
<span>
{{ items_in_cart }}
</h3>
</span>
<p class="h5">{{ 'sections.quick_order_list.total_items' | t }}</p>
</div>
<div class="quick-order-list-total__price">
Expand All @@ -172,12 +186,12 @@
</button>
</noscript>
<div class="totals__product-total">
<h3 class="totals__subtotal-value">
<span class="totals__subtotal-value">
{% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
{% # theme-check-disable %}
{{ cart | line_items_for: product | sum: 'original_line_price' | money }}
{% # theme-check-enable %}
</h3>
</span>
<p class="totals__subtotal h5">{{ 'sections.quick_order_list.product_total' | t }}</p>
</div>
<small class="tax-note caption-large rte">
Expand Down Expand Up @@ -267,7 +281,7 @@
</template>
</div>

{% schema %}

Check notice on line 284 in sections/quick-order-list.liquid

View workflow job for this annotation

GitHub Actions / Theme Check Report

sections/quick-order-list.liquid#L284 

[SchemaJsonFormat] JSON formatting could be improved
{
"name": "t:sections.quick-order-list.name",
"limit": 1,
Expand Down
2 changes: 1 addition & 1 deletion snippets/quick-order-list-row.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@
</button>
{%- endif -%}
{%- if variant.available == false or quantity_rule_soldout -%}
<span class="variant-item__sold-out h4"> {{ 'products.product.sold_out' | t }} </span>
<span class="variant-item__sold-out"> {{ 'products.product.sold_out' | t }} </span>
{%- else -%}
{% comment %} TODO: Remove theme check {% endcomment %}
{% # theme-check-disable %}
Expand Down
Loading