[Resolved] Widgets on Off Canvas panel 2

Home Forums Support Widgets on Off Canvas panel 2

  • This topic has 15 replies, 3 voices, and was last updated 10 months ago by David.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1054744
    ustar

    Hi, There!

    I added widget with sizes to Off Canvas panel.
    But it looks very strange.
    Widgets like this works on shop and category pages, you can see (for sizes, colors, seasons and brands) and i’d like to see the same style in Off Canvas panel. Is it possible?

    Regards, Sergey.

    #1054760
    ustar

    Also i’d like to add widget “Active filters” on the panel.

    #1054918
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list {
        display: flex;
        flex-wrap: wrap;
    }
    
    .slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
    }
    .slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list p {
        margin-top: 2em;
    }
    #1055571
    ustar

    Hi, David!

    Thanks for your answer and the code.
    Works very good for “sizes” widget.

    But i have 4 types of widgets.
    – numbers in circles (sizes) – works very well!
    – circles woth colors (colors) – wit no links now. Impossible to click.
    – simple list of attributes (material, collection etc.) – collapsed too close now
    – buttons with images (season, brand) – wit no links now. Impossible to click.

    Is there any way to make them all work?

    Regards, Sergey.

    #1055639
    David
    Staff
    Customer Support

    Can you disable the cache/optimization plugin you’re using

    #1063786
    ustar

    Hi, David!

    This is without caching plugin.
    Now activated:
    GP Premium
    HappyForms
    STWooSwatches
    WooCommerce
    WooCommerce Pay for Payment
    Woocommerce seo filter url
    WP Google Maps
    Yoast SEO
    Zásilkovna Shipping Method

    Regards, Sergey.

    #1066890
    ustar

    Hi, David!

    Do you have any news?

    Regards, Sergey.

    #1066940
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Sorry, this slipped through somehow!

    Is there an example of these buttons working normally somewhere? Maybe in a regular widget area on the site? I’m not seeing how the CSS David provided would stop the links from working.

    Let me know 🙂

    #1067125
    ustar

    Hi Tom!

    Thanks for your answer!

    The code introduced by David helped for the widget with sizes. Before the changes, they were arranged in one vertical line and looked terrible. So the code from David solved the problem only with displaying the size widget in the off-canvas menu and did’t affect on other issues.
    I will try to explain again in detail:

    I have 4 types of widgets.
    – numbers in circles (sizes) – works very well!
    – circles with colors (colors) – wit no links now. Not clickable now.
    – simple list of attributes (gender, material, collection etc.) – collapsed too close to each other. It looks as if the area of ​​this widget contains a table (I think 5 columns), but the columns are so small that there is not enough space for words.
    – buttons with images (season, brand) – wit no links now. Not clickable now.

    These widgets in large desktop mode works in the sidebar menu on pages like:
    u-star.cz/boty/
    u-star.cz/obleceni/
    u-star.cz/nove/

    Now I have added all possible product filter widgets to the off-canvas menu for clarity.

    Regards, Sergey.

    #1067371
    David
    Staff
    Customer Support

    Try this CSS:

    .woocommerce .slideout-navigation .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a {
        display: inline-block;
        flex: 1;
        line-height: 2em;
        padding: 25px;
    }
    #1067815
    ustar

    Hi, David!

    Almost, almost perfect.
    Everethyng works fine except widgets with simple text links.

    – simple list of attributes (Pohlaví, Edice, Materiál, Střich etc.) – collapsed too close to each other. It looks as if the area of ​​this widget contains a table (I think 5 columns), but the columns are so small that there is not enough space for words.

    Most of them like example on page:
    ustar2.sitedistrict.com/obleceni/

    Regards, Sergey.

    #1067875
    David
    Staff
    Customer Support

    And this CSS to override that problem:

    .slideout-navigation .slideout-widget .pohlavi {
        display: block !important;
    }
    #1068296
    ustar

    This helped arrange the elements (filter values) with the filter values ​​vertically. That is, the table cells are arranged vertically. But the width of the cells has not changed. And if the text is large enough, it does not fit on one line in a cell.

    I added a cell width to your code, for example:

    .slideout-navigation .slideout-widget .material {
    display: block! important;
    width: 200px;
    }
    But it did not help.
    These are still cells with a width equal to one word.

    If I change the cell width

    .slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
    width: 100%;

    or

    .slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
    width: 200 px;

    then all such elements are changed, including sizes, but this is wrong. I want to change the width for filter values ​​only in text widgets.

    In addition, I have added your code for each text widget. And of course, this greatly increases the css file …
    Is it possible to apply the same style to a group of widgets to shorten the css code?

    #1068783
    David
    Staff
    Customer Support

    Remove all the CSS related to the slideout widgets and try this:

    .slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.velikost,
    .slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.barva,
    .slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.sezona {
        display: flex;
        flex-wrap: wrap;
    }
    
    .slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.velikost .woocommerce-widget-layered-nav-list__item,
    .slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.barva .woocommerce-widget-layered-nav-list__item,
    .slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.sezona .woocommerce-widget-layered-nav-list__item {
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
    }
    
    .woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a {
        width: 100%;
        height: 100%;
    }
    #1075116
    ustar

    hi, David!

    Thanks, code works after a little modifications.

    I’m really happy with this now ))

    Regards, Sergey.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.