{{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}
{{ 'swiper-bundle.min.js' | asset_url | script_tag }}
<script src="{{ 'swiper-bundle.min.js' | asset_url }}" defer></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pageDesigner__2r2c {
width: 100%;
display: grid;
height: auto;
position: relative;
}
@media (min-width: 64em){
.pageDesigner__2r2c {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
gap: 0.5rem;
padding: 0.5rem;
display:flex;
flex:1;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.my-pagination-clickable{
padding: 20px;
top: 0px;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 12px;
color: #000;
}
.swiper-button-disabled{
opacity:0 !important;
}
.product__body__wrapper{
display: flex;
flex-direction: row;
margin-top: 0.5rem;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal!important;
font-style: normal!important
}
.product__title__content{
text-decoration: none;
color: #2e2e2e;
font-size: 14px;
letter-spacing: 0.056rem;
font-weight: normal!important;
font-style: normal!important
}
}
.product__body {
position: absolute;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
padding: 0.6rem 1.2rem 1.2rem 1rem;
-ms-flex-pack: justify;
justify-content: space-between;
transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
z-index: 999;
width: 474px;
}
.product__swatches {
max-width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
z-index: 1;
position: absolute;
right: 0;
top: 0;
left: 0;
padding: 2rem;
-ms-flex-pack: end;
justify-content: flex-end;
pointer-events: none;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
}
.product__swatches__attributes__value {
display: block;
box-sizing: content-box;
width: 6px;
height: 6px;
padding: 5px;
}
.product__swatches__attributes__value div {
width: 100%;
height: 100%;
border-radius: 50%;
}
.product__swatches__attributes__value div span {
display: block;
width: 0;
height: 0;
text-indent: 99em;
overflow: hidden;
white-space: nowrap;
}
.product__swatches__attributes {
display: -ms-flexbox;
display: flex;
padding: 0.8rem;
-ms-flex-wrap: wrap;
flex-wrap: nowrap;
-ms-flex-pack: end;
justify-content: flex-end;
overflow: hidden;
max-width: 50%;
align-items: center;
}
button.productDetail__visuals__wishlistCTA.js-addToWishlist {
border: unset;
padding: 0px;
background: unset;
}
.swiper-button-next,.swiper-button-prev{
opacity: 0;
}
.contentPage:hover .swiper-button-next {
opacity: 1;
}
.contentPage:hover .swiper-button-prev {
opacity: 1;
}
.contentPage:hover .product__swatches{
opacity: 1;
}
.contentPage:hover .product__body{
opacity: 1;
}
</style>
<div class="pageDesigner__2r2c">
{% assign collection = section.settings.collection %}
{% for product in collection.products limit:4 %}
<div style="background-color: blueviolet;width: 474px; position: relative; heigth:100%;" class="contentPage">
<!-- 轮播图 -->
<a data-cc-animate-click href="{{ product.url }}" tabindex="-1">//跳转到产品详情页
<div class="swiper mySwiper01">
<div class="swiper-wrapper">
{%- for imgurl in product.media -%}
<div class="swiper-slide">
<img src="{{ imgurl |image_url }}" alt="" loading="lazy">
</div>
{%- endfor-%}
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- 颜色 -->
<div class="product__swatches">
<div class="product__swatches__attributes js-product-colors">
<div class="product__swatches__attributes__value">
<div style="background: #fffff0">
<span>
Light Ivory
</span>
</div>
</div>
{%- for option in product.options_by_name['Color'].values limit:8 -%}
<a href="/en_nl/le-grand-bambino/213BA007-3100-495.html">
<div class="product__swatches__attributes__value">
<div style="background:{{option}}">
<span>
{{option}}
</span>
</div>
</div>
</a>
{%- assign length = product.options_by_name['Color'].values | size -%}
{%- endfor -%}
{%- if length > 8 -%}
<div class="product__swatches__quantity u-hidden-mobile"> + {{ length | minus: 8 }} </div>
{%- endif-%}
</div>
</div>
<!-- 底部标题 -->
<div class="product__body sizeInitialized" data-sizeurl="https://www.jacquemus.com/on/demandware.store/Sites-Jacquemus-Site/en_NL/Tile-ShowSizeList?pid=213BA007-3164-115">
<div class="product__body__wrapper">
<div class="product__title">
<a href="{{ product.url }}" class="product__title__content">{{product.title}}</a>
</div>
<div class="product__price">
<span>
<span class="product__price__value">
{{product.price |money}}
</span>
</span>
</div>
</div>
<!-- 尺碼 -->
<div class="product__body__wrapper">
<div class="product__sizes">
{%- for size in product.options_by_name['Size'].values -%}
<span class="product__sizes__size ">
{{size}}</span>
{%- endfor -%}
</div>
<div class="product__body__wishlist js-wishlistComponent" data-url="/on/demandware.store/Sites-Jacquemus-Site/en_NL/WishList-Update">
<button class="productDetail__visuals__wishlistCTA js-addToWishlist" data-action="add" data-pid="241DR100-1000-110">
<svg t="1705059587813" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2301" width="20" height="20"><path d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z" fill="#000000" p-id="2302"></path></svg>
</button>
</div>
</div>
</div>
</a>
</div>
{%- endfor -%}
</div>
<script>
var swiper = new Swiper(".mySwiper01", {
cssMode: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
mousewheel: true,
keyboard: true,
});
</script>
{% schema %}
{
"name": "test001",
"class": "test001",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
],
"presets": [
{
"name": "test001",
"settings": {
}
}
]
}
{% endschema %}
如果改爲這個
assign product_url = product.url | within: collection
將這個值代入就會獲取分類的頁面