Примеры

На странице собраны примеры кастомных решений для интернет-магазина.

Рекомендуемые товары

Шаблон кода
<ya-kit-featured-products-controller data-source="{{settings.dataSource}}" as="productsController" count="{{settings.count}}">
	<ya-kit-section-layout
        class="preview-products container"
        palette="{{settings.palette}}"
        padding-top="{{settings.section.paddingTop}}"
        padding-bottom="{{settings.section.paddingBottom}}"
    >
		<ya-kit-section-layout-row>
			<ya-kit-section-title align="{{settings.titleAlign}}" text="{{settings.titleText}}" /> 
        </ya-kit-section-layout-row>
		<ya-kit-section-layout-row>
            <ya-kit-grid columns="{{settings.columns}}" columns-touch="2" h-gap="300" v-gap="600" class="grid">
                not_var{{#each productsController.model as |product|}}
                	<ya-kit-product-snippet-controller as="controller" product="{{product}}">
                        <ya-kit-v-stack gap="200" class="{{cn 'preview-product-card-layout' (if (lt product.totalQuantity 1) 'preview-product-card-layout--oos')}}" align-items="stretch">
                            <ya-kit-link to="{{product.url}}" class="preview-product-card-layout__body">
                                <ya-kit-v-stack gap="200" align-items="stretch">
                                    <div class="{{cn 'preview-product-image-wrapper' (skinRounded '200')}}">
                                        <ya-kit-image src="{{product.mediaItems.0.payload}}" aspect-ratio="1:1" class="preview-product-image" />
                                        <ya-kit-v-stack class="preview-product-card-layout__badges" gap="100">
                                            {{#each product.badges as |badge|}}
                                            	<ya-kit-text class="preview-product-card-layout__badge" weight="bold">
                                                    {{badge.label}}
                                            	</ya-kit-text>
                                            {{/each}} 
                                        </ya-kit-v-stack>
                                    </div>
                                    <ya-kit-v-stack gap="50" class="preview-product-card-layout__title" id="product-tv-station-basic-qled-43">
                                        <ya-kit-text weight="semibold" size="md" lines="2" class="preview-product-card-layout__title-text">{{product.name}}</ya-kit-text>
                                        <ya-kit-prices size="2xl" weight="bold" class="preview-product-card-layout__price" price="{{product.price}}" final-price="{{product.finalPrice}}" />
                                    </ya-kit-v-stack>
                                </ya-kit-v-stack>
                            </ya-kit-link>

                            <div class="preview-product-card-layout__control"> 
                                {{#if (gt controller.quantity 0)}}
                                	<ya-kit-input-stepper width="max" value="{{controller.quantity}}" on-change="{{controller.onUpdateQuantity}}" />
                                {{elseif (gte product.totalQuantity 1)}}
                                	<ya-kit-button color="primary" width="max" on-click="{{controller.onAddToCart}}">
                                        В корзину
                                	</ya-kit-button>
                                {{elseif (eql product.totalQuantity 0)}}
                                	<ya-kit-button color="secondary" is-disabled="1"> 
                                        Нет в наличии
                                	</ya-kit-button>
                                {{/if}}
                            </div> 
                        </ya-kit-v-stack>
                    </ya-kit-product-snippet-controller> 
                {{/each}}
            </ya-kit-grid>
		</ya-kit-section-layout-row>
	</ya-kit-section-layout>
</ya-kit-featured-products-controller>
CSS
.container {
    width: 100%;
	max-width: 1056px;
	margin: 0 auto;
}
 
.grid {
    width: 100%;
}

.preview-product-card-layout__body {
    display: block;
}

.preview-product-image-wrapper {
    position: relative;
    border-radius: var(--ys-current-skin-border-radius);
    overflow: hidden;
}

.preview-product-card-layout--oos .preview-product-image-wrapper {
    opacity: 0.75;
}

.preview-product-image-wrapper::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.0375);
    pointer-events: none;
    top: 0;
    left: 0;
}

.preview-product-image  {
    pointer-events: none;
    transition: transform .2s ease-in-out;
    transform-origin: center;
    transform: scale(1) translate3d(0, 0, 0);
}

.preview-product-card-layout:not(.preview-product-card-layout--oos) .preview-product-card-layout__body:hover .preview-product-image  {
    transform: scale(1.15) translate3d(0, 0, 0);
}

.preview-product-card-layout__body:hover .preview-product-card-layout__title-text {
    color: var(--ys-color-token-brand-primary)
}

.preview-product-card-layout__badges {
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    padding: 12px;
    position: absolute;
}

.preview-product-card-layout__badge {
    border-radius: 16px;
    padding: 2px 12px;
    background-color: #000;
    color: #ffffff;
}

.preview-product-card-layout__control {
    margin-top: auto;
}
JSON Schema
 1{
 2  "type": "object",
 3  "title": "",
 4  "$schema": "http://json-schema.org/draft-07/schema#",
 5  "required": [
 6    "count",
 7    "titleText",
 8    "titleAlign",
 9    "columns",
10    "section",
11    "columnsTouch",
12    "columns"
13  ],
14  "properties": {
15    "dataSource": {
16      "$ref": "#/definitions/ProductsSource",
17      "title": "Товары"
18    },
19    "count": {
20      "step": 2,
21      "type": "number",
22      "unit": "шт.",
23      "title": "Общее количество карточек",
24      "default": 6,
25      "maximum": 24,
26      "minimum": 4
27    },
28    "columns": {
29      "step": 1,
30      "type": "number",
31      "title": "Количество колонок",
32      "default": 3,
33      "maximum": 5,
34      "minimum": 3
35    },
36    "titleText": {
37      "type": "string",
38      "title": "Заголовок"
39    },
40    "titleAlign": {
41	  "$ref": "#/definitions/SectionTitleAlign",
42	  "title": "Расположение заголовка"
43    },
44    "palette": {
45      "$ref": "#/definitions/Palette",
46      "title": "Палитра цветов"
47    },
48    "section": {
49      "type": "object",
50      "title": "Размеры секции",
51      "required": [
52        "isFullscreen",
53        "paddingTop",
54        "paddingBottom"
55      ],
56      "properties": {
57        "isFullscreen": {
58          "$ref": "#/definitions/OptionalFlag",
59          "title": "Растянуть секцию на весь экран"
60        },
61        "hPaddingDesktop": {
62          "$ref": "#/definitions/SectionHPadding",
63          "title": "Отступ по краям на десктопе"
64        },
65        "hPaddingMobile": {
66          "$ref": "#/definitions/SectionHPaddingTouch",
67          "title": "Отступ по краям на телефоне"
68        },
69        "paddingTop": {
70          "$ref": "#/definitions/SectionVPadding",
71          "title": "Отступ над секцией"
72        },
73        "paddingBottom": {
74          "$ref": "#/definitions/SectionVPadding",
75          "title": "Отступ под секцией"
76        }
77      }
78    }
79  }
80}

Список товаров

Шаблон кода

<ya-kit-featured-products-controller data-source="{{settings.dataSource}}" as="productsController" count="{{settings.count}}">
	<ya-kit-section-layout
        class="preview-products container"
        palette="{{settings.palette}}"
        padding-top="{{settings.section.paddingTop}}"
        padding-bottom="{{settings.section.paddingBottom}}"
    >
		<ya-kit-section-layout-row>
			<ya-kit-section-title align="{{settings.titleAlign}}" text="{{settings.titleText}}" /> 
        </ya-kit-section-layout-row>
		<ya-kit-section-layout-row>
            <ya-kit-grid columns="{{settings.columns}}" columns-touch="2" h-gap="300" v-gap="600" class="grid">
                {{#each productsController.model as |product|}}
                	<ya-kit-product-snippet-controller as="controller" product="{{product}}">
                        <ya-kit-v-stack gap="200" class="not_var{{cn 'preview-product-card-layout' (if (lt product.totalQuantity 1) 'preview-product-card-layout--oos')}}" align-items="stretch">
                            <ya-kit-link to="{{product.url}}" class="preview-product-card-layout__body">
                                <ya-kit-v-stack gap="200" align-items="stretch">
                                    <div class="not_var{{cn 'preview-product-image-wrapper' (skinRounded '200')}}">
                                        <ya-kit-image src="{{product.mediaItems.0.payload}}" aspect-ratio="1:1" class="preview-product-image" />
                                        <ya-kit-v-stack class="preview-product-card-layout__badges" gap="100">
                                            {{#each product.badges as |badge|}}
                                            	<ya-kit-text class="preview-product-card-layout__badge" weight="bold">
                                                    {{badge.label}}
                                            	</ya-kit-text>
                                            {{/each}} 
                                        </ya-kit-v-stack>
                                    </div>
                                    <ya-kit-v-stack gap="50" class="preview-product-card-layout__title" id="product-tv-station-basic-qled-43">
                                        <ya-kit-text weight="semibold" size="md" lines="2" class="preview-product-card-layout__title-text">{{product.name}}</ya-kit-text>
                                        <ya-kit-prices size="2xl" weight="bold" class="preview-product-card-layout__price" price="{{product.price}}" final-price="{{product.finalPrice}}" />
                                    </ya-kit-v-stack>
                                </ya-kit-v-stack>
                            </ya-kit-link>

                            <div class="preview-product-card-layout__control"> 
                                {{#if (gt controller.quantity 0)}}
                                	<ya-kit-input-stepper width="max" value="{{controller.quantity}}" on-change="{{controller.onUpdateQuantity}}" />
                                {{elseif (gte product.totalQuantity 1)}}
                                	<ya-kit-button color="primary" width="max" on-click="{{controller.onAddToCart}}">
                                        В корзину
                                	</ya-kit-button>
                                {{elseif (eql product.totalQuantity 0)}}
                                	<ya-kit-button color="secondary" is-disabled="1"> 
                                        Нет в наличии
                                	</ya-kit-button>
                                {{/if}}
                            </div> 
                        </ya-kit-v-stack>
                    </ya-kit-product-snippet-controller> 
                {{/each}}
            </ya-kit-grid>
		</ya-kit-section-layout-row>
	</ya-kit-section-layout>
</ya-kit-featured-products-controller>
CSS
.container {
    overflow: visible;
}

.grid {
    width: 100%;
}

.cover {
    min-width: 360px;
    max-width: 360px;
    overflow: hidden;
}

.cover img {
    transition: transform 250ms linear;
}

.cover:hover img {
    transform: scale(1.2);
}

.preview-product-card-layout__body {
    display: block;
}

.preview-product-image-wrapper {
    position: relative;
    border-radius: var(--ys-current-skin-border-radius);
    overflow: hidden;
}

.preview-product-card-layout--oos .preview-product-image-wrapper {
    opacity: 0.75;
}

.preview-product-image-wrapper::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.0375);
    pointer-events: none;
    top: 0;
    left: 0;
}

.preview-product-image  {
    pointer-events: none;
    transition: transform .2s ease-in-out;
    transform-origin: center;
    transform: scale(1) translate3d(0, 0, 0);
}

.preview-product-card-layout:not(.preview-product-card-layout--oos) .preview-product-card-layout__body:hover .preview-product-image  {
    transform: scale(1.15) translate3d(0, 0, 0);
}

.preview-product-card-layout__body:hover .preview-product-card-layout__title-text {
    color: var(--ys-color-token-brand-primary)
}

.preview-product-card-layout__badges {
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    padding: 12px;
    position: absolute;
}

.preview-product-card-layout__badge {
    border-radius: 16px;
    padding: 2px 12px;
    background-color: #000;
    color: #ffffff;
}

.preview-product-card-layout__control {
    margin-top: auto;
}

.filters {
    width: 360px;
    min-width: 360px;
    padding: 24px 32px;
    margin-top: -24px;
}
JSON Schema
 1{
 2  "type": "object",
 3  "title": "",
 4  "$schema": "http://json-schema.org/draft-07/schema#",
 5  "required": [
 6    "columns",
 7    "section",
 8    "columns"
 9  ],
10  "properties": {
11    "columns": {
12      "step": 1,
13      "type": "number",
14      "title": "Количество колонок",
15      "default": 3,
16      "maximum": 5,
17      "minimum": 3
18    },
19    "palette": {
20      "$ref": "#/definitions/Palette",
21      "title": "Палитра цветов"
22    },
23    "section": {
24      "type": "object",
25      "title": "Размеры секции",
26      "required": [
27        "isFullscreen",
28        "paddingTop",
29        "paddingBottom"
30      ],
31      "properties": {
32        "isFullscreen": {
33          "$ref": "#/definitions/OptionalFlag",
34          "title": "Растянуть секцию на весь экран"
35        },
36        "hPaddingDesktop": {
37          "$ref": "#/definitions/SectionHPadding",
38          "title": "Отступ по краям на десктопе"
39        },
40        "hPaddingMobile": {
41          "$ref": "#/definitions/SectionHPaddingTouch",
42          "title": "Отступ по краям на телефоне"
43        },
44        "paddingTop": {
45          "$ref": "#/definitions/SectionVPadding",
46          "title": "Отступ над секцией"
47        },
48        "paddingBottom": {
49          "$ref": "#/definitions/SectionVPadding",
50          "title": "Отступ под секцией"
51        }
52      }
53    }
54  },
55  "definitions": {}
56}
57

Обратиться в службу поддержки

Написать в чат

Написать письмо

Предыдущая
Глобальные настройки
Следующая
JSON Schema