1

I made a custom child theme based on Luma theme. But on the checkout page it's missing some styling http://staging.netconnectshop.be/checkout/.

What do I have to do?

Do I have to copy the folder /vendor/magento/theme-frontend-luma/Magento_Checkout (see attachment) to my child-theme folder: /app/design/frontend/Meesfrenkelfrank/ncs-theme ?

enter image description here

Update 1: Look at this screenshot where you can see the error. You have to scroll to the right. There are styles missing on e.g. <div class="opc-wrapper">

enter image description here

2

I wouldn't recommend copying over the styling from the Luma theme, providing your theme is set up correctly to use Luma as a parent (it looks like it is) you shouldn't need to make any changes.

It looks correct to me when compared with the Luma theme, can you attach a screenshot of the problem please?

Also you should be aware that it isn't a good idea to use Luma as a parent theme (for a live site), as it is Magento's demo so they may make changes to theme in the future will could break your site. As a safety net it might be wise to clone Luma into a different theme (e.g LumaClone) and use that as a parent so any future updates don't mess up your theme.

Update

I see the problem now (horizontal scrolling), this is actually a CSS problem and not related to the file structure/theme inheritance. I had the same problem on a project using the Luma theme as a parent.

If you extend the checkout Less file and set .opc-wrapper to width 100% instead of 133%. I'm not sure what causes this to become a problem, it must be a chance to the CSS in your theme that conflicts with it. Or it's just poor CSS from Magento.

I tried it on your checkout with inspect element and the problem is resolved.

enter image description here

Update 2

I'm not 100% sure on this as I don't have time to boot up my Magento 2 box, but by looking at the code the width seems to be calculated by the following:

vendor/magento/theme-frontend-luma/Magento_Checkout/web/css/source/module/checkout/_checkout.less

Concentrate on the lib-layout-column() mixin, I think this is where the width is set.

If you experiment with this line (in your own theme) you should be able to work out how the width is being set. To actually fix this just overwrite the width in your theme by either setting the width to 100% or by using this mixin with only one column.

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .opc-wrapper {
       &:extend(.abs-add-box-sizing-desktop-m all);
        .lib-layout-column(2, 1, @checkout-wrapper__columns);
        padding-right: @indent__l;
    }
}

lib/web/css/source/lib/_layout.less

This is where the mixin is defined, without studying this I'm not entirely sure what's happening. You can tell Magento's front-end has been written by back-end devs! It isn't too easy to understand, at least in my opinion.

._lib-column-width(@_width, @_check, @_index) when (@_check = false) and (@_index = 1) {
    .lib-column-width(@_width);
}

._lib-column-width(@_width, @_check, @_index) when (@_check = true), (@_width = auto) {
    .lib-css(width, @_width);
    @_index: 1;
}

._lib-set-column-width(@_index, @_width) when (@_index > 0) {
    @_checkUnit: isunit(@_width, extract(@_units, @_index));
    ._lib-column-width(@_width, @_checkUnit, @_index);
    ._lib-set-column-width(@_index - 1, @_width);
}

.lib-layout-column(@_total-columns, @_order, @_width) {
    @_units: "px","%","em","rem","pt";
    ._lib-set-column-width(length(@_units), @_width);
    .lib-flex-degradation(@_total-columns, @_order);
    & when (@use-flex = true) {
        .lib-vendor-prefix-order(@_order);
    }
}

I hope that helps! Apologies for not being able to go into more detail regarding the mixin.

  • Thanks for your answer. I update my question. I also had a similar problem with the layered navigation. The attributes didn't collapse etc. After copying the folder Magento_LayeredNavigation from the Luma theme to my child theme, I got it working. But for now. How do I fix the checkout page? – meez Sep 4 '16 at 14:15
  • @MeesFrenkelFrank I have updated my answer to fix the horizontal scrolling problem – Ben Crook Sep 6 '16 at 9:47
  • If I look at this demo site and I compare the .opc-wrapper and the <aside class="modal-custom opc-sidebar opc-summary-wrapper custom-slide> in my site it's missing some styling? It's calculating the width of the .opc-wrapper and the <aside> somewhere? Do you have any clue why those styles are missing and how I can add or repair them? – meez Sep 6 '16 at 12:01
  • That width seems to be set via a mixin, I'm not sure why yours is different without seeing all the code. Possibly a variable has changed, although I don't remember changing any layout related variables when I had the problem. If the horizontal scrolling is the only issue I would set the width to 100% and leave it. As for the other problems you had with the layered nav I have no idea, that sounds like a JS problem and Magento 2 has many of them! – Ben Crook Sep 6 '16 at 12:25
  • I've updated my answer again btw – Ben Crook Sep 6 '16 at 12:25
1

My solution to fix that checkout Problem on a Luma Parent Theme.

Add

#app/design/frontend/[YOUR THEMENAME]/[YOUR THEMEMODEL]/web/css/source/_theme.less


@total-columns: 24;
@checkout-sidebar__columns: 8;
@layout-column__sidebar-width: 5;
@layout-column-checkout__width-left: 6;

FloWord

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.