Skip to content

J
joshine
Commit 2ba84e93 by lmf
Options

优化详情页面尺码弹出框效果

parent 0a345ad9
Showing with 105 additions and 21 deletions
app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/addtocart.phtml
...@@ -61,29 +61,62 @@ ...@@ -61,29 +61,62 @@
'jquery' 'jquery'
], function ($) { ], function ($) {
$("#wishlist").html($(".product-addto-links > div:first").html()); $("#wishlist").html($(".product-addto-links > div:first").html());
setTimeout(function(){ /*open*/
if ($("div").hasClass("swatch-attribute size")){ $('body').delegate('#product-intro__freeshipping-more-3', 'click', function(data) {
var size = '<div id="product-intro__freeshipping-more-3" data-trigger="trigger">\n' + if (isMobile()){
' <a href="javascript:void(0);">Size Guide</a></span></div>'; $(".lis").slideToggle("slow");
$(".swatch-attribute.size > span:last").after(size); }else{
$("#areaMask").fadeIn();
$("#areaLayer").animate({"right": 0});
} }
},3000); });
});
</script>
<div data-bind="mageInit: { function clockArea() {
'Magento_Ui/js/modal/modal':{ $("#areaMask").fadeOut();
'type': 'popup', $("#areaLayer").animate({"right": "-100%"});
'title': '', $('#remen').show();
'trigger': '[data-trigger=trigger]', $(".lis").slideToggle("slow");
'responsive': true, }
'buttons' : []
}}"> /*close*/
<div class="content" id="product-intro-size-chart" style="display:none;"> $("#areaMask, #closeArea,.lastli-right").click(function() {
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-size-chart')->toHtml();?> clockArea();
</div> });
</div>
function isMobile() {
var userAgentInfo = navigator.userAgent;
var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
var mobile_flag = false;
for (var v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
var screen_width = window.screen.width;
var screen_height = window.screen.height;
if(screen_width < 500 && screen_height < 800){
mobile_flag = true;
}
return mobile_flag;
}
});
</script>
<li class="lis">
<section id="areaLayer" class="express-area-box">
<article id="areaBox">
<ul class="remen" id="remen">
<li class="lastli lastli-left">Size Chart</li>
<li class="lastli lastli-right" style="cursor:pointer">X</li>
</ul>
<div class="area-content">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-size-chart')->toHtml();?>
</div>
<ul id="areaList" class="area-list" style="margin-bottom: 500px;"></ul>
</article>
</section>
<div id="areaMask" class="mask"></div>
</li>
<style> <style>
#product-intro__freeshipping-more-3{ #product-intro__freeshipping-more-3{
display: inline-block; display: inline-block;
...@@ -114,6 +147,35 @@ ...@@ -114,6 +147,35 @@
#wishlist{ #wishlist{
display: none; display: none;
} }
.lis{
display: none;
width: 100%;
max-height: 60%;
height: auto;
background-color: #fff;
position: fixed;
left: 0px;
bottom: 0px;
z-index: 100;
padding: 5px;
display: list-item;
list-style: none;
box-shadow: 0px 0px 16px;
}
.lastli-right{
width: 20%;
display: inline;
float: right;
text-align: end;
margin-right: 10px;
}
.lastli-left{
display: inline;
width: 70%;
margin-left: 38%;
font-size: larger;
font-weight: 500;
}
} }
@media (min-width: 780px) { @media (min-width: 780px) {
#wishlist{ #wishlist{
...@@ -125,6 +187,23 @@ ...@@ -125,6 +187,23 @@
.product-addto-links{ .product-addto-links{
display: none; display: none;
} }
.lastli-left{
font-size: larger;
font-weight: 700;
margin-left: 40%;
}
.remen li{text-align: justify;font-size: 16px;line-height: 44px; padding: 0 15px;}
.lastli{hheight:30px;float: left;}
.express-area-box { position: absolute; right: -100%; left: 50%; z-index: 120; width: 320px; margin-left: -160px; background-color: #fff; color: #4d525d; }
.express-area-box .top h3 {padding-left: 15px; font-size: 16px;background: #eeeeee;line-height: 44px;}
.lastli{text-align: center;font-size: 14px;line-height: 40px;}
.lastli-right{float:right !important;}
.express-area-box article { overflow-y: scroll; }
.area-list li {padding: 0 15px; border-bottom: 1px solid #e2e2e2; text-align: justify; line-height: 44px}
.express-area-box { position: fixed; left: inherit; width: min-content;height: 100%;right: -100%;top: 0; margin-left: 0;box-shadow: 0 0 20px rgba(0,0,0,1); }
.area-content{padding:10px;}
.mask { display: none; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); }
} }
</style> </style>
<script> <script>
......
app/design/frontend/Joshine/breeze/Magento_Swatches/web/js/swatch-renderer.js
...@@ -424,11 +424,16 @@ define([ ...@@ -424,11 +424,16 @@ define([
} }
if ($widget.options.enableControlLabel) { if ($widget.options.enableControlLabel) {
var tem_size = '';
if (item.label == "Size"){
tem_size = "<div id=\"product-intro__freeshipping-more-3\" >" +
"<a href=\"javascript:void(0);\">Size Guide</a></div>";
}
label += label +=
'<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' + '<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' +
$('<i></i>').text(item.label).html() + $('<i></i>').text(item.label).html() +
'</span>' + '</span>' +
'<span class="' + classes.attributeSelectedOptionLabelClass + '"></span>'; '<span class="' + classes.attributeSelectedOptionLabelClass + '"></span>' + tem_size;
} }
if ($widget.inProductList) { if ($widget.inProductList) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment