X
X
xxxgerasim2022-04-15 17:41:39
JavaScript
xxxgerasim, 2022-04-15 17:41:39

2 cookies are created with different values, how to fix?

The task is to configure the switching of the type (sect/list) of product cards in such a way that when the type is selected on other pages, the selected type is saved. I decided to do it with cookies.

When you click on the view icon, a cookie is set. And set the conditions that if cookies = list, then display using the list.

But in the end, the cards are always displayed as a list. As I found out, for some reason 2 cookies are created with different values.

How can I fix this? I am new to JS and coding in general.

if (document.cookie ='productbox=grid') {
        jQuery('.product-js').removeClass('product-box-flex');  
        jQuery('.product-js').addClass('product-box');
        jQuery('.product-view-button .list').removeClass('active');  
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-12 col-lg-12').addClass('col-md-6 col-lg-4');
    }
    
    if (document.cookie ='productbox=list') {
        jQuery('.product-js').removeClass('product-box');  
        jQuery('.product-js').addClass('product-box-flex');
        jQuery('.product-view-button .grid').removeClass('active');     
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-6 col-lg-4').addClass('col-md-12 col-lg-12');
    }
    
    jQuery('.product-view-button .grid').click(function(){
        document.cookie ='productbox=grid';
        jQuery('.product-js').removeClass('product-box-flex');  
        jQuery('.product-js').addClass('product-box');
        jQuery('.product-view-button .list').removeClass('active');  
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-12 col-lg-12').addClass('col-md-6 col-lg-4');
      
        return false; 
    });
    
    jQuery('.product-view-button .list').click(function(){
        document.cookie ='productbox=list';
        jQuery('.product-js').removeClass('product-box');  
        jQuery('.product-js').addClass('product-box-flex');
        jQuery('.product-view-button .grid').removeClass('active');     
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-6 col-lg-4').addClass('col-md-12 col-lg-12');
    
        return false;
    });

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Anton Shamanov, 2022-04-16
@SilenceOfWinter

if you do not know how to use cookies (to make the value available on all pages of the site, you need to specify `path=/`), then store it in localStorage/webStorage, it is easier to work with them

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question