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 ?
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
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 ?
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?
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
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;
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?
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
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?
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 ?
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
Hello,
Please give me ftp access detail, I will check for you
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 ?
Hi
I have attached public key for you
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?
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;
});
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?
Hello,
username is root
Hi.How are you ?
Please, do you have any news or update ?
Hello,
We will check it and update you as soon as any news
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
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
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 that, thanks for your understanding
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 .
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?
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.
Hello
I have fixed for you
Thanks. Can you tell me which files you've modified ?
I need the information for moving the code to production.
Regards
Hello,
I have edited the following file
app/design/frontend/Mgs/youyou/Magento_Catalog/templates/product/list.phtml