Skip to content

J
joshine
Commit 6fe66039 by lmf
Options

修改详情页面弹窗口效果

parent ce62da86
Showing with 36 additions and 33 deletions
app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/addto.phtml
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</style> </style>
<div style="width: 100%" class="product-view-freeshipping"> <div style="width: 100%" class="product-view-freeshipping">
<div class="product-intro__freeshipping product-intro__bg-none"> <div class="product-intro__freeshipping product-intro__bg-none">
<div class="product-intro__freeshipping-abt action" data-trigger="trigger-freeshipping" > <div class="product-intro__freeshipping-abt action" id="freeshipping-button">
<div class="product-intro__freeshipping-icon shipping " ><i class="svgicon svgicon-gd-shipping"></i> <p>Fast Delivery</p> <span class="svgicon svgicon-gd-more-grey product-intro__freeshipping-more" ></span> <div class="product-intro__freeshipping-icon shipping " ><i class="svgicon svgicon-gd-shipping"></i> <p>Fast Delivery</p> <span class="svgicon svgicon-gd-more-grey product-intro__freeshipping-more" ></span>
</div> </div>
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<p> Estimated to be delivered on <span id="deliveredTime">11/25/2021 - 12/03/2021</span>.</p> </div> <p> Estimated to be delivered on <span id="deliveredTime">11/25/2021 - 12/03/2021</span>.</p> </div>
</div> </div>
<div class="product-intro__freeshipping-item full-line paddingTop-0 paddingBottom-0 action" data-trigger="trigger-freeshipping-more" > <div class="product-intro__freeshipping-item full-line paddingTop-0 paddingBottom-0 action" id="free-return-button" >
<div class="product-intro__freeshipping-icon"> <div class="product-intro__freeshipping-icon">
<i class="svgicon svgicon-gd-freereturn"></i><p>Free Return &amp; Exchange</p> <span class="svgicon svgicon-gd-more-grey product-intro__freeshipping-more" ></span> </div> <div class="product-intro__freeshipping-desc"> <i class="svgicon svgicon-gd-freereturn"></i><p>Free Return &amp; Exchange</p> <span class="svgicon svgicon-gd-more-grey product-intro__freeshipping-more" ></span> </div> <div class="product-intro__freeshipping-desc">
Learn More Learn More
...@@ -263,34 +263,5 @@ if ($description) : ...@@ -263,34 +263,5 @@ if ($description) :
$(".desction-right.description.info-desc").html("+"); $(".desction-right.description.info-desc").html("+");
} }
}) })
setTimeout(function(){
$("#product-intro-fast-delivery").show();
$("#product-intro-free-return").show();
},5000);
}); });
</script> </script>
<div data-bind="mageInit: {
'Magento_Ui/js/modal/modal':{
'type': 'popup',
'title': '',
'trigger': '[data-trigger=trigger-freeshipping]',
'responsive': true,
'buttons' : []
}}">
<div class="content" style="display: none" id="product-intro-fast-delivery">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-fast-delivery')->toHtml();?>
</div>
</div>
<div data-bind="mageInit: {
'Magento_Ui/js/modal/modal':{
'type': 'popup',
'title': '',
'trigger': '[data-trigger=trigger-freeshipping-more]',
'responsive': true,
'buttons' : []
}}">
<div class="content" style="display: none" id="product-intro-free-return">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-free-return')->toHtml();?>
</div>
</div>
app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/addtocart.phtml
...@@ -63,6 +63,26 @@ ...@@ -63,6 +63,26 @@
$("#wishlist").html($(".product-addto-links > div:first").html()); $("#wishlist").html($(".product-addto-links > div:first").html());
/*open*/ /*open*/
$('body').delegate('#product-intro__freeshipping-more-3', 'click', function(data) { $('body').delegate('#product-intro__freeshipping-more-3', 'click', function(data) {
$("#size-chart").show();
if (isMobile()){
$(".lis").slideToggle("slow");
}else{
$("#areaMask").fadeIn();
$("#areaLayer").animate({"right": 0});
}
});
$('#free-return-button').click(function(data) {
$("#free-return").show();
if (isMobile()){
$(".lis").slideToggle("slow");
}else{
$("#areaMask").fadeIn();
$("#areaLayer").animate({"right": 0});
}
});
$('#freeshipping-button').click(function(data) {
$("#freeshipping").show();
if (isMobile()){ if (isMobile()){
$(".lis").slideToggle("slow"); $(".lis").slideToggle("slow");
}else{ }else{
...@@ -76,6 +96,9 @@ ...@@ -76,6 +96,9 @@
$("#areaLayer").animate({"right": "-100%"}); $("#areaLayer").animate({"right": "-100%"});
$('#remen').show(); $('#remen').show();
$(".lis").slideToggle("slow"); $(".lis").slideToggle("slow");
$("#free-return").hide();
$("#size-chart").hide();
$("#freeshipping").hide();
} }
/*close*/ /*close*/
...@@ -106,11 +129,20 @@ ...@@ -106,11 +129,20 @@
<section id="areaLayer" class="express-area-box"> <section id="areaLayer" class="express-area-box">
<article id="areaBox"> <article id="areaBox">
<ul class="remen" id="remen"> <ul class="remen" id="remen">
<li class="lastli lastli-left">Size Chart</li> <li class="lastli lastli-left"></li>
<li class="lastli lastli-right" style="cursor:pointer">X</li> <li class="lastli lastli-right" style="cursor:pointer">X</li>
</ul> </ul>
<div class="area-content"> <div class="area-content">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-size-chart')->toHtml();?> <div id="size-chart" style="display: none;">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-size-chart')->toHtml();?>
</div>
<div id="free-return" style="display: none;">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-free-return')->toHtml();?>
</div>
<div id="freeshipping" style="display: none;">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-fast-delivery')->toHtml();?>
</div>
</div> </div>
<ul id="areaList" class="area-list" style="margin-bottom: 500px;"></ul> <ul id="areaList" class="area-list" style="margin-bottom: 500px;"></ul>
</article> </article>
......
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