shopify自带的浏览最近的产品内容

首先模板文件要集成了Recently viewed products.js，会保留serch的记录

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

          .productRencently  .product-list {
               width:calc(50% + 675px) ;
             margin-left:calc(50% - 675px);
           }

           .productRencently .swiper {
               width: 100%;
               height: 100%;
               box-sizing: border-box;
                 display: grid;
               gap: 4rem;
        }
          .productRencently .swiper-wrapper{
              overflow-x: scroll;
              overflow-y:hidden;
              gap:10px;
             padding-bottom:20px;
        }
         .productRencently .swiper-wrapper::-webkit-scrollbar {
          height: 2px; /* 设置滚动条的高度 */
          background-color: rgba(29,29,27,0.1); /* 设置滚动条的背景色 */

      }
        /* 设置滚动条轨道的颜色 */
        .productRencently .swiper-wrapper::-webkit-scrollbar-track {
          background-color: rgba(29,29,27,0.1);
      }
        .productRencently .swiper-wrapper::-webkit-scrollbar-thumb {
          background-color: #1d1d1b;
          border-radius: 5px;
      }
           .productRencently .swiper-slide {
               text-align: center;
               font-size: 18px;
               background: #fff;
               display: flex;
               justify-content: center;
               align-items: center;
               margin-bottom: 1.875rem;
               width:calc(25% - 10px)!important;
           }

          .productRencently  .swiper-slide img {
               width: 100%;
               height: 100%;
               object-fit: cover;
           }

          .productRencently  .swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal {
               height:0.125rem;
               width: 100%;
               top: unset;
               left: calc(50% - 675px);
               bottom: 0 !important;
           }

          .productRencently  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
               background-color: #000;
               height: 1.25rem!important;
           }

          .productRencently  .product-card_secondary {
               display: none;
           }

          .productRencently  .product-card_figure:hover .product-card_primary {
               display: none;
           }

          .productRencently  .product-card_figure:hover .product-card_secondary {
               display: block;
           }

          .productRencently  .productRencently .product-card_info .product-detail_info h3 {
               font-weight: 400;
               font-size: 10.5px;
               text-align: center;
           }

           .productRencently .product-card_info .product-detail_info h3 a {
               text-decoration: none;
               color: #1d1d1b;
           }

           .productRencently .product-card_info .product-detail_info h3 a {
               text-decoration: none;
               color: #1d1d1b;
                font-size:10.5px;
           }

           .productRencently .product-card_info .product-detail_info .subtilte-product {
               text-align: center;
               justify-content: safe center;
               color: #1d1d1bbf;
           }

           .productRencently .product-card_info .product-detail_info .subtilte-product .tag-data {
               color: #1d1d1bbf;
               font-size: 0.57421875rem;
               vertical-align: middle;
           }

          .productRencently  .collection-size label {
               font-size: 8.25px;
               border: 1px solid #1d1d1bbf;
               width: fit-content;
               align-items: center;
               justify-self: center;
               height: 16.5px;
               padding: 0 9px;
               border-radius: 999px;
               place-items: center;
               box-sizing: border-box;
               display: inline-block;
               vertical-align: middle;
               line-height: 16.5px;
           }

          .productRencently  .product-card_price {
               color: #1d1d1bbf;
               justify-content: safe center;
               flex-wrap: wrap;
               display: flex;
               align-items: baseline;
               gap: 0.09375rem 0.375rem;
               font-weight: 400;
               font-size: 0.65625rem;
           }

          .productRencently  .product-card_price sale-price ins {
               color: #000;
               text-decoration: none;
           }

          .productRencently  .product-detail_info {
               display: grid;
               gap: 0.09375rem;
           }

          .productRencently  discount-number.text-discount {
               background-color: #e5f0ee;
               color: #34514c;
               padding: 2px 4px;
               font-size: 0.515625rem;
           }

           .productRencently .product-card_list {
               position: absolute;
               top: 0.75rem;
               left: 0.75rem;
           }

          .productRencently  .product-card_list span {
               background: #f7f6f9 !important;
               color: #9b83b5 !important;
               border-color: #9b83b5 !important;
               width: max-content;
               align-items: center;
               padding: 2.25px 0.375rem;
               border-radius: 0.0938rem;
               font-size: 0.65625rem;
               font-weight: 400;
           }

           .productRencently .Rencently {
               width: 100%;
               text-align: center;
               font-size: 1.3125rem;
               color: #1d1d1b;
           }

           .productRencently {
               display: flex;
               flex-direction: column;
               gap: 0.375rem;
               width: 100%;
                margin-top:96px;
               margin-bottom:96px;
           }
         @media (max-width:1350px){
              .productRencently {
                   width: 100%;
                   margin: 48px 48px;
               }
             .productRencently .swiper {
               width: 100%;
               height: 100%;
               padding: 0;
               box-sizing: border-box;
              display: grid;
               gap: 4rem;
        }
           .productRencently .product-list {
        width: 100%;
        margin-left: 0;
    }
         }

           @media (max-width:768px) {
              .productRencently {
                width: 100%;
                padding: 0 0 0 10px;
                margin: 48px 0 0 0;
               }
            .productRencently .product-list {
             width: 100%;
             margin: 48px 0  20px 0;
      }
                .productRencently .swiper-slide {
               width:calc(70% - 10px)!important;
           }
             .productRencently .swiper-wrapper {
      overflow-x: scroll;
      overflow-y: hidden;
      height: calc(100% - 20px);
      gap: 10px;
      padding-bottom: 20px;
  }
           }
</style>
<recently-viewed-products
  products-count="{{ section.settings.products_count }}"
  {% if request.page_type == 'product' %}
    exclude-id="{{ product.id }}"
  {% endif %}
>
  {%- assign parsed_terms = search.terms | split: ' OR ' -%}
  {%- if search.performed and search.results_count > 0 -%}
    <div class="productRencently">
      <div class="Rencently">{{ section.settings.Headingtitle }}</div>
      <div class="product-list">
        <div class="swiper mySwiper{{section.id}}">
          <div class="swiper-wrapper">
            {%- for parsed_term in parsed_terms -%}
              {%- assign id = parsed_term | split: 'id:' | last | times: 1 -%}
              {%- assign product_to_render = search.results | where: 'id', id | first -%}
              <div class="swiper-slide">
                <product-card>
                  <div class="product-card_figure">
                    <a href="{{product_to_render.url}}" class="product-link_cart">
                      <img src="{{ product_to_render.media[0]|image_url}}" alt="" class="product-card_primary">
                      <img src="{{ product_to_render.media[1]|image_url }}" alt="" class="product-card_secondary">
                    </a>
                  </div>
                  <div class="product-card_info">
                    <div class="product-card_list">
                      <span class="badge-name">{{ product_to_render.title }}</span>
                    </div>
                    <div class="product-detail_info">
                      <h3 class="product-card_title">
                        <a href="{{product_to_render.url}}" class="product-link">
                          {{- product_to_render.description | strip_html | truncate: 30 -}}
                        </a>
                      </h3>
                      <div class="subtilte-product">
                        {%- for option in product_to_render.options_with_values -%}
                          <span class="tag-data">{{- option.selected_value -}}</span>·
                        {% endfor %}
                      </div>
                      <div class="collection-size">
                        {% for option in product_to_render.options_with_values %}
                          {% if option.name == 'size' %}
                            {% for value in option.values %}
                              <label class="numberSize">{{ value }}</label>
                            {% endfor %}
                          {% endif %}
                        {% endfor %}
                      </div>
                      <div class="product-card_price">
                        <compare-at-price class="text-compare">
                          <del>{{ product_to_render.compare_at_price | money }}</del>
                        </compare-at-price>
                        <sale-price class="text-sale">
                          <ins>From {{ product_to_render.price | money }} </ins>
                        </sale-price>
                        <discount-number class="text-discount">
                          {% assign comparePrice = product_to_render.compare_at_price %}
                          {% assign salePrice = product_to_render.price %}
                          {% assign saveMoney = comparePrice | minus: salePrice %}
                          {% assign discount = saveMoney | divided_by: comparePrice %}
                          <span>Save {{ discount | times: 100 }}%</span>
                        </discount-number>
                      </div>
                    </div>
                  </div>
                </product-card>
              </div>
            {% endfor %}
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  {% endif %}
</recently-viewed-products>
{% schema %}
{
  "name": "viewed products Slide",
  "settings": [
    {
  "type": "text",
  "id": "Headingtitle",
  "label": "Heading",
  "default": "Recently viewed products"
},
     {
      "type": "range",
      "id": "products_count",
      "min": 2,
      "max": 24,
      "label": "Products count",
      "default": 6
    }
  ],
  "presets": [
    {
      "name":"Recently viewed products Slide"
    }
  ]
}
{% endschema %}