From 105105db0635b621e05966d8cdea9b757d130549 Mon Sep 17 00:00:00 2001 From: Tiago Noronha Date: Mon, 23 Nov 2015 16:35:11 +0000 Subject: [PATCH] Adds support for srcset and sizes attributes in variation images. --- assets/js/frontend/add-to-cart-variation.js | 4 ++++ assets/js/frontend/add-to-cart-variation.min.js | 2 +- includes/class-wc-product-variable.php | 4 ++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/assets/js/frontend/add-to-cart-variation.js b/assets/js/frontend/add-to-cart-variation.js index 576a918c378..64862b94c55 100644 --- a/assets/js/frontend/add-to-cart-variation.js +++ b/assets/js/frontend/add-to-cart-variation.js @@ -451,12 +451,16 @@ $product_img.wc_set_variation_attr( 'src', variation.image_src ); $product_img.wc_set_variation_attr( 'title', variation.image_title ); $product_img.wc_set_variation_attr( 'alt', variation.image_title ); + $product_img.wc_set_variation_attr( 'srcset', variation.image_srcset ); + $product_img.wc_set_variation_attr( 'sizes', variation.image_sizes ); $product_link.wc_set_variation_attr( 'href', variation.image_link ); $product_link.wc_set_variation_attr( 'title', variation.image_caption ); } else { $product_img.wc_reset_variation_attr( 'src' ); $product_img.wc_reset_variation_attr( 'title' ); $product_img.wc_reset_variation_attr( 'alt' ); + $product_img.wc_reset_variation_attr( 'srcset' ); + $product_img.wc_reset_variation_attr( 'sizes' ); $product_link.wc_reset_variation_attr( 'href' ); $product_link.wc_reset_variation_attr( 'title' ); } diff --git a/assets/js/frontend/add-to-cart-variation.min.js b/assets/js/frontend/add-to-cart-variation.min.js index a6e54993965..02416f3c2e0 100644 --- a/assets/js/frontend/add-to-cart-variation.min.js +++ b/assets/js/frontend/add-to-cart-variation.min.js @@ -1,4 +1,4 @@ /*! * Variations Plugin */ -!function(a,b,c,d){a.fn.wc_variation_form=function(){var c=this,d=c.find(".single_variation"),f=c.closest(".product"),g=parseInt(c.data("product_id"),10),h=c.data("product_variations"),i=h===!1,j=!1,k=c.find(".reset_variations"),l=wp.template("variation-template"),m=wp.template("unavailable-variation-template"),n=c.find(".single_variation_wrap");return c.unbind("check_variations update_variation_values found_variation"),c.find(".reset_variations").unbind("click"),c.find(".variations select").unbind("change focusin"),c.on("click",".reset_variations",function(){return c.find(".variations select").val("").change(),c.trigger("reset_data"),!1}).on("hide_variation",function(){return c.find(".single_add_to_cart_button").attr("disabled","disabled").attr("title",wc_add_to_cart_variation_params.i18n_make_a_selection_text),!1}).on("show_variation",function(a,b,d){return d?c.find(".single_add_to_cart_button").removeAttr("disabled").removeAttr("title"):c.find(".single_add_to_cart_button").attr("disabled","disabled").attr("title",wc_add_to_cart_variation_params.i18n_unavailable_text),!1}).on("reload_product_variations",function(){h=c.data("product_variations"),i=h===!1}).on("reset_data",function(){a(".sku").wc_reset_content(),a(".product_weight").wc_reset_content(),a(".product_dimensions").wc_reset_content(),c.trigger("reset_image"),d.slideUp(200).trigger("hide_variation")}).on("reset_image",function(){c.wc_variations_image_update(!1)}).on("change",".variations select",function(){if(c.find('input[name="variation_id"], input.variation_id').val("").change(),c.find(".wc-no-matching-variations").remove(),i){j&&j.abort();var b=!0,d=!1,e={};c.find(".variations select").each(function(){var c=a(this).data("attribute_name")||a(this).attr("name");0===a(this).val().length?b=!1:d=!0,e[c]=a(this).val()}),b?(e.product_id=g,j=a.ajax({url:wc_cart_fragments_params.wc_ajax_url.toString().replace("%%endpoint%%","get_variation"),type:"POST",data:e,success:function(a){a?c.trigger("found_variation",[a]):(c.trigger("reset_data"),c.find(".single_variation").after('

'+wc_add_to_cart_variation_params.i18n_no_matching_variations_text+"

"),c.find(".wc-no-matching-variations").slideDown(200))}})):c.trigger("reset_data"),d?"hidden"===k.css("visibility")&&k.css("visibility","visible").hide().fadeIn():k.css("visibility","hidden")}else c.trigger("woocommerce_variation_select_change"),c.trigger("check_variations",["",!1]),a(this).blur();a(".product.has-default-attributes > .images").fadeTo(200,1),c.trigger("woocommerce_variation_has_changed")}).on("focusin touchstart",".variations select",function(){a(this).find("option:selected").attr("selected","selected"),i||(c.trigger("woocommerce_variation_select_focusin"),c.trigger("check_variations",[a(this).data("attribute_name")||a(this).attr("name"),!0]))}).on("found_variation",function(b,e){var g=f.find(".product_meta").find(".sku"),h=f.find(".product_weight"),i=f.find(".product_dimensions"),j=n.find(".quantity"),k=!0;e.sku?g.wc_set_content(e.sku):g.wc_reset_content(),e.weight?h.wc_set_content(e.weight):h.wc_reset_content(),e.dimensions?i.wc_set_content(e.dimensions):i.wc_reset_content(),c.wc_variations_image_update(e),e.variation_is_visible?(d.html(l({price:e.price_html,availability:e.availability_html,description:e.variation_description})),c.find('input[name="variation_id"], input.variation_id').val(e.variation_id).change()):(d.html(m),c.find('input[name="variation_id"], input.variation_id').val("").change()),"yes"===e.is_sold_individually?(j.find("input.qty").val("1").attr("min","1").attr("max",""),j.hide()):(j.find("input.qty").attr("min",e.min_qty).attr("max",e.max_qty),j.show()),e.is_purchasable&&e.is_in_stock&&e.variation_is_visible||(k=!1),a.trim(d.text())?d.slideDown(200).trigger("show_variation",[e,k]):d.show().trigger("show_variation",[e,k])}).on("check_variations",function(c,f,g){if(!i){var j=!0,k=!1,l={},m=a(this),n=m.find(".reset_variations");m.find(".variations select").each(function(){var b=a(this).data("attribute_name")||a(this).attr("name");0===a(this).val().length?j=!1:k=!0,f&&b===f?(j=!1,l[b]=""):l[b]=a(this).val()});var o=e.find_matching_variations(h,l);if(j){var p=o.shift();p?m.trigger("found_variation",[p]):(m.find(".variations select").val(""),g||m.trigger("reset_data"),b.alert(wc_add_to_cart_variation_params.i18n_no_matching_variations_text))}else m.trigger("update_variation_values",[o]),g||m.trigger("reset_data"),f||d.slideUp(200).trigger("hide_variation");k?"hidden"===n.css("visibility")&&n.css("visibility","visible").hide().fadeIn():n.css("visibility","hidden")}}).on("update_variation_values",function(b,d){i||(c.find(".variations select").each(function(b,c){var e,f=a(c);f.data("attribute_options")||f.data("attribute_options",f.find("option:gt(0)").get()),f.find("option:gt(0)").remove(),f.append(f.data("attribute_options")),f.find("option:gt(0)").removeClass("attached"),f.find("option:gt(0)").removeClass("enabled"),f.find("option:gt(0)").removeAttr("disabled"),e="undefined"!=typeof f.data("attribute_name")?f.data("attribute_name"):f.attr("name");for(var g in d)if("undefined"!=typeof d[g]){var h=d[g].attributes;for(var i in h)if(h.hasOwnProperty(i)){var j=h[i];if(i===e){var k="";d[g].variation_is_active&&(k="enabled"),j?(j=a("
").html(j).text(),j=j.replace(/'/g,"\\'"),j=j.replace(/"/g,'\\"'),f.find('option[value="'+j+'"]').addClass("attached "+k)):f.find("option:gt(0)").addClass("attached "+k)}}}f.find("option:gt(0):not(.attached)").remove(),f.find("option:gt(0):not(.enabled)").attr("disabled","disabled")}),c.trigger("woocommerce_update_variation_values"))}),c.trigger("wc_variation_form"),c};var e={find_matching_variations:function(a,b){for(var c=[],d=0;d1?(d.wc_set_variation_attr("src",a.image_src),d.wc_set_variation_attr("title",a.image_title),d.wc_set_variation_attr("alt",a.image_title),e.wc_set_variation_attr("href",a.image_link),e.wc_set_variation_attr("title",a.image_caption)):(d.wc_reset_variation_attr("src"),d.wc_reset_variation_attr("title"),d.wc_reset_variation_attr("alt"),e.wc_reset_variation_attr("href"),e.wc_reset_variation_attr("title"))},a(function(){"undefined"!=typeof wc_add_to_cart_variation_params&&a(".variations_form").each(function(){a(this).wc_variation_form().find(".variations select:eq(0)").change()})})}(jQuery,window,document); \ No newline at end of file +!function(a,b,c,d){a.fn.wc_variation_form=function(){var c=this,d=c.find(".single_variation"),f=c.closest(".product"),g=parseInt(c.data("product_id"),10),h=c.data("product_variations"),i=h===!1,j=!1,k=c.find(".reset_variations"),l=wp.template("variation-template"),m=wp.template("unavailable-variation-template"),n=c.find(".single_variation_wrap");return c.unbind("check_variations update_variation_values found_variation"),c.find(".reset_variations").unbind("click"),c.find(".variations select").unbind("change focusin"),c.on("click",".reset_variations",function(){return c.find(".variations select").val("").change(),c.trigger("reset_data"),!1}).on("hide_variation",function(){return c.find(".single_add_to_cart_button").attr("disabled","disabled").attr("title",wc_add_to_cart_variation_params.i18n_make_a_selection_text),!1}).on("show_variation",function(a,b,d){return d?c.find(".single_add_to_cart_button").removeAttr("disabled").removeAttr("title"):c.find(".single_add_to_cart_button").attr("disabled","disabled").attr("title",wc_add_to_cart_variation_params.i18n_unavailable_text),!1}).on("reload_product_variations",function(){h=c.data("product_variations"),i=h===!1}).on("reset_data",function(){a(".sku").wc_reset_content(),a(".product_weight").wc_reset_content(),a(".product_dimensions").wc_reset_content(),c.trigger("reset_image"),d.slideUp(200).trigger("hide_variation")}).on("reset_image",function(){c.wc_variations_image_update(!1)}).on("change",".variations select",function(){if(c.find('input[name="variation_id"], input.variation_id').val("").change(),c.find(".wc-no-matching-variations").remove(),i){j&&j.abort();var b=!0,d=!1,e={};c.find(".variations select").each(function(){var c=a(this).data("attribute_name")||a(this).attr("name");0===a(this).val().length?b=!1:d=!0,e[c]=a(this).val()}),b?(e.product_id=g,j=a.ajax({url:wc_cart_fragments_params.wc_ajax_url.toString().replace("%%endpoint%%","get_variation"),type:"POST",data:e,success:function(a){a?c.trigger("found_variation",[a]):(c.trigger("reset_data"),c.find(".single_variation").after('

'+wc_add_to_cart_variation_params.i18n_no_matching_variations_text+"

"),c.find(".wc-no-matching-variations").slideDown(200))}})):c.trigger("reset_data"),d?"hidden"===k.css("visibility")&&k.css("visibility","visible").hide().fadeIn():k.css("visibility","hidden")}else c.trigger("woocommerce_variation_select_change"),c.trigger("check_variations",["",!1]),a(this).blur();a(".product.has-default-attributes > .images").fadeTo(200,1),c.trigger("woocommerce_variation_has_changed")}).on("focusin touchstart",".variations select",function(){a(this).find("option:selected").attr("selected","selected"),i||(c.trigger("woocommerce_variation_select_focusin"),c.trigger("check_variations",[a(this).data("attribute_name")||a(this).attr("name"),!0]))}).on("found_variation",function(b,e){var g=f.find(".product_meta").find(".sku"),h=f.find(".product_weight"),i=f.find(".product_dimensions"),j=n.find(".quantity"),k=!0;e.sku?g.wc_set_content(e.sku):g.wc_reset_content(),e.weight?h.wc_set_content(e.weight):h.wc_reset_content(),e.dimensions?i.wc_set_content(e.dimensions):i.wc_reset_content(),c.wc_variations_image_update(e),e.variation_is_visible?(d.html(l({price:e.price_html,availability:e.availability_html,description:e.variation_description})),c.find('input[name="variation_id"], input.variation_id').val(e.variation_id).change()):(d.html(m),c.find('input[name="variation_id"], input.variation_id').val("").change()),"yes"===e.is_sold_individually?(j.find("input.qty").val("1").attr("min","1").attr("max",""),j.hide()):(j.find("input.qty").attr("min",e.min_qty).attr("max",e.max_qty),j.show()),e.is_purchasable&&e.is_in_stock&&e.variation_is_visible||(k=!1),a.trim(d.text())?d.slideDown(200).trigger("show_variation",[e,k]):d.show().trigger("show_variation",[e,k])}).on("check_variations",function(c,f,g){if(!i){var j=!0,k=!1,l={},m=a(this),n=m.find(".reset_variations");m.find(".variations select").each(function(){var b=a(this).data("attribute_name")||a(this).attr("name");0===a(this).val().length?j=!1:k=!0,f&&b===f?(j=!1,l[b]=""):l[b]=a(this).val()});var o=e.find_matching_variations(h,l);if(j){var p=o.shift();p?m.trigger("found_variation",[p]):(m.find(".variations select").val(""),g||m.trigger("reset_data"),b.alert(wc_add_to_cart_variation_params.i18n_no_matching_variations_text))}else m.trigger("update_variation_values",[o]),g||m.trigger("reset_data"),f||d.slideUp(200).trigger("hide_variation");k?"hidden"===n.css("visibility")&&n.css("visibility","visible").hide().fadeIn():n.css("visibility","hidden")}}).on("update_variation_values",function(b,d){i||(c.find(".variations select").each(function(b,c){var e,f=a(c);f.data("attribute_options")||f.data("attribute_options",f.find("option:gt(0)").get()),f.find("option:gt(0)").remove(),f.append(f.data("attribute_options")),f.find("option:gt(0)").removeClass("attached"),f.find("option:gt(0)").removeClass("enabled"),f.find("option:gt(0)").removeAttr("disabled"),e="undefined"!=typeof f.data("attribute_name")?f.data("attribute_name"):f.attr("name");for(var g in d)if("undefined"!=typeof d[g]){var h=d[g].attributes;for(var i in h)if(h.hasOwnProperty(i)){var j=h[i];if(i===e){var k="";d[g].variation_is_active&&(k="enabled"),j?(j=a("
").html(j).text(),j=j.replace(/'/g,"\\'"),j=j.replace(/"/g,'\\"'),f.find('option[value="'+j+'"]').addClass("attached "+k)):f.find("option:gt(0)").addClass("attached "+k)}}}f.find("option:gt(0):not(.attached)").remove(),f.find("option:gt(0):not(.enabled)").attr("disabled","disabled")}),c.trigger("woocommerce_update_variation_values"))}),c.trigger("wc_variation_form"),c};var e={find_matching_variations:function(a,b){for(var c=[],d=0;d1?(d.wc_set_variation_attr("src",a.image_src),d.wc_set_variation_attr("title",a.image_title),d.wc_set_variation_attr("alt",a.image_title),d.wc_set_variation_attr("srcset",a.image_srcset),d.wc_set_variation_attr("sizes",a.image_sizes),e.wc_set_variation_attr("href",a.image_link),e.wc_set_variation_attr("title",a.image_caption)):(d.wc_reset_variation_attr("src"),d.wc_reset_variation_attr("title"),d.wc_reset_variation_attr("alt"),d.wc_reset_variation_attr("srcset"),d.wc_reset_variation_attr("sizes"),e.wc_reset_variation_attr("href"),e.wc_reset_variation_attr("title"))},a(function(){"undefined"!=typeof wc_add_to_cart_variation_params&&a(".variations_form").each(function(){a(this).wc_variation_form().find(".variations select:eq(0)").change()})})}(jQuery,window,document); \ No newline at end of file diff --git a/includes/class-wc-product-variable.php b/includes/class-wc-product-variable.php index 057a0f0a61b..b489c1ec764 100644 --- a/includes/class-wc-product-variable.php +++ b/includes/class-wc-product-variable.php @@ -563,6 +563,8 @@ class WC_Product_Variable extends WC_Product { $image_link = $full_attachment ? current( $full_attachment ) : ''; $image_title = get_the_title( $attachment_id ); $image_alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ); + $image_srcset = wp_get_attachment_image_srcset( $attachment_id, 'shop_single' ); + $image_sizes = wp_get_attachment_image_sizes( $attachment_id, 'shop_single' ); } else { $image = $image_link = $image_title = $image_alt = ''; } @@ -583,6 +585,8 @@ class WC_Product_Variable extends WC_Product { 'image_link' => $image_link, 'image_title' => $image_title, 'image_alt' => $image_alt, + 'image_srcset' => $image_srcset, + 'image_sizes' => $image_sizes, 'price_html' => apply_filters( 'woocommerce_show_variation_price', $variation->get_price() === "" || $this->get_variation_price( 'min' ) !== $this->get_variation_price( 'max' ), $this, $variation ) ? '' . $variation->get_price_html() . '' : '', 'availability_html' => $availability_html, 'sku' => $variation->get_sku(),