Skip to content

J
joshine
Commit ffbfbc83 by lmf
Options

重构产品图片显示效果 

几个模板模块重新设计
parent 7565e55f
Showing with 84 additions and 51 deletions
app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/addto.phtml
......@@ -10,31 +10,6 @@
<?= $block->getChildHtml() ?>
</div>
<style>
*{ margin: 0;padding: 0;list-style: none}
.mask{background-color:rgba(0,0,0,0.2); width:100%; height:100%;position:fixed;top:0;left:0;z-index: 999;
display: flex;
align-items: center;
justify-content: center;}
.prompt_box{
background: #ffffff;
border-radius: 6px;
position: fixed;
overflow: hidden;
height: auto;
padding: 10px;
}
.prompt_box .prompt_title{height:20px;line-height:20px;padding-left:20px;position: relative;}
.prompt_box .prompt_title h3{font-size:16px;color: #333333; margin-top:0;}
.prompt_box .prompt_cancel{width:24px;height:24px;background: url("img/cancel.png") no-repeat;position: absolute;right:0;top:0;}
.prompt_box .prompt_cont{position: relative;}
.prompt_box .prompt_cont .prompt_text{line-height:140px;padding-left:100px;}
.prompt_box .prompt_cont .prompt_sure{position: absolute;right:20px;bottom:34px;
width:50px;height: 26px;background:#1a9ebf;border-radius:5px;color:#ffffff;
font-size: 14px;line-height:26px;text-align: center;}
.hide{display:none;}
.show{display:block;}
@media (max-width: 780px){
.product-social-links .product-addto-links{
display: none;
......@@ -64,26 +39,37 @@
height: 55px;
}
</style>
<div class="mask hide">
<div class="prompt_box">
<div class="prompt_title product-intro-prompt_cancel">
<span class="prompt_cancel">X</span>
</div>
<div class="prompt_cont f1" style="display: none">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-fast-delivery')->toHtml();?>
</div>
<div class="prompt_cont f2" style="display: none">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-free-return')->toHtml();?>
</div>
<div class="prompt_cont f3" style="display: none">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-size-chart')->toHtml();?>
</div>
<div data-bind="mageInit: {
'Magento_Ui/js/modal/modal':{
'type': 'popup',
'title': '',
'trigger': '[data-trigger=trigger-freeshipping]',
'responsive': true,
'buttons' : []
}}">
<div class="content">
<?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">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-free-return')->toHtml();?>
</div>
</div>
<div style="width: 100%" class="product-view-freeshipping">
<div class="product-intro__freeshipping product-intro__bg-none">
<div class="product-intro__freeshipping-abt action" data-trigger="trigger-shipping">
<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" id="product-intro__freeshipping-more"></span>
<div class="product-intro__freeshipping-abt action" >
<div class="product-intro__freeshipping-icon shipping " data-trigger="trigger-shipping"><i class="svgicon svgicon-gd-shipping"></i> <p>Fast Delivery</p> <span class="svgicon svgicon-gd-more-grey product-intro__freeshipping-more" data-trigger="trigger-freeshipping"></span>
</div>
<div class="free-wrapper">
......@@ -92,7 +78,7 @@
<div class="product-intro__freeshipping-item full-line paddingTop-0 paddingBottom-0 action" data-trigger="trigger2">
<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" id="product-intro__freeshipping-more-2" ></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" data-trigger="trigger-freeshipping-more" ></span> </div> <div class="product-intro__freeshipping-desc">
Learn More
</div>
</div>
......
app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/addtocart.phtml
......@@ -6,7 +6,20 @@
/** @var $block \Magento\Catalog\Block\Product\View */
?>
<div id="product-intro__freeshipping-more-3" >
<div data-bind="mageInit: {
'Magento_Ui/js/modal/modal':{
'type': 'popup',
'title': '',
'trigger': '[data-trigger=trigger]',
'responsive': true,
'buttons' : []
}}">
<div class="content">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-size-chart')->toHtml();?>
</div>
</div>
<div id="product-intro__freeshipping-more-3" data-trigger="trigger">
<a href="javascript:void(0);">Size Guide</a></span></div>
<style>
#product-intro__freeshipping-more-3{
......
app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/gallery.phtml
......@@ -27,7 +27,6 @@ $srcset = $responsiveImageHelper->getSrcset($block->getProduct(), 'product_page_
$sizes = $responsiveImageHelper->getSizes('product_page_image_medium');
$thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
?>
<div class="breeze-gallery <?= $block->getGalleryOptions()->getVar('gallery/navdir') ?>">
<div class="stage <?= $mainImage && $mainImage->getVideoUrl() ? 'video' : '' ?>"
data-gallery-role="gallery-placeholder">
......@@ -45,12 +44,12 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
</div>
<?php if (count($images) > 1) : ?>
<a href="#" class="prev" tabindex="-1">
<a href="javasrcpit:void(0);" class="prev" tabindex="-1">
<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="M15 19l-7-7 7-7" />
</svg>
</a>
<a href="#" class="next" tabindex="-1">
<a href="javasrcpit:void(0);" class="next" tabindex="-1">
<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>
......@@ -89,7 +88,7 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
$srcset = $responsiveImageHelper->getSrcset($image, 'product_page_image_small');
?>
<a class="<?= implode(' ', $classes) ?>" href="<?= $image->getLargeImageUrl() ?>" title="<?= $image->getLabel() ?: __('View Image') ?>">
<a class="<?= implode(' ', $classes) ?>" href="javasrcpit:void(0);" name="<?= $image->getLargeImageUrl() ?>" title="<?= $image->getLabel() ?: __('View Image') ?>">
<img loading="lazy" alt="<?= $image->getLabel() ?>"
src="<?= $image->getSmallImageUrl() ?>"
<?php if ($srcset) : ?>
......@@ -128,18 +127,53 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
</a>
</script>
<style>
.breeze-gallery .prev, .breeze-gallery .next{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
}
</style>
<script>
require([
'jquery'
], function ($) {
$(".thumbnails > a").mouseover(function (s) {
var main_img = $(this).attr("href");
var main_img = $(this).attr("name");
$(".main-image").attr("src",main_img);
$(".thumbnails > a").removeClass("active");
$(this).addClass("active");
})
$(".thumbnails > a").mouseover(function (s) {
});
$("a.next ").on('click',function () {
var s = $(".thumbnails").find("a.active");
$(".thumbnails > a").removeClass("active");
s.next().addClass("active");
var sd = $(".thumbnails > .item.active").attr('name');
if (typeof(sd) == "undefined"){
var sd = $(".thumbnails > .item.active").attr('name');
$(".thumbnails > a").removeClass("active");
$(".thumbnails > a:first").addClass("active");
sd = $(".thumbnails > a:first").attr('name');
}
$(".main-image").attr("src",sd);
});
$("a.prev ").on('click',function () {
var s = $(".thumbnails").find("a.active");
$(".thumbnails > a").removeClass("active");
s.prev().addClass("active");
var sd = $(".thumbnails > .item.active").attr('name');
if (typeof(sd) == "undefined"){
var sd = $(".thumbnails > .item.active").attr('name');
$(".thumbnails > a").removeClass("active");
$(".thumbnails > a:last").addClass("active");
sd = $(".thumbnails > a:last").attr('name');
}
$(".main-image").attr("src",sd);
});
});
</script>
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