Jump to content
Rebimbas

Filtering Options

Recommended Posts

Rebimbas

Boas ,

Tenho estado a desenvolver um projeto para a minha PAP de final de curso.

O projeto consiste num sistema de orçamentos para uma empresa.

Tenho uma galeria de fotos com um menu estilo "Hamburger" na qual abre uma aba com os devidos campos "combo boxes" que a medida que o utilizador vai escolhendo opção a opção eu queria que fossem ficando todas as fotos respetivas a escolha.

 

Ex: O utilizador tem de escolher um carro e tem a oportunidade de poder escolher qualquer peça do carro, ou seja, quando escolher o banco fica na galeria uma imagem do banco quando no select a seguir escolher qual as rodas ficaria na galeria uma imagem das rodas e do banco, tudo isto para que no fim se tenha um conjunto de imagens cada uma relacionada com a opcao do utilizador.

Eu optei por um sistema de "filtering" do estilo dos sites de compras que consoante os filtros vão sendo dispostas imagens correspondentes, mas o problema que eu tenho  é:

1º Select- Opções

-PVC

-ALUMINIO

-PVC REVESTIDO A ALUMINIO

Caso ele escolha o pvc o pretendido seria ficar uma imagem pvc na galeria e quando ele fosse para o segundo select "combo box"

2º Select- Opções

-Padrao granito

-Padrao Madeira

-Branco

Após ele escolher a segunda opção e imaginemos que seria o "padrao madeira", teria de estar na galeria uma foto "pvc" e mais uma foto de um "padrao madeira"

O meu problema é que quando ele escolhe por exemplo o pvc e depois por exemplo o branco, n fica imagem nenhuma pois o sistema é de filtering ou seja n existe imagens pvc brancas.

O que eu quero é que ap´s todas as escolhas serem feitas que fique uma galeria com a respetiva seleção de imagens.

 Penso que fui claro, caso aja alguem que me pudesse ajudar, eu ficaria eternamente grato por tal feito,

Caso seja necessário o codigo poderei fornece-lo com todo o gosto.

Por favor alguém que me ajude, todos sabemos penso eu o quanto importante é uma PAP e eu estou quase a terminar a minha 

, basicamente só tenho isto como problema principal.

Obrigado pela Compreensão,

Comprimentos

 

Share this post


Link to post
Share on other sites
M6

Se bem percebi queres um OR e não um AND nas condições, é isso?


10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Share this post


Link to post
Share on other sites
Rebimbas
2 horas atrás, M6 disse:

Se bem percebi queres um OR e não um AND nas condições, é isso?

Exactamente, pois o OR iria fazer com que fossem direcionados todas as imagens das opçoes exato

   

Share this post


Link to post
Share on other sites
M6

Bem, então tens ai a solução...


10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Share this post


Link to post
Share on other sites
Rebimbas

jQuery(document).ready(function($){
    //open/close lateral filter
    $('.cd-filter-trigger').on('click', function(){
        triggerFilter(true);
    });
    $('.cd-filter .cd-close').on('click', function(){
        triggerFilter(false);
    });

    function triggerFilter($bool) {
        var elementsToTrigger = $([$('.cd-filter-trigger'), $('.cd-filter'), $('.cd-tab-filter'), $('.cd-gallery')]);
        elementsToTrigger.each(function(){
            $(this).toggleClass('filter-is-visible', $bool);
        });
    }

    //mobile version - detect click event on filters tab
    var filter_tab_placeholder = $('.cd-tab-filter .placeholder a'),
        filter_tab_placeholder_default_value = 'Select',
        filter_tab_placeholder_text = filter_tab_placeholder.text();
    
    $('.cd-tab-filter li').on('click', function(event){
        //detect which tab filter item was selected
        var selected_filter = $(event.target).data('type');
            
        //check if user has clicked the placeholder item
        if( $(event.target).is(filter_tab_placeholder) ) {
            (filter_tab_placeholder_default_value == filter_tab_placeholder.text()) ? filter_tab_placeholder.text(filter_tab_placeholder_text) : filter_tab_placeholder.text(filter_tab_placeholder_default_value) ;
            $('.cd-tab-filter').toggleClass('is-open');

        //check if user has clicked a filter already selected 
        } else if( filter_tab_placeholder.data('type') == selected_filter ) {
            filter_tab_placeholder.text($(event.target).text());
            $('.cd-tab-filter').removeClass('is-open');    

        } else {
            //close the dropdown and change placeholder text/data-type value
            $('.cd-tab-filter').removeClass('is-open');
            filter_tab_placeholder.text($(event.target).text()).data('type', selected_filter);
            filter_tab_placeholder_text = $(event.target).text();
            
            //add class selected to the selected filter item
            $('.cd-tab-filter .selected').removeClass('selected');
            $(event.target).addClass('selected');
        }
    });
    
    //close filter dropdown inside lateral .cd-filter 
    $('.cd-filter-block h4').on('click', function(){
        $(this).toggleClass('closed').siblings('.cd-filter-content').slideToggle(300);
    })

    //fix lateral filter and gallery on scrolling
    $(window).on('scroll', function(){
        (!window.requestAnimationFrame) ? fixGallery() : window.requestAnimationFrame(fixGallery);
    });

    function fixGallery() {
        var offsetTop = $('.cd-main-content').offset().top,
            scrollTop = $(window).scrollTop();
        ( scrollTop >= offsetTop ) ? $('.cd-main-content').addClass('is-fixed') : $('.cd-main-content').removeClass('is-fixed');
    }


    buttonFilter.init();
    $('.cd-gallery ul').mixItUp({
        controls: {
            enable: false
        },
        callbacks: {
            onMixStart: function(){
                $('.cd-fail-message').fadeOut(200);
            },
              onMixFail: function(){
                  $('.cd-fail-message').fadeIn(200);
            }
        }
    });

    var inputText;
    var $matching = $();

    var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();

    $(".cd-filter-content input[type='search']").keyup(function(){
          // Delay function invoked to make sure user stopped typing
          delay(function(){
            inputText = $(".cd-filter-content input[type='search']").val().toLowerCase();
               // Check to see if input field is empty
            if ((inputText.length) > 0) {            
                  $('.mix').each(function() {
                    var $this = $(this);
                
                    // add item to be filtered out if input text matches items inside the title   
                    if($this.attr('class').toLowerCase().match(inputText)) {
                          $matching = $matching.add(this);
                    } else {
                          // removes any previously matched item
                          $matching = $matching.not(this);
                    }
                  });
                  $('.cd-gallery ul').mixItUp('filter', $matching);
            } else {
                  // resets the filter to show all item if input is empty
                  $('.cd-gallery ul').mixItUp('filter', 'all');
            }
          }, 200 );
    });
});

/*****************************************************
    MixItUp - Define a single object literal 
    to contain all filter custom functionality
*****************************************************/
var buttonFilter = {
      // Declare any variables we will need as properties of the object
      $filters: null,
      groups: [],
      outputArray: [],
      outputString: '',
  
      // The "init" method will run on document ready and cache any jQuery objects we will need.
      init: function(){
        var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "buttonFilter" object so that we can share methods and properties between all parts of the object.
    
        self.$filters = $('.cd-main-content');
        self.$container = $('.cd-gallery ul');
    
        self.$filters.find('.cd-filters').each(function(){
              var $this = $(this);
          
            self.groups.push({
                $inputs: $this.find('.filter'),
                active: '',
                tracker: false
            });
        });
        
        self.bindHandlers();
      },
  
      // The "bindHandlers" method will listen for whenever a button is clicked. 
      bindHandlers: function(){
        var self = this;

        self.$filters.on('click', 'a', function(e){
              self.parseFilters();
        });
        self.$filters.on('change', function(){
          self.parseFilters();           
        });
      },
  
      parseFilters: function(){
        var self = this;
     
        // loop through each filter group and grap the active filter from each one.
        for(var i = 0, group; group = self.groups; i++){
            group.active = [];
            group.$inputs.each(function(){
                var $this = $(this);
                if($this.is('input[type="radio"]') || $this.is('input[type="checkbox"]')) {
                    if($this.is(':checked') ) {
                        group.active.push($this.attr('data-filter'));
                    }
                } else if($this.is('select')){
                    group.active.push($this.val());
                } else if( $this.find('.selected').length > 0 ) {
                    group.active.push($this.attr('data-filter'));
                }
            });
        }
        self.concatenate();
      },
  
      concatenate: function(){
        var self = this;
    
        self.outputString = ''; // Reset output string
    
        for(var i = 0, group; group = self.groups; i++){
              self.outputString += group.active;
        }
    
        // If the output string is empty, show all rather than none:    
        !self.outputString.length && (self.outputString = 'all'); 
    
        // Send the output string to MixItUp via the 'filter' method:    
        if(self.$container.mixItUp('isLoaded')){
            self.$container.mixItUp('filter', self.outputString);
        }
      }
};

Este é o codigo da filtragem se alguem me pudesse dar uma ajudinha eu estarei disposto a fazer o que for preciso para ter isto resolvido

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.