首先模板文件要集成了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 %}