Skip to content

J
joshine
Commit 869594a4 by lmf
Options

重新编写首页轮播图

parent f8567556
Showing with 230 additions and 308 deletions
app/design/frontend/Joshine/breeze/Magento_Catalog/layout/catalog_category_view.xml deleted 100644 → 0
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="columns.top">
<container name="category.view.container" htmlTag="div" htmlClass="category-view" after="-">
<block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/image.phtml">
<arguments>
<argument name="image" xsi:type="object">Magento\Catalog\ViewModel\Category\Image</argument>
<argument name="output" xsi:type="object">Magento\Catalog\ViewModel\Category\Output</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Category\View" name="category.description" template="Magento_Catalog::category/description.phtml"/>
<block class="Magento\Catalog\Block\Category\View" name="category.cms" template="Magento_Catalog::category/cms.phtml"/>
</container>
</referenceContainer>
<referenceContainer name="content">
<block class="Magento\Catalog\Block\Category\View" name="category.products" template="Magento_Catalog::category/products.phtml">
<block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">
<container name="category.product.list.additional" as="additional" />
<block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
<block class="Magento\Framework\View\Element\Template" name="category.product.type.details.renderers.default" as="default"/>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">
<block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
name="category.product.addto.compare" as="compare"
template="Magento_Catalog::product/list/addto/compare.phtml"/>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
<block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
</block>
<action method="setToolbarBlockName">
<argument name="name" xsi:type="string">product_list_toolbar</argument>
</action>
</block>
</block>
<block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
<arguments>
<argument name="triggers" xsi:type="array">
<item name="compareProductLink" xsi:type="string">.action.tocompare</item>
</argument>
</arguments>
</block>
</referenceContainer>
<referenceBlock name="page.main.title" >
<arguments>
<argument name="id" xsi:type="string">page-title-heading</argument>
<argument name="add_base_attribute_aria" xsi:type="string">page-title-heading toolbar-amount</argument>
</arguments>
<block class="Magento\Catalog\Block\Category\Rss\Link" name="rss.link" template="Magento_Catalog::category/rss.phtml"/>
</referenceBlock>
<referenceBlock name="category.products.list">
<arguments>
<argument name="viewModel" xsi:type="object">Magento\Catalog\ViewModel\Product\OptionsData</argument>
</arguments>
</referenceBlock>
</body>
</page>
app/design/frontend/Joshine/breeze/Magento_Catalog/layout/catalog_product_gallery.xml deleted 100644 → 0
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="root">
<action method="setTemplate">
<argument name="template" xsi:type="string">popup.phtml</argument>
</action>
</referenceBlock>
<referenceContainer name="content">
<block class="Magento\Catalog\Block\Product\Gallery" name="catalog_product_gallery" template="Magento_Catalog::product/gallery.phtml"/>
</referenceContainer>
</body>
</page>
app/design/frontend/Joshine/breeze/Magento_Catalog/layout/catalog_product_opengraph.xml deleted 100644 → 0
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<attribute name="prefix" value="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# product: http://ogp.me/ns/product#" />
</head>
<body>
<referenceBlock name="head.additional">
<block class="Magento\Catalog\Block\Product\View" name="opengraph.general" template="Magento_Catalog::product/view/opengraph/general.phtml">
<block class="Magento\Directory\Block\Currency" name="opengraph.currency" as="meta.currency" template="Magento_Catalog::product/view/opengraph/currency.phtml"/>
</block>
</referenceBlock>
</body>
</page>
app/design/frontend/Joshine/breeze/Magento_Catalog/layout/catalog_product_view_type_simple.xml deleted 100644 → 0
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="product.info.type">
<block class="Magento\Catalog\Block\Product\View\Type\Simple" name="product.info.simple" as="product_type_data" template="Magento_Catalog::product/view/type/default.phtml"/>
<container name="product.info.simple.extra" after="product.info.simple" as="product_type_data_extra" label="Product Extra Info"/>
</referenceContainer>
</body>
</page>
app/design/frontend/Joshine/breeze/Magento_Catalog/layout/default.xml deleted 100644 → 0
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="before.body.end">
<block class="Magento\Catalog\Block\FrontendStorageManager" name="frontend-storage-manager" before="-"
template="Magento_Catalog::frontend_storage_manager.phtml">
<arguments>
<argument name="configuration" xsi:type="array">
<item name="recently_viewed_product" xsi:type="array">
<item name="requestConfig" xsi:type="array">
<item name="syncUrl" xsi:type="url" path="catalog/product/frontend_action_synchronize"/>
</item>
</item>
<item name="recently_compared_product" xsi:type="array">
<item name="requestConfig" xsi:type="array">
<item name="syncUrl" xsi:type="url" path="catalog/product/frontend_action_synchronize"/>
</item>
</item>
<item name="product_data_storage" xsi:type="array">
<item name="updateRequestConfig" xsi:type="array">
<item name="url" xsi:type="serviceUrl" path="/products-render-info"/>
</item>
<item name="requestConfig" xsi:type="array">
<item name="syncUrl" xsi:type="url" path="catalog/product/frontend_action_synchronize"/>
</item>
</item>
</argument>
</arguments>
</block>
</referenceContainer>
<referenceBlock name="top.links">
<block class="Magento\Framework\View\Element\Template" name="catalog.compare.link" before="-"
template="Magento_Catalog::product/compare/link.phtml">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="compareProducts" xsi:type="array">
<item name="component" xsi:type="string">Magento_Catalog/js/view/compare-products</item>
</item>
</item>
</argument>
</arguments>
</block>
</referenceBlock>
<referenceContainer name="sidebar.additional">
<block class="Magento\Framework\View\Element\Template" name="catalog.compare.sidebar"
template="Magento_Catalog::product/compare/sidebar.phtml">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="compareProducts" xsi:type="array">
<item name="component" xsi:type="string">Magento_Catalog/js/view/compare-products</item>
</item>
</item>
</argument>
</arguments>
</block>
</referenceContainer>
<referenceContainer name="after.body.start">
<block class="Magento\Framework\View\Element\Js\Components" name="head.components" as="components" template="Magento_Catalog::js/components.phtml"/>
</referenceContainer>
<block class="Magento\Framework\View\Element\Template" name="head.additional" as="head.additional" template="Magento_Theme::html/container.phtml"/>
</body>
</page>
app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/home.phtml
......@@ -4,25 +4,230 @@
* See COPYING.txt for license details.
*/
?>
<div id="box">
<ul class="list">
<li class="current">
<a href="/hotsale.html">
<img src="/media/wysiwyg/2_1_.jpg" alt="Joshine Flash Sale" class="box-pc">
<img src="/media/wysiwyg/2_M_1_.jpg" alt="Joshine Flash Sale" class="box-moblie">
</a>
</li>
<li>
<a href="/newarrivals.html">
<img src="/media/wysiwyg/1_1_.jpg" alt="" class="box-pc">
<img src="/media/wysiwyg/1_M_1_.jpg" alt="" class="box-moblie">
</a></li>
</ul>
<ul class="count">
<li class="current"></li>
<li></li>
</ul>
</div>
<style>
.banner1,.banner1 >.imgbox, .banner1 >.imgbox > a, .banner1 >.imgbox > a >img{
height: 634px !important;
}
input#left,input#right {
top: 300px !important;
padding-top: 2px;
}
@media (max-width: 768px) {
.banner1,.banner1 >.imgbox, .banner1 >.imgbox > a,.banner1 >.imgbox > a >img{
height: 577px !important;
margin-top:10px;
}
input#left,input#right{
top: 280px !important;
padding-top: 2px;
}
}
</style>
<div class="banner1"></div>
<script>
require([
'jquery'
], function ($) {
$.fn.banner = function(options){ //fn是dom对象
var that = this;
options = options || {};
this._obj = {
btn:options.btn===false ? false : true, //没传是undefined也是false
list:options.list===false ? false : true,
autoPlay:options.autoPlay===false ? false : true,
delayTime:options.delayTime || 2000,
moveTime:options.moveTime || 200,
index:options.index || 0,
iPrev:options.img.length-1,//可有可不有
img:options.img || [],
href:options.href || [],
};
this._obj.init = function(){
var str = ``;
for(var i=0;i<this.img.length;i++){
str += `<a href="${this.href[i]}"><img src="${this.img[i]}"></a>`
}
that.html(`<div class="imgbox">${str}</div>`).css({
"width":"100%",
"height":"auto",
position:"relative",
overflow:"hidden"
}).children(".imgbox").css({
"width":"100%",
"height":"280px",
}).children("a").css({
position: "absolute",
left:1920,
top:0,
"width":"100%",
"height":"280px",
}).eq(0).css({
left:0
}).end().children("img").css({
"width":"100%",
"height":"280px",
});
}
this._obj.init();
this._obj.leftClick=function () {//this是left
if (that._obj.index ==0){
that._obj.index = that._obj.img.length-1;
that._obj.iPrev=0;
}else{
that._obj.index--;
that._obj.iPrev=that._obj.index+1;
}
that._obj.btnMove(1);
}
//点击右边的按钮
this._obj.rightClick=function(){//this是right
if (that._obj.index ==that._obj.img.length-1){
that._obj.index = 0;
that._obj.iPrev=that._obj.img.length-1;
}else{
that._obj.index++;
that._obj.iPrev=that._obj.index-1;
}
that._obj.btnMove(-1);
}
if (this._obj.btn){
$("<input type='button' id='left' value='<'>").css({
left:0,
marginLeft:20
}).appendTo(this).
after($("<input type='button' id='right' value='>'>").css({
right:0,
marginRight:20
})).parent()
.children("input").css({
position:"absolute",
top:130,
width:30,
height:30,
border:"none",
background:"rgba(200,200,200,0.5)",
borderRadius:"50%",
color:"#ffffff"
})
this.on("click","#left",that._obj.leftClick)
this.on("click","#right",that._obj.rightClick)
this._obj.btnMove=function (type) {
let imgs=that.children(".imgbox").children("a");
imgs.eq(this.iPrev).css({
left:0
}).stop().animate({
left:imgs.eq(0).width()*type
},this.moveTime).end().eq(this.index).css({
left:-imgs.eq(0).width()*type
}).stop().animate({
left:0
},this.moveTime)
if(!this.list) return;
$(".list").children("li").css("background","rgba(200,200,200,0.6)")
.eq(this.index).css("background","#005caf")
}
}
if (this._obj.list){
let str="";
for (var i=0;i<this._obj.img.length;i++){
str+=`<li></li>`;
}
$("<ul class='list'>").html(str).appendTo(this).css({
margin:0,
padding:0,
listStyle:"none",
width:"100%",
height:40,
bottom:0,
position:"absolute",
display:"flex",
justifyContent:"center",
lineHeight:"40px",
textAlign:"center"
}).children("li").css({
width:40,
height:6,
background:"rgba(200,200,200,0.6)",
margin:"0 5px",
textAlign: "center",
cursor:"pointer"
}).eq(0).css({
background:"#005caf"
}).end().click(function () {
if ($(this).index()>that._obj.index){
that._obj.listMove($(this).index(),-1)
}
if ($(this).index()<that._obj.index){
that._obj.listMove($(this).index(),1)
}
that._obj.index = $(this).index();
})
this._obj.listMove=function (iNow,type) {
let imgs=that.children(".imgbox").children("a");
imgs.eq(this.index).css({
left:0
}).stop().animate({
left:imgs.eq(0).width()*type
},this.moveTime).end().eq(iNow).css({
left:-imgs.eq(0).width()*type
}).stop().animate({
left:0
},this.moveTime)
$(".list").children("li").css("background","rgba(200,200,200,0.6)")
.eq(iNow).css("background","#005caf")
}
}
if (this._obj.autoPlay){
this._obj.t=setInterval(()=>{
this._obj.rightClick();
},this._obj.delayTime);
this.hover(function () {
clearInterval(that._obj.t)
},function () {
that._obj.t=setInterval(()=>{
that._obj.rightClick();
},that._obj.delayTime);
})
}
}
var img_arr = ["/media/wysiwyg/2_1_.jpg", "/media/wysiwyg/1_1_.jpg"];
if (isMobile()) {
img_arr = ["/media/wysiwyg/2_M_1_.jpg", "/media/wysiwyg/1_M_1_.jpg"];
}
$(".banner1").banner({
img: img_arr,
href: ["/hotsale.html", "/newarrivals.html"],
btn: true,
list: true,
autoPlay: true,
delayTime: 3000,
moveTime: 500,
index: 0
});
})($);
function isMobile() {
var userAgentInfo = navigator.userAgent;
var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
var mobile_flag = false;
for (var v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
var screen_width = window.screen.width;
var screen_height = window.screen.height;
if(screen_width < 500 && screen_height < 800){
mobile_flag = true;
}
return mobile_flag;
}
</script>
<div class="categories_tab">
<p class="shopbycate-title"> Shop By Cateogry</p>
<div class="shopcatewpt">
......
app/design/frontend/Joshine/breeze/web/css/_custom.less
......@@ -634,76 +634,7 @@ ul {
.cms-home .cms-index-index .page-layout-1column > main#maincontent {
max-width: fit-content;
}
//首页轮播图
#box > ul,li{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 100%;
height: 280px;
margin: 100px auto;
}
#box .list li{
position: absolute;
top: 0;
left: 0;
display: none;
}
#box .list li.current{
display: block;
}
#box .count{
position: absolute;
left: 10px;
bottom: 10px;
width: 100%;
padding: 0.625rem 0;
display: none;
justify-content: center;
gap: 0.5rem;
}
#box .count li{
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000;
text-align: center;
line-height: 20px;
margin-left: 10px;
color: #fff;
opacity: 0.8;
cursor: pointer;
}
#box .count li.current{
background-color: #fff;
opacity: 1;
}
@media (min-width: 768px){
.box-pc{
display: block;
margin-top: -6px;
}
.box-moblie{
display: none;
}
}
@media (max-width: 768px){
#box{
margin: 60px auto;
}
.box-pc{
display: none;
}
.box-moblie{
display: block;
width: 100%;
margin-top: 100px;
}
.categories_tab {
height: 330px;
}
......@@ -711,10 +642,10 @@ ul {
.categories_tab {
clear: both;
margin: 30px 0 ;
margin: 0px 0 ;
padding: 50px;
width: 100%;
height: 500px;
height: 400px;
}
.section-element.shop_by_categories .container {
padding-bottom: 15px;
......@@ -734,7 +665,6 @@ ul {
p.shopbycate-title {
background: #fff;
text-align: center;
margin-top: 120px;
font-size: 28px;
font-weight: bold;
color: #000;
......@@ -977,7 +907,6 @@ p.flashsale-title {
}
.categories_tab {
height: 400px;
margin-top: 250px;
}
.page-bottom {
margin-top: 10px;
......@@ -1580,7 +1509,6 @@ footer{
@media (max-width: 670px) {
.categories_tab {
margin-top: 250px;
}
.flash_sale.news-arrivals{
......@@ -1589,7 +1517,6 @@ footer{
}
@media (min-width: 670px) {
.categories_tab {
margin-top: 250px;
}
}
@media (min-width: 780px){
......@@ -1851,5 +1778,9 @@ background-color: #000;
border: none;
}
//评论列表距离顶部
.product.info.detailed, .block.related {
margin-top: 2%;
}
app/design/frontend/Joshine/breeze/web/js/breeze/custom.js
......@@ -16,34 +16,6 @@
}
})
//home
// 记录当前显示的图片的索引
var current=0;
// 保存定时器
var timer=null;
timer=setInterval(autoPlay,3000)
// 自动播放
function autoPlay(){
current<$('.count li').length-1?current++:current=0;
show()
}
function show(){
$('.list li').hide()
.eq(current).show();
$('.count li').eq(current).toggleClass('current').siblings().removeClass('current');
}
// 手动
// $('.count li').mouseenter(function(){
// current=$(this).index()
// show()
// })
// 鼠标进图自动暂停
$('#box').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(autoPlay,3000);
})
//产品详情调取block
$('#product-intro__freeshipping-more').click(function () {
$('.mask').removeClass('hide');
......
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