手机版描述按钮

app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/addto.phtml

@@ -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>
 <div class="product-view-description">
 
@@ -220,7 +252,7 @@ $description = $this->helper(Magento\Catalog\Helper\Output::class)->productAttri
 );
 if ($description)  :
 ?>
-    <div class="joshine-desction">
+    <div class="joshine-desction joshine-hidden-sm joshine-hidden-xs">
         <div id="accordion" data-mage-init='{
         "accordion":{
             "active": [0],
@@ -241,11 +273,23 @@ if ($description)  :
             </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;
 
 if ($short_description)  :
     ?>
-    <div class="joshine-desction">
+    <div class="joshine-desction joshine-hidden-sm joshine-hidden-xs">
         <div id="accordion" data-mage-init='{
         "accordion":{
             "active": [0],
@@ -266,6 +310,15 @@ if ($short_description)  :
             </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;
 ?>
 </div>

app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/addtocart.phtml

@@ -66,6 +66,15 @@
                 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>
 
@@ -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() {
             $("#areaMask").fadeOut();
             $("#areaLayer").animate({"right": "-100%"});
@@ -161,6 +191,12 @@
                     <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-fast-delivery')->toHtml();?>
                 </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>
             <ul id="areaList" class="area-list" style="margin-bottom: 500px;"></ul>
         </article>