Blocksy plus Mix and Match Products grid style incompatibility

  • Resolved HelgaTheViking

    (@helgatheviking)


    9 months, 1 week ago

    I’m the author of Mix and Match Products. Bascially it creates a new product type that allows customers to bundle some products together (think a 6 pack of wine, etc). I offer a grid layout that mimics the WooCommerce archive grid layout.

    It was recently pointed out to me by a customer using your theme that Blocksy does not display my grid columns properly and instead they appear as a single column. This should be a 3column grid:



    This occurs when themes alter or replace the core CSS. What is the motivation behind applying CSS style rules to data attributes instead of classes?

    @media (min-width: 1000px) {
      [data-products].columns-3 {
        --shop-columns: repeat(3, minmax(0, 1fr));
      }
    }

    I have some classes and style rules that conflict a little, but this is the hardest one to inherit because it’s attached to data attributes.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Sergiu Radu

    (@sergiuradu)

    9 months, 1 week ago

    Hello @helgatheviking,

    Thanks for reaching out regarding this issue.

    Do you have a URL where we can check/see this issue?

    Thread Starter HelgaTheViking

    (@helgatheviking)

    9 months, 1 week ago

    Sure, demo site here. I am expecting a 3 column grid of the apple soda, strawberry soda, grape soda, etc.

    In my analysis yesterday there are a couple of conflicts, but the main one I am asking about here is why your grid style rules are attached to a data attribute. This is very unexpected, and makes it really difficult for a plugin (like mine, but I bet Product Bundles is also impacted) to inherit the theme styles.

    Sergiu Radu

    (@sergiuradu)

    9 months, 1 week ago

    Hi @helgatheviking,

    We are adding that attribute for a very simple reason – to not conflict with other page builders and plugins that interact with the products loop.

    We add our styles to the products loop only when that attribute (data-products) is present.
    Also, with the help of this attribute we control the style of the products card, please see this – it could be type-1, type-2 or type-3.

    At the same time, we reserve the right to remove this data attribute for some special product loops that come from third party plugins. This way we resolve some problematic conflicts between plugins and our theme.

    Regarding your grid, seems that even if you will add the data-attribute="type-*" to the ul it won’t work, and this is because you also add a display: flex, see this video – https://d.pr/v/MhU7Dj

    So, what in the end you want to achieve – do you want to use our data-attribute to make the grid work by using the theme CSS display: grid or you want the grid to work with display: flex ?

    I am asking because I see that you also interact with the grid by adding your CSS (display: flex), so I see two options here:

    1. Use the theme data-attribute (it will add the CSS display: grid styles), but you will have to remove your display: flex
    2. Don’t use the theme data-attribute, use your classes that apply the display: flex – but in this case you will also have to add some more styles so the grid could look nice – https://d.pr/v/dqegoQ

    Let me know what do you think and if there is something else I can help you with.

    Cheers!

    • This reply was modified 9 months, 1 week ago by Sergiu Radu.
    Thread Starter HelgaTheViking

    (@helgatheviking)

    9 months, 1 week ago

    Thank you for the thorough reply. You make a great point about the display: flex that I am applying to the ul.products. I had forgotten that. It seems like I was doing it to intentionally align the quantity inputs vertically, here you can see them unaligned without the flex styles:
    https://annotely.com/preview/acmfdyjadp000103l5adqvh56w

    But that begs the question of just how important that is since it can conflict with themes like yours. What I could do is leave my inner li.product with display: flex and default to removing the flex from the ul.products. What this would do is allow the vertical alignment on any theme that is using flex/column display, but not on any theme using woo’s original float style. In this way I could add the vertical alignment progressively for themes that support it.

    But that still brings me back to the data-products rule you have

    @media (min-width: 1000px) {
      [data-products].columns-3 {
        --shop-columns: repeat(3, minmax(0, 1fr));
      }
    }

    Your columns handler only applies when the data-products attribute is present. I can put anything there to trigger your style rule as this rule isn’t specific to any of your card styles:

    https://annotely.com/preview/acmfe07dhb000003jr29616a7p

    While it is possible to add a compatibility module to add a data-products attribute to the wrapping <ul> my ideal solution would be not needing to. Would it make sense for you to modify your generic [data-products] styles to ul.products ?

    @media (min-width: 1000px) {
      ul.products.columns-3 {
        --shop-columns: repeat(3, minmax(0, 1fr));
      }
    }

    Thanks!

    Sergiu Radu

    (@sergiuradu)

    9 months, 1 week ago

    Hey @helgatheviking,

    What I could do is leave my inner li.product with display: flex and default to removing the flex from the ul.products.

    Yep, that would be a good move.

    While it is possible to add a compatibility module to add a data-products attribute to the wrapping <ul> my ideal solution would be not needing to.

    You actually should not add this attribute by yourself, instead just respect the core WooCommerce filter that specifically is controlling the loop markup woocommerce_product_loop_start.
    By using this filter you will automatically receive also our data attribute.

    Would it make sense for you to modify your generic [data-products] styles to ul.products ?

    No, unfortunately this is not a solution for us, and even for you. Even if we change the selector – it won’t work because the display: grid is also applied to [data-products] attribute, please see this – https://share.cleanshot.com/m76pnkFt

    Again, we add this attribute and tie all our styles to it in order to avoid conflicts with other plugins.

    Let me know in case you have any other questions.

    Thread Starter HelgaTheViking

    (@helgatheviking)

    9 months, 1 week ago

    I can’t believe that I didn’t know about the filter woocommerce_product_loop_start. If you can believe it, my loop opener actually predates it’s existence.

    I’ve been using a custom template that uses this markup and trying my best to mimic the core Woo layout classes (plus one or two of my own)

    <ul class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>">

    But I will switch this to:

    woocommerce_product_loop_start();

    And then use the filter to add my custom classes.

    Locally, this is working great and removes any need for custom integrations which is my favorite. Cross compatibility can be tricky, so I appreciate you working through this with me. Thanks for teaching an old dog a new trick.

    Sergiu Radu

    (@sergiuradu)

    9 months, 1 week ago

    Hello @helgatheviking,

    With pleasure, glad everything is fine now 🙂

    Don’t hesitate to contact us in case you will have any other questions.

    Have a wonderful day!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Blocksy plus Mix and Match Products grid style incompatibility’ is closed to new replies.