Skip to content

J
joshine
Commit 3a24a66c by lmf
Options

修复产品评论弹出效果

parent 6821d42b
Showing with 17 additions and 170 deletions
app/code/Amasty/AdvancedReview/view/adminhtml/layout/review_product_edit.xml
...@@ -10,6 +10,6 @@ ...@@ -10,6 +10,6 @@
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head> <head>
<css src="Amasty_AdvancedReview::vendor/fancybox/fancybox.css"/>
</head> </head>
</page> </page>
app/code/Amasty/AdvancedReview/view/frontend/layout/default.xml
...@@ -11,6 +11,6 @@ ...@@ -11,6 +11,6 @@
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head> <head>
<css src="Amasty_Base::vendor/slick/amslick.min.css"/> <css src="Amasty_Base::vendor/slick/amslick.min.css"/>
<css src="Amasty_AdvancedReview::vendor/fancybox/fancybox.css"/>
</head> </head>
</page> </page>
app/code/Amasty/AdvancedReview/view/frontend/templates/images.phtml
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
/** @var \Amasty\AdvancedReview\Block\Images $block */ /** @var \Amasty\AdvancedReview\Block\Images $block */
$collection = $block->getCollection(); $collection = $block->getCollection();
?> ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />
<?php if ($collection->getSize()): ?> <?php if ($collection->getSize()): ?>
<div id="amreview-id-<?= /* @noEscape */ $block->getReviewId() ?>" <div id="amreview-id-<?= /* @noEscape */ $block->getReviewId() ?>"
class="amreview-images <?= /* @noEscape */ $collection->getSize() >= 3 ? '-slider' : '' ?>" class="amreview-images <?= /* @noEscape */ $collection->getSize() >= 3 ? '-slider' : '' ?>"
...@@ -52,13 +51,15 @@ $collection = $block->getCollection(); ...@@ -52,13 +51,15 @@ $collection = $block->getCollection();
.amreview-review-wrapper .amreview-slider-item .amreview-image{ .amreview-review-wrapper .amreview-slider-item .amreview-image{
width: 110px; width: 110px;
} }
@media(min-width: 1024px) {
.fancybox__container {
width: 70% !important;
margin-left: 15% !important;
background-color: #FFFFFF !important;
border: 5px solid;
}
}
/*.fancybox__container {*/
/* width: 70% !important;*/
/* margin-left: 15% !important;*/
/* background-color: #FFFFFF !important;*/
/* border: 5px solid;*/
/*}*/
/*.fancybox__content{*/ /*.fancybox__content{*/
/* margin-left: -30%;*/ /* margin-left: -30%;*/
/*}*/ /*}*/
...@@ -77,172 +78,20 @@ $collection = $block->getCollection(); ...@@ -77,172 +78,20 @@ $collection = $block->getCollection();
/* height: 100%;*/ /* height: 100%;*/
/* background: #fff;*/ /* background: #fff;*/
/* float: right;*/ /* float: right;*/
/* border: 5px solid #000;*/ /* border: 5px solid #f1f1f1f1;*/
/*}*/ /*}*/
</style> </style>
<style type="text/css">
a[data-fancybox] img {
cursor: zoom-in;
}
.fancybox__container {
--fancybox-bg: #fff;
--fancybox-color: #333;
--fancybox-accent-color: #e879f9;
--carousel-button-svg-filter: none;
display: flex;
flex-direction: row;
}
.fancybox__toolbar {
position: relative;
padding: 0;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(30px);
border-bottom: 1px solid #edeef0;
text-shadow: none;
font-weight: 400;
--carousel-button-svg-stroke-width: 1.75;
--carousel-button-svg-width: 22px;
--carousel-button-svg-height: 22px;
}
.fancybox__slide {
padding-top: 8px;
padding-bottom: 8px;
}
.fancybox__nav {
--carousel-button-bg: #e5e7eb;
--carousel-button-border-radius: 6px;
--carousel-button-svg-width: 20px;
--carousel-button-svg-height: 20px;
--carousel-button-svg-stroke-width: 2.5;
}
.fancybox__leftCol {
width: 80vw;
min-height: 1px;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.fancybox__rightCol {
width: 20vw;
max-width: 300px;
height: 100%;
padding: 2rem;
overflow: auto;
display: flex;
flex-direction: column;
border-left: 1px solid #edeef0;
opacity: var(--fancybox-opacity, 1);
}
/* Opening */
.fancybox__container.is-animated[aria-hidden="false"] .fancybox__rightCol {
animation: 0.15s ease backwards fancybox-fadeIn;
}
/* Closing */
.fancybox__container.is-animated.is-closing .fancybox__rightCol {
animation: 0.15s ease both fancybox-fadeOut;
}
.fancybox__container.is-animated.is-closing .fancybox__leftCol {
overflow: visible;
}
</style>
<script> <script>
require(["AdvancedReview/js/fancybox"], function(fancybox){ require(['jquery'],function($){
Fancybox.bind('[data-fancybox="gallery"]', { $(".is-next").on('click',function () {
Toolbar: { alert("hi");
display: [
{
id: "counter",
position: "center",
},
"zoom",
"slideshow",
"fullscreen",
"thumbs",
"close",
],
},
on: {
initLayout: (fancybox) => {
// Create elements
// ===
// Create left column
const $leftCol = document.createElement("div");
$leftCol.classList.add("fancybox__leftCol");
while (fancybox.$container.firstChild) {
$leftCol.appendChild(fancybox.$container.firstChild);
}
// Create right column
const $rightCol = document.createElement("div");
$rightCol.classList.add("fancybox__rightCol");
$rightCol.innerHTML =
'<p class="mb-2">You can place any content here, such as ads, comments or map</p>';
// Create info-box
const $info = document.createElement("div");
$rightCol.appendChild($info);
fancybox.$info = $info;
// Add elements to DOM
fancybox.$container.appendChild(fancybox.$backdrop);
fancybox.$container.appendChild($leftCol);
fancybox.$container.appendChild($rightCol);
fancybox.$leftCol = $leftCol;
fancybox.$rightCol = $rightCol;
},
"Carousel.ready Carousel.change": (fancybox, carousel, slideIndex) => {
// Update info-box
// ===
// Get index of the current gallery item
slideIndex =
slideIndex === undefined ? carousel.options.initialPage : slideIndex;
// Get link related to current item
const $trigger = fancybox.items[slideIndex].$trigger;
// Get data from `data-info` attribute
const data = $trigger.dataset.info || "";
// Get data from `data-info` attribute
const data2 = $trigger.dataset.info2 || "";
// Update info
fancybox.$info.innerHTML = `<p>${data}</p><p>${data2}</p>`;
},
},
}); });
$(".is-next").click(function () {
alert("hi-is-next");
$(".fancybox__backdrop").html("<div class=\"right-content\"></div>");
}); });
require(['jquery'],function($){
$(".fancybox__backdrop").html("<div class=\"right-content\"></div>");
}); });
</script> </script>
app/design/frontend/Joshine/breeze/Magento_Checkout/templates/onepage.phtml
...@@ -190,7 +190,6 @@ ...@@ -190,7 +190,6 @@
button.action.secondary{ button.action.secondary{
background: #000000; background: #000000;
} }
cc
.checkout-payment-method .opc-payment-additional.discount-code{ .checkout-payment-method .opc-payment-additional.discount-code{
} }
...@@ -319,7 +318,6 @@ ...@@ -319,7 +318,6 @@
.opc-progress-bar{ .opc-progress-bar{
margin-top: 100px; margin-top: 100px;
} }
s
} }
@media(max-width: 639.98px){ @media(max-width: 639.98px){
.header.content{padding-top: 15px !important;margin-bottom: 0px !important;} .header.content{padding-top: 15px !important;margin-bottom: 0px !important;}
......
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