Bỏ qua để đến Nội dung
Menu
Câu hỏi này đã bị gắn cờ
1 Trả lời
3782 Lượt xem

Hi, how can I display a custom field beside the quantity field in desktop website but display the custom field under the quantity field in mobile website to save space?


My attempt:

id="custom_checkout_page_fe" name="Checkout Page Modified" inherit_id="website_sale.cart_lines">

expr="//td[hasclass('td-qty')]" position="inside">

class="d-none d-sm-block d-md-block d-lg-none d-xl-none d-xxl-none">


expr="//td[hasclass('td-qty')]" position="after">

class="d-none d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">


But in my website, both of the field shows up at the same time.

Ảnh đại diện
Huỷ bỏ
Câu trả lời hay nhất

Hi, 

To achieve the desired layout, you can utilize CSS media queries to adjust the display of the custom field based on the screen size. Here's an example of how you can accomplish this:


First, add the following XML code to your template:

<template id="custom_checkout_page_fe" name="Checkout Page Modified" inherit_id="website_sale.cart_lines">

  <xpath expr="//td[hasclass('td-qty')]" position="inside">

    <div class="_website_cart_line_custom_field"></div>

  </xpath>

</template>



Next, apply the following CSS styles to your website

/* For desktop view */
@media (min-width: 768px) {
.js_cart_lines .td-qty {
display: flex !important;
}
}


/* For mobile view */
@media (max-width: 767px) {
.js_cart_lines .td-qty {
display: block !important;
}
}

In this code, we're using media queries to specify different CSS rules based on the screen width. For screens wider than or equal to 768px (desktop view), the custom field will be displayed alongside the quantity field using `display: flex`. For screens narrower than 768px (mobile view), the custom field will be displayed below the quantity field using `display: block`.

Regards
Ảnh đại diện
Huỷ bỏ
Bài viết liên quan Trả lời Lượt xem Hoạt động
0
thg 8 24
1475
0
thg 6 23
1673
0
thg 5 22
2409
2
thg 5 22
3184
0
thg 5 17
3625