Skip to content

J
joshine
Commit 6821d42b by lmf
Options

调试评论图片弹框效果

parent a55b6593
Showing with 249 additions and 11 deletions
app/code/Amasty/AdvancedReview/view/adminhtml/layout/review_product_edit.xml
......@@ -10,6 +10,6 @@
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Amasty_AdvancedReview::vendor/fancybox/fancybox.css"/>
</head>
</page>
app/code/Amasty/AdvancedReview/view/frontend/layout/default.xml
......@@ -11,6 +11,6 @@
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Amasty_Base::vendor/slick/amslick.min.css"/>
<css src="Amasty_AdvancedReview::vendor/fancybox/fancybox.css"/>
</head>
</page>
app/code/Amasty/AdvancedReview/view/frontend/templates/images.phtml
......@@ -9,18 +9,20 @@
/** @var \Amasty\AdvancedReview\Block\Images $block */
$collection = $block->getCollection();
?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />
<?php if ($collection->getSize()): ?>
<div id="amreview-id-<?= /* @noEscape */ $block->getReviewId() ?>"
class="amreview-images <?= /* @noEscape */ $collection->getSize() >= 3 ? '-slider' : '' ?>"
data-amreview-js="review-images">
<?php foreach ($collection as $item): ?>
<div class="amreview-slider-item" data-amreview-js="slider-item">
<a data-fancybox="gallery"
data-info="Description#2" href="<?= $block->escapeHtml($block->getFullImagePath($item)) ?>"
class="amreview-image-link fancybox"
<a
data-fancybox="gallery"
data-info="Description#2"
href="<?= $block->escapeHtml($block->getFullImagePath($item)) ?>"
class="amreview-image-link "
>
<img class="amreview-image"
<img class="amreview-image rounded"
src="<?= /* @noEscape */ $block->getResizedImagePath($item);?>"
title="<?= $block->escapeHtml(__('Review image')); ?>"
alt="<?= $block->escapeHtml(__('Review image')); ?>"
......@@ -50,4 +52,197 @@ $collection = $block->getCollection();
.amreview-review-wrapper .amreview-slider-item .amreview-image{
width: 110px;
}
/*.fancybox__container {*/
/* width: 70% !important;*/
/* margin-left: 15% !important;*/
/* background-color: #FFFFFF !important;*/
/* border: 5px solid;*/
/*}*/
/*.fancybox__content{*/
/* margin-left: -30%;*/
/*}*/
/*.fancybox__slide {*/
/* padding: 50px;*/
/*}*/
/*.fancybox__toolbar,.fancybox__thumbs.is-draggable {*/
/* width: 70% !important;*/
/*}*/
/*button.carousel__button.is-next {*/
/* right: 30% !important;*/
/*}*/
/*.right-content {*/
/* width: 25%;*/
/* height: 100%;*/
/* background: #fff;*/
/* float: right;*/
/* border: 5px solid #000;*/
/*}*/
</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>
require(["AdvancedReview/js/fancybox"], function(fancybox){
Fancybox.bind('[data-fancybox="gallery"]', {
Toolbar: {
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>`;
},
},
});
});
require(['jquery'],function($){
$(".fancybox__backdrop").html("<div class=\"right-content\"></div>");
});
</script>
app/design/frontend/Joshine/breeze/Magento_Checkout/templates/onepage.phtml
......@@ -319,9 +319,7 @@
.opc-progress-bar{
margin-top: 100px;
}
#opc-sidebar{
margin-top: -5%;
}
s
}
@media(max-width: 639.98px){
.header.content{padding-top: 15px !important;margin-bottom: 0px !important;}
......
app/design/frontend/Joshine/breeze/Magento_Checkout/templates/success.phtml 0 → 100644
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
?>
<?php /** @var $block \Magento\Checkout\Block\Onepage\Success */ ?>
<div class="checkout-success">
<?php if ($block->getOrderId()) :?>
<?php if ($block->getCanViewOrder()) :?>
<p><?= $block->escapeHtml(__('Your order number is: %1.', sprintf('<a href="%s" class="order-number"><strong>%s</strong></a>', $block->escapeUrl($block->getViewOrderUrl()), $block->getOrderId())), ['a', 'strong']) ?></p>
<?php else :?>
<p><?= $block->escapeHtml(__('Your order # is: <span>%1</span>.', $block->getOrderId()), ['span']) ?></p>
<?php endif;?>
<p><?= $block->escapeHtml(__('We\'ll email you an order confirmation with details and tracking info.')) ?></p>
<?php endif;?>
<?= $block->getAdditionalInfoHtml() ?>
<div class="actions-toolbar">
<div class="primary">
<a class="action primary continue" href="<?= $block->escapeUrl($block->getContinueUrl()) ?>"><span><?= $block->escapeHtml(__('Continue Shopping')) ?></span></a>
</div>
</div>
</div>
<style type="text/css">
.page-title-wrapper {
margin-top: 0px;
font-size: 16px;
}
@media(max-width: 1024px) {
.page-title-wrapper {
margin-top: 100px;
font-size: 14px;
}
h1.page-title{
font-size: 16px;
text-align: center;
margin-bottom: -90px;
color: blue;
font-weight: 400;
}
}
</style>
app/design/frontend/Joshine/breeze/web/css/_custom.less
......@@ -2288,7 +2288,7 @@ tr.grand.totals {
@media(max-width: 1024px) {
div#checkout {
margin-top: -40px;
margin-top: 50px;
}
.payment-method-content{
font-size: 14px;
......
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