Skip to content

Improve cls pdp screen #33265

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 28 commits into from
Closed

Improve cls pdp screen #33265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
9b224ac
Improve CLS avoid shift layout pdp screen
mrtuvn Oct 30, 2022
42e7879
Merge branch '2.4-develop' into improve-pdp-cls
mrtuvn Mar 16, 2023
ef82b86
Merge branch '2.4-develop' into improve-pdp-cls
ihor-sviziev Mar 17, 2023
95a8aa9
Update code for avoid gallery jump while load
mrtuvn Apr 8, 2023
3c121d5
Merge branch 'improve-pdp-cls' of https://github.com/mrtuvn/magento2 …
mrtuvn Apr 8, 2023
c85c9d7
Merge branch '2.4-develop' into improve-pdp-cls
mrtuvn Apr 8, 2023
31e34e8
fix code styles less
mrtuvn May 9, 2023
9a5fe3e
Merge branch '2.4-develop' into improve-pdp-cls
mrtuvn May 10, 2023
3ee7ee9
fix code validate
mrtuvn May 10, 2023
55c9d18
Update _module.less
mrtuvn May 10, 2023
c685f1c
Check code standards validate
mrtuvn Jun 13, 2023
e32b691
Remove unnecessary reorder block
mrtuvn Jun 25, 2023
eff0741
Merge branch '2.4-develop' into improve-pdp-cls
mrtuvn Jun 25, 2023
ec0496e
Merge branch '2.4-develop' into improve-pdp-cls
engcom-Hotel Jul 6, 2023
56eb754
Merge branch '2.4-develop' into improve-pdp-cls
engcom-Hotel Jul 10, 2023
25217f3
Fix MFTF error CSS or XPath or Regex element was not found
glo24157 Jul 10, 2023
40f23bc
Merge branch '2.4-develop' into improve-pdp-cls
engcom-Hotel Jul 18, 2023
9d15e4e
Fix Funtional test CE
glo24157 Jul 20, 2023
7366b83
Resolve MFTF Test failues due to wrong selectors
glo24157 Jul 24, 2023
49ef004
Merge branch '2.4-develop' into improve-pdp-cls
engcom-Hotel Jul 31, 2023
3ce830e
Merge branch '2.4-develop' into improve-pdp-cls
mrtuvn Aug 19, 2023
dd896d0
Update _module.less
mrtuvn Aug 19, 2023
af7e790
Merge branch '2.4-develop' into improve-pdp-cls
engcom-Charlie Aug 29, 2023
eaa783c
Fixed statis test failure
engcom-Charlie Aug 29, 2023
b3c58f9
Merge branch '2.4-develop' into improve-pdp-cls
engcom-Charlie Aug 30, 2023
43127c2
Fixed the functional test
engcom-Charlie Aug 30, 2023
a70d967
Merge branch '2.4-develop' into improve-pdp-cls
engcom-Charlie Aug 31, 2023
e97263c
Merge branch '2.4-develop' into improve-pdp-cls
mrtuvn Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/code/Magento/Bundle/Test/Mftf/Section/StorefrontProductInfoMainSection.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<element name="minPrice" type="text" selector="span[data-price-type='minPrice']"/>
<element name="maxPrice" type="text" selector="span[data-price-type='minPrice']"/>
<element name="asLowAsFinalPrice" type="text" selector="div.price-box.price-final_price p.minimal-price > span.price-final_price span.price"/>
<element name="fixedFinalPrice" type="text" selector="div.price-box.price-final_price > span.price-final_price span.price"/>
<element name="fixedFinalPrice" type="text" selector="div.price-box.price-final_price p.price-from span.price-final_price span.price-wrapper span.price"/>
<element name="productBundleOptionsCheckbox" type="checkbox" selector="//*[@id='product-options-wrapper']//div[@class='fieldset']//label[contains(.,'{{childName}}')]/../input" parameterized="true" timeout="30"/>
<element name="productBundleOneOptionInput" type="input" selector="//*[@id='product-options-wrapper']//div[@class='fieldset']//label[contains(.,'{{childName}}')]/..//input[contains(@class, 'option')]" parameterized="true" timeout="30"/>
<element name="productBundleOptionQty" type="input" selector="//*[@id='product-options-wrapper']//div[@class='fieldset']//label[contains(.,'{{childName}}')]/..//input[contains(@class, 'qty')]" parameterized="true" timeout="30"/>
Expand Down
4 changes: 2 additions & 2 deletions ...ento/Catalog/Test/Mftf/ActionGroup/AssertProductImageStorefrontProductPageActionGroup.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

<seeInCurrentUrl url="/{{product.urlKey}}.html" stepKey="checkUrl"/>
<waitForPageLoad stepKey="waitForPageLoad"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFile(image.filename)}}" stepKey="waitForImage"/>
<seeElement selector="{{StorefrontProductMediaSection.imageFile(image.filename)}}" stepKey="seeImage"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFileInGallery(image.filename)}}" stepKey="waitForImage"/>
<seeElement selector="{{StorefrontProductMediaSection.imageFileInGallery(image.filename)}}" stepKey="seeImage"/>
</actionGroup>
</actionGroups>
4 changes: 2 additions & 2 deletions app/code/Magento/Catalog/Test/Mftf/Section/StorefrontProductInfoMainSection.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
<element name="oldPriceTag" type="text" selector=".old-price .price-label"/>
<element name="oldPriceAmount" type="text" selector=".old-price span.price"/>
<element name="productStockStatus" type="text" selector=".stock[title=Availability]>span"/>
<element name="productImage" type="text" selector="//*[@id='maincontent']//div[@class='gallery-placeholder']//img[@class='fotorama__img']"/>
<element name="productImageSrc" type="text" selector="//*[@id='maincontent']//div[@class='gallery-placeholder']//img[contains(@src, '{{src}}')]" parameterized="true"/>
<element name="productImage" type="text" selector="//*[@id='maincontent']//div[@class='gallery-placeholder']//img[contains(@class, 'fotorama__img')]"/>
<element name="productImageSrc" type="text" selector="//*[@id='maincontent']//div[@class='gallery-placeholder']//img[contains(@class, 'fotorama__img')][contains(@src, '{{src}}')]" parameterized="true"/>
<element name="productDescription" type="text" selector="#description .value"/>
<element name="productOptionFieldInput" type="input" selector="//*[@id='product-options-wrapper']//div[@class='fieldset']//label[contains(.,'{{var1}}')]/../div[@class='control']//input[@type='text']" parameterized="true"/>
<element name="productOptionAreaInput" type="textarea" selector="//*[@id='product-options-wrapper']//div[@class='fieldset']//label[contains(.,'{{var1}}')]/../div[@class='control']//textarea" parameterized="true"/>
Expand Down
3 changes: 2 additions & 1 deletion app/code/Magento/Catalog/Test/Mftf/Section/StorefrontProductMediaSection.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
<element name="productImage" type="text" selector="//*[@data-gallery-role='gallery' and not(contains(@class, 'fullscreen'))]//img[contains(@src, '{{filename}}') and not(contains(@class, 'full'))]" parameterized="true" />
<element name="productImageFullscreen" type="text" selector="//*[@data-gallery-role='gallery' and contains(@class, 'fullscreen')]//img[contains(@src, '{{filename}}') and contains(@class, 'full')]" parameterized="true" />
<element name="closeFullscreenImage" type="button" selector="//*[@data-gallery-role='gallery' and contains(@class, 'fullscreen')]//*[@data-gallery-role='fotorama__fullscreen-icon']" />
<element name="imageFile" type="text" selector="//*[@class='product media']//img[contains(@src, '{{filename}}')]" parameterized="true"/>
<element name="imageFile" type="text" selector="//div[contains(@class, 'fotorama__active')]//img[contains(@src, '{{filename}}')]" parameterized="true"/>
<element name="imageFileInGallery" type="text" selector="//div[contains(@class, 'fotorama__loaded--img')]//img[contains(@src, '{{filename}}')]" parameterized="true"/>
<element name="productImageActive" type="text" selector=".product.media div[data-active=true] > img[src*='{{filename}}']" parameterized="true"/>
<element name="productImageInFotorama" type="file" selector=".fotorama__nav__shaft img[src*='{{imageName}}']" parameterized="true" timeout="30"/>
<element name="fotoramaPrevButton" type="button" selector="//*[@data-gallery-role='gallery']//*[@data-gallery-role='nav-wrap']//*[@data-gallery-role='arrow' and contains(@class, 'fotorama__thumb__arr--left')]" timeout="30"/>
Expand Down
12 changes: 6 additions & 6 deletions ...ento/Catalog/Test/Mftf/Test/AdminSimpleProductImagesTest/AdminSimpleProductImagesTest.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,12 +110,12 @@
<waitForPageLoad stepKey="waitForStorefront"/>

<!-- See all of the images that we uploaded -->
<waitForElement selector="{{StorefrontProductMediaSection.imageFile('small')}}" stepKey="seeSmall"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFile('medium')}}" stepKey="seeMedium"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFile('large')}}" stepKey="seeLarge"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFile('gif')}}" stepKey="seeGif"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFile('jpg')}}" stepKey="seeJpg"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFile('png')}}" stepKey="seePng"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFileInGallery('small')}}" stepKey="seeSmall"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFileInGallery('medium')}}" stepKey="seeMedium"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFileInGallery('large')}}" stepKey="seeLarge"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFileInGallery('gif')}}" stepKey="seeGif"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFileInGallery('jpg')}}" stepKey="seeJpg"/>
<waitForElement selector="{{StorefrontProductMediaSection.imageFileInGallery('png')}}" stepKey="seePng"/>

<!-- Go to the category page and see a placeholder image for the second product -->
<amOnPage url="$$category.custom_attributes[url_key]$$.html" stepKey="goToCategoryPage"/>
Expand Down
8 changes: 4 additions & 4 deletions app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</referenceBlock>

<referenceContainer name="content">
<container name="product.info.main" htmlTag="div" htmlClass="product-info-main" before="-">
<container name="product.info.main" htmlTag="div" htmlClass="product-info-main" before="product.info.details">
<container name="product.info.price" label="Product info auxiliary container" htmlTag="div" htmlClass="product-info-price">
<container name="product.info.stock.sku" label="Product auxiliary info" htmlTag="div" htmlClass="product-info-stock-sku">
<container name="product.info.type" before="-"/>
Expand Down Expand Up @@ -111,14 +111,14 @@
</arguments>
</block>
</container>
<container name="product.info.media" htmlTag="div" htmlClass="product media" after="product.info.main">
<container name="product.info.media" htmlTag="div" htmlClass="product media" before="product.info.main">
<block class="Magento\Framework\View\Element\Template" name="skip_gallery_after.target" before="skip_gallery_before.wrapper" template="Magento_Theme::html/skiptarget.phtml">
<arguments>
<argument name="target_id" xsi:type="string">gallery-prev-area</argument>
</arguments>
</block>
<container name="skip_gallery_before.wrapper" htmlTag="div" htmlClass="action-skip-wrapper">
<block class="Magento\Framework\View\Element\Template" before="product.info.media.image" name="skip_gallery_before" template="Magento_Theme::html/skip.phtml">
<block class="Magento\Framework\View\Element\Template" name="skip_gallery_before" template="Magento_Theme::html/skip.phtml">
<arguments>
<argument name="target" xsi:type="string">gallery-next-area</argument>
<argument name="label" translate="true" xsi:type="string">Skip to the end of the images gallery</argument>
Expand All @@ -132,7 +132,7 @@
</arguments>
</block>
<container name="skip_gallery_after.wrapper" htmlTag="div" htmlClass="action-skip-wrapper">
<block class="Magento\Framework\View\Element\Template" after="product.info.media.image" name="skip_gallery_after" template="Magento_Theme::html/skip.phtml">
<block class="Magento\Framework\View\Element\Template" name="skip_gallery_after" template="Magento_Theme::html/skip.phtml">
<arguments>
<argument name="target" xsi:type="string">gallery-prev-area</argument>
<argument name="label" translate="true" xsi:type="string">Skip to the beginning of the images gallery</argument>
Expand Down
7 changes: 6 additions & 1 deletion app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
* Product media data template
*
* @var $block \Magento\Catalog\Block\Product\View\Gallery
* @var $escaper \Magento\Framework\Escaper
*/
?>

Expand All @@ -25,6 +26,8 @@ $helper = $block->getData('imageHelper');
$mainImageData = $mainImage ?
$mainImage->getData('medium_image_url') :
$helper->getDefaultPlaceholderUrl('image');
$imageWidth = $block->getImageAttribute('product_page_image_medium', 'width');
$imageHeight = $block->getImageAttribute('product_page_image_medium', 'height');

?>

Expand All @@ -33,9 +36,11 @@ $mainImageData = $mainImage ?
alt="main product photo"
class="gallery-placeholder__image"
src="<?= /* @noEscape */ $mainImageData ?>"
<?= $imageWidth ? 'width="'. $escaper->escapeHtmlAttr($imageWidth) .'"' : '' ?>
<?= $imageHeight ? 'height="'. $escaper->escapeHtmlAttr($imageHeight) .'"' : '' ?>
/>
</div>

<?php // phpcs:ignore Magento2.Legacy.PhtmlTemplate ?>
<script type="text/x-magento-init">
{
"[data-gallery-role=gallery-placeholder]": {
Expand Down
51 changes: 18 additions & 33 deletions app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/_module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,15 +152,8 @@

.additional-attributes {
width: auto;
.lib-table-bordered(
@_table_type: clear
);
.lib-table-resize(
@_th-padding-left: 0,
@_th-padding-right: @indent__l,
@_th-padding-bottom: @indent__s,
@_td-padding-bottom: @indent__s
);
.lib-table-bordered(@_table_type: clear);
.lib-table-resize(@_th-padding-left: 0, @_th-padding-right: @indent__l, @_th-padding-bottom: @indent__s, @_td-padding-bottom: @indent__s);
}
}

Expand Down Expand Up @@ -323,14 +316,7 @@
.legend {
&:after {
content: '*';
.lib-typography(
@_font-size: @form-field-label-asterisk__font-size,
@_color: @form-field-label-asterisk__color,
@_font-family: @form-field-label-asterisk__font-family,
@_font-weight: @form-field-label-asterisk__font-weight,
@_line-height: @form-field-label-asterisk__line-height,
@_font-style: @form-field-label-asterisk__font-style
);
.lib-typography(@_font-size: @form-field-label-asterisk__font-size, @_color: @form-field-label-asterisk__color, @_font-family: @form-field-label-asterisk__font-family, @_font-weight: @form-field-label-asterisk__font-weight, @_line-height: @form-field-label-asterisk__line-height, @_font-style: @form-field-label-asterisk__font-style);
}
}
}
Expand Down Expand Up @@ -434,10 +420,7 @@

.action.tocompare {
&:extend(.abs-actions-addto all);
.lib-icon-font-symbol(
@_icon-font-content: @icon-compare-full,
@_icon-font-position: before
);
.lib-icon-font-symbol(@_icon-font-content: @icon-compare-full, @_icon-font-position: before);
}
}

Expand Down Expand Up @@ -617,12 +600,14 @@
}
}

/**
* @codingStandardsIgnoreStart
*/
//
// Mobile @screen__s
// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {

.product-info-price {
Copy link
Contributor Author

@mrtuvn mrtuvn Aug 23, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seem static check failed at this point! In my point of view this code below totally valid

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

*:first-child totally valid syntax but core validate marked as failed/warning

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

previously i have removed this code but i have changed my minds just in case it's can make regression bugs later. So i have reverted and add it back but afterwards magento code standards yells at this line as invalid code styles

margin: 0 -@indent__s 0;
width: ~'calc(100% + 2*@{indent__s})' !important;
Expand All @@ -642,7 +627,7 @@
}
}
}

//@codingStandardsIgnoreEnd
//
// Desktop
// _____________________________________________
Expand Down Expand Up @@ -1014,6 +999,10 @@
display: none;
}


/**
* @codingStandardsIgnoreStart
*/
.catalog-product_compare-index {
.columns {
.column {
Expand All @@ -1023,6 +1012,7 @@
}
}
}
//@codingStandardsIgnoreEnd
}

//
Expand All @@ -1036,16 +1026,7 @@

.action.compare {
line-height: @form-element-input__height;
.lib-link(
@_link-color: @primary__color,
@_link-text-decoration: none,
@_link-color-visited: @primary__color,
@_link-text-decoration-visited: none,
@_link-color-hover: @primary__color,
@_link-text-decoration-hover: underline,
@_link-color-active: @primary__color,
@_link-text-decoration-active: underline
);
.lib-link(@_link-color: @primary__color, @_link-text-decoration: none, @_link-color-visited: @primary__color, @_link-text-decoration-visited: none, @_link-color-hover: @primary__color, @_link-text-decoration-hover: underline, @_link-color-active: @primary__color, @_link-text-decoration-active: underline);
}

.counter.qty {
Expand Down Expand Up @@ -1095,6 +1076,9 @@
}
}

/**
* @codingStandardsIgnoreStart
*/
//
// Desktop large
// _____________________________________________
Expand All @@ -1106,3 +1090,4 @@
}
}
}
//@codingStandardsIgnoreEnd
2 changes: 2 additions & 0 deletions lib/web/css/source/lib/_breadcrumbs.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
@_breadcrumbs-display: @breadcrumbs__display,
@_breadcrumbs-container-margin: @breadcrumbs__container-margin,
@_breadcrumbs-padding: @breadcrumbs__padding,
@_breadcrumbs-min-height: @breadcrumbs__min-height,

// Breadcrumbs separating symbol
@_breadcrumbs-separator-symbol: @breadcrumbs-separator__symbol,
Expand Down Expand Up @@ -74,6 +75,7 @@
@_breadcrumbs-link-gradient-color-end-active: @breadcrumbs-link__active__gradient-color-end
) {
.lib-css(margin, @_breadcrumbs-container-margin);
.lib-css(min-height, @_breadcrumbs-min-height);
.items {
.lib-font-size(@_breadcrumbs-font-size);
.lib-css(color, @_breadcrumbs-current-color);
Expand Down
1 change: 1 addition & 0 deletions lib/web/css/source/lib/variables/_breadcrumbs.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
@breadcrumbs__display: false;
@breadcrumbs__container-margin: 0 0 @indent__base;
@breadcrumbs__padding: false;
@breadcrumbs__min-height: 24px;

@breadcrumbs-separator__symbol: false;
@breadcrumbs-separator__color: @breadcrumbs-current__color;
Expand Down
28 changes: 10 additions & 18 deletions lib/web/mage/gallery/gallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ define([
var mainIndex;

if (_.every(data, function (item) {
return _.isObject(item);
})
return _.isObject(item);
})
) {
mainIndex = _.findIndex(data, function (item) {
return item.isMain;
Expand Down Expand Up @@ -122,7 +122,7 @@ define([

this.settings = {
$element: $(element),
$pageWrapper: $('body>.page-wrapper'),
$pageWrapper: $('.page-wrapper'),
currentConfig: config,
defaultConfig: _.clone(config),
fullscreenConfig: _.clone(config.fullscreen),
Expand Down Expand Up @@ -277,16 +277,15 @@ define([
}),
mainImageIndex,
$element = settings.$element,
$fotoramaElement,
$fotoramaStage;
$fotoramaElement;

if (settings.breakpoints) {
_.each(_.values(settings.breakpoints), function (breakpoint) {
var conditions;

_.each(_.pairs(breakpoint.conditions), function (pair) {
conditions = conditions ? conditions + ' and (' + pair[0] + ': ' + pair[1] + ')' :
'(' + pair[0] + ': ' + pair[1] + ')';
'(' + pair[0] + ': ' + pair[1] + ')';
});
breakpoints[conditions] = breakpoint.options;
});
Expand All @@ -308,20 +307,13 @@ define([

$fotoramaElement = $element.find('[data-gallery-role="gallery"]');

$fotoramaStage = $fotoramaElement.find('.fotorama__stage');
$fotoramaStage.css('position', 'absolute');

$fotoramaElement.fotorama(config);
$fotoramaElement.find('.fotorama__stage__frame.fotorama__active')
.one('f:load', function () {
// Remove placeholder when main gallery image loads.
$element.find('.gallery-placeholder__image').remove();
$element
.removeClass('_block-content-loading')
.css('min-height', '');

$fotoramaStage.css('position', '');
});
.one('f:load', function () {
$element
.removeClass('_block-content-loading')
.css('min-height', '');
});
settings.$elementF = $fotoramaElement;
settings.fotoramaApi = $fotoramaElement.data('fotorama');

Expand Down
18 changes: 18 additions & 0 deletions lib/web/mage/gallery/gallery.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -867,6 +867,10 @@
}

.fotorama__nav-wrap--horizontal {
&.fotorama__nav-wrap {
min-height: 30px;
}

.fotorama__thumb__arr--left,
.fotorama__thumb__arr--right {
bottom: 0;
Expand Down Expand Up @@ -1024,3 +1028,17 @@
display: none !important;
}
}

._block-content-loading .fotorama-item {
position: absolute !important;
z-index: -1;
top: 0;
width: 100%;
}

.gallery-placeholder:not(._block-content-loading) {
// Hide placeholder when gallery is loaded
.gallery-placeholder__image {
display: none;
}
}