Skip to content

Commit 8ac4aff

Browse files
damcoudamcou
authored
Bugfix/mage 947/css fix 3.14 (#1558)
* MAGE-947: restrict recommend CSS to algolia managed blocks * MAGE-947: add css identifer to all rules
1 parent 7c33b47 commit 8ac4aff

File tree

4 files changed

+56
-35
lines changed

4 files changed

+56
-35
lines changed

‎view/frontend/templates/recommend/cart/recommend_items.phtml

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ $recommendConfig = $viewModel->getAlgoliaRecommendConfiguration();
55
if (!empty($recommendConfig['enabledRelatedInCart']) || !empty($recommendConfig['enabledFBTInCart']) || !empty($recommendConfig['isTrendItemsEnabledInCartPage'])):
66
$cartItems = $viewModel->getAllCartItems();
77
?>
8-
<div id="frequentlyBoughtTogether" class="recommend-component"></div>
9-
<div id="relatedProducts" class="recommend-component"></div>
10-
<div id="trendItems" class="trendsItem recommend-component"></div>
11-
<div id="lookingSimilar" class="lookingSimilar recommend-component"></div>
8+
<div id="algoliaRecommend">
9+
<div id="frequentlyBoughtTogether" class="recommend-component"></div>
10+
<div id="relatedProducts" class="recommend-component"></div>
11+
<div id="trendItems" class="trendsItem recommend-component"></div>
12+
<div id="lookingSimilar" class="lookingSimilar recommend-component"></div>
13+
</div>
1214
<script type="text/x-magento-init">
1315
{
1416
"*": {

‎view/frontend/templates/recommend/products.phtml

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@ if (!empty($recommendConfig['enabledFBT'])
1414
|| !empty($recommendConfig['isTrendItemsEnabledInPDP'])
1515
|| !empty($recommendConfig['isLookingSimilarEnabledInPDP'])):
1616
$product = $viewModel->getProduct(); ?>
17-
<div id="frequentlyBoughtTogether" class="recommend-component"></div>
18-
<div id="relatedProducts" class="recommend-component"></div>
19-
<div id="trendItems" class="trendsItem recommend-component"></div>
20-
<div id="lookingSimilar" class="lookingSimilar recommend-component"></div>
17+
<div id="algoliaRecommend">
18+
<div id="frequentlyBoughtTogether" class="recommend-component"></div>
19+
<div id="relatedProducts" class="recommend-component"></div>
20+
<div id="trendItems" class="trendsItem recommend-component"></div>
21+
<div id="lookingSimilar" class="lookingSimilar recommend-component"></div>
22+
</div>
2123
<script type="text/x-magento-init">
2224
{
2325
"*": {

‎view/frontend/templates/recommend/widget/trends-item.phtml

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
$isEnabled = $block->isTrendingItemEnabled();
44
if ($isEnabled):
55
$trendConstainer = 'trendItems' . $block->generateUniqueToken(); ?>
6-
<div id="<?= $trendConstainer ?>" class="trendsItem recommend-component"></div>
6+
<div id="algoliaRecommend">
7+
<div id="<?= $trendConstainer ?>" class="trendsItem recommend-component"></div>
8+
</div>
79
<script type="text/x-magento-init">
810
{
911
"*": {
@@ -23,4 +25,4 @@ if ($isEnabled):
2325
}
2426
}
2527
</script>
26-
<?php endif; ?>
28+
<?php endif; ?>

‎view/frontend/web/internals/recommend.css

Lines changed: 40 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,47 @@
1-
.recommend-item .product-img {
1+
#algoliaRecommend .recommend-item .product-img {
22
width: 180px;
33
}
4-
.auc-Recommend-list {
4+
#algoliaRecommend .auc-Recommend-list {
55
display: flex;
66
justify-content: space-evenly;
77
list-style: none;
88
}
9-
.recommend-item .product-name {
9+
#algoliaRecommend .recommend-item .product-name {
1010
height: 50px;
1111
width: 110px;
1212
margin: 0 auto;
1313
}
14-
.recommend-component {
14+
#algoliaRecommend .recommend-component {
1515
margin-bottom: 80px;
1616
}
1717

18-
#relatedProducts .auc-Recommend-list,
19-
#frequentlyBoughtTogether .auc-Recommend-list,
20-
#lookingSimilar .auc-Recommend-list,
21-
.trendsItem .auc-Recommend-list {
18+
#algoliaRecommend #relatedProducts .auc-Recommend-list,
19+
#algoliaRecommend #frequentlyBoughtTogether .auc-Recommend-list,
20+
#algoliaRecommend #lookingSimilar .auc-Recommend-list,
21+
#algoliaRecommend .trendsItem .auc-Recommend-list {
2222
flex-wrap: wrap;
2323
justify-content: flex-start;
2424
}
25-
#relatedProducts li, #frequentlyBoughtTogether li, #lookingSimilar li, .trendsItem li {
25+
#algoliaRecommend #relatedProducts li,
26+
#algoliaRecommend #frequentlyBoughtTogether li,
27+
#algoliaRecommend #lookingSimilar li,
28+
#algoliaRecommend .trendsItem li {
2629
display: flex;
2730
justify-content: center;
2831
width: 16.66666667%;
2932
}
30-
#relatedProducts li a, #frequentlyBoughtTogether li a, #lookingSimilar li a, .trendsItem li a {
33+
#algoliaRecommend #relatedProducts li a,
34+
#algoliaRecommend #frequentlyBoughtTogether li a,
35+
#algoliaRecommend #lookingSimilar li a,
36+
#algoliaRecommend .trendsItem li a {
3137
color: inherit;
3238
display: block;
3339
}
34-
35-
#relatedProducts .product-name,
36-
#frequentlyBoughtTogether .product-name,
37-
#trendItems .product-name,
38-
#lookingSimilar .product-name,
39-
.trendsItem .product-name {
40+
#algoliaRecommend #relatedProducts .product-name,
41+
#algoliaRecommend #frequentlyBoughtTogether .product-name,
42+
#algoliaRecommend #lookingSimilar .product-name,
43+
#algoliaRecommend #trendItems .product-name,
44+
#algoliaRecommend .trendsItem .product-name{
4045
text-align: center;
4146
width: 150px;
4247
text-overflow: ellipsis;
@@ -49,37 +54,47 @@
4954
-webkit-box-orient: vertical;
5055
display: -webkit-box;
5156
}
52-
#trendItems a, #trendItems a:hover, .trendsItem a, .trendsItem a:hover{
57+
#algoliaRecommend #trendItems a,
58+
#algoliaRecommend #trendItems a:hover,
59+
#algoliaRecommend .trendsItem a,
60+
#algoliaRecommend .trendsItem a:hover{
5361
color:#333;
5462
}
55-
.auc-Recommend-item .product-details {
63+
#algoliaRecommend .auc-Recommend-item .product-details {
5664
text-align: center;
5765
}
58-
#trendItems .auc-Recommend-list{
66+
#algoliaRecommend #trendItems .auc-Recommend-list{
5967
flex-wrap: wrap;
6068
justify-content: flex-start;
6169
}
62-
.product-details .recommend-item .action.primary, .action-primary{
70+
#algoliaRecommend .product-details .recommend-item .action.primary,
71+
#algoliaRecommend .action-primary{
6372
background: #f4f4f4;
6473
border: 1px solid #f4f4f4;
6574
color: #666666;
6675
}
67-
.product-details .recommend-item .action.primary:hover, .action-primary:hover {
76+
#algoliaRecommend .product-details .recommend-item .action.primary:hover,
77+
#algoliaRecommend .action-primary:hover {
6878
border-color: #1979c3;
6979
background: #1979c3;
7080
color: #FFFFFF;
7181
}
7282
@media (min-width: 768px) and (max-width: 1023px) {
73-
#relatedProducts li, #frequentlyBoughtTogether li, #trendItems li, #lookingSimilar li {
83+
#algoliaRecommend #relatedProducts li,
84+
#algoliaRecommend #frequentlyBoughtTogether li,
85+
#algoliaRecommend #lookingSimilar li,
86+
#algoliaRecommend #trendItems li {
7487
width: 33.33333333%;
7588
}
7689
}
7790
@media (max-width: 767px) {
78-
#relatedProducts li, #frequentlyBoughtTogether li, #trendItems li, #lookingSimilar li {
91+
#algoliaRecommend #relatedProducts li,
92+
#algoliaRecommend #frequentlyBoughtTogether li,
93+
#algoliaRecommend #lookingSimilar li,
94+
#algoliaRecommend #trendItems li {
7995
width: 50%;
8096
}
8197
}
82-
h3.auc-Recommend-title {
83-
padding: 20p;
98+
#algoliaRecommend h3.auc-Recommend-title {
8499
padding-bottom: 20px;
85100
}

0 commit comments

Comments
 (0)