need help on this ticket #10035425

[phillipmadsen]

I got the select fields working great so thank you but now i have another quesiton.

when i load the page all products are hidden until the product filters are used. how do i make the all work default active.

another question is there a switch i can use to change the menu on mobile

so i use the tabs on large displays but on mobile i need it to switch to the select instead.

Another question. do you have a layout switch created to change between list view and grid view? just wondering i do not see one.

thanks for your help.

---

[phillipmadsen]

Do you guys have a way to add a search to the filters also? if so can you please show me that as well. thank you

---

[Support]

Hello,

when i load the page all products are hidden until the product filters are used. how do i make the all work default active.

Seems you already resolved this issue, right ?

another question is there a switch i can use to change the menu on mobile

Unfortunately not. The mobile menu always will be a hamburguer button that expands and show the menu items.

so i use the tabs on large displays but on mobile i need it to switch to the select instead.

The template do not comes with code to switch a tab to select and vice-versa. An alternative is display the tabs code in large screens and hide on small screens. The same with select, but vice-versa.

Example:

<!-- HIDDEN ON MOBILE BUT VISIBLE ON LARGE SCREENS -->
<div class="d-none d-lg-block">
    <!-- TABS CODE GOES HERE -->
</div>

<!-- VISIBLE ON MOBILE BUT HIDDEN ON LARGE SCREENS -->
<div class="d-lg-none">
    <!-- SELECT CODE GOES HERE -->
</div>

Another question. do you have a layout switch created to change between list view and grid view? just wondering i do not see one.

Unfortunately the template does not comes with a javascript code to switch without reload the page. These buttons are links, so probably the best way is create separated pages for each button. Example: For the grid button you can maintain your products grid page (https://stage.codecorp.com/products) and for the list link you can use as base this layout (https://www.okler.net/previews/porto/8.2.0/shop-1-column-full-width.html)

Do you guys have a way to add a search to the filters also?

Unfortunately not, the template does not comes with a ready feature for that.

We hope this helps and clarify your questions!

Let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[phillipmadsen]

Thank you the div classes for mobile vs not mobile are what I needed.

I have one last issue and you can check it on the page but when I have tabs and selects on the same page the links on the tabs are not working. it looks like the select code is disabling it. Can you tell me how to adjust so they both work.

thanks for you quick responses.

---

[Support]

Hello,

Great!

Regarding new question, that’s because is missing the “tabs” JS code. Please try changing the code at (js/custom.js) to:

var filters = {},
    $grid = $('.portfolio-list');

$('#categoryDropdown, #popularityStuffDropdown, #searchFilter').on('change', function(e) {
    var $this = $(this);

    var filterGroup = $this.data('filter-group');

    filters[filterGroup] = $this.val();

    var filterValue = concatValues(filters);

    $grid.isotope({
        filter: filterValue
    });
    
});

$('.portfolio-filter-group a').on('click', function(e){
    e.preventDefault();

    $('.portfolio-filter-group a').removeClass('active');
    $('.portfolio-filter-group li').removeClass('active');

    var $this = $(this);

    var filterGroup = $this.data('filter-group');

    filters[filterGroup] = $this.parent().data('option-value');

    var filterValue = concatValues(filters);

    $grid.isotope({
        filter: filterValue
    });

    $this.addClass('active');
    $this.parent().addClass('active');
});

function concatValues(obj){
    var value = '';
    for (var prop in obj) {
        value += obj[prop];
    }
    return value;
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[phillipmadsen]

Ok I think Ii almost got it all worked out but I’m having one last problem. all the links are not working because it looks like the loader overlay is blocking all interactions. do you have a fix for this. you can check the same page to see what mean.

thanks

---

[Support]

Hello,

Please try adding the given CSS code below at (css/custom.css):

.portfolio-list .portfolio-item {
    z-index: 2;
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[phillipmadsen]

great that worked thank you. I have the same problem on the header login in the nav. works great with the modal but once logged in they change to account and its not clickable at that point.
See screenshots
works: https://nimb.ws/7Gv0co
notworking: https://nimb.ws/RCwEIM

thanks for you help.

---

[Support]

Hello,

Sorry but we couldn’t reproduce this issue here.

Can you please create a temporary test login for us, so we can inspect the page with “Admin” and “Account” in the header.

You can send as private message here, so it will not be public.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts