Okay
  Public Ticket #2367445
Bug with color swatches.
Closed

Comments

  • bfsnetwork started the conversation

    Hello,
    There seems to be an issue with Magento 2.3.4 , the caching system and the template.
    Once the eav, collection and config are enabled, the color swatches are referencing the wrong products and some of the color variations disappear.
    We applied to the patches included in the templates : it didn't changed much.
    We opened a ticket before and provided some credentials to login the website. It was closed and we didn't hear from your developper.

    This is a very urgent issue as the speed of our website is crucial to our users . Could please respond ?

  • [deleted] replied

    Hello,

    Thanks for your ticket,

    Have you checked on Luma theme yet? Please check it with Luma theme first and make sure the swatches is still working fine then if the swatches is working fine on Luma, please give me your site info ( admin url, admin account and ftp ) we will check. Also you are using dev site: https://staging.sabotyouyou.com/ or https://sabotyouyou.com

  •   bfsnetwork replied privately
  • [deleted] replied

    Hello,

    Please give me ftp access detail, I will check for you

  • bfsnetwork replied

    Hello, we are using digital ocean as hosting platform. Could generate a ssh key - following the instructions here - and let us add you to ssh keys configuration files ?

  • [deleted] replied

    Hi

    I have attached public key for you

  •   bfsnetwork replied privately
  • [deleted] replied

    Hello,

    Thanks for your reply

    I have checked but I don't see the problem, I switched to Luma and compare with Claue, it is the same on both, could you please show the errors so that I can check?

  • bfsnetwork replied

    Hello, 

    thanks for the reply. 

    I've included to pictures from prod and staging to explain the issue. On prod - the first picture the collection, data eav cache are disabled . All of the swatches are displayed.
    On staging - all the caches are enabled and the cache is cleared - some swatches are missing .

    On a side note, one of our developers developed a custom module which is here

    /var/www/html/magento2/app/code/You/Outofstock . it has a 


    /var/www/html/magento2/app/code/You/Outofstock/view/frontend/web/js/product_status.js file 


    which has the following code . does it conflict with your theme 



    define([
      'jquery',
      'underscore',
      'mage/template',
      'mage/translate',
      'priceUtils',
      'priceBox',
      'jquery-ui-modules/widget',
      'jquery/jquery.parsequery'
    ], function ($) {
        'use strict';

        $.widget('product.status', {
        options: {
        },
        _create: function () {
            this._bind();

        },
        _bind: function() {
            var options = this.options;
            var select = $('.swatch-option')
            var id = $('[name="selected_configurable_option"]');
            var selected_configurable_option = $('.swatch-attribute');
            var self = this;
            setTimeout(function() {
              self.setSwatchStatusOnLoad(options);
            }, 2000);
            jQuery(document).on('click', '.swatch-option',function(){
                  let product_ids_selected = self.getProductIdSelected();
                  jQuery('div.swatch-option').removeClass('out-of-stock');
                  self.setSwatchStatusOnLoad(options);

                  if(product_ids_selected.length > 0){
                    let product_id_selected = product_ids_selected[0];
                    if(typeof options[product_id_selected] !== 'undefined') {
                        if (options[product_id_selected].is_in_stock == 0) {
                          //  self.addStatusToSwatch(options);
                            self._toggleShow(0);
                        } else {
                            self._toggleShow(1);
                        }
                    }
                  }
                  else{
                    self.addStatusToSwatch(options);
                  }
            });

        },
        setSwatchStatusOnLoad:function(options){

          let attributes = jQuery('[data-role=swatch-options]').data('mageSwatchRenderer').options.jsonConfig.attributes;
          var product_id_index = jQuery('[data-role=swatch-options]').data('mageSwatchRenderer').options.jsonConfig.index;
                    let out_of_stock_option_ids = [];
                    let in_stock_option_ids = [];
          jQuery.each(attributes, function(attribute_index, attribute){
              jQuery.each(product_id_index, function(product_id,attributes){
                  let option_id = product_id_index[product_id][attribute.id];
                  let option_div_id = "option-label-"+attribute.code+'-'+attribute.id+'-item-'+option_id;
                  if(options[product_id] && options[product_id].is_in_stock == 0){ //Push to out of stock array if not exists in instock array
                    if(!out_of_stock_option_ids.includes(option_div_id)
                    && !in_stock_option_ids.includes(option_div_id)  )
                    out_of_stock_option_ids.push(option_div_id);
                  }
                  else{ //Remove from stock array & push to instock array
                    if(out_of_stock_option_ids.includes(option_div_id)){
                      let indexOfOptionId = out_of_stock_option_ids.indexOf(option_div_id);
                  out_of_stock_option_ids.splice(indexOfOptionId,1);
                    }
                    if(!in_stock_option_ids.includes(option_div_id) ){
                      in_stock_option_ids.push(option_div_id)
                    }
                  }

              });

          });

          //To grey out the out of stock swatches
          if(in_stock_option_ids.length > 0){
            jQuery.each(out_of_stock_option_ids, function(out_of_stock_option_id_index, out_of_stock_option_id){
              jQuery('#'+out_of_stock_option_id).addClass('out-of-stock');
            });
          }

        },

        addStatusToSwatch:function(options){

          //To find the selected attribute
          let selected_attribute_id = null;
          let selected_option_id = null;
          var selected_options = {};
          jQuery('div.swatch-attribute').each(function(k,v){
              selected_option_id = jQuery(v).attr('option-selected');
              if(selected_option_id){
                selected_attribute_id  = jQuery(v).attr('attribute-id');
                selected_options[selected_attribute_id] = selected_option_id;
              }
          });

          //To add stock status for the attribute not chosen
          jQuery('div.swatch-option').each(function(k,v){
              var swatch_id    = jQuery(v).attr('id').split('-');
              var attribute_id    = swatch_id[3];
              var option_id    = swatch_id[5];
              if(selected_attribute_id !== attribute_id && selected_option_id !== option_id ){

                selected_options[attribute_id] = option_id;
                var product_id_index = jQuery('[data-role=swatch-options]').data('mageSwatchRenderer').options.jsonConfig.index;

                jQuery.each(product_id_index, function(product_id,attributes){

                    var productIsSelected = function(attributes, selected_options){
                        return _.isEqual(attributes, selected_options);
                    }
                    if(productIsSelected(attributes, selected_options) && options[product_id] && options[product_id].is_in_stock == 0){
                      jQuery(v).addClass('out-of-stock');
                    }
                });
              }
          });
        },
        getProductIdSelected:function(){
            var selected_options = {};
            jQuery('div.swatch-attribute').each(function(k,v){
                var attribute_id    = jQuery(v).attr('attribute-id');
                var option_selected = jQuery(v).attr('option-selected');
                if(!attribute_id || !option_selected){ return;}
                selected_options[attribute_id] = option_selected;
            });

            //Find the product id of the selected option
            var product_id_index = jQuery('[data-role=swatch-options]').data('mageSwatchRenderer').options.jsonConfig.index;
            var found_ids = [];
            jQuery.each(product_id_index, function(product_id,attributes){
                var productIsSelected = function(attributes, selected_options){
                    return _.isEqual(attributes, selected_options);
                }
                if(productIsSelected(attributes, selected_options)){
                    found_ids.push(product_id);
                }
            });
            return found_ids;
        },
        _toggleShow: function (inStock) {
            if (inStock) {
                $('.box-tocart').removeClass('no-display');
                $('.box-out-of-stock').addClass('no-display');
            } else if(!inStock) {
                $('.box-tocart').addClass('no-display');
                $('.box-out-of-stock').removeClass('no-display');
            }
        }

    });
    return $.product.status;

    });


  • [deleted] replied

    Hello,

    Thanks for your info,

    I see, I want to access to sftp but seem you forgot to give me username, I see host, port and I have private key but the username is missing, could you please give me? 

  • bfsnetwork replied

    Hello,

    username is root

  • bfsnetwork replied

    Hi.How are you ?
    Please, do you have any news or update ?

  • [deleted] replied

    Hello,

    We will check it and update you as soon as any news

  • [deleted] replied

    Hello,

    Sorry for slight delay to you,

    I am working to check but  where did you disable/enable these "collection, data & eav"? Seem you disabled them on staging, now the swatches are working fine

  • bfsnetwork replied

    Yes , i've modified the file to add another jquery ui dependency and enabled all the cache. It seems to have fixed it. 

    Here is the modification.

    "

        //    'jquery/ui',
        'jquery-ui-modules/tooltip',
        'jquery-ui-modules/widget',"


    I would like now to disable the ajax swatches , and have the swatches linking directly to the selected color on the product page.

    Can you please show a way to revert to the non ajax magento swatches if necessary ?

    Thanks

  • [deleted] replied

    Hello,

    Thanks for your shared,

    About how to disable the ajax swatches and have the swatches linking directly to the selected color on the product page.

    Sorry I have no idea how to do thatthanks for your understanding

  • bfsnetwork replied

    Hello. 

    It seems like the bug i've mentionned before is back.  

    The swatches on the category page and the product page are misbehaving.

    Once all the caches are enabled, the color swatches are misbehaving and are loading the wrong color and the wrong image.

    I did switch to luma and the swatches were loading correctly

    Switched to claue : same bug.

    Switched to YouYou ( a children theme of Claue ) : same bug.

    Please find a video describing the issue below .

    https://www.youtube.com/watch?v=GIM0ZagcUEg


    Could please help us fix it ?  or show us the way to load the swatches the way luma does ?

    I am avail
    Thanks .


  • [deleted] replied

    Hello,

    Thanks for your reply,

    Really strange because I can make sure that all of our customer use Magento Cache, or cache extension, Vanish Cache,.... but I have never heard about this issue before! So could you please share detail what cache are you mentioning? It is in SYSTEM -> Cache Management?

  • bfsnetwork replied

    yes. Once all the caches are enabled the issue shown in this video appears. 

    Once the collections, eav and config caches are disabled the color swatches go back to their normal behavior. 

    It also doesn't happen with luma. 

  • [deleted] replied

    Hello

    I have fixed for you

  • bfsnetwork replied

    Thanks. Can you tell me which files you've modified ?
    I need the information for moving the code to production.

    Regards

  • [deleted] replied

    Hello,

    I have edited the following file

    app/design/frontend/Mgs/youyou/Magento_Catalog/templates/product/list.phtml