Skip to content

J
joshine
Commit f0478d7b by halweg
Options

手机版描述按钮

parent e07bb941
Showing with 91 additions and 2 deletions
app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/addto.phtml
...@@ -203,6 +203,38 @@ ...@@ -203,6 +203,38 @@
} }
.joshine-description-mobile {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-pack: justify;
justify-content: space-between;
position: relative;
height: 2rem;
line-height: 1.9rem;
text-transform: capitalize;
font-size: 14px;
width: 100%;
text-align: left;
}
.description-enter {
padding-right: 1.25rem;
}
.joshine-ui-icon-toggle{
content: ' ';
position: absolute;
right: 0.125rem;
top: 50%;
margin-top: -0.75rem;
width: 1.5rem;
height: 1.5rem;
-webkit-mask-size: 1rem 1rem;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>') no-repeat 50% 50%;
}
</style> </style>
<div class="product-view-description"> <div class="product-view-description">
...@@ -220,7 +252,7 @@ $description = $this->helper(Magento\Catalog\Helper\Output::class)->productAttri ...@@ -220,7 +252,7 @@ $description = $this->helper(Magento\Catalog\Helper\Output::class)->productAttri
); );
if ($description) : if ($description) :
?> ?>
<div class="joshine-desction"> <div class="joshine-desction joshine-hidden-sm joshine-hidden-xs">
<div id="accordion" data-mage-init='{ <div id="accordion" data-mage-init='{
"accordion":{ "accordion":{
"active": [0], "active": [0],
...@@ -241,11 +273,23 @@ if ($description) : ...@@ -241,11 +273,23 @@ if ($description) :
</div> </div>
</div> </div>
</div> </div>
<div class="joshine-description-mobile joshine-hidden-md joshine-hidden-lg" style="border-bottom: 1px solid #e5e5e5; margin-top: 1em;" id="description-button">
<div class="description-enter">
<?= __("Description") ?>
</div>
<div class="description-text" style="display: flex; color: #767676;font-size: 12px;justify-content: center;align-items: center;">
<div class="description-text-left">
</div>
<span class="joshine-ui-icon-toggle"></span>
</div>
</div>
<?php endif; <?php endif;
if ($short_description) : if ($short_description) :
?> ?>
<div class="joshine-desction"> <div class="joshine-desction joshine-hidden-sm joshine-hidden-xs">
<div id="accordion" data-mage-init='{ <div id="accordion" data-mage-init='{
"accordion":{ "accordion":{
"active": [0], "active": [0],
...@@ -266,6 +310,15 @@ if ($short_description) : ...@@ -266,6 +310,15 @@ if ($short_description) :
</div> </div>
</div> </div>
</div> </div>
<div class="joshine-description-mobile joshine-hidden-md joshine-hidden-lg" id="short-description-button">
<div class="description-enter">
<?= __("Material") ?>
</div>
<div class="description-text" style="display: flex; color: #767676;font-size: 12px;justify-content: center;align-items: center;">
<span class="joshine-ui-icon-toggle"></span>
</div>
</div>
<?php endif; <?php endif;
?> ?>
</div> </div>
......
app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/addtocart.phtml
...@@ -66,6 +66,15 @@ ...@@ -66,6 +66,15 @@
break; break;
} }
} }
$short_description = $this->helper(Magento\Catalog\Helper\Output::class)->productAttribute($block->getShortDescription(),$block->getProduct()->getShortDescription(),'short_description');
$description = $this->helper(Magento\Catalog\Helper\Output::class)->productAttribute(
$block->getShortDescription(),
$block->getProduct()->getDescription(),
'description'
);
?> ?>
</style> </style>
...@@ -104,6 +113,27 @@ ...@@ -104,6 +113,27 @@
} }
}); });
$('#description-button').click(function(data) {
$("#description-content").show();
if (isMobile()){
$(".lis").slideToggle("slow");
}else{
$("#description-content").fadeIn();
$("#description-content").animate({"right": 0});
}
});
$('#short-description-button').click(function(data) {
$("#short-description-content").show();
$("#").show();
if (isMobile()){
$(".lis").slideToggle("slow");
}else{
$("#areaMask").fadeIn();
$("#areaLayer").animate({"right": 0});
}
});
function clockArea() { function clockArea() {
$("#areaMask").fadeOut(); $("#areaMask").fadeOut();
$("#areaLayer").animate({"right": "-100%"}); $("#areaLayer").animate({"right": "-100%"});
...@@ -161,6 +191,12 @@ ...@@ -161,6 +191,12 @@
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-fast-delivery')->toHtml();?> <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-fast-delivery')->toHtml();?>
</div> </div>
<div class="description-content" id="description-content" style="display: none;">
<?php echo $description; ?>
</div>
<div class="short-description-content" id="short-description-content" style="display: none;">
<?php echo $short_description; ?>
</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