修改size生成位置样式

app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/form.phtml

@@ -40,6 +40,21 @@
     </form>
 </div>
 
+<script>
+
+    require([
+        'jquery'
+    ], function ($) {
+        $(document).on('click','.swatch-option,.text',function (){
+            if ($('.swatch-attribute-selected-option-size-content .swatch-attribute-selected-option').text().length>0){
+                $('.swatch-attribute-selected-option-size-content').show();
+            }else {
+                $('.swatch-attribute-selected-option-size-content').hide();
+            }
+        });
+
+    });
+</script>
 
 <script type="text/x-magento-init">
     {

app/design/frontend/Joshine/breeze/Magento_Swatches/web/js/swatch-renderer.js

@@ -429,12 +429,16 @@ define([
                         tem_size = "<div  id=\"product-intro__freeshipping-more-3\"  >" +
                             "<a href=\"javascript:void(0);\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.5 8.5V15.5H5.31045V13.75C5.31045 13.3358 5.64623 13 6.06045 13C6.47466 13 6.81045 13.3358 6.81045 13.75V15.5H9.31045V11.75C9.31045 11.3358 9.64623 11 10.0604 11C10.4747 11 10.8104 11.3358 10.8104 11.75V15.5H13.3104V13.75C13.3104 13.3358 13.6462 13 14.0604 13C14.4747 13 14.8104 13.3358 14.8104 13.75V15.5H17.3104V11.75C17.3104 11.3358 17.6462 11 18.0604 11C18.4747 11 18.8104 11.3358 18.8104 11.75V15.5H20.5V8.5H3.5ZM14.0604 17H18.0604H21C21.5523 17 22 16.5523 22 16V8C22 7.44772 21.5523 7 21 7H3C2.44772 7 2 7.44772 2 8V16C2 16.5523 2.44772 17 3 17H6.06045H10.0604H14.0604Z\" fill=\"#5D626A\"></path></svg> Size Guide</a></div>";
                         label += tem_size;
+                        label += '<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' +
+                            $('<i></i>').text(item.label).html() +
+                            '</span>';
+                    }else{
+                        label +=
+                            '<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' +
+                            $('<i></i>').text(item.label).html() +
+                            '</span>'+ '<span class="' + classes.attributeSelectedOptionLabelClass + '"></span>' ;
                     }
-                    label +=
-                        '<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' +
-                        $('<i></i>').text(item.label).html() +
-                        '</span>' +
-                        '<span class="' + classes.attributeSelectedOptionLabelClass + '"></span>';
+
                 }
 
                 if ($widget.inProductList) {
@@ -444,23 +448,43 @@ define([
                 } else {
                     listLabel = 'aria-labelledby="' + controlLabelId + '"';
                 }
-
-                // Create new control
-                container.append(
-                    '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
-                         'data-attribute-code="' + item.code + '" ' +
-                         'data-attribute-id="' + item.id + '">' +
+                if (item.label.toLowerCase() == "size") {
+                    // Create new control
+                    var sizeContent = '<div class="swatch-attribute-selected-option-size-content" style="margin-top: 0.13333rem;padding: 0.26667rem;background-color: #f7f7f7;display: none;"><div style="font-size:.32rem;color:#999999;">Product Measurements</div>'+'<span style="color:#0a0a0a;" class="'+classes.attributeSelectedOptionLabelClass + '"></span></div>';
+
+                    container.append(
+                        '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
+                        'data-attribute-code="' + item.code + '" ' +
+                        'data-attribute-id="' + item.id + '">' +
+                        label +
+                        '<div aria-activedescendant="" ' +
+                        'tabindex="0" ' +
+                        'aria-invalid="false" ' +
+                        'aria-required="true" ' +
+                        'role="listbox" ' + listLabel +
+                        'class="' + classes.attributeOptionsWrapper + ' clearfix">' +
+                        options + select +
+                        '</div>'+ sizeContent + input +
+                        '</div>'
+                    );
+                }else{
+                    container.append(
+                        '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
+                        'data-attribute-code="' + item.code + '" ' +
+                        'data-attribute-id="' + item.id + '">' +
                         label +
                         '<div aria-activedescendant="" ' +
-                             'tabindex="0" ' +
-                             'aria-invalid="false" ' +
-                             'aria-required="true" ' +
-                             'role="listbox" ' + listLabel +
-                             'class="' + classes.attributeOptionsWrapper + ' clearfix">' +
-                            options + select +
+                        'tabindex="0" ' +
+                        'aria-invalid="false" ' +
+                        'aria-required="true" ' +
+                        'role="listbox" ' + listLabel +
+                        'class="' + classes.attributeOptionsWrapper + ' clearfix">' +
+                        options + select +
                         '</div>' + input +
-                    '</div>'
-                );
+                        '</div>'
+                    );
+                }
+
 
                 $widget.optionsMap[item.id] = {};
 

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -2163,7 +2163,15 @@ button.action.submit.primary {
   white-space: nowrap;
 }
 
-
+@media (max-width: 768px){
+  span.swatch-attribute-selected-option{
+    margin-left: 0!important;
+    line-height:.53333rem;
+    font-size: .32rem;
+    text-transform:capitalize;
+    color: #0a0a0a;
+  }
+}
 
 #product-intro__freeshipping-more-3{
   display: inline-block;