shopify跳转产品

{{ '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

將這個值代入就會獲取分類的頁面