Git
Bước 1: Checkout
Checkout nhánh
features/PAG-54-convert-to-webflux
Bước 2: Chạy docker dev
docker-compose -f docker-compose-dev.yml upBước 3: Chạy Services
Bước 4: Tạo tài khoản
Endpoint: http://localhost:8762/api/v1/users/roles/admin/secret
Method: POST
Body
{
"name": "ADMIN_GLOBAL",
"secretKey": "{w`3[4G=Q3+n#X\\,"
}Endpoint: http://localhost:8762/api/v1/users/admin/secret
Method: Post
Body
{
"username": "admin",
"email": "admin@myshopkit.app",
"name": "admin",
"password": "admin",
"roles": [
{
"id": 1,
"name": "ADMIN_GLOBAL"
}
],
"secretKey": "{w`3[4G=Q3+n#X\\,"
}Endpoint: http://localhost:8762/api/v1/auth/users/
Method: Post
Body
{
"username": "admin",
"password": "admin"
}=> Lấy được Token.
Bước 5: Tạo Pages
Endpoint: http://localhost:8762/api/v1/pages/admin
Method: Post
Body
{
"data": {
"page": {
"id": "homepage1",
"type": "home",
"label": "Home page 1",
"sections": [
{
"id": "id_31e24962-b123-46c1-9b4e-e5ddfbf808e8",
"versionId": "cf6044ba-bc4a-4eaa-b3e9-68e113128744",
"categoryId": "other",
"enable": true,
"label": "Support",
"data": {
"liquid": "{% assign backgroundFixed = general_settings.fixed ? 'fixed' : 'scroll' %}\n{% assign backgroundColor = general_settings.background_color_enable ? 'background-color:' | append: general_settings.color | append: ';' : '' %}\n{% assign backgroundColorDark = general_settings.background_color_enable ? 'background-color:' | append: general_settings.color_dark | append: ';' : '' %}\n{% assign backgroundImage = general_settings.background_image_enable ? 'background-image: url(' | append: general_settings.image | append: \n');background-attachment:' | append: backgroundFixed | append: ';background-size:' | append: general_settings.size | append: ';' : '' %}\n\n<section data-id=\"{{uniqueId}}\" class=\"veda-section\" css=\"{{ backgroundColor }}{{ backgroundImage }}\" dark-css=\"{{ backgroundColorDark }}\">\n <div class=\"core-overlay\" css=\"background-color: {{ general_settings.overlay }}\"></div>\n <div class=\"container\">\n <div class=\"row row-cols-lg-{{ column.lg }} row-cols-md-{{ column.md }} row-cols-sm-{{ column.sm }} row-cols-{{ column.xs }}\">\n {% for item in support %}\n <div>\n <div component=\"support\" class=\"icon-text\">\n <div class=\"icon-text__icon\" css=\"{{ item.icon_styles }}\">{{ item.icon }}</div>\n <div class=\"icon-text__content\">\n <h3 class=\"icon-text__title\" css=\"{{ item.title_styles }}\">{{ item.title }}</h3>\n <div class=\"icon-text__text\" css=\"{{ item.text_styles }}\">{{ item.text }}</div>\n </div>\n </div>\n </div>\n {% endfor %}\n </div>\n </div>\n</section>",
"scss": "$container: \"[data-id='#{$uniqueId}']\";\n\n\n.icon-text {\n display: flex;\n align-items: center;\n}\n\n.icon-text__icon {\n font-size: 40px;\n @include autoDirection((\n margin-right: 20px\n ));\n}\n\n.icon-text__content {\n p {\n margin-bottom: 0;\n }\n}\n\n.icon-text__title {\n font-size: 20px;\n margin-bottom: 0;\n}",
"js": "/** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);",
"settings": [
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e2",
"children": [
{
"children": true,
"type": "switch",
"label": {
"en": "Background color enable",
"vi": "Bật màu nền"
},
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "rgba(248,248,252,1)",
"type": "color",
"label": {
"en": "Color",
"vi": "Màu"
},
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": "rgba(38,37,108,1)",
"type": "color",
"label": {
"en": "Color ( for theme dark )",
"vi": "Màu ( cho chủ đề tối )"
},
"name": "color_dark",
"id": "id_bacf501e-a884-42a4-a708-e1ffa64fc865",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Background image enable",
"vi": "Bật ảnh nền"
},
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Fixed",
"vi": "Cố định"
},
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": {
"en": "Size",
"vi": "Kích cỡ"
},
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
},
{
"children": "rgba(15,15,54,0)",
"type": "color",
"label": {
"en": "Overlay",
"vi": "Lớp phủ"
},
"name": "overlay",
"id": "id_d03a1a4f-7432-4713-b161-0c4fb9328f22",
"disable": false
}
],
"type": "object",
"label": {
"en": "General settings",
"vi": "Cài đặt chung"
},
"name": "general_settings",
"open": true,
"drawer": false,
"disable": false
},
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"id": "4bbc7c77-b6ae-4517-993c-316475ce9ea7",
"children": [
{
"children": "<i class=\"fal fa-shipping-fast\"></i>",
"type": "icon",
"label": {
"en": "Icon",
"vi": "Biểu tượng"
},
"name": "icon",
"id": "id_b96dc0a5-474e-4e40-821b-96ed1a95e701",
"disable": false
},
{
"children": "Free Shipping",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_3aa6843e-2d18-4e1c-9da1-52aa97b44525",
"disable": false
},
{
"children": "<p>Free shipping on all order</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_9ae8f6a6-ecee-463a-b26c-468c8d4dd66d",
"disable": false
},
{
"children": "start/hover:end/hover",
"type": "styleBox",
"label": {
"en": "Icon styles",
"vi": "Thiết kế biểu tượng"
},
"name": "icon_styles",
"id": "id_300d8579-066d-4434-810d-14b87b12be01",
"disable": false
},
{
"children": "start/hover:color:rgba(250,140,140,1);end/hover",
"type": "styleBox",
"label": {
"en": "Title styles",
"vi": "Thiết kế tiêu đề"
},
"name": "title_styles",
"id": "id_ab09b857-7a40-4dec-a153-d7681b787011",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Text styles",
"vi": "Thiết kế văn bản"
},
"name": "text_styles",
"id": "id_0b16328c-1a60-4551-9ee6-a2f5e6f258df",
"disable": false
}
]
},
{
"id": "683fbb72-7676-4f67-8d84-073733dd0775",
"children": [
{
"children": "<i class=\"fal fa-clock\"></i>",
"type": "icon",
"label": {
"en": "Icon",
"vi": "Biểu tượng"
},
"name": "icon",
"id": "id_b96dc0a5-474e-4e40-821b-96ed1a95e701",
"disable": false
},
{
"children": "Support 24/7",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_3aa6843e-2d18-4e1c-9da1-52aa97b44525",
"disable": false
},
{
"children": "<p>Free shipping on all order</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_9ae8f6a6-ecee-463a-b26c-468c8d4dd66d",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Icon styles",
"vi": "Thiết kế biểu tượng"
},
"name": "icon_styles",
"id": "id_300d8579-066d-4434-810d-14b87b12be01",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Title styles",
"vi": "Thiết kế tiêu đề"
},
"name": "title_styles",
"id": "id_ab09b857-7a40-4dec-a153-d7681b787011",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Text styles",
"vi": "Thiết kế văn bản"
},
"name": "text_styles",
"id": "id_0b16328c-1a60-4551-9ee6-a2f5e6f258df",
"disable": false
}
]
},
{
"id": "c276d83c-f5f0-4014-9c05-26f190a1efa8",
"children": [
{
"children": "<i class=\"fal fa-money-bill\"></i>",
"type": "icon",
"label": {
"en": "Icon",
"vi": "Biểu tượng"
},
"name": "icon",
"id": "id_b96dc0a5-474e-4e40-821b-96ed1a95e701",
"disable": false
},
{
"children": "Money Return",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_3aa6843e-2d18-4e1c-9da1-52aa97b44525",
"disable": false
},
{
"children": "<p>Free shipping on all order</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_9ae8f6a6-ecee-463a-b26c-468c8d4dd66d",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Icon styles",
"vi": "Thiết kế biểu tượng"
},
"name": "icon_styles",
"id": "id_300d8579-066d-4434-810d-14b87b12be01",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Title styles",
"vi": "Thiết kế tiêu đề"
},
"name": "title_styles",
"id": "id_ab09b857-7a40-4dec-a153-d7681b787011",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Text styles",
"vi": "Thiết kế văn bản"
},
"name": "text_styles",
"id": "id_0b16328c-1a60-4551-9ee6-a2f5e6f258df",
"disable": false
}
]
},
{
"id": "8cb00980-6d7d-415d-ac03-72c4f7e69ff8",
"children": [
{
"children": "<i class=\"fal fa-coffee\"></i>",
"type": "icon",
"label": {
"en": "Icon",
"vi": "Biểu tượng"
},
"name": "icon",
"id": "id_b96dc0a5-474e-4e40-821b-96ed1a95e701",
"disable": false
},
{
"children": "Order Discount",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_3aa6843e-2d18-4e1c-9da1-52aa97b44525",
"disable": false
},
{
"children": "<p>Free shipping on all order</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_9ae8f6a6-ecee-463a-b26c-468c8d4dd66d",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Icon styles",
"vi": "Thiết kế biểu tượng"
},
"name": "icon_styles",
"id": "id_300d8579-066d-4434-810d-14b87b12be01",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Title styles",
"vi": "Thiết kế tiêu đề"
},
"name": "title_styles",
"id": "id_ab09b857-7a40-4dec-a153-d7681b787011",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Text styles",
"vi": "Thiết kế văn bản"
},
"name": "text_styles",
"id": "id_0b16328c-1a60-4551-9ee6-a2f5e6f258df",
"disable": false
}
]
}
],
"type": "array",
"label": {
"en": "Support",
"vi": "Hỗ trợ"
},
"name": "support",
"open": true,
"drawer": false,
"disable": false
},
{
"id": "id_5c108f8f-9869-4706-b989-29a88fc91072",
"type": "responsive",
"children": {
"lg": 4,
"md": 3,
"sm": 2,
"xs": 1
},
"label": {
"en": "Column",
"vi": "Cột"
},
"name": "column",
"disable": false,
"max": 6,
"min": 1
}
],
"schema": {
"settings": [
{
"id": "id_5c108f8f-9869-4706-b989-29a88fc91072",
"type": "responsive",
"children": {
"lg": 3,
"md": 1,
"sm": 1,
"xs": 1
},
"label": {
"en": "Column",
"vi": "Cột"
},
"name": "column",
"disable": false,
"max": 6,
"min": 1
}
],
"blocks": [
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e2",
"children": [
{
"children": false,
"type": "switch",
"label": {
"en": "Background color enable",
"vi": "Bật màu nền"
},
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "#fff",
"type": "color",
"label": {
"en": "Color",
"vi": "Màu"
},
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": "rgba(23,23,79,1)",
"type": "color",
"label": {
"en": "Color ( for theme dark )",
"vi": "Màu ( cho chủ đề tối )"
},
"name": "color_dark",
"id": "id_bacf501e-a884-42a4-a708-e1ffa64fc865",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Background image enable",
"vi": "Bật ảnh nền"
},
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "https://images.pexels.com/photos/9940522/pexels-photo-9940522.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Fixed",
"vi": "Cố định"
},
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": {
"en": "Size",
"vi": "Kích cỡ"
},
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
},
{
"children": "rgba(15,15,54,0)",
"type": "color",
"label": {
"en": "Overlay",
"vi": "Lớp phủ"
},
"name": "overlay",
"id": "id_d03a1a4f-7432-4713-b161-0c4fb9328f22",
"disable": false
}
],
"type": "object",
"label": {
"en": "General settings",
"vi": "Cài đặt chung"
},
"name": "general_settings",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"children": "<i class=\"far fa-atom\"></i>",
"type": "icon",
"label": {
"en": "Icon",
"vi": "Biểu tượng"
},
"name": "icon",
"id": "id_b96dc0a5-474e-4e40-821b-96ed1a95e701",
"disable": false
},
{
"children": "Title",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_3aa6843e-2d18-4e1c-9da1-52aa97b44525",
"disable": false
},
{
"children": "<p>Text</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_9ae8f6a6-ecee-463a-b26c-468c8d4dd66d",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Icon styles",
"vi": "Thiết kế biểu tượng"
},
"name": "icon_styles",
"id": "id_300d8579-066d-4434-810d-14b87b12be01",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Title styles",
"vi": "Thiết kế tiêu đề"
},
"name": "title_styles",
"id": "id_ab09b857-7a40-4dec-a153-d7681b787011",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Text styles",
"vi": "Thiết kế văn bản"
},
"name": "text_styles",
"id": "id_0b16328c-1a60-4551-9ee6-a2f5e6f258df",
"disable": false
}
],
"type": "array",
"label": {
"en": "Support",
"vi": "Hỗ trợ"
},
"name": "support",
"open": false,
"drawer": false,
"disable": false
}
]
}
}
},
{
"id": "id_ddcb9656-00ea-41a2-81fa-329334caec00",
"versionId": "c76d5292-fb3b-4651-ac32-67b999295576",
"categoryId": "other",
"enable": true,
"label": "Feature",
"data": {
"liquid": "{% assign backgroundFixed = general_settings.fixed ? 'fixed' : 'scroll' %}\n{% assign backgroundColor = general_settings.background_color_enable ? 'background-color:' | append: general_settings.color | append: ';' : '' %}\n{% assign backgroundColorDark = general_settings.background_color_enable ? 'background-color:' | append: general_settings.color_dark | append: ';' : '' %}\n{% assign backgroundImage = general_settings.background_image_enable ? 'background-image: url(' | append: general_settings.image | append: \n');background-attachment:' | append: backgroundFixed | append: ';background-size:' | append: general_settings.size | append: ';' : '' %}\n\n<section data-id=\"{{uniqueId}}\" class=\"veda-section\" css=\"{{ backgroundColor }}{{ backgroundImage }}\" dark-css=\"{{ backgroundColorDark }}\">\n <div class=\"core-overlay\" css=\"background-color: {{ general_settings.overlay }}\"></div>\n <div class=\"container\">\n <div component=\"heading\" class=\"core-heading\" css=\"margin-bottom: 15px\">\n <h2 class=\"core-heading__title\">{{ heading.title }}</h2>\n <div class=\"core-heading__text\">{{ heading.text }}</div>\n </div>\n <div class=\"core-grid-auto\" css=\"--core-grid-auto-column-width: 300px\">\n {% for item in content %}\n <div class=\"core-grid-auto__item {{ forloop.index0 == 0 ? 'core-grid-auto__item--large' : '' }}\">\n <a href=\"{{ item.link }}\">\n <div component=\"content\" class=\"image-box\" css=\"border-radius: {{ item.radius }}px\">\n <div class=\"image-box__img core-image-cover\" css=\"background-image: url('{{ item.image }}'); border-radius: {{ item.radius }}px; --aspect-ratio: 1\"></div>\n <h3 class=\"image-box__title\">{{ item.title }}</h3>\n </div>\n </a>\n </div>\n {% endfor %}\n </div>\n </div>\n</section>",
"scss": "$container: \"[data-id='#{$uniqueId}']\";\n\n.feature-grid {\n display: grid;\n grid-gap: 30px;\n @media (min-width: 768px) {\n grid-template-columns: repeat(4, 1fr);\n }\n}\n\n.feature-grid__item:first-child {\n @media (min-width: 768px) {\n grid-column: span 2;\n grid-row: span 2;\n }\n}\n\n.image-box {\n position: relative;\n overflow: hidden;\n &:hover {\n .image-box__img {\n transform: scale(1.1);\n }\n }\n}\n\n.image-box__img {\n transition: all 0.6s;\n}\n\n.image-box__title {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translate(-50%, 0);\n font-size: 16px;\n background-color: var(--color-light);\n color: var(--color-gray8);\n padding: 12px 20px;\n border-radius: 10px;\n min-width: 130px;\n text-align: center;\n}",
"js": "/** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);\n",
"settings": [
{
"id": "id_93461c15-a7d5-4dd2-b049-16ed60ff0c5b",
"children": [
{
"id": "592414b5-50a3-44f2-8b91-4108f75fe309",
"children": [
{
"children": "https://image.freepik.com/free-photo/full-length-view-trendy-korean-girl-with-skateboard-studio-shot-gorgeous-asian-woman-holding-longboard-purple-background_197531-14647.jpg",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "Now trending",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": {
"en": "Link",
"vi": "Đường dẫn"
},
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
]
},
{
"id": "9a9f8c33-284d-4d4a-99a4-28848afce6d2",
"children": [
{
"children": "https://image.freepik.com/free-photo/lovely-hispanic-woman-with-bronze-skin-denim-shorts-having-fun-during-indoor-summer-good-looking-asian-girl-with-longboard-spending-free-time_197531-3996.jpg",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "Campaign",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": {
"en": "Link",
"vi": "Đường dẫn"
},
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
]
},
{
"id": "e14ec5cb-b9d8-4806-a323-96673fb864d3",
"children": [
{
"children": "https://image.freepik.com/free-photo/sensual-korean-woman-black-hat-looking-camera-studio-shot-ecstatic-asian-model-isolated-beige-background_197531-14545.jpg",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "Lookbook",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": {
"en": "Link",
"vi": "Đường dẫn"
},
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
]
},
{
"id": "835eed4a-9ff0-4168-8f2a-8881eb83aca6",
"children": [
{
"children": "https://image.freepik.com/free-photo/beautiful-woman-white-bucket-hat-fashion-studio-shoot_53876-102852.jpg",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "New arrivals",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": {
"en": "Link",
"vi": "Đường dẫn"
},
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
]
},
{
"id": "65a1e2cb-7458-4804-94df-a14fff5bbb0d",
"children": [
{
"children": "https://image.freepik.com/free-photo/blissful-lady-trendy-summer-clothes-posing-with-camera-yellow-positive-beautiful-girl-hat-chilling-studio_197531-11082.jpg",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "Sale",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": {
"en": "Link",
"vi": "Đường dẫn"
},
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
]
}
],
"type": "array",
"label": {
"en": "Content",
"vi": "Nội dung"
},
"name": "content",
"open": true,
"drawer": false,
"disable": false
},
{
"id": "id_1fc238f9-1302-41ad-b401-36f7f0495050",
"children": [
{
"children": "Feature",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_d39db6d5-5a3a-47e6-98e2-3bc4b626824e",
"disable": false
},
{
"children": "<p>Lorem ipsum dolor sit amet</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_ef962774-164c-4606-8651-ef48bdd42a78",
"disable": false
}
],
"type": "object",
"label": {
"en": "Heading",
"vi": "Tiêu đề"
},
"name": "heading",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"children": false,
"type": "switch",
"label": {
"en": "Background color enable",
"vi": "Bật màu nền"
},
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "#fff",
"type": "color",
"label": {
"en": "Color",
"vi": "Màu"
},
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": "rgba(23,23,79,1)",
"type": "color",
"label": {
"en": "Color ( for dark theme )",
"vi": "Màu ( cho chủ đề tối )"
},
"name": "color_dark",
"id": "id_abcbb796-47d8-44bb-a292-752ff52a3319",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Background image enable",
"vi": "Bật ảnh nền"
},
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Fixed",
"vi": "Cố định"
},
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": {
"en": "Size",
"vi": "Kích cỡ"
},
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
},
{
"children": "rgba(15,15,54,0)",
"type": "color",
"label": {
"en": "Overlay",
"vi": "Lớp phủ"
},
"name": "overlay",
"id": "id_3c962cc0-e6ee-4671-a302-0dcb75708bda",
"disable": false
}
],
"type": "object",
"label": {
"en": "General settings",
"vi": "Cài đặt chung"
},
"name": "general_settings",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_d5f0da8e-4af5-4ced-9e4e-f91a4a691e01",
"children": [
{
"children": "",
"type": "styleBox",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_d58117a2-96b0-4a7d-892e-dfafe5f3770d",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_9b5c1e0b-dd2f-4d2f-89ca-fe0907180a2c",
"disable": false
}
],
"type": "object",
"label": {
"en": "Design",
"vi": "Thiết kế"
},
"name": "design",
"open": true,
"drawer": false,
"disable": false
}
],
"schema": {
"settings": [],
"blocks": [
{
"id": "id_93461c15-a7d5-4dd2-b049-16ed60ff0c5b",
"children": [
{
"children": "",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "Title",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": {
"en": "Link",
"vi": "Đường dẫn"
},
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
],
"type": "array",
"label": {
"en": "Content",
"vi": "Nội dung"
},
"name": "content",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_1fc238f9-1302-41ad-b401-36f7f0495050",
"children": [
{
"children": "Title",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_d39db6d5-5a3a-47e6-98e2-3bc4b626824e",
"disable": false
},
{
"children": "<p>Text</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_ef962774-164c-4606-8651-ef48bdd42a78",
"disable": false
}
],
"type": "object",
"label": {
"en": "Heading",
"vi": "Tiêu đề"
},
"name": "heading",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"children": false,
"type": "switch",
"label": {
"en": "Background color enable",
"vi": "Bật màu nền"
},
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "#fff",
"type": "color",
"label": {
"en": "Color",
"vi": "Màu"
},
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": "rgba(23,23,79,1)",
"type": "color",
"label": {
"en": "Color ( for dark theme )",
"vi": "Màu ( cho chủ đề tối )"
},
"name": "color_dark",
"id": "id_abcbb796-47d8-44bb-a292-752ff52a3319",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Background image enable",
"vi": "Bật ảnh nền"
},
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "https://images.pexels.com/photos/9940522/pexels-photo-9940522.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Fixed",
"vi": "Cố định"
},
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": {
"en": "Size",
"vi": "Kích cỡ"
},
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
},
{
"children": "rgba(15,15,54,0)",
"type": "color",
"label": {
"en": "Overlay",
"vi": "Lớp phủ"
},
"name": "overlay",
"id": "id_3c962cc0-e6ee-4671-a302-0dcb75708bda",
"disable": false
}
],
"type": "object",
"label": {
"en": "General settings",
"vi": "Cài đặt chung"
},
"name": "general_settings",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_d5f0da8e-4af5-4ced-9e4e-f91a4a691e01",
"children": [
{
"children": "",
"type": "styleBox",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_d58117a2-96b0-4a7d-892e-dfafe5f3770d",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_9b5c1e0b-dd2f-4d2f-89ca-fe0907180a2c",
"disable": false
}
],
"type": "object",
"label": {
"en": "Design",
"vi": "Thiết kế"
},
"name": "design",
"open": false,
"drawer": false,
"disable": false
}
]
}
}
},
{
"id": "id_aa443f98-590d-4b1a-ae76-2fb480bff68b",
"versionId": "dcf6513e-9f8d-431d-aed7-6998fe1f70ed",
"categoryId": "other",
"enable": true,
"label": "Collections 2",
"data": {
"liquid": "{% assign backgroundFixed = general_settings.fixed ? 'fixed' : 'scroll' %}\n{% assign backgroundColor = general_settings.background_color_enable ? 'background-color:' | append: general_settings.color | append: ';' : '' %}\n{% assign backgroundColorDark = general_settings.background_color_enable ? 'background-color:' | append: general_settings.color_dark | append: ';' : '' %}\n{% assign backgroundImage = general_settings.background_image_enable ? 'background-image: url(' | append: general_settings.image | append: \n');background-attachment:' | append: backgroundFixed | append: ';background-size:' | append: general_settings.size | append: ';' : '' %}\n\n<section data-id=\"{{uniqueId}}\" class=\"veda-section\" css=\"{{ backgroundColor }}{{ backgroundImage }}\" dark-css=\"{{ backgroundColorDark }}\">\n <div class=\"core-overlay\" css=\"background-color: {{ general_settings.overlay }}\"></div>\n <div class=\"container\">\n <div component=\"heading\" class=\"core-heading\" css=\"margin-bottom: 15px\">\n <h2 class=\"core-heading__title\">{{ heading.title }}</h2>\n <div class=\"core-heading__text\">{{ heading.text }}</div>\n </div>\n <div>\n <shopify>\n {% assign collection = collections['{{ content.collection }}'] %}\n <div class=\"product_list row\">\n {% for product in collection.products %}\n <div class=\"col-sm-2 col-md-3\">\n <div component=\"content\" class=\"product-2\">\n <div class=\"product-2__header\">\n <div class=\"product-2__image\">\n <div class=\"core-image-cover\" css=\"--aspect-ratio: 3 / 4\">\n <img src=\"{{ product.featured_image.src | img_url: '300x300' }}\" alt=\"{{ product.title }}\">\n </div>\n </div>\n </div>\n <div class=\"product-2__body\">\n <h2 class=\"product-2__title\" style=\"order: {{ content.flex_order_order.title }}\">\n <a href=\"/products/{{ product.handle }}\" class=\"product-2__name\">{{ product.title }}</a>\n </h2>\n <div class=\"product-2__prices\" style=\"order: {{ content.flex_order_order.price }}\">\n <div class=\"product-2__saled-price\">{{ product.price | money }}</div>\n {% if product.compare_at_price > product.price %}\n <div class=\"product-2__origin-price\">{{ product.compare_at_price | money }}</div>\n {% endif %}\n </div>\n </div>\n </div>\n </div>\n {% endfor %}\n </div>\n </shopify>\n </div>\n </div>\n</section>",
"scss": "$container: \"[data-id='#{$uniqueId}']\";\n\n.product-2__title {\n font-size: 16px;\n a {\n color: inherit;\n text-decoration: none;\n }\n}\n\n.product-2__body {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n}\n\n.product-2__prices {\n display: flex;\n}\n\n.product-2__origin-price {\n text-decoration: line-through;\n @include autoDirection((\n margin-left: 5px\n ));\n}",
"js": "/** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);\n",
"settings": [
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"children": false,
"type": "switch",
"label": {
"en": "Background color enable",
"vi": "Bật màu nền"
},
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "#fff",
"type": "color",
"label": {
"en": "Color",
"vi": "Màu"
},
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": "rgba(23,23,79,1)",
"type": "color",
"label": {
"en": "Color ( for dark theme )",
"vi": "Màu ( cho chủ đề tối )"
},
"name": "color_dark",
"id": "id_c09effb7-17dd-414f-9c7d-854507f51d77",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Background image enable",
"vi": "Bật ảnh nền"
},
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Fixed",
"vi": "Cố định"
},
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": {
"en": "Size",
"vi": "Kích cỡ"
},
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
},
{
"children": "rgba(15,15,54,0)",
"type": "color",
"label": {
"en": "Overlay",
"vi": "Lớp phủ"
},
"name": "overlay",
"id": "id_97772a62-a537-440a-98f0-b23359166bbf",
"disable": false
}
],
"type": "object",
"label": {
"en": "General settings",
"vi": "Cài đặt chung"
},
"name": "general_settings",
"open": true,
"drawer": false,
"disable": false
},
{
"id": "id_1fc238f9-1302-41ad-b401-36f7f0495050",
"children": [
{
"children": "Feature",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_d39db6d5-5a3a-47e6-98e2-3bc4b626824e",
"disable": false
},
{
"children": "<p>Lorem ipsum dolor sit amet</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_ef962774-164c-4606-8651-ef48bdd42a78",
"disable": false
}
],
"type": "object",
"label": {
"en": "Heading",
"vi": "Tiêu đề"
},
"name": "heading",
"open": true,
"drawer": false,
"disable": false
},
{
"id": "id_3cddf828-f7ed-4877-abfe-9495f28786f8",
"children": [
{
"children": "plants",
"type": "collectionPicker",
"label": "Collection",
"name": "collection",
"id": "id_9783ad53-926b-4c9a-8992-032d99ded969",
"disable": false
},
{
"children": {
"title": 0,
"price": 1
},
"type": "flexOrder",
"label": {
"en": "Order",
"vi": "Sắp xếp"
},
"name": "flex_order_order",
"id": "id_b6045be4-8abf-4a5b-89dc-0479317f5a83",
"disable": false,
"options": [
{
"id": "eb397ae3-3ab6-43e9-a3ca-3588c9ec9445",
"label": "Title",
"name": "title"
},
{
"id": "44983b71-1315-41fa-9abf-ca200916bc01",
"label": "Price",
"name": "price"
}
]
}
],
"type": "object",
"label": {
"en": "Content",
"vi": "Nội dung"
},
"name": "content",
"open": true,
"drawer": false,
"disable": false
}
],
"schema": {
"settings": [],
"blocks": [
{
"id": "id_1fc238f9-1302-41ad-b401-36f7f0495050",
"children": [
{
"children": "Title",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_d39db6d5-5a3a-47e6-98e2-3bc4b626824e",
"disable": false
},
{
"children": "<p>Text</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_ef962774-164c-4606-8651-ef48bdd42a78",
"disable": false
}
],
"type": "object",
"label": {
"en": "Heading",
"vi": "Tiêu đề"
},
"name": "heading",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"children": false,
"type": "switch",
"label": {
"en": "Background color enable",
"vi": "Bật màu nền"
},
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "#fff",
"type": "color",
"label": {
"en": "Color",
"vi": "Màu"
},
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": "rgba(23,23,79,1)",
"type": "color",
"label": {
"en": "Color ( for dark theme )",
"vi": "Màu ( cho chủ đề tối )"
},
"name": "color_dark",
"id": "id_c09effb7-17dd-414f-9c7d-854507f51d77",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Background image enable",
"vi": "Bật ảnh nền"
},
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "https://images.pexels.com/photos/9940522/pexels-photo-9940522.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Fixed",
"vi": "Cố định"
},
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": {
"en": "Size",
"vi": "Kích cỡ"
},
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
},
{
"children": "rgba(15,15,54,0)",
"type": "color",
"label": {
"en": "Overlay",
"vi": "Lớp phủ"
},
"name": "overlay",
"id": "id_97772a62-a537-440a-98f0-b23359166bbf",
"disable": false
}
],
"type": "object",
"label": {
"en": "General settings",
"vi": "Cài đặt chung"
},
"name": "general_settings",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_3cddf828-f7ed-4877-abfe-9495f28786f8",
"children": [
{
"children": "",
"type": "collectionPicker",
"label": "Collection",
"name": "collection",
"id": "id_9783ad53-926b-4c9a-8992-032d99ded969",
"disable": false
},
{
"children": {
"title": 0,
"price": 1
},
"type": "flexOrder",
"label": {
"en": "Order",
"vi": "Sắp xếp"
},
"name": "flex_order_order",
"id": "id_b6045be4-8abf-4a5b-89dc-0479317f5a83",
"disable": false,
"options": [
{
"id": "eb397ae3-3ab6-43e9-a3ca-3588c9ec9445",
"label": "Title",
"name": "title"
},
{
"id": "44983b71-1315-41fa-9abf-ca200916bc01",
"label": "Price",
"name": "price"
}
]
}
],
"type": "object",
"label": {
"en": "Content",
"vi": "Nội dung"
},
"name": "content",
"open": false,
"drawer": false,
"disable": false
}
]
}
}
},
{
"id": "id_bbfa1ead-e151-48cc-abc4-c7e332c451f0",
"versionId": "317ff20b-8ff6-451b-87ff-167031c6329d",
"label": "Collections",
"enable": true,
"categoryId": "contact",
"data": {
"liquid": "{% assign backgroundFixed = general_settings.fixed ? 'fixed' : 'scroll' %}\n{% assign backgroundColor = general_settings.background_color_enable ? 'background-color:' | append: general_settings.color | append: ';' : '' %}\n{% assign backgroundColorDark = general_settings.background_color_enable ? 'background-color:' | append: general_settings.color_dark | append: ';' : '' %}\n{% assign backgroundImage = general_settings.background_image_enable ? 'background-image: url(' | append: general_settings.image | append: \n');background-attachment:' | append: backgroundFixed | append: ';background-size:' | append: general_settings.size | append: ';' : '' %}\n\n<section data-id=\"{{uniqueId}}\" class=\"veda-section\" css=\"{{ backgroundColor }}{{ backgroundImage }}\" dark-css=\"{{ backgroundColorDark }}\">\n <div class=\"core-overlay\" css=\"background-color: {{ general_settings.overlay }}\"></div>\n <div class=\"container\">\n <div component=\"heading\" class=\"core-heading\" css=\"margin-bottom: 15px\">\n <h2 class=\"core-heading__title\">{{ heading.title }}</h2>\n <div class=\"core-heading__text\">{{ heading.text }}</div>\n </div>\n <div>\n <shopify>\n {% assign collection = collections['{{ collection1 }}'] %}\n <div class=\"product_list row\">\n {% for product in collection.products %}\n <div class=\"col-sm-2 col-md-3\">\n <div component=\"collection\" class=\"product\" data-product='{{ product | json }}'>\n <div class=\"product__header\" style=\"order: {{ flex_order_product.header }}\">\n <div class=\"product__image\">\n <img src=\"{{ product.featured_image.src | img_url: '300x300' }}\" />\n </div>\n {% if product.available %}\n {% if product.compare_at_price > product.price %}\n <div class=\"product__label\">\n {{ ((product.price - product.compare_at_price) / product.compare_at_price * 100) | round }}%\n </div>\n {% endif %}\n {% else %}\n <div class=\"product__label\">\n Sold out\n </div>\n {% endif %}\n <button class=\"product__addToWishList\">\n <i class=\"fal fa-heart\"></i>\n </button>\n </div>\n <div class=\"product__body\" style=\"order: {{ flex_order_product.body }}\">\n <div>Tags: {{ product.tags | join(', ') }}</div>\n <div class=\"product__infomation\">\n <a href=\"/products/{{ product.handle }}\" class=\"product__name\">{{ product.title }}</a>\n <div class=\"product__prices\">\n <div class=\"product__saledPrice\">{{ product.price | money }}</div>\n {% if product.compare_at_price > product.price %}\n <div class=\"product__originPrice\">{{ product.compare_at_price | money }}</div>\n {% endif %}\n </div>\n </div>\n <div class=\"product__footer\">\n <div class=\"product__rating\">\n <i class=\"fal fa-star\"></i>\n <span>4.8</span>\n </div>\n <button class=\"product__buy\">\n BUY <i class=\"fal fa-plus\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n {% endfor %}\n </div>\n </shopify>\n </div>\n </div>\n</section>",
"js": "/** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);\n",
"scss": "$container: \"[data-id='#{$uniqueId}']\";\n\n.product {\n display: flex;\n flex-direction: column;\n border-radius: 12px;\n overflow: hidden;\n background: #fff;\n margin-bottom: 10px;\n}\n\n.product__header {\n position: relative;\n}\n\n.product__image img {\n width: 100%;\n border-radius: 12px;\n height: 260px;\n object-fit: cover;\n}\n\n.product__label {\n position: absolute;\n border-radius: 12px;\n background: #e84118;\n left: 12px;\n top: 12px;\n color: #fff;\n font-size: 14px;\n padding: 8px 12px;\n}\n\n.product__addToWishList {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n right: 12px;\n top: 12px;\n font-size: 22px;\n outline: none;\n border: none;\n}\n\n.product__body {\n padding: 16px 12px;\n}\n\n.product__infomation {\n display: flex;\n justify-content: space-between;\n}\n.product__name {\n font-size: 22px;\n font-weight: 500;\n text-decoration: none;\n color: #111;\n}\n.product__prices {\n text-align: right\n}\n.product__saledPrice {\n color: red;\n font-weight: 500;\n font-size: 22px;\n}\n.product__originPrice {\n color: gray;\n margin-top: -4px;\n}\n.product__footer {\n margin-top: 4px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 16px;\n}\n.product__buy {\n padding: 4px 10px;\n color: purple;\n background: #fff;\n border: none;\n outline: none;\n border-radius: 12px;\n}",
"settings": [
{
"type": "collectionPicker",
"id": "my_collections",
"name": "collection1",
"label": "Collection",
"children": "plants"
},
{
"type": "flexOrder",
"id": "flexorder123",
"label": "Flex order",
"name": "flex_order_product",
"options": [
{
"id": "1",
"label": "Header",
"name": "header"
},
{
"id": "2",
"label": "Body",
"name": "body"
}
],
"children": {
"header": 0,
"body": 1
}
},
{
"id": "id_885b5ba4-137f-420a-8969-a43760372174",
"children": [
{
"children": "Best selling products",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_ee718f64-5ca0-45b4-979b-13fec8b04305",
"disable": false
},
{
"children": "<p>Vivamus posuere libero nisl, quis eleifend justo ullamcorper a</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_d838d660-49d5-4b82-b943-5bcced858413",
"disable": false
}
],
"type": "object",
"label": {
"en": "Heading",
"vi": "Tiêu đề"
},
"name": "heading",
"open": true,
"drawer": false,
"disable": false
},
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"children": true,
"type": "switch",
"label": {
"en": "Background color enable",
"vi": "Bật màu nền"
},
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "rgba(255,235,235,1)",
"type": "color",
"label": {
"en": "Color",
"vi": "Màu"
},
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": "rgba(23,23,79,1)",
"type": "color",
"label": {
"en": "Color ( for dark theme )",
"vi": "Màu ( cho chủ đề tối )"
},
"name": "color_dark",
"id": "id_cc58b7c1-d774-42f7-b1ca-2d9b84469d00",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Background image enable",
"vi": "Bật ảnh nền"
},
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Fixed",
"vi": "Cố định"
},
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": {
"en": "Size",
"vi": "Kích cỡ"
},
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
},
{
"children": "rgba(15,15,54,0)",
"type": "color",
"label": {
"en": "Overlay",
"vi": "Lớp phủ"
},
"name": "overlay",
"id": "id_128d513d-0009-47ee-a356-298035951bc5",
"disable": false
}
],
"type": "object",
"label": {
"en": "General settings",
"vi": "Cài đặt chung"
},
"name": "general_settings",
"open": false,
"drawer": false,
"disable": false
}
],
"schema": {
"blocks": [
{
"id": "id_885b5ba4-137f-420a-8969-a43760372174",
"children": [
{
"children": "Title",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_ee718f64-5ca0-45b4-979b-13fec8b04305",
"disable": false
},
{
"children": "<p>Text</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_d838d660-49d5-4b82-b943-5bcced858413",
"disable": false
}
],
"type": "object",
"label": {
"en": "Heading",
"vi": "Tiêu đề"
},
"name": "heading",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"children": false,
"type": "switch",
"label": {
"en": "Background color enable",
"vi": "Bật màu nền"
},
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "#fff",
"type": "color",
"label": {
"en": "Color",
"vi": "Màu"
},
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": "rgba(23,23,79,1)",
"type": "color",
"label": {
"en": "Color ( for dark theme )",
"vi": "Màu ( cho chủ đề tối )"
},
"name": "color4",
"id": "id_cc58b7c1-d774-42f7-b1ca-2d9b84469d00",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Background image enable",
"vi": "Bật ảnh nền"
},
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "https://images.pexels.com/photos/9940522/pexels-photo-9940522.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Fixed",
"vi": "Cố định"
},
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": {
"en": "Size",
"vi": "Kích cỡ"
},
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
},
{
"children": "rgba(15,15,54,0)",
"type": "color",
"label": {
"en": "Overlay",
"vi": "Lớp phủ"
},
"name": "overlay",
"id": "id_128d513d-0009-47ee-a356-298035951bc5",
"disable": false
}
],
"type": "object",
"label": {
"en": "General settings",
"vi": "Cài đặt chung"
},
"name": "general_settings",
"open": false,
"drawer": false,
"disable": false
}
],
"settings": [
{
"type": "collectionPicker",
"id": "my_collections",
"name": "collection1",
"label": "Collection",
"children": ""
},
{
"type": "flexOrder",
"id": "flexorder123",
"label": "Flex order",
"name": "flex_order_product",
"options": [
{
"id": "1",
"label": "Header",
"name": "header"
},
{
"id": "2",
"label": "Body",
"name": "body"
}
],
"children": {
"header": 0,
"body": 1
}
}
]
}
}
},
{
"id": "id_44ea3d7f-b8b4-43d7-8d05-19bedeb348d0",
"versionId": "2603f420-ef93-4dbc-9dd6-24f96270c2b4",
"categoryId": "other",
"enable": true,
"label": "Services homepage1",
"data": {
"liquid": "\n{% assign backgroundFixed = background.fixed ? 'fixed' : 'scroll' %}\n{% assign backgroundColor = background.background_color_enable ? 'background-color:' ~ background.color ~ ';' : '' %}\n{% assign backgroundImage = background.background_image_enable ? 'background-image: url(' ~ background.image ~\n');background-attachment:' ~ backgroundFixed ~ ';background-size:' ~ background.size ~ ';' : '' %}\n{% set sectionPadding = 'padding-top:' ~ padding.top ~ 'px;padding-right:' ~ padding.right ~ 'px;padding-bottom:' ~\npadding.bottom ~ 'px;padding-left:' ~ padding.left ~ 'px;' %}\n\n\n<section data-id=\"{{uniqueId}}\" class=\"veda-section\" css=\"{{ sectionPadding }}{{ backgroundColor }}{{ backgroundImage }}\">\n <div class=\"container\">\n <div component=\"heading\" class=\"heading\">\n <span class=\"heading__subtitle\">{{heading.subTitle}}</span>\n <h2 class=\"heading__title\" css=\"{{heading.titleStyles}}\">{{heading.title}}</h2>\n </div>\n <div class=\"row\">\n {% for service in services %}\n <div component=\"services\" class=\"col-lg-4 mt_md--0\">\n <div class=\"service {{service.active ? 'service--active' : ''}}\">\n <div class=\"service__icon\">{{service.icon}}</div>\n <div class=\"service__content\">\n <h5 class=\"service__title\">{{service.title}}</h5>\n <div class=\"service__text\">{{service.text}}</div>\n <a class=\"service__link\" href=\"#\">{{service.linkText}}</a>\n </div>\n </div>\n </div>\n {% endfor %}\n </div>\n </div>\n</section>\n",
"scss": "$container: \"[data-id='#{$uniqueId}']\";\n\n.heading__subtitle {\n font-size: 14px;\n color: var(--color-primary);\n}\n\n.heading__title {\n font-size: 50px;\n color: var(--color-gray9);\n}\n\n.service {\n padding: 15px;\n border-radius: 20px;\n}\n\n.service--active {\n box-shadow: 0 5px 15px 0 rgba(var(--rgb-color-dark), 0.1);\n}\n\n.service__icon {\n font-size: 60px;\n color: var(--color-primary);\n margin-bottom: 20px;\n}\n",
"js": "/** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);",
"settings": [
{
"id": "sdfs234df",
"name": "padding",
"type": "space",
"label": "Padding",
"children": {
"top": 40,
"right": 0,
"left": 0,
"bottom": 40
}
},
{
"id": "sdfs234dfsdf",
"name": "titleFont",
"type": "font",
"label": "Font family",
"children": "Poppins"
},
{
"id": "heading",
"name": "heading",
"type": "object",
"label": "Heading",
"open": false,
"drawer": true,
"children": [
{
"id": "subTitle",
"name": "subTitle",
"type": "text",
"label": "Sub Title",
"children": "What We Can Do For You"
},
{
"id": "title",
"name": "title",
"type": "textarea",
"label": "Title",
"children": "Services we can<br> help you with"
},
{
"id": "titleStyles",
"name": "titleStyles",
"type": "styleBox",
"label": "Title styles",
"children": ""
}
]
},
{
"id": "services",
"name": "services",
"type": "array",
"label": "Services",
"open": false,
"drawer": true,
"children": [
{
"id": "1",
"children": [
{
"id": "icon123",
"name": "icon",
"type": "icon",
"label": "Icon",
"children": "<i class=\"fal fa-cloud-upload-alt\"></i>"
},
{
"id": "title",
"name": "title",
"type": "text",
"label": "Title",
"children": "Design"
},
{
"id": "text",
"name": "text",
"type": "textarea",
"label": "Description",
"children": "<p>Simply drag and drop photos and videos into your workspace to automatically add them to your Collab Cloud library.</p>"
},
{
"id": "linkText",
"name": "linkText",
"type": "text",
"label": "Link Text",
"children": "Find out more"
},
{
"id": "active",
"name": "active",
"type": "switch",
"label": "Active",
"children": false
}
]
},
{
"id": "2",
"children": [
{
"id": "icon123",
"name": "icon",
"type": "icon",
"label": "Icon",
"children": "<i class=\"fal fa-atom\"></i>"
},
{
"id": "title",
"name": "title",
"type": "text",
"label": "Title",
"children": "Development"
},
{
"id": "text",
"name": "text",
"type": "textarea",
"label": "Description",
"children": "<p>Simply drag and drop photos and videos into your workspace to automatically add them to your Collab Cloud library.</p>"
},
{
"id": "linkText",
"name": "linkText",
"type": "text",
"label": "Link Text",
"children": "Find out more"
},
{
"id": "active",
"name": "active",
"type": "switch",
"label": "Active",
"children": true
}
]
},
{
"id": "3",
"children": [
{
"id": "icon123",
"name": "icon",
"type": "icon",
"label": "Icon",
"children": "<i class=\"fal fa-blender\"></i>"
},
{
"id": "title",
"name": "title",
"type": "text",
"label": "Title",
"children": "Content strategy"
},
{
"id": "text",
"name": "text",
"type": "textarea",
"label": "Description",
"children": "<p>Simply drag and drop photos and videos into your workspace to automatically add them to your Collab Cloud library.</p>"
},
{
"id": "linkText",
"name": "linkText",
"type": "text",
"label": "Link Text",
"children": "Find out more"
},
{
"id": "active",
"name": "active",
"type": "switch",
"label": "Active",
"children": false
}
]
}
]
},
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"children": false,
"type": "switch",
"label": "Background Color Enable",
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "#fff",
"type": "color",
"label": "Color",
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": false,
"type": "switch",
"label": "Background Image Enable",
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "https://pixabay.com/get/g3d1ca51237218b74958ace4788a1387afd86ef8224b4c06c27fe49bf1810b3703dbc0def6d3e4daee15da07a8690e35b_1280.jpg",
"type": "image",
"label": "Image",
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": "Fixed",
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": "Size",
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
}
],
"type": "object",
"label": "Section Background",
"name": "background",
"open": true,
"drawer": false,
"disable": false
}
],
"schema": {
"settings": [
{
"id": "sdfs234dfsdf",
"name": "titleFont",
"type": "font",
"label": "Font family",
"children": "Poppins"
}
],
"blocks": [
{
"id": "heading",
"name": "heading",
"type": "object",
"label": "Heading",
"open": false,
"drawer": true,
"children": [
{
"id": "subTitle",
"name": "subTitle",
"type": "text",
"label": "Sub Title",
"children": "What We Can Do For You"
},
{
"id": "title",
"name": "title",
"type": "text",
"label": "Title",
"children": "Services we can<br> help you with"
},
{
"id": "titleStyles",
"name": "titleStyles",
"type": "styleBox",
"label": "Title styles",
"children": ""
}
]
},
{
"id": "services",
"name": "services",
"type": "array",
"label": "Services",
"open": false,
"drawer": true,
"children": [
{
"id": "icon123",
"name": "icon",
"type": "icon",
"label": "Icon",
"children": "<i class=\"fal fa-bed\"></i>"
},
{
"id": "title",
"name": "title",
"type": "text",
"label": "Title",
"children": "Design"
},
{
"id": "text",
"name": "text",
"type": "textarea",
"label": "Description",
"children": "<p>Simply drag and drop photos and videos into your workspace to automatically add them to your Collab Cloud library.</p>"
},
{
"id": "linkText",
"name": "linkText",
"type": "text",
"label": "Link Text",
"children": "Find out more"
},
{
"id": "active",
"name": "active",
"type": "switch",
"label": "Active",
"children": false
}
]
},
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"children": false,
"type": "switch",
"label": "Background Color Enable",
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "#fff",
"type": "color",
"label": "Color",
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": false,
"type": "switch",
"label": "Background Image Enable",
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "https://images.pexels.com/photos/9940522/pexels-photo-9940522.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"type": "image",
"label": "Image",
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": "Fixed",
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": "Size",
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
}
],
"type": "object",
"label": "Section Background",
"name": "background",
"open": false,
"drawer": false,
"disable": false
}
]
}
}
},
{
"id": "id_f3d0e238-af4c-43b3-9c24-5c8b878798e0",
"versionId": "7610f410-ecf7-4269-82bc-86b09e1c18bf",
"categoryId": "other",
"enable": true,
"label": "Feature",
"data": {
"liquid": "{% assign backgroundFixed = general_settings.fixed ? 'fixed' : 'scroll' %}\n{% assign backgroundColor = general_settings.background_color_enable ? 'background-color:' | append: general_settings.color | append: ';' : '' %}\n{% assign backgroundColorDark = general_settings.background_color_enable ? 'background-color:' | append: general_settings.color_dark | append: ';' : '' %}\n{% assign backgroundImage = general_settings.background_image_enable ? 'background-image: url(' | append: general_settings.image | append: \n');background-attachment:' | append: backgroundFixed | append: ';background-size:' | append: general_settings.size | append: ';' : '' %}\n\n<section data-id=\"{{uniqueId}}\" class=\"veda-section\" css=\"{{ backgroundColor }}{{ backgroundImage }}\"\n dark-css=\"{{ backgroundColorDark }}\">\n <div class=\"core-overlay\" css=\"background-color: {{ general_settings.overlay }}\"></div>\n <div class=\"container\">\n <div class=\"row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1\">\n <div class=\"col\">\n <div class=\"product-1\">\n <div class=\"product-1__img core-image-cover\" css=\"--aspect-ratio: 4/3; background-image: url('https://products.wp-ts.com/stowaa/html/assets/images/shop/product_img_12.png')\"></div>\n <div class=\"product-1__body\">\n <h2 class=\"product-1__title\"><a href=\"#\">Macbook Pro</a></h2>\n <div class=\"product-1__text\">Apple MacBook Pro13.3″ Laptop with new Touch bar ID</div>\n <div class=\"product-1__rating\">\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star-half-alt\"></i>\n </div>\n <div class=\"product-1__prices\">\n <div class=\"product-1__saled-price\">$100.00</div>\n <div class=\"product-1__origin-price\">$120.00</div>\n </div>\n <a href=\"#\" class=\"product-1__btn\">Add to cart</a>\n </div>\n </div>\n </div>\n\n <div class=\"col\">\n <div class=\"product-1\">\n <div class=\"product-1__img core-image-cover\" css=\"--aspect-ratio: 4/3; background-image: url('https://products.wp-ts.com/stowaa/html/assets/images/shop/product-img-21.png')\"></div>\n <div class=\"product-1__body\">\n <h2 class=\"product-1__title\"><a href=\"#\">Macbook Pro</a></h2>\n <div class=\"product-1__text\">Apple MacBook Pro13.3″ Laptop with new Touch bar ID</div>\n <div class=\"product-1__rating\">\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star-half-alt\"></i>\n </div>\n <div class=\"product-1__prices\">\n <div class=\"product-1__saled-price\">$100.00</div>\n <div class=\"product-1__origin-price\">$120.00</div>\n </div>\n <a href=\"#\" class=\"product-1__btn\">Add to cart</a>\n </div>\n </div>\n </div>\n\n <div class=\"col\">\n <div class=\"product-1\">\n <div class=\"product-1__img core-image-cover\" css=\"--aspect-ratio: 4/3; background-image: url('https://products.wp-ts.com/stowaa/html/assets/images/shop/product-img-22.png')\"></div>\n <div class=\"product-1__body\">\n <h2 class=\"product-1__title\"><a href=\"#\">Macbook Pro</a></h2>\n <div class=\"product-1__text\">Apple MacBook Pro13.3″ Laptop with new Touch bar ID</div>\n <div class=\"product-1__rating\">\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star-half-alt\"></i>\n </div>\n <div class=\"product-1__prices\">\n <div class=\"product-1__saled-price\">$100.00</div>\n <div class=\"product-1__origin-price\">$120.00</div>\n </div>\n <a href=\"#\" class=\"product-1__btn\">Add to cart</a>\n </div>\n </div>\n </div>\n\n <div class=\"col\">\n <div class=\"product-1\">\n <div class=\"product-1__img core-image-cover\" css=\"--aspect-ratio: 4/3; background-image: url('https://products.wp-ts.com/stowaa/html/assets/images/shop/product-img-23.png')\"></div>\n <div class=\"product-1__body\">\n <h2 class=\"product-1__title\"><a href=\"#\">Macbook Pro</a></h2>\n <div class=\"product-1__text\">Apple MacBook Pro13.3″ Laptop with new Touch bar ID</div>\n <div class=\"product-1__rating\">\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star-half-alt\"></i>\n </div>\n <div class=\"product-1__prices\">\n <div class=\"product-1__saled-price\">$100.00</div>\n <div class=\"product-1__origin-price\">$120.00</div>\n </div>\n <a href=\"#\" class=\"product-1__btn\">Add to cart</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</sectioen",
"scss": "$container: \"[data-id='#{$uniqueId}']\";\n\n.product-1 {\n padding: 25px;\n box-shadow: 0 4px 0 var(--color-gray3);\n border: 1px solid var(--color-gray3);\n border-radius: 4px;\n transition: all 0.2s;\n &:hover {\n box-shadow: 0 5px 25px rgba(var(--rgb-color-dark), 0.1);\n transform: translateY(-5px);\n }\n}\n\n.product-1__title {\n font-size: 18px;\n margin: 1em 0 0.4em;\n a {\n color: inherit;\n text-decoration: none;\n }\n}\n\n.product-1__rating {\n color: var(--color-quaternary);\n}\n\n.product-1__btn {\n padding: 10px 15px;\n display: block;\n background-color: var(--color-primary);\n text-decoration: none;\n color: var(--color-light-freeze);\n text-align: center;\n border-radius: 6px;\n}\n\n.product-1__prices {\n display: flex;\n}\n\n.product-1__origin-price {\n text-decoration: line-through;\n @include autoDirection((\n margin-left: 10px\n ));\n}",
"js": "/** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);\n",
"settings": [
{
"id": "id_93461c15-a7d5-4dd2-b049-16ed60ff0c5b",
"children": [
{
"id": "592414b5-50a3-44f2-8b91-4108f75fe309",
"children": [
{
"children": "https://image.freepik.com/free-photo/full-length-view-trendy-korean-girl-with-skateboard-studio-shot-gorgeous-asian-woman-holding-longboard-purple-background_197531-14647.jpg",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "Now trending",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": "Link",
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
]
},
{
"id": "9a9f8c33-284d-4d4a-99a4-28848afce6d2",
"children": [
{
"children": "https://image.freepik.com/free-photo/lovely-hispanic-woman-with-bronze-skin-denim-shorts-having-fun-during-indoor-summer-good-looking-asian-girl-with-longboard-spending-free-time_197531-3996.jpg",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "Campaign",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": "Link",
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
]
},
{
"id": "e14ec5cb-b9d8-4806-a323-96673fb864d3",
"children": [
{
"children": "https://image.freepik.com/free-photo/sensual-korean-woman-black-hat-looking-camera-studio-shot-ecstatic-asian-model-isolated-beige-background_197531-14545.jpg",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "Lookbook",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": "Link",
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
]
},
{
"id": "835eed4a-9ff0-4168-8f2a-8881eb83aca6",
"children": [
{
"children": "https://image.freepik.com/free-photo/beautiful-woman-white-bucket-hat-fashion-studio-shoot_53876-102852.jpg",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "New arrivals",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": "Link",
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
]
},
{
"id": "65a1e2cb-7458-4804-94df-a14fff5bbb0d",
"children": [
{
"children": "https://image.freepik.com/free-photo/blissful-lady-trendy-summer-clothes-posing-with-camera-yellow-positive-beautiful-girl-hat-chilling-studio_197531-11082.jpg",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "Sale",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": "Link",
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
]
}
],
"type": "array",
"label": {
"en": "Grid",
"vi": "Lưới"
},
"name": "grid",
"open": true,
"drawer": false,
"disable": false
},
{
"id": "id_1fc238f9-1302-41ad-b401-36f7f0495050",
"children": [
{
"children": "Feature",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_d39db6d5-5a3a-47e6-98e2-3bc4b626824e",
"disable": false
},
{
"children": "<p>Lorem ipsum dolor sit amet</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_ef962774-164c-4606-8651-ef48bdd42a78",
"disable": false
}
],
"type": "object",
"label": {
"en": "Heading",
"vi": "Tiêu đề"
},
"name": "heading",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"children": false,
"type": "switch",
"label": {
"en": "Background color enable",
"vi": "Bật màu nền"
},
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "#fff",
"type": "color",
"label": {
"en": "Color",
"vi": "Màu"
},
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": "rgba(23,23,79,1)",
"type": "color",
"label": {
"en": "Color ( for dark theme )",
"vi": "Màu ( cho chủ đề tối )"
},
"name": "color_dark",
"id": "id_abcbb796-47d8-44bb-a292-752ff52a3319",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Background image enable",
"vi": "Bật ảnh nền"
},
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Fixed",
"vi": "Cố định"
},
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": {
"en": "Size",
"vi": "Kích cỡ"
},
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
},
{
"children": "rgba(15,15,54,0)",
"type": "color",
"label": {
"en": "Overlay",
"vi": "Lớp phủ"
},
"name": "overlay",
"id": "id_3c962cc0-e6ee-4671-a302-0dcb75708bda",
"disable": false
}
],
"type": "object",
"label": {
"en": "General settings",
"vi": "Cài đặt chung"
},
"name": "general_settings",
"open": true,
"drawer": false,
"disable": false
},
{
"id": "id_d5f0da8e-4af5-4ced-9e4e-f91a4a691e01",
"children": [
{
"children": "",
"type": "styleBox",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_d58117a2-96b0-4a7d-892e-dfafe5f3770d",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_9b5c1e0b-dd2f-4d2f-89ca-fe0907180a2c",
"disable": false
}
],
"type": "object",
"label": {
"en": "Design",
"vi": "Thiết kế"
},
"name": "design",
"open": true,
"drawer": false,
"disable": false
}
],
"schema": {
"settings": [],
"blocks": [
{
"id": "id_93461c15-a7d5-4dd2-b049-16ed60ff0c5b",
"children": [
{
"children": "",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_3b11a08b-0ffe-4782-8c10-d3d78fc11e59",
"disable": false
},
{
"children": "Title",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_294f87bf-0d77-40e3-8bd0-e5072886a645",
"disable": false
},
{
"children": "",
"type": "linkPicker",
"label": "Link",
"name": "link",
"id": "id_382c9e38-330e-4964-b564-3fc2f298f08f",
"disable": false
},
{
"children": 10,
"type": "slider",
"label": {
"en": "Radius",
"vi": "Bo tròn"
},
"name": "radius",
"id": "id_c2c0ce74-ef63-4fd6-bfbe-d0d0ef398b4d",
"disable": false,
"max": 100,
"min": 0
}
],
"type": "array",
"label": {
"en": "Grid",
"vi": "Lưới"
},
"name": "grid",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_1fc238f9-1302-41ad-b401-36f7f0495050",
"children": [
{
"children": "Title",
"type": "text",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_d39db6d5-5a3a-47e6-98e2-3bc4b626824e",
"disable": false
},
{
"children": "<p>Text</p>",
"type": "textarea",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_ef962774-164c-4606-8651-ef48bdd42a78",
"disable": false
}
],
"type": "object",
"label": {
"en": "Heading",
"vi": "Tiêu đề"
},
"name": "heading",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_473e9c2b-18b9-46a3-9830-b7993f51d9e1",
"children": [
{
"children": false,
"type": "switch",
"label": {
"en": "Background color enable",
"vi": "Bật màu nền"
},
"name": "background_color_enable",
"id": "id_1b176e44-abdc-4e9f-8b6a-65c9cc17c1bc",
"disable": false
},
{
"children": "#fff",
"type": "color",
"label": {
"en": "Color",
"vi": "Màu"
},
"name": "color",
"id": "id_0057339b-cfa2-4ff7-8450-6073a85c8cfa",
"disable": false
},
{
"children": "rgba(23,23,79,1)",
"type": "color",
"label": {
"en": "Color ( for dark theme )",
"vi": "Màu ( cho chủ đề tối )"
},
"name": "color_dark",
"id": "id_abcbb796-47d8-44bb-a292-752ff52a3319",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Background image enable",
"vi": "Bật ảnh nền"
},
"name": "background_image_enable",
"id": "id_3455f26c-94ab-40bd-b47b-e53ba4092b54",
"disable": false
},
{
"children": "https://images.pexels.com/photos/9940522/pexels-photo-9940522.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"type": "image",
"label": {
"en": "Image",
"vi": "Ảnh"
},
"name": "image",
"id": "id_7b544638-7e5b-4b80-9e14-4299eaaa85dc",
"disable": false
},
{
"children": false,
"type": "switch",
"label": {
"en": "Fixed",
"vi": "Cố định"
},
"name": "fixed",
"id": "id_9999168b-f816-4d04-b3a6-45411fde3862",
"disable": false
},
{
"children": "cover",
"type": "select",
"label": {
"en": "Size",
"vi": "Kích cỡ"
},
"name": "size",
"id": "id_5c8f152d-c3ec-4b0f-8f5e-098a9148256f",
"disable": false,
"options": [
{
"label": "Cover",
"value": "cover",
"id": "6291215b-9b11-4d50-836b-642ba22e66a7"
},
{
"label": "Contain",
"value": "contain",
"id": "3df9c580-b42b-4544-b46e-9f6ca8428641"
}
]
},
{
"children": "rgba(15,15,54,0)",
"type": "color",
"label": {
"en": "Overlay",
"vi": "Lớp phủ"
},
"name": "overlay",
"id": "id_3c962cc0-e6ee-4671-a302-0dcb75708bda",
"disable": false
}
],
"type": "object",
"label": {
"en": "General settings",
"vi": "Cài đặt chung"
},
"name": "general_settings",
"open": false,
"drawer": false,
"disable": false
},
{
"id": "id_d5f0da8e-4af5-4ced-9e4e-f91a4a691e01",
"children": [
{
"children": "",
"type": "styleBox",
"label": {
"en": "Title",
"vi": "Tiêu đề"
},
"name": "title",
"id": "id_d58117a2-96b0-4a7d-892e-dfafe5f3770d",
"disable": false
},
{
"children": "",
"type": "styleBox",
"label": {
"en": "Text",
"vi": "Văn bản"
},
"name": "text",
"id": "id_9b5c1e0b-dd2f-4d2f-89ca-fe0907180a2c",
"disable": false
}
],
"type": "object",
"label": {
"en": "Design",
"vi": "Thiết kế"
},
"name": "design",
"open": false,
"drawer": false,
"disable": false
}
]
}
}
},
{
"id": "345dsfdsf345435",
"versionId": "sdfsdf456fg34dfghfg",
"categoryId": "other",
"enable": true,
"label": "Swiper",
"data": {
"liquid": "<section data-id=\"{{uniqueId}}\" class=\"veda-section\">\n <div class=\"container\">\n <div\n class=\"core-swiper swiper\"\n data-options=\"{\n speed: 400,\n spaceBetween: 30\n }\"\n >\n <div class=\"core-swiper-wrapper swiper-wrapper\">\n {% for swiper in swipers %}\n <div component=\"swipers\" class=\"swiper-slide\">{{swiper.text}}</div>\n {% endfor %}\n </div>\n <div class=\"core-swiper-button core-swiper-button-pill core-swiper-button-abs\">\n <div class=\"core-swiper-button-prev\">\n <i class=\"fal fa-angle-left\"></i>\n </div>\n <div class=\"core-swiper-button-next\">\n <i class=\"fal fa-angle-right\"></i>\n </div>\n </div>\n <div class=\"core-swiper-pagination\"></div>\n </div>\n </div>\n </section>",
"scss": "\n $container: \"[data-id='#{$uniqueId}']\";\n #{$container} {\n .swiper-slide {\n padding: 30px;\n border: 1px solid red;\n }\n }\n ",
"js": "/** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);\nveda.plugins.swiper(container);",
"settings": [
{
"id": "sdfsdfw3532",
"drawer": true,
"name": "swipers",
"label": "Swiper slider",
"open": false,
"type": "array",
"children": [
{
"id": "1",
"children": [
{
"id": "text1",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text 1"
}
]
},
{
"id": "2",
"children": [
{
"id": "text2",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text 2"
}
]
},
{
"id": "3",
"children": [
{
"id": "text3",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text 3"
}
]
},
{
"id": "4",
"children": [
{
"id": "text4",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text 4"
}
]
}
]
}
],
"schema": {
"settings": [
{
"id": "text",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text..."
}
],
"blocks": [
{
"id": "sdfsdfw3532",
"drawer": true,
"name": "swipers",
"label": "Swiper slider",
"open": false,
"type": "array",
"children": [
{
"id": "sdfg456",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text"
}
]
}
]
}
}
},
{
"id": "sdf345dsfdsf345435sdf",
"versionId": "sdfsdf456fg34dfghfgsdfsdf",
"categoryId": "other",
"enable": true,
"type": "megamenu",
"label": "Mega menu 1",
"data": {
"liquid": "<section data-id=\"{{uniqueId}}\" class=\"veda-section\">\n <div class=\"container\">\n <div\n class=\"core-swiper swiper\"\n data-options=\"{\n speed: 400,\n spaceBetween: 30\n }\"\n >\n <div class=\"core-swiper-wrapper swiper-wrapper\">\n {% for swiper in swipers %}\n <div component=\"swipers\" class=\"swiper-slide\">{{swiper.text}}</div>\n {% endfor %}\n </div>\n <div class=\"core-swiper-button core-swiper-button-pill core-swiper-button-abs\">\n <div class=\"core-swiper-button-prev\">\n <i class=\"fal fa-angle-left\"></i>\n </div>\n <div class=\"core-swiper-button-next\">\n <i class=\"fal fa-angle-right\"></i>\n </div>\n </div>\n <div class=\"core-swiper-pagination\"></div>\n </div>\n </div>\n </section>",
"scss": "\n $container: \"[data-id='#{$uniqueId}']\";\n #{$container} {\n .swiper-slide {\n padding: 30px;\n border: 1px solid red;\n }\n }\n ",
"js": "/** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);\nveda.plugins.swiper(container);",
"settings": [
{
"id": "sdfsdfw3532",
"drawer": true,
"name": "swipers",
"label": "Swiper slider",
"open": false,
"type": "array",
"children": [
{
"id": "1",
"children": [
{
"id": "text1",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text 1"
}
]
},
{
"id": "2",
"children": [
{
"id": "text2",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text 2"
}
]
},
{
"id": "3",
"children": [
{
"id": "text3",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text 3"
}
]
},
{
"id": "4",
"children": [
{
"id": "text4",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text 4"
}
]
}
]
}
],
"schema": {
"settings": [
{
"id": "text",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text..."
}
],
"blocks": [
{
"id": "sdfsdfw3532",
"drawer": true,
"name": "swipers",
"label": "Swiper slider",
"open": false,
"type": "array",
"children": [
{
"id": "sdfg456",
"name": "text",
"label": "Text",
"type": "text",
"children": "Text"
}
]
}
]
}
}
}
],
"handle": ""
},
"pageSettings": {
"generalSettings": {
"label": "",
"headerFooterEnabled": false,
"handle": "",
"metaTitle": "",
"metaDescription": "",
"socialShareImage": ""
},
"vendors": [
{
"id": "e0a69e5e-e1e1-4315-9a71-832eda8d25c2",
"css": "",
"js": ""
}
],
"globalScss": "",
"globalJs": ""
}
},
"files": [
{
"name": "veda-head.liquid",
"content": "\n \n \n \n \n \n \n "
},
{
"name": "veda-vendors.liquid",
"content": "\n <link rel=\"stylesheet\"\n href=\"https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css\" />\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\" />\n <link rel=\"stylesheet\" href=\"https://kit-pro.fontawesome.com/releases/v5.15.4/css/pro.min.css\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.2.0/swiper-bundle.min.js\"></script>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.2.0/swiper-bundle.css\">\n \n \n\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\" />\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\" />\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\" />\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\" />\n"
},
{
"name": "veda-styles.liquid",
"content": "<style>:root { --color-primary:#F57070;--rgb-color-primary:245, 112, 112;--color-secondary:#3540df;--rgb-color-secondary:53, 64, 223;--color-tertiary:#2AB885;--rgb-color-tertiary:42, 184, 133;--color-quaternary:#FBC473;--rgb-color-quaternary:251, 196, 115;--color-dark:#0f0f36;--rgb-color-dark:15, 15, 54;--color-gray9:#17174F;--rgb-color-gray9:23, 23, 79;--color-gray8:#26256C;--rgb-color-gray8:38, 37, 108;--color-gray7:#494880;--rgb-color-gray7:73, 72, 128;--color-gray6:#6D6D9C;--rgb-color-gray6:109, 109, 156;--color-gray5:#9E9ECC;--rgb-color-gray5:158, 158, 204;--color-gray4:#D2D2E2;--rgb-color-gray4:210, 210, 226;--color-gray3:#DEDEE9;--rgb-color-gray3:222, 222, 233;--color-gray2:#f2f2f7;--rgb-color-gray2:242, 242, 247;--color-gray1:#F8F8FC;--rgb-color-gray1:248, 248, 252;--color-light:#ffffff;--rgb-color-light:255, 255, 255;--color-primary-freeze:#F57070;--rgb-color-primary-freeze:245, 112, 112;--color-secondary-freeze:#3540df;--rgb-color-secondary-freeze:53, 64, 223;--color-tertiary-freeze:#2AB885;--rgb-color-tertiary-freeze:42, 184, 133;--color-quaternary-freeze:#FBC473;--rgb-color-quaternary-freeze:251, 196, 115;--color-dark-freeze:#0f0f36;--rgb-color-dark-freeze:15, 15, 54;--color-gray9-freeze:#17174F;--rgb-color-gray9-freeze:23, 23, 79;--color-gray8-freeze:#26256C;--rgb-color-gray8-freeze:38, 37, 108;--color-gray7-freeze:#494880;--rgb-color-gray7-freeze:73, 72, 128;--color-gray6-freeze:#6D6D9C;--rgb-color-gray6-freeze:109, 109, 156;--color-gray5-freeze:#9E9ECC;--rgb-color-gray5-freeze:158, 158, 204;--color-gray4-freeze:#D2D2E2;--rgb-color-gray4-freeze:210, 210, 226;--color-gray3-freeze:#DEDEE9;--rgb-color-gray3-freeze:222, 222, 233;--color-gray2-freeze:#f2f2f7;--rgb-color-gray2-freeze:242, 242, 247;--color-gray1-freeze:#F8F8FC;--rgb-color-gray1-freeze:248, 248, 252;--color-light-freeze:#ffffff;--rgb-color-light-freeze:255, 255, 255;--font-primary:Poppins;--font-secondary:Roboto;--font-tertiary:Playfair Display;--font-quaternary:Roboto Mono; }\n :root.dark { --color-primary:#F57070;--rgb-color-primary:245, 112, 112;--color-secondary:#3540df;--rgb-color-secondary:53, 64, 223;--color-tertiary:#2AB885;--rgb-color-tertiary:42, 184, 133;--color-quaternary:#FBC473;--rgb-color-quaternary:251, 196, 115;--color-dark:#ffffff;--rgb-color-dark:255, 255, 255;--color-gray9:#F8F8FC;--rgb-color-gray9:248, 248, 252;--color-gray8:#f2f2f7;--rgb-color-gray8:242, 242, 247;--color-gray7:#DEDEE9;--rgb-color-gray7:222, 222, 233;--color-gray6:#D2D2E2;--rgb-color-gray6:210, 210, 226;--color-gray5:#9E9ECC;--rgb-color-gray5:158, 158, 204;--color-gray4:#6D6D9C;--rgb-color-gray4:109, 109, 156;--color-gray3:#494880;--rgb-color-gray3:73, 72, 128;--color-gray2:#26256C;--rgb-color-gray2:38, 37, 108;--color-gray1:#17174F;--rgb-color-gray1:23, 23, 79;--color-light:#17174F;--rgb-color-light:23, 23, 79;--color-primary-freeze:#F57070;--rgb-color-primary-freeze:245, 112, 112;--color-secondary-freeze:#3540df;--rgb-color-secondary-freeze:53, 64, 223;--color-tertiary-freeze:#2AB885;--rgb-color-tertiary-freeze:42, 184, 133;--color-quaternary-freeze:#FBC473;--rgb-color-quaternary-freeze:251, 196, 115;--color-dark-freeze:#ffffff;--rgb-color-dark-freeze:255, 255, 255;--color-gray9-freeze:#F8F8FC;--rgb-color-gray9-freeze:248, 248, 252;--color-gray8-freeze:#f2f2f7;--rgb-color-gray8-freeze:242, 242, 247;--color-gray7-freeze:#DEDEE9;--rgb-color-gray7-freeze:222, 222, 233;--color-gray6-freeze:#D2D2E2;--rgb-color-gray6-freeze:210, 210, 226;--color-gray5-freeze:#9E9ECC;--rgb-color-gray5-freeze:158, 158, 204;--color-gray4-freeze:#6D6D9C;--rgb-color-gray4-freeze:109, 109, 156;--color-gray3-freeze:#494880;--rgb-color-gray3-freeze:73, 72, 128;--color-gray2-freeze:#26256C;--rgb-color-gray2-freeze:38, 37, 108;--color-gray1-freeze:#17174F;--rgb-color-gray1-freeze:23, 23, 79;--color-light-freeze:#17174F;--rgb-color-light-freeze:23, 23, 79; }\n\n html .container {\n max-width: 1300px !important;\n padding-left: 20px !important;\n padding-right: 20px !important;\n }\n html .row {\n margin-top: -20px !important;\n margin-left: -10px !important;\n margin-right: -10px !important;\n }\n html .row > * {\n margin-top: 20px !important;\n padding-left: 10px !important;\n padding-right: 10px !important;\n }\n html .core-grid-auto {\n column-gap: 20px !important;\n row-gap: 20px !important;\n }\n\nhtml [data-css=\"501021317\"] {\n background-color: #f8f8fc; }\n\nhtml [data-css=\"2172607115\"] {\n background-color: rgba(15, 15, 54, 0); }\n\nhtml [data-css=\"3265660625\"]:hover {\n color: #fa8c8c; }\n\nhtml.dark [data-dark-css=\"1347995206\"] {\n background-color: #26256c; }\n\nhtml [data-css=\"2172607115\"] {\n background-color: rgba(15, 15, 54, 0); }\n\nhtml [data-css=\"910652943\"] {\n margin-bottom: 15px; }\n\nhtml [data-css=\"403059640\"] {\n --core-grid-auto-column-width: 300px; }\n\nhtml [data-css=\"1481462319\"] {\n border-radius: 10px; }\n\nhtml [data-css=\"975166383\"] {\n background-image: url(\"https://image.freepik.com/free-photo/full-length-view-trendy-korean-girl-with-skateboard-studio-shot-gorgeous-asian-woman-holding-longboard-purple-background_197531-14647.jpg\");\n border-radius: 10px;\n --aspect-ratio: 1; }\n\nhtml [data-css=\"1481462319\"] {\n border-radius: 10px; }\n\nhtml [data-css=\"305313302\"] {\n background-image: url(\"https://image.freepik.com/free-photo/lovely-hispanic-woman-with-bronze-skin-denim-shorts-having-fun-during-indoor-summer-good-looking-asian-girl-with-longboard-spending-free-time_197531-3996.jpg\");\n border-radius: 10px;\n --aspect-ratio: 1; }\n\nhtml [data-css=\"1481462319\"] {\n border-radius: 10px; }\n\nhtml [data-css=\"1021412955\"] {\n background-image: url(\"https://image.freepik.com/free-photo/sensual-korean-woman-black-hat-looking-camera-studio-shot-ecstatic-asian-model-isolated-beige-background_197531-14545.jpg\");\n border-radius: 10px;\n --aspect-ratio: 1; }\n\nhtml [data-css=\"1481462319\"] {\n border-radius: 10px; }\n\nhtml [data-css=\"1439656003\"] {\n background-image: url(\"https://image.freepik.com/free-photo/beautiful-woman-white-bucket-hat-fashion-studio-shoot_53876-102852.jpg\");\n border-radius: 10px;\n --aspect-ratio: 1; }\n\nhtml [data-css=\"1481462319\"] {\n border-radius: 10px; }\n\nhtml [data-css=\"759954798\"] {\n background-image: url(\"https://image.freepik.com/free-photo/blissful-lady-trendy-summer-clothes-posing-with-camera-yellow-positive-beautiful-girl-hat-chilling-studio_197531-11082.jpg\");\n border-radius: 10px;\n --aspect-ratio: 1; }\n\nhtml [data-css=\"2172607115\"] {\n background-color: rgba(15, 15, 54, 0); }\n\nhtml [data-css=\"910652943\"] {\n margin-bottom: 15px; }\n\nhtml [data-css=\"3098573387\"] {\n --aspect-ratio: 3 / 4; }\n\nhtml [data-css=\"2335156226\"] {\n background-color: #ffebeb; }\n\nhtml [data-css=\"2172607115\"] {\n background-color: rgba(15, 15, 54, 0); }\n\nhtml [data-css=\"910652943\"] {\n margin-bottom: 15px; }\n\nhtml.dark [data-dark-css=\"1782937822\"] {\n background-color: #17174f; }\n\nhtml [data-css=\"968347738\"] {\n padding-top: 30px;\n padding-right: 0px;\n padding-bottom: 30px;\n padding-left: 0px; }\n @media (min-width: 400px) {\n html [data-css=\"968347738\"] {\n padding-top: calc(1.25vw + 25px); } }\n @media (min-width: 1200px) {\n html [data-css=\"968347738\"] {\n padding-top: 40px; } }\n @media (min-width: 400px) {\n html [data-css=\"968347738\"] {\n padding-bottom: calc(1.25vw + 25px); } }\n @media (min-width: 1200px) {\n html [data-css=\"968347738\"] {\n padding-bottom: 40px; } }\n\nhtml [data-css=\"2172607115\"] {\n background-color: rgba(15, 15, 54, 0); }\n\nhtml [data-css=\"1227724396\"] {\n --aspect-ratio: 4/3;\n background-image: url(\"https://products.wp-ts.com/stowaa/html/assets/images/shop/product_img_12.png\"); }\n\nhtml [data-css=\"2610014732\"] {\n --aspect-ratio: 4/3;\n background-image: url(\"https://products.wp-ts.com/stowaa/html/assets/images/shop/product-img-21.png\"); }\n\nhtml [data-css=\"4078759727\"] {\n --aspect-ratio: 4/3;\n background-image: url(\"https://products.wp-ts.com/stowaa/html/assets/images/shop/product-img-22.png\"); }\n\nhtml [data-css=\"3475467982\"] {\n --aspect-ratio: 4/3;\n background-image: url(\"https://products.wp-ts.com/stowaa/html/assets/images/shop/product-img-23.png\"); }\n*,\n*:before,\n*:after {\n box-sizing: border-box; }\n\nhtml.rtl {\n direction: rtl; }\n\nbody {\n margin: 0;\n padding: 0;\n font-family: var(--font-primary);\n background-color: var(--color-light);\n color: var(--color-gray7);\n line-height: 1.5;\n font-size: 14px; }\n\nhtml, body {\n height: auto !important; }\n\nh1, h2, h3, h4, h5, h6 {\n color: var(--color-gray8);\n margin: 0;\n margin-bottom: 5px;\n line-height: 1.4;\n font-weight: 500;\n font-family: var(--font-secondary); }\n\np {\n margin: 0; }\n\nimg {\n max-width: 100%;\n border: 0;\n vertical-align: middle; }\n\nimg:not([src]) {\n visibility: hidden; }\n\n/* Fixes Firefox anomaly during image load */\n@-moz-document url-prefix() {\n img:-moz-loading {\n visibility: hidden; } }\n\n.veda-section {\n position: relative;\n z-index: 1;\n padding: 60px 0;\n background-position: 50% 50%; }\n\n.core-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n pointer-events: none; }\n\n.core-image-cover {\n position: relative;\n background-size: cover;\n background-position: 50% 50%; }\n .core-image-cover:before {\n content: '';\n display: block;\n padding-top: calc((1 / (var(--aspect-ratio, 1.33))) * 100%); }\n .core-image-cover img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover; }\n\n.core-embed-responsive {\n position: relative;\n display: block;\n height: 0;\n padding: 0;\n overflow: hidden;\n padding-bottom: calc((1 / (var(--aspect-ratio, 1.777))) * 100%); }\n .core-embed-responsive .core-embed-responsive__item,\n .core-embed-responsive iframe,\n .core-embed-responsive embed,\n .core-embed-responsive object {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 0; }\n\n/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n/* Document\n ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\nhtml {\n line-height: 1.15;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */ }\n\n/* Sections\n ========================================================================== */\n/**\n * Remove the margin in all browsers.\n */\nbody {\n margin: 0; }\n\n/**\n * Render the `main` element consistently in IE.\n */\nmain {\n display: block; }\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n font-size: 2em;\n margin: 0.67em 0; }\n\n/* Grouping content\n ========================================================================== */\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n box-sizing: content-box;\n /* 1 */\n height: 0;\n /* 1 */\n overflow: visible;\n /* 2 */ }\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */ }\n\n/* Text-level semantics\n ========================================================================== */\n/**\n * Remove the gray background on active links in IE 10.\n */\na {\n background-color: transparent; }\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n border-bottom: none;\n /* 1 */\n text-decoration: underline;\n /* 2 */\n text-decoration: underline dotted;\n /* 2 */ }\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n font-weight: bolder; }\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */ }\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n font-size: 80%; }\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline; }\n\nsub {\n bottom: -0.25em; }\n\nsup {\n top: -0.5em; }\n\n/* Embedded content\n ========================================================================== */\n/**\n * Remove the border on images inside links in IE 10.\n */\nimg {\n border-style: none; }\n\n/* Forms\n ========================================================================== */\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n margin: 0;\n /* 2 */ }\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n /* 1 */\n overflow: visible; }\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n /* 1 */\n text-transform: none; }\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button; }\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0; }\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText; }\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n padding: 0.35em 0.75em 0.625em; }\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\nlegend {\n box-sizing: border-box;\n /* 1 */\n color: inherit;\n /* 2 */\n display: table;\n /* 1 */\n max-width: 100%;\n /* 1 */\n padding: 0;\n /* 3 */\n white-space: normal;\n /* 1 */ }\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n vertical-align: baseline; }\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\ntextarea {\n overflow: auto; }\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */ }\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto; }\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=\"search\"] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */ }\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none; }\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */ }\n\n/* Interactive\n ========================================================================== */\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\ndetails {\n display: block; }\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n display: list-item; }\n\n/* Misc\n ========================================================================== */\n/**\n * Add the correct display in IE 10+.\n */\ntemplate {\n display: none; }\n\n/**\n * Add the correct display in IE 10.\n */\n[hidden] {\n display: none; }\n\n.container,\n.container-fluid,\n.container-xxl,\n.container-xl,\n.container-lg,\n.container-md,\n.container-sm {\n width: 100%;\n padding-right: var(--bs-gutter-x, 0.75rem);\n padding-left: var(--bs-gutter-x, 0.75rem);\n margin-right: auto;\n margin-left: auto; }\n\n@media (min-width: 576px) {\n .container-sm, .container {\n max-width: 540px; } }\n\n@media (min-width: 768px) {\n .container-md, .container-sm, .container {\n max-width: 720px; } }\n\n@media (min-width: 992px) {\n .container-lg, .container-md, .container-sm, .container {\n max-width: 960px; } }\n\n@media (min-width: 1200px) {\n .container-xl, .container-lg, .container-md, .container-sm, .container {\n max-width: 1140px; } }\n\n@media (min-width: 1400px) {\n .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {\n max-width: 1320px; } }\n\n.row {\n --bs-gutter-x: 1.5rem;\n --bs-gutter-y: 0;\n display: flex;\n flex-wrap: wrap;\n margin-top: calc(-1 * var(--bs-gutter-y));\n margin-right: calc(-0.5 * var(--bs-gutter-x));\n margin-left: calc(-0.5 * var(--bs-gutter-x)); }\n\n.row > * {\n flex-shrink: 0;\n width: 100%;\n max-width: 100%;\n padding-right: calc(var(--bs-gutter-x) * 0.5);\n padding-left: calc(var(--bs-gutter-x) * 0.5);\n margin-top: var(--bs-gutter-y); }\n\n.col {\n flex: 1 0 0%; }\n\n.row-cols-auto > * {\n flex: 0 0 auto;\n width: auto; }\n\n.row-cols-1 > * {\n flex: 0 0 auto;\n width: 100%; }\n\n.row-cols-2 > * {\n flex: 0 0 auto;\n width: 50%; }\n\n.row-cols-3 > * {\n flex: 0 0 auto;\n width: 33.3333333333%; }\n\n.row-cols-4 > * {\n flex: 0 0 auto;\n width: 25%; }\n\n.row-cols-5 > * {\n flex: 0 0 auto;\n width: 20%; }\n\n.row-cols-6 > * {\n flex: 0 0 auto;\n width: 16.6666666667%; }\n\n.col-auto {\n flex: 0 0 auto;\n width: auto; }\n\n.col-1 {\n flex: 0 0 auto;\n width: 8.33333333%; }\n\n.col-2 {\n flex: 0 0 auto;\n width: 16.66666667%; }\n\n.col-3 {\n flex: 0 0 auto;\n width: 25%; }\n\n.col-4 {\n flex: 0 0 auto;\n width: 33.33333333%; }\n\n.col-5 {\n flex: 0 0 auto;\n width: 41.66666667%; }\n\n.col-6 {\n flex: 0 0 auto;\n width: 50%; }\n\n.col-7 {\n flex: 0 0 auto;\n width: 58.33333333%; }\n\n.col-8 {\n flex: 0 0 auto;\n width: 66.66666667%; }\n\n.col-9 {\n flex: 0 0 auto;\n width: 75%; }\n\n.col-10 {\n flex: 0 0 auto;\n width: 83.33333333%; }\n\n.col-11 {\n flex: 0 0 auto;\n width: 91.66666667%; }\n\n.col-12 {\n flex: 0 0 auto;\n width: 100%; }\n\n.offset-1 {\n margin-left: 8.33333333%; }\n\n.offset-2 {\n margin-left: 16.66666667%; }\n\n.offset-3 {\n margin-left: 25%; }\n\n.offset-4 {\n margin-left: 33.33333333%; }\n\n.offset-5 {\n margin-left: 41.66666667%; }\n\n.offset-6 {\n margin-left: 50%; }\n\n.offset-7 {\n margin-left: 58.33333333%; }\n\n.offset-8 {\n margin-left: 66.66666667%; }\n\n.offset-9 {\n margin-left: 75%; }\n\n.offset-10 {\n margin-left: 83.33333333%; }\n\n.offset-11 {\n margin-left: 91.66666667%; }\n\n.g-0,\n.gx-0 {\n --bs-gutter-x: 0; }\n\n.g-0,\n.gy-0 {\n --bs-gutter-y: 0; }\n\n.g-1,\n.gx-1 {\n --bs-gutter-x: 0.25rem; }\n\n.g-1,\n.gy-1 {\n --bs-gutter-y: 0.25rem; }\n\n.g-2,\n.gx-2 {\n --bs-gutter-x: 0.5rem; }\n\n.g-2,\n.gy-2 {\n --bs-gutter-y: 0.5rem; }\n\n.g-3,\n.gx-3 {\n --bs-gutter-x: 1rem; }\n\n.g-3,\n.gy-3 {\n --bs-gutter-y: 1rem; }\n\n.g-4,\n.gx-4 {\n --bs-gutter-x: 1.5rem; }\n\n.g-4,\n.gy-4 {\n --bs-gutter-y: 1.5rem; }\n\n.g-5,\n.gx-5 {\n --bs-gutter-x: 3rem; }\n\n.g-5,\n.gy-5 {\n --bs-gutter-y: 3rem; }\n\n@media (min-width: 576px) {\n .col-sm {\n flex: 1 0 0%; }\n .row-cols-sm-auto > * {\n flex: 0 0 auto;\n width: auto; }\n .row-cols-sm-1 > * {\n flex: 0 0 auto;\n width: 100%; }\n .row-cols-sm-2 > * {\n flex: 0 0 auto;\n width: 50%; }\n .row-cols-sm-3 > * {\n flex: 0 0 auto;\n width: 33.3333333333%; }\n .row-cols-sm-4 > * {\n flex: 0 0 auto;\n width: 25%; }\n .row-cols-sm-5 > * {\n flex: 0 0 auto;\n width: 20%; }\n .row-cols-sm-6 > * {\n flex: 0 0 auto;\n width: 16.6666666667%; }\n .col-sm-auto {\n flex: 0 0 auto;\n width: auto; }\n .col-sm-1 {\n flex: 0 0 auto;\n width: 8.33333333%; }\n .col-sm-2 {\n flex: 0 0 auto;\n width: 16.66666667%; }\n .col-sm-3 {\n flex: 0 0 auto;\n width: 25%; }\n .col-sm-4 {\n flex: 0 0 auto;\n width: 33.33333333%; }\n .col-sm-5 {\n flex: 0 0 auto;\n width: 41.66666667%; }\n .col-sm-6 {\n flex: 0 0 auto;\n width: 50%; }\n .col-sm-7 {\n flex: 0 0 auto;\n width: 58.33333333%; }\n .col-sm-8 {\n flex: 0 0 auto;\n width: 66.66666667%; }\n .col-sm-9 {\n flex: 0 0 auto;\n width: 75%; }\n .col-sm-10 {\n flex: 0 0 auto;\n width: 83.33333333%; }\n .col-sm-11 {\n flex: 0 0 auto;\n width: 91.66666667%; }\n .col-sm-12 {\n flex: 0 0 auto;\n width: 100%; }\n .offset-sm-0 {\n margin-left: 0; }\n .offset-sm-1 {\n margin-left: 8.33333333%; }\n .offset-sm-2 {\n margin-left: 16.66666667%; }\n .offset-sm-3 {\n margin-left: 25%; }\n .offset-sm-4 {\n margin-left: 33.33333333%; }\n .offset-sm-5 {\n margin-left: 41.66666667%; }\n .offset-sm-6 {\n margin-left: 50%; }\n .offset-sm-7 {\n margin-left: 58.33333333%; }\n .offset-sm-8 {\n margin-left: 66.66666667%; }\n .offset-sm-9 {\n margin-left: 75%; }\n .offset-sm-10 {\n margin-left: 83.33333333%; }\n .offset-sm-11 {\n margin-left: 91.66666667%; }\n .g-sm-0,\n .gx-sm-0 {\n --bs-gutter-x: 0; }\n .g-sm-0,\n .gy-sm-0 {\n --bs-gutter-y: 0; }\n .g-sm-1,\n .gx-sm-1 {\n --bs-gutter-x: 0.25rem; }\n .g-sm-1,\n .gy-sm-1 {\n --bs-gutter-y: 0.25rem; }\n .g-sm-2,\n .gx-sm-2 {\n --bs-gutter-x: 0.5rem; }\n .g-sm-2,\n .gy-sm-2 {\n --bs-gutter-y: 0.5rem; }\n .g-sm-3,\n .gx-sm-3 {\n --bs-gutter-x: 1rem; }\n .g-sm-3,\n .gy-sm-3 {\n --bs-gutter-y: 1rem; }\n .g-sm-4,\n .gx-sm-4 {\n --bs-gutter-x: 1.5rem; }\n .g-sm-4,\n .gy-sm-4 {\n --bs-gutter-y: 1.5rem; }\n .g-sm-5,\n .gx-sm-5 {\n --bs-gutter-x: 3rem; }\n .g-sm-5,\n .gy-sm-5 {\n --bs-gutter-y: 3rem; } }\n\n@media (min-width: 768px) {\n .col-md {\n flex: 1 0 0%; }\n .row-cols-md-auto > * {\n flex: 0 0 auto;\n width: auto; }\n .row-cols-md-1 > * {\n flex: 0 0 auto;\n width: 100%; }\n .row-cols-md-2 > * {\n flex: 0 0 auto;\n width: 50%; }\n .row-cols-md-3 > * {\n flex: 0 0 auto;\n width: 33.3333333333%; }\n .row-cols-md-4 > * {\n flex: 0 0 auto;\n width: 25%; }\n .row-cols-md-5 > * {\n flex: 0 0 auto;\n width: 20%; }\n .row-cols-md-6 > * {\n flex: 0 0 auto;\n width: 16.6666666667%; }\n .col-md-auto {\n flex: 0 0 auto;\n width: auto; }\n .col-md-1 {\n flex: 0 0 auto;\n width: 8.33333333%; }\n .col-md-2 {\n flex: 0 0 auto;\n width: 16.66666667%; }\n .col-md-3 {\n flex: 0 0 auto;\n width: 25%; }\n .col-md-4 {\n flex: 0 0 auto;\n width: 33.33333333%; }\n .col-md-5 {\n flex: 0 0 auto;\n width: 41.66666667%; }\n .col-md-6 {\n flex: 0 0 auto;\n width: 50%; }\n .col-md-7 {\n flex: 0 0 auto;\n width: 58.33333333%; }\n .col-md-8 {\n flex: 0 0 auto;\n width: 66.66666667%; }\n .col-md-9 {\n flex: 0 0 auto;\n width: 75%; }\n .col-md-10 {\n flex: 0 0 auto;\n width: 83.33333333%; }\n .col-md-11 {\n flex: 0 0 auto;\n width: 91.66666667%; }\n .col-md-12 {\n flex: 0 0 auto;\n width: 100%; }\n .offset-md-0 {\n margin-left: 0; }\n .offset-md-1 {\n margin-left: 8.33333333%; }\n .offset-md-2 {\n margin-left: 16.66666667%; }\n .offset-md-3 {\n margin-left: 25%; }\n .offset-md-4 {\n margin-left: 33.33333333%; }\n .offset-md-5 {\n margin-left: 41.66666667%; }\n .offset-md-6 {\n margin-left: 50%; }\n .offset-md-7 {\n margin-left: 58.33333333%; }\n .offset-md-8 {\n margin-left: 66.66666667%; }\n .offset-md-9 {\n margin-left: 75%; }\n .offset-md-10 {\n margin-left: 83.33333333%; }\n .offset-md-11 {\n margin-left: 91.66666667%; }\n .g-md-0,\n .gx-md-0 {\n --bs-gutter-x: 0; }\n .g-md-0,\n .gy-md-0 {\n --bs-gutter-y: 0; }\n .g-md-1,\n .gx-md-1 {\n --bs-gutter-x: 0.25rem; }\n .g-md-1,\n .gy-md-1 {\n --bs-gutter-y: 0.25rem; }\n .g-md-2,\n .gx-md-2 {\n --bs-gutter-x: 0.5rem; }\n .g-md-2,\n .gy-md-2 {\n --bs-gutter-y: 0.5rem; }\n .g-md-3,\n .gx-md-3 {\n --bs-gutter-x: 1rem; }\n .g-md-3,\n .gy-md-3 {\n --bs-gutter-y: 1rem; }\n .g-md-4,\n .gx-md-4 {\n --bs-gutter-x: 1.5rem; }\n .g-md-4,\n .gy-md-4 {\n --bs-gutter-y: 1.5rem; }\n .g-md-5,\n .gx-md-5 {\n --bs-gutter-x: 3rem; }\n .g-md-5,\n .gy-md-5 {\n --bs-gutter-y: 3rem; } }\n\n@media (min-width: 992px) {\n .col-lg {\n flex: 1 0 0%; }\n .row-cols-lg-auto > * {\n flex: 0 0 auto;\n width: auto; }\n .row-cols-lg-1 > * {\n flex: 0 0 auto;\n width: 100%; }\n .row-cols-lg-2 > * {\n flex: 0 0 auto;\n width: 50%; }\n .row-cols-lg-3 > * {\n flex: 0 0 auto;\n width: 33.3333333333%; }\n .row-cols-lg-4 > * {\n flex: 0 0 auto;\n width: 25%; }\n .row-cols-lg-5 > * {\n flex: 0 0 auto;\n width: 20%; }\n .row-cols-lg-6 > * {\n flex: 0 0 auto;\n width: 16.6666666667%; }\n .col-lg-auto {\n flex: 0 0 auto;\n width: auto; }\n .col-lg-1 {\n flex: 0 0 auto;\n width: 8.33333333%; }\n .col-lg-2 {\n flex: 0 0 auto;\n width: 16.66666667%; }\n .col-lg-3 {\n flex: 0 0 auto;\n width: 25%; }\n .col-lg-4 {\n flex: 0 0 auto;\n width: 33.33333333%; }\n .col-lg-5 {\n flex: 0 0 auto;\n width: 41.66666667%; }\n .col-lg-6 {\n flex: 0 0 auto;\n width: 50%; }\n .col-lg-7 {\n flex: 0 0 auto;\n width: 58.33333333%; }\n .col-lg-8 {\n flex: 0 0 auto;\n width: 66.66666667%; }\n .col-lg-9 {\n flex: 0 0 auto;\n width: 75%; }\n .col-lg-10 {\n flex: 0 0 auto;\n width: 83.33333333%; }\n .col-lg-11 {\n flex: 0 0 auto;\n width: 91.66666667%; }\n .col-lg-12 {\n flex: 0 0 auto;\n width: 100%; }\n .offset-lg-0 {\n margin-left: 0; }\n .offset-lg-1 {\n margin-left: 8.33333333%; }\n .offset-lg-2 {\n margin-left: 16.66666667%; }\n .offset-lg-3 {\n margin-left: 25%; }\n .offset-lg-4 {\n margin-left: 33.33333333%; }\n .offset-lg-5 {\n margin-left: 41.66666667%; }\n .offset-lg-6 {\n margin-left: 50%; }\n .offset-lg-7 {\n margin-left: 58.33333333%; }\n .offset-lg-8 {\n margin-left: 66.66666667%; }\n .offset-lg-9 {\n margin-left: 75%; }\n .offset-lg-10 {\n margin-left: 83.33333333%; }\n .offset-lg-11 {\n margin-left: 91.66666667%; }\n .g-lg-0,\n .gx-lg-0 {\n --bs-gutter-x: 0; }\n .g-lg-0,\n .gy-lg-0 {\n --bs-gutter-y: 0; }\n .g-lg-1,\n .gx-lg-1 {\n --bs-gutter-x: 0.25rem; }\n .g-lg-1,\n .gy-lg-1 {\n --bs-gutter-y: 0.25rem; }\n .g-lg-2,\n .gx-lg-2 {\n --bs-gutter-x: 0.5rem; }\n .g-lg-2,\n .gy-lg-2 {\n --bs-gutter-y: 0.5rem; }\n .g-lg-3,\n .gx-lg-3 {\n --bs-gutter-x: 1rem; }\n .g-lg-3,\n .gy-lg-3 {\n --bs-gutter-y: 1rem; }\n .g-lg-4,\n .gx-lg-4 {\n --bs-gutter-x: 1.5rem; }\n .g-lg-4,\n .gy-lg-4 {\n --bs-gutter-y: 1.5rem; }\n .g-lg-5,\n .gx-lg-5 {\n --bs-gutter-x: 3rem; }\n .g-lg-5,\n .gy-lg-5 {\n --bs-gutter-y: 3rem; } }\n\n@media (min-width: 1200px) {\n .col-xl {\n flex: 1 0 0%; }\n .row-cols-xl-auto > * {\n flex: 0 0 auto;\n width: auto; }\n .row-cols-xl-1 > * {\n flex: 0 0 auto;\n width: 100%; }\n .row-cols-xl-2 > * {\n flex: 0 0 auto;\n width: 50%; }\n .row-cols-xl-3 > * {\n flex: 0 0 auto;\n width: 33.3333333333%; }\n .row-cols-xl-4 > * {\n flex: 0 0 auto;\n width: 25%; }\n .row-cols-xl-5 > * {\n flex: 0 0 auto;\n width: 20%; }\n .row-cols-xl-6 > * {\n flex: 0 0 auto;\n width: 16.6666666667%; }\n .col-xl-auto {\n flex: 0 0 auto;\n width: auto; }\n .col-xl-1 {\n flex: 0 0 auto;\n width: 8.33333333%; }\n .col-xl-2 {\n flex: 0 0 auto;\n width: 16.66666667%; }\n .col-xl-3 {\n flex: 0 0 auto;\n width: 25%; }\n .col-xl-4 {\n flex: 0 0 auto;\n width: 33.33333333%; }\n .col-xl-5 {\n flex: 0 0 auto;\n width: 41.66666667%; }\n .col-xl-6 {\n flex: 0 0 auto;\n width: 50%; }\n .col-xl-7 {\n flex: 0 0 auto;\n width: 58.33333333%; }\n .col-xl-8 {\n flex: 0 0 auto;\n width: 66.66666667%; }\n .col-xl-9 {\n flex: 0 0 auto;\n width: 75%; }\n .col-xl-10 {\n flex: 0 0 auto;\n width: 83.33333333%; }\n .col-xl-11 {\n flex: 0 0 auto;\n width: 91.66666667%; }\n .col-xl-12 {\n flex: 0 0 auto;\n width: 100%; }\n .offset-xl-0 {\n margin-left: 0; }\n .offset-xl-1 {\n margin-left: 8.33333333%; }\n .offset-xl-2 {\n margin-left: 16.66666667%; }\n .offset-xl-3 {\n margin-left: 25%; }\n .offset-xl-4 {\n margin-left: 33.33333333%; }\n .offset-xl-5 {\n margin-left: 41.66666667%; }\n .offset-xl-6 {\n margin-left: 50%; }\n .offset-xl-7 {\n margin-left: 58.33333333%; }\n .offset-xl-8 {\n margin-left: 66.66666667%; }\n .offset-xl-9 {\n margin-left: 75%; }\n .offset-xl-10 {\n margin-left: 83.33333333%; }\n .offset-xl-11 {\n margin-left: 91.66666667%; }\n .g-xl-0,\n .gx-xl-0 {\n --bs-gutter-x: 0; }\n .g-xl-0,\n .gy-xl-0 {\n --bs-gutter-y: 0; }\n .g-xl-1,\n .gx-xl-1 {\n --bs-gutter-x: 0.25rem; }\n .g-xl-1,\n .gy-xl-1 {\n --bs-gutter-y: 0.25rem; }\n .g-xl-2,\n .gx-xl-2 {\n --bs-gutter-x: 0.5rem; }\n .g-xl-2,\n .gy-xl-2 {\n --bs-gutter-y: 0.5rem; }\n .g-xl-3,\n .gx-xl-3 {\n --bs-gutter-x: 1rem; }\n .g-xl-3,\n .gy-xl-3 {\n --bs-gutter-y: 1rem; }\n .g-xl-4,\n .gx-xl-4 {\n --bs-gutter-x: 1.5rem; }\n .g-xl-4,\n .gy-xl-4 {\n --bs-gutter-y: 1.5rem; }\n .g-xl-5,\n .gx-xl-5 {\n --bs-gutter-x: 3rem; }\n .g-xl-5,\n .gy-xl-5 {\n --bs-gutter-y: 3rem; } }\n\n@media (min-width: 1400px) {\n .col-xxl {\n flex: 1 0 0%; }\n .row-cols-xxl-auto > * {\n flex: 0 0 auto;\n width: auto; }\n .row-cols-xxl-1 > * {\n flex: 0 0 auto;\n width: 100%; }\n .row-cols-xxl-2 > * {\n flex: 0 0 auto;\n width: 50%; }\n .row-cols-xxl-3 > * {\n flex: 0 0 auto;\n width: 33.3333333333%; }\n .row-cols-xxl-4 > * {\n flex: 0 0 auto;\n width: 25%; }\n .row-cols-xxl-5 > * {\n flex: 0 0 auto;\n width: 20%; }\n .row-cols-xxl-6 > * {\n flex: 0 0 auto;\n width: 16.6666666667%; }\n .col-xxl-auto {\n flex: 0 0 auto;\n width: auto; }\n .col-xxl-1 {\n flex: 0 0 auto;\n width: 8.33333333%; }\n .col-xxl-2 {\n flex: 0 0 auto;\n width: 16.66666667%; }\n .col-xxl-3 {\n flex: 0 0 auto;\n width: 25%; }\n .col-xxl-4 {\n flex: 0 0 auto;\n width: 33.33333333%; }\n .col-xxl-5 {\n flex: 0 0 auto;\n width: 41.66666667%; }\n .col-xxl-6 {\n flex: 0 0 auto;\n width: 50%; }\n .col-xxl-7 {\n flex: 0 0 auto;\n width: 58.33333333%; }\n .col-xxl-8 {\n flex: 0 0 auto;\n width: 66.66666667%; }\n .col-xxl-9 {\n flex: 0 0 auto;\n width: 75%; }\n .col-xxl-10 {\n flex: 0 0 auto;\n width: 83.33333333%; }\n .col-xxl-11 {\n flex: 0 0 auto;\n width: 91.66666667%; }\n .col-xxl-12 {\n flex: 0 0 auto;\n width: 100%; }\n .offset-xxl-0 {\n margin-left: 0; }\n .offset-xxl-1 {\n margin-left: 8.33333333%; }\n .offset-xxl-2 {\n margin-left: 16.66666667%; }\n .offset-xxl-3 {\n margin-left: 25%; }\n .offset-xxl-4 {\n margin-left: 33.33333333%; }\n .offset-xxl-5 {\n margin-left: 41.66666667%; }\n .offset-xxl-6 {\n margin-left: 50%; }\n .offset-xxl-7 {\n margin-left: 58.33333333%; }\n .offset-xxl-8 {\n margin-left: 66.66666667%; }\n .offset-xxl-9 {\n margin-left: 75%; }\n .offset-xxl-10 {\n margin-left: 83.33333333%; }\n .offset-xxl-11 {\n margin-left: 91.66666667%; }\n .g-xxl-0,\n .gx-xxl-0 {\n --bs-gutter-x: 0; }\n .g-xxl-0,\n .gy-xxl-0 {\n --bs-gutter-y: 0; }\n .g-xxl-1,\n .gx-xxl-1 {\n --bs-gutter-x: 0.25rem; }\n .g-xxl-1,\n .gy-xxl-1 {\n --bs-gutter-y: 0.25rem; }\n .g-xxl-2,\n .gx-xxl-2 {\n --bs-gutter-x: 0.5rem; }\n .g-xxl-2,\n .gy-xxl-2 {\n --bs-gutter-y: 0.5rem; }\n .g-xxl-3,\n .gx-xxl-3 {\n --bs-gutter-x: 1rem; }\n .g-xxl-3,\n .gy-xxl-3 {\n --bs-gutter-y: 1rem; }\n .g-xxl-4,\n .gx-xxl-4 {\n --bs-gutter-x: 1.5rem; }\n .g-xxl-4,\n .gy-xxl-4 {\n --bs-gutter-y: 1.5rem; }\n .g-xxl-5,\n .gx-xxl-5 {\n --bs-gutter-x: 3rem; }\n .g-xxl-5,\n .gy-xxl-5 {\n --bs-gutter-y: 3rem; } }\n\n/* Start/gridAuto */\n.core-grid-auto {\n display: grid;\n grid-gap: 30px;\n grid-template-columns: repeat(auto-fit, minmax(var(--core-grid-auto-column-width, 240px), 1fr)); }\n\n.core-grid-auto__item--large {\n grid-column: span 2;\n grid-row: span 2; }\n\n/* End/gridAuto */\n/* Start/heading */\n.core-heading {\n display: flex;\n flex-direction: column; }\n\n.core-heading__title {\n font-size: 30px; }\n\n.core-heading__text {\n font-size: 18px; }\n\n/* End/heading */\n/* Start/button */\n/* End/button */\n/* Start/swiper */\n.core-swiper.swiper-container-horizontal .swiper-button {\n opacity: 1;\n visibility: visible; }\n\n.core-swiper-pagination {\n transform: none;\n text-align: center;\n position: relative;\n left: auto;\n bottom: auto;\n margin-top: 20px; }\n .core-swiper-pagination.core-swiper-pagination-abs {\n margin-top: 0;\n text-align: center;\n transition: 300ms opacity;\n position: absolute;\n left: 50%;\n bottom: 10px;\n transform: translateX(-50%);\n z-index: 10; }\n\n.swiper-pagination-horizontal > .swiper-pagination-bullet {\n margin-bottom: 10px;\n text-align: center; }\n\n.swiper-pagination-bullet {\n cursor: pointer; }\n\n.swiper-pagination-bullet-active {\n background-color: red; }\n\n.core-swiper-button {\n padding: 30px 0 10px;\n text-align: center; }\n @media (max-width: 768px) {\n .core-swiper-button {\n padding-top: 20px; } }\n\n.core-swiper-button > div {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n background-color: #fff;\n box-shadow: 0px 12px 30px 0px rgba(27, 27, 29, 0.12);\n text-align: center;\n cursor: pointer;\n z-index: 9999;\n width: 42px;\n height: 42px;\n margin: 5px; }\n .core-swiper-button > div i {\n font-size: 28px;\n line-height: normal; }\n .core-swiper-button > div.swiper-button-disabled {\n opacity: 0.4;\n pointer-events: none; }\n\n.core-swiper-button-pill > div {\n border-radius: 50%; }\n @media (min-width: 768px) {\n .core-swiper-button-pill > div {\n width: 60px;\n height: 60px;\n line-height: 60px; } }\n .core-swiper-button-pill > div i {\n font-size: 26px;\n color: #1b1b1d; }\n @media (max-width: 600px) {\n .core-swiper-button-pill > div i {\n font-size: 16px; } }\n\n[class*=\"core-swiper-button-abs\"] {\n padding: 0; }\n [class*=\"core-swiper-button-abs\"] > div {\n position: absolute;\n top: 50%;\n transform: translate(0, -50%);\n margin: 0; }\n [class*=\"core-swiper-button-abs\"] > div.core-swiper-button-prev {\n left: 0; }\n [class*=\"core-swiper-button-abs\"] > div.core-swiper-button-next {\n right: 0; }\n [class*=\"core-swiper-button-abs\"] > div.core-swiper-button-disabled {\n opacity: 0;\n pointer-events: none; }\n [class*=\"core-swiper-button-abs\"].core-swiper-button-abs-md {\n padding: 20px 0 10px; }\n [class*=\"core-swiper-button-abs\"].core-swiper-button-abs-md > div {\n margin: 5px !important; }\n @media (max-width: 768px) {\n [class*=\"core-swiper-button-abs\"].core-swiper-button-abs-md > div {\n position: static !important;\n transform: none !important; } }\n [class*=\"core-swiper-button-abs\"].core-swiper-button-abs-md > div.core-swiper-button-disabled {\n opacity: 0.4;\n pointer-events: none; }\n\n.core-swiper-button-abs-outer {\n padding-left: 20px;\n padding-right: 20px; }\n @media (min-width: 767px) {\n .core-swiper-button-abs-outer.core-swiper-button-pill {\n padding-left: 28px;\n padding-right: 28px; } }\n .core-swiper-button-abs-outer > div.core-swiper-button-prev {\n transform: translate(3px, -50%); }\n .core-swiper-button-abs-outer > div.core-swiper-button-next {\n transform: translate(-3px, -50%); }\n\n.core-swiper-button-abs-inner > div.core-swiper-button-prev {\n transform: translate(10px, -50%); }\n\n.core-swiper-button-abs-inner > div.core-swiper-button-next {\n transform: translate(-10px, -50%); }\n\n.core-swiper-button-abs-center {\n overflow: visible; }\n .core-swiper-button-abs-center .swiper-slide {\n opacity: 0.4;\n transition: opacity 0.4s ease; }\n .core-swiper-button-abs-center .swiper-slide.swiper-slide-active {\n opacity: 1; }\n\n.is-mobile .core-swiper-button-mobile-disable .swiper-button {\n display: none !important; }\n\n/* End/swiper */\n.icon-text {\n display: flex;\n align-items: center; }\n\n.icon-text__icon {\n font-size: 40px;\n margin-right: 20px; }\n html.rtl .icon-text__icon {\n margin-left: 20px; }\n\n.icon-text__content p {\n margin-bottom: 0; }\n\n.icon-text__title {\n font-size: 20px;\n margin-bottom: 0; }\n\n.feature-grid {\n display: grid;\n grid-gap: 30px; }\n @media (min-width: 768px) {\n .feature-grid {\n grid-template-columns: repeat(4, 1fr); } }\n\n@media (min-width: 768px) {\n .feature-grid__item:first-child {\n grid-column: span 2;\n grid-row: span 2; } }\n\n.image-box {\n position: relative;\n overflow: hidden; }\n .image-box:hover .image-box__img {\n transform: scale(1.1); }\n\n.image-box__img {\n transition: all 0.6s; }\n\n.image-box__title {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translate(-50%, 0);\n font-size: 16px;\n background-color: var(--color-light);\n color: var(--color-gray8);\n padding: 12px 20px;\n border-radius: 10px;\n min-width: 130px;\n text-align: center; }\n\n.product-2__title {\n font-size: 16px; }\n .product-2__title a {\n color: inherit;\n text-decoration: none; }\n\n.product-2__body {\n display: flex;\n flex-direction: column;\n margin-top: 10px; }\n\n.product-2__prices {\n display: flex; }\n\n.product-2__origin-price {\n text-decoration: line-through;\n margin-left: 5px; }\n html.rtl .product-2__origin-price {\n margin-right: 5px; }\n\n.product {\n display: flex;\n flex-direction: column;\n border-radius: 12px;\n overflow: hidden;\n background: #fff;\n margin-bottom: 10px; }\n\n.product__header {\n position: relative; }\n\n.product__image img {\n width: 100%;\n border-radius: 12px;\n height: 260px;\n object-fit: cover; }\n\n.product__label {\n position: absolute;\n border-radius: 12px;\n background: #e84118;\n left: 12px;\n top: 12px;\n color: #fff;\n font-size: 14px;\n padding: 8px 12px; }\n\n.product__addToWishList {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n right: 12px;\n top: 12px;\n font-size: 22px;\n outline: none;\n border: none; }\n\n.product__body {\n padding: 16px 12px; }\n\n.product__infomation {\n display: flex;\n justify-content: space-between; }\n\n.product__name {\n font-size: 22px;\n font-weight: 500;\n text-decoration: none;\n color: #111; }\n\n.product__prices {\n text-align: right; }\n\n.product__saledPrice {\n color: red;\n font-weight: 500;\n font-size: 22px; }\n\n.product__originPrice {\n color: gray;\n margin-top: -4px; }\n\n.product__footer {\n margin-top: 4px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 16px; }\n\n.product__buy {\n padding: 4px 10px;\n color: purple;\n background: #fff;\n border: none;\n outline: none;\n border-radius: 12px; }\n\n.heading__subtitle {\n font-size: 14px;\n color: var(--color-primary); }\n\n.heading__title {\n font-size: 50px;\n color: var(--color-gray9); }\n\n.service {\n padding: 15px;\n border-radius: 20px; }\n\n.service--active {\n box-shadow: 0 5px 15px 0 rgba(var(--rgb-color-dark), 0.1); }\n\n.service__icon {\n font-size: 60px;\n color: var(--color-primary);\n margin-bottom: 20px; }\n\n.product-1 {\n padding: 25px;\n box-shadow: 0 4px 0 var(--color-gray3);\n border: 1px solid var(--color-gray3);\n border-radius: 4px;\n transition: all 0.2s; }\n .product-1:hover {\n box-shadow: 0 5px 25px rgba(var(--rgb-color-dark), 0.1);\n transform: translateY(-5px); }\n\n.product-1__title {\n font-size: 18px;\n margin: 1em 0 0.4em; }\n .product-1__title a {\n color: inherit;\n text-decoration: none; }\n\n.product-1__rating {\n color: var(--color-quaternary); }\n\n.product-1__btn {\n padding: 10px 15px;\n display: block;\n background-color: var(--color-primary);\n text-decoration: none;\n color: var(--color-light-freeze);\n text-align: center;\n border-radius: 6px; }\n\n.product-1__prices {\n display: flex; }\n\n.product-1__origin-price {\n text-decoration: line-through;\n margin-left: 10px; }\n html.rtl .product-1__origin-price {\n margin-right: 10px; }\n\n[data-id='345dsfdsf345435'] .swiper-slide {\n padding: 30px;\n border: 1px solid red; }\n\n[data-id='sdf345dsfdsf345435sdf'] .swiper-slide {\n padding: 30px;\n border: 1px solid red; }\n\n.addons-currency {\n display: inline-flex;\n border: 1px solid var(--color-gray4);\n padding: 5px 10px;\n border-radius: 4px; }\n .addons-currency.active {\n background-color: var(--color-primary); }\n\n.addons-currency__flag {\n margin-right: 10px; }\n\n.add-ons-scroll-to-top {\n position: fixed;\n bottom: 10px;\n z-index: 99999;\n width: 50px;\n height: 50px;\n background-color: var(--color-primary);\n color: var(--color-light);\n font-size: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer; }\n\n.add-ons-scroll-to-top--left {\n left: 10px; }\n\n.add-ons-scroll-to-top--right {\n right: 10px; }\n\n.text-card.active {\n border: 1px solid red; }\n\n.text-card.active2 {\n border: 10px solid blue; }\n\n.text-card__title {\n color: var(--title-color, #111); }\n .text-card__title:hover {\n color: blue; }\n @media (max-width: 500px) {\n .text-card__title {\n color: yellow; } }\n</style>"
},
{
"name": "veda-scripts.liquid",
"content": "<script async>\nwindow.veda = window.veda || {};\nwindow.veda.plugins = window.veda.plugins || {};\nwindow.veda.utils = window.veda.utils || {};\nwindow.veda.init = function() {\n // Utils\n \nwindow.veda.utils.objStrParse = function(value) {\n const strReplace = value\n .replace(/\\n/g, '')\n .replace(/'/g, '\"')\n .replace(/\",\\s*}/g, '\"}')\n .replace(/^\\{\\s*/g, '{\\n')\n .replace(/:\\s*\\{/g, ': {\\n')\n .replace(/,\\s*\\{/g, ', {\\n')\n .replace(/\\[\\s*\\{/g, '[\\n{\\n')\n .replace(/\\}$/g, '\\n}')\n .replace(/\\}\\n/g, '\\n}\\n')\n .replace(/\\}\\s*\\]/g, '\\n}\\n]\\n')\n .replace(/\\}\\s*,/g, '\\n}\\n,')\n .replace(/,\\s*/g, ',\\n')\n .replace(/(^\\w*(?=:))/gm, '\"$1\"');\n return JSON.parse(strReplace);\n};\nwindow.veda.utils.isMobile = {\n\tandroid: navigator.userAgent.match(/Android/i),\n\tblackBerry: navigator.userAgent.match(/BlackBerry/i),\n\tipad: navigator.userAgent.match(/iPad/i),\n\tiOS: navigator.userAgent.match(/iPhone|iPad|iPod/i),\n\topera: navigator.userAgent.match(/Opera Mini/i),\n\twindows: navigator.userAgent.match(/Windows Phone/i),\n\tamazonePhone: navigator.userAgent.match(/(?:SD4930UR|\\bSilk(?:.+)Mobile\\b)/i),\n\tamazoneTablet: navigator.userAgent.match(/Silk/i),\n\tany: navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|Windows Phone|(?:SD4930UR|\\bSilk(?:.+)Mobile\\b)|Silk/i)\n}\n // Plugins\n/* Start/swiper */\nclass CoreSwiper {\n constructor(containerEl) {\n this.els = containerEl.querySelectorAll(\".core-swiper\");\n this.init();\n }\n handleSwiper(el) {\n const defaultOptions = {\n pagination: {\n el: '.core-swiper-pagination',\n clickable: true,\n dynamicBullets: true\n },\n navigation: {\n nextEl: '.core-swiper-button-next',\n prevEl: '.core-swiper-button-prev'\n },\n spaceBetween: 30\n }\n try {\n const options = veda.utils.objStrParse(el.getAttribute('data-options'));\n const swiper = new Swiper(el, {...defaultOptions, ...options});\n swiper.update();\n } catch {\n const swiper = new Swiper(el, defaultOptions);\n swiper.update();\n }\n this.handleThumbSwiper(el.nextElementSibling);\n }\n handleThumbSwiper(thumbEl) {\n if (thumbEl && thumbEl.className === 'core-swiper-thumbnails' && thumbEl.length > 0) {\n\t\t\tconst wrapperThumbs = thumbEl.querySelector('.swiper-wrapper');\n const options = veda.utils.objStrParse(thumbEl.getAttribute('data-options'));\n\t\t\tconst defaultOptions = {\n spaceBetween: 10,\n centeredSlides: true,\n slidesPerView: 3,\n touchRatio: 0.3,\n slideToClickedSlide: true,\n pagination: {\n el: '.core-swiper-pagination'\n },\n navigation: {\n nextEl: '.core-swiper-button-next',\n prevEl: '.core-swiper-button-prev'\n }\n };\n\t\t\tvar thumbSwiper = new Swiper(thumbEl, {...defaultOptions, ...options});\n\t\t\tswiper.controller.control = thumbSwiper;\n\t\t\tthumbSwiper.controller.control = swiper;\n\t\t}\n }\n init() {\n this.els.forEach(this.handleSwiper.bind(this));\n }\n}\nwindow.veda.plugins.swiper = function(containerEl) {\n new CoreSwiper(containerEl);\n}\n/* End/swiper */\nclass CoreMasonryEvent {\n constructor() {\n this.events = {};\n this.mounted = false;\n }\n emit(eventType) {\n if (this.events[eventType]) {\n this.events[eventType].forEach((listener) => {\n listener();\n });\n }\n }\n on(eventType, listener) {\n this.events = Object.assign(Object.assign({}, this.events), { [eventType]: [...(this.events[eventType] || []), listener] });\n if (this.eventMount && !this.mounted) {\n this.eventMount();\n this.mounted = true;\n }\n }\n}\nclass CoreMasonry extends CoreMasonryEvent {\n constructor(selector, options) {\n super();\n this.selector = selector;\n this.options = options;\n const defaultOptions = {\n defaultColumn: 3,\n gap: 10,\n columnClassName: \"core-masonry__item\",\n responsive: []\n };\n this.els = Array.from(document.querySelectorAll(selector));\n this.opts = Object.assign(Object.assign({}, defaultOptions), options);\n this.resized = false;\n this.heights = Array(this.getColumn()).fill(0);\n this.debounceId = 0;\n this.init();\n }\n getColumn() {\n const { responsive, defaultColumn } = this.opts;\n const windowWidth = window.innerWidth;\n if (!responsive.length) {\n return defaultColumn;\n }\n let nextIndex = 0;\n let columnResponsive = defaultColumn;\n responsive.forEach(({ breakpoint, column }, index) => {\n nextIndex = Math.min(index + 1, responsive.length);\n const nextBreakpoint = responsive[nextIndex]\n ? responsive[nextIndex].breakpoint\n : Infinity;\n if (breakpoint <= windowWidth && nextBreakpoint - 1 >= windowWidth) {\n columnResponsive = column;\n }\n });\n return columnResponsive;\n }\n getMinHeight() {\n return Math.min(...this.heights);\n }\n getMaxHeight() {\n return Math.max(...this.heights);\n }\n getIndexSelected() {\n return this.heights.findIndex((item) => item === this.getMinHeight());\n }\n setItemStyles(columnElement) {\n const { gap } = this.opts;\n const column = this.getColumn();\n const indexSelected = this.getIndexSelected();\n columnElement.style.position = \"absolute\";\n columnElement.style.width = `${100 / column}%`;\n columnElement.style.left = `${(100 / column) * indexSelected}%`;\n columnElement.style.top = `${this.getMinHeight()}px`;\n columnElement.style.padding = `${gap / 2}px`;\n if (this.resized) {\n columnElement.style.transition = \"all 0.4s ease\";\n }\n }\n handleColumnElement(columnElement) {\n const indexSelected = this.getIndexSelected();\n this.setItemStyles(columnElement);\n this.heights[indexSelected] += columnElement.offsetHeight;\n }\n handleMasonryElement(el) {\n const { columnClassName, gap } = this.opts;\n const itemElements = Array.from(el.querySelectorAll(`.${columnClassName}`));\n itemElements.forEach(this.handleColumnElement.bind(this));\n el.style.position = 'relative';\n el.style.height = `${this.getMaxHeight()}px`;\n el.style.margin = `-${gap / 2}`;\n // debounce remove transition\n if (this.debounceId) {\n clearTimeout(this.debounceId);\n }\n this.debounceId = setTimeout(() => {\n itemElements.forEach((columnElement) => {\n columnElement.style.removeProperty(\"transition\");\n });\n }, 500);\n }\n handleWindowResize() {\n this.resized = true;\n this.update();\n this.emit(\"resize\");\n }\n eventMount() {\n this.init();\n }\n init() {\n this.update();\n window.addEventListener(\"resize\", this.handleWindowResize.bind(this));\n this.emit(\"load\");\n }\n update() {\n this.heights = Array(this.getColumn()).fill(0);\n this.els.forEach(this.handleMasonryElement.bind(this));\n this.emit(\"update\");\n }\n}\nwindow.veda.plugins.masonry = function(selector, options) {\n return new CoreMasonry(selector, options);\n}\nfunction popupRedirectToVedaBuilder() {\n const regexp = /(design_theme_id|frame_token|oseid|editor_domain|ose_preview_version|ose_end_param)=/g;\n const styles = {\n container: `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 99999999999999999;\n background-color: rgba(var(--rgb-color-gray9), 0.6);\n padding: 10px;\n display: flex;\n justify-content: center;\n align-items: center;\n `,\n content: `\n background-color: var(--color-light, #fff);\n padding: 30px;\n text-align: center;\n border-radius: 6px;\n max-width: 600px;\n font-size: 15px;\n `,\n title: `\n font-size: 28px;\n margin-top: 10;\n margin-bottom: 10px;\n `,\n button: `\n border-radius: 4px;\n display: inline-block;\n box-shadow: none;\n outline: none;\n cursor: pointer;\n appearance: none;\n line-height: 1.5;\n font-weight: 500;\n border-width: 0px;\n transition: all 0.3s ease 0s;\n font-size: 14px;\n padding: 10px 18px;\n background-color: #2C36DC;\n color: #fff;\n margin-top: 15px;\n `,\n };\n const render = () => {\n return `\n <div style=\"${styles.container}\">\n <div style=\"${styles.content}\">\n <svg width=\"150\" viewBox=\"0 0 169 166\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M139.5 0C154 0 165.333 8.66681 169 12.5L120.5 60.5C114.509 66.7508 107 74.5002 98 82C91 88 79.6444 91.2395 71.5 91C54.5 90.5 47 84 37 74.5C26.5588 64.0588 15.6085 52.1073 8.61768 45.117C14.17 50.6594 26.1173 61.8599 42 61.499C65 60.9762 78 44 87 35C91.5783 30.4217 107.5 13 114.5 8C124.606 0.781171 135.55 0 139.5 0Z\"\n fill=\"#D755E2\"\n />\n <path\n d=\"M29.5 25C15 25 3.66667 32.6667 0 36.5L23.5 60.5C29.4906 66.751 37 75 46 82.5C52.5 87.9167 63.3556 91.2395 71.5 91C88.5 90.5 96 85 106.5 74.5C117.943 63.5542 128.906 52.087 135.896 45.1034C130.338 50.6471 117.396 62.3613 101.5 62C78.5 61.4773 72.5 50.5 57.5 36C49.3497 28.1214 38.2635 25 29.5 25Z\"\n fill=\"#3DB8FD\"\n style=\"mix-blend-mode: multiply\"\n />\n <path\n d=\"M35 139.55L42 118.3H49.45L39.2 146H30.7L20.5 118.3H28L35 139.55ZM79.1316 131.55C79.1316 132.55 79.065 133.45 78.9316 134.25H58.6816C58.8483 136.25 59.5483 137.817 60.7816 138.95C62.015 140.083 63.5316 140.65 65.3316 140.65C67.9316 140.65 69.7816 139.533 70.8816 137.3H78.4316C77.6316 139.967 76.0983 142.167 73.8316 143.9C71.565 145.6 68.7816 146.45 65.4816 146.45C62.815 146.45 60.415 145.867 58.2816 144.7C56.1816 143.5 54.5316 141.817 53.3316 139.65C52.165 137.483 51.5816 134.983 51.5816 132.15C51.5816 129.283 52.165 126.767 53.3316 124.6C54.4983 122.433 56.1316 120.767 58.2316 119.6C60.3316 118.433 62.7483 117.85 65.4816 117.85C68.115 117.85 70.465 118.417 72.5316 119.55C74.6316 120.683 76.2483 122.3 77.3816 124.4C78.5483 126.467 79.1316 128.85 79.1316 131.55ZM71.8816 129.55C71.8483 127.75 71.1983 126.317 69.9316 125.25C68.665 124.15 67.115 123.6 65.2816 123.6C63.5483 123.6 62.0816 124.133 60.8816 125.2C59.715 126.233 58.9983 127.683 58.7316 129.55H71.8816ZM82.441 132.05C82.441 129.25 82.991 126.767 84.091 124.6C85.2243 122.433 86.7577 120.767 88.691 119.6C90.6243 118.433 92.7743 117.85 95.141 117.85C96.941 117.85 98.6577 118.25 100.291 119.05C101.924 119.817 103.224 120.85 104.191 122.15V109H111.291V146H104.191V141.9C103.324 143.267 102.108 144.367 100.541 145.2C98.9743 146.033 97.1577 146.45 95.091 146.45C92.7577 146.45 90.6243 145.85 88.691 144.65C86.7577 143.45 85.2243 141.767 84.091 139.6C82.991 137.4 82.441 134.883 82.441 132.05ZM104.241 132.15C104.241 130.45 103.908 129 103.241 127.8C102.574 126.567 101.674 125.633 100.541 125C99.4077 124.333 98.191 124 96.891 124C95.591 124 94.391 124.317 93.291 124.95C92.191 125.583 91.291 126.517 90.591 127.75C89.9243 128.95 89.591 130.383 89.591 132.05C89.591 133.717 89.9243 135.183 90.591 136.45C91.291 137.683 92.191 138.633 93.291 139.3C94.4243 139.967 95.6243 140.3 96.891 140.3C98.191 140.3 99.4077 139.983 100.541 139.35C101.674 138.683 102.574 137.75 103.241 136.55C103.908 135.317 104.241 133.85 104.241 132.15ZM116.328 132.05C116.328 129.25 116.878 126.767 117.978 124.6C119.111 122.433 120.628 120.767 122.528 119.6C124.461 118.433 126.611 117.85 128.978 117.85C131.044 117.85 132.844 118.267 134.378 119.1C135.944 119.933 137.194 120.983 138.128 122.25V118.3H145.178V146H138.128V141.95C137.228 143.25 135.978 144.333 134.378 145.2C132.811 146.033 130.994 146.45 128.928 146.45C126.594 146.45 124.461 145.85 122.528 144.65C120.628 143.45 119.111 141.767 117.978 139.6C116.878 137.4 116.328 134.883 116.328 132.05ZM138.128 132.15C138.128 130.45 137.794 129 137.128 127.8C136.461 126.567 135.561 125.633 134.428 125C133.294 124.333 132.078 124 130.778 124C129.478 124 128.278 124.317 127.178 124.95C126.078 125.583 125.178 126.517 124.478 127.75C123.811 128.95 123.478 130.383 123.478 132.05C123.478 133.717 123.811 135.183 124.478 136.45C125.178 137.683 126.078 138.633 127.178 139.3C128.311 139.967 129.511 140.3 130.778 140.3C132.078 140.3 133.294 139.983 134.428 139.35C135.561 138.683 136.461 137.75 137.128 136.55C137.794 135.317 138.128 133.85 138.128 132.15Z\"\n fill=\"#17174F\"\n />\n </svg>\n <h4 style=\"${styles.title}\">Hello, Your theme is designed by Veda.</h4>\n <div>We have our own editing tool and it is optimized for Veda themes. You can start editing by returning to Veda</div>\n <a style=\"${styles.button}\" href=\"https://veda/shopify/auth?shop=${Shopify.shop}\">\n Back to Veda Builder\n </a>\n </div>\n </div>\n `;\n };\n if (regexp.test(window.location.search)) {\n document.body.insertAdjacentHTML('beforeend', render());\n }\n}\npopupRedirectToVedaBuilder();\n}\nwindow.veda.init();\nfunction fn_0 () {\n var uniqueIds = [\"id_31e24962-b123-46c1-9b4e-e5ddfbf808e8\",\"id_ddcb9656-00ea-41a2-81fa-329334caec00\",\"id_aa443f98-590d-4b1a-ae76-2fb480bff68b\",\"id_bbfa1ead-e151-48cc-abc4-c7e332c451f0\",\"id_44ea3d7f-b8b4-43d7-8d05-19bedeb348d0\",\"id_f3d0e238-af4c-43b3-9c24-5c8b878798e0\",\"gallery_addons\"];\n uniqueIds.forEach(uniqueId => {\n /** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);\n });\n }\nfn_0 ();\nfunction fn_1 () {\n var uniqueIds = [\"345dsfdsf345435\",\"sdf345dsfdsf345435sdf\"];\n uniqueIds.forEach(uniqueId => {\n /** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);\nveda.plugins.swiper(container);\n });\n }\nfn_1 ();\nfunction fn_2 () {\n var uniqueId = \"TUONG_currency_addon\";\n const containers = document.querySelectorAll(`[data-id=\"${uniqueId}\"]`)\n containers.forEach(container => {\n container.addEventListener('click', () => {\n console.log(container)\n container.classList.toggle('active');\n });\n });\n console.log(new Date(Date.now()).toString(),containers);\n const button = document.createElement('button');\n button.innerHTML = new Date(Date.now()).toString();\n document.body.appendChild(button);\n }\nfn_2 ();\nfunction fn_3 () {\n var uniqueId = \"currency_addon\";\n /** @type NodeListOf<HTMLElement> */\nconst containers = document.querySelectorAll(`[data-id=\"${uniqueId}\"]`);\ncontainers.forEach(container => {\n container.addEventListener('click', () => {\n console.log(container)\n container.classList.toggle('active');\n });\n})\n }\nfn_3 ();\nfunction fn_4 () {\n var uniqueId = \"scroll-to-top\";\n /** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);\ncontainer.addEventListener('click', event => {\n window.scrollTo({\n behavior: 'smooth',\n top: 0\n })\n});\n }\nfn_4 ();\nfunction fn_5 () {\n var uniqueId = \"addons_embedded\";\n \n }\nfn_5 ();\nfunction fn_6 () {\n var uniqueIds = [\"third_party_add_ons\",\"section5\"];\n uniqueIds.forEach(uniqueId => {\n /** @type HTMLElement */\nconst container = document.querySelector(`[data-id=\"${uniqueId}\"]`);\n const textCardEl = container.querySelector('.text-card');\n textCardEl.addEventListener('click', () => {\n console.log(textCardEl);\n })\n });\n }\nfn_6 ();</script>"
},
{
"name": "veda-preloader.liquid",
"content": ""
},
{
"name": "veda-id_31e24962-b123-46c1-9b4e-e5ddfbf808e8.liquid",
"content": "\n\n<section data-id=\"id_31e24962-b123-46c1-9b4e-e5ddfbf808e8\" class=\"veda-section\" data-css=\"501021317\" data-dark-css=\"1347995206\">\n <div class=\"core-overlay\" data-css=\"2172607115\"></div>\n <div class=\"container\">\n <div class=\"row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1\">\n <div>\n <div class=\"icon-text\">\n <div class=\"icon-text__icon\"><i class=\"fal fa-shipping-fast\\\"></i></div>\n <div class=\"icon-text__content\">\n <h3 class=\"icon-text__title\" data-css=\"3265660625\">Free Shipping</h3>\n <div class=\"icon-text__text\"><p>Free shipping on all order</p></div>\n </div>\n </div>\n </div>\n <div>\n <div class=\"icon-text\">\n <div class=\"icon-text__icon\"><i class=\"fal fa-clock\\\"></i></div>\n <div class=\"icon-text__content\">\n <h3 class=\"icon-text__title\">Support 24/7</h3>\n <div class=\"icon-text__text\"><p>Free shipping on all order</p></div>\n </div>\n </div>\n </div>\n <div>\n <div class=\"icon-text\">\n <div class=\"icon-text__icon\"><i class=\"fal fa-money-bill\\\"></i></div>\n <div class=\"icon-text__content\">\n <h3 class=\"icon-text__title\">Money Return</h3>\n <div class=\"icon-text__text\"><p>Free shipping on all order</p></div>\n </div>\n </div>\n </div>\n <div>\n <div class=\"icon-text\">\n <div class=\"icon-text__icon\"><i class=\"fal fa-coffee\\\"></i></div>\n <div class=\"icon-text__content\">\n <h3 class=\"icon-text__title\">Order Discount</h3>\n <div class=\"icon-text__text\"><p>Free shipping on all order</p></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>"
},
{
"name": "veda-id_ddcb9656-00ea-41a2-81fa-329334caec00.liquid",
"content": "\n\n<section data-id=\"id_ddcb9656-00ea-41a2-81fa-329334caec00\" class=\"veda-section\">\n <div class=\"core-overlay\" data-css=\"2172607115\"></div>\n <div class=\"container\">\n <div class=\"core-heading\" data-css=\"910652943\">\n <h2 class=\"core-heading__title\">Feature</h2>\n <div class=\"core-heading__text\"><p>Lorem ipsum dolor sit amet</p></div>\n </div>\n <div class=\"core-grid-auto\" data-css=\"403059640\">\n <div class=\"core-grid-auto__item core-grid-auto__item--large\">\n <a href=\"\">\n <div class=\"image-box\" data-css=\"1481462319\">\n <div class=\"image-box__img core-image-cover\" data-css=\"975166383\"></div>\n <h3 class=\"image-box__title\">Now trending</h3>\n </div>\n </a>\n </div>\n <div class=\"core-grid-auto__item \">\n <a href=\"\">\n <div class=\"image-box\" data-css=\"1481462319\">\n <div class=\"image-box__img core-image-cover\" data-css=\"305313302\"></div>\n <h3 class=\"image-box__title\">Campaign</h3>\n </div>\n </a>\n </div>\n <div class=\"core-grid-auto__item \">\n <a href=\"\">\n <div class=\"image-box\" data-css=\"1481462319\">\n <div class=\"image-box__img core-image-cover\" data-css=\"1021412955\"></div>\n <h3 class=\"image-box__title\">Lookbook</h3>\n </div>\n </a>\n </div>\n <div class=\"core-grid-auto__item \">\n <a href=\"\">\n <div class=\"image-box\" data-css=\"1481462319\">\n <div class=\"image-box__img core-image-cover\" data-css=\"1439656003\"></div>\n <h3 class=\"image-box__title\">New arrivals</h3>\n </div>\n </a>\n </div>\n <div class=\"core-grid-auto__item \">\n <a href=\"\">\n <div class=\"image-box\" data-css=\"1481462319\">\n <div class=\"image-box__img core-image-cover\" data-css=\"759954798\"></div>\n <h3 class=\"image-box__title\">Sale</h3>\n </div>\n </a>\n </div>\n </div>\n </div>\n</section>"
},
{
"name": "veda-id_aa443f98-590d-4b1a-ae76-2fb480bff68b.liquid",
"content": "\n\n<section data-id=\"id_aa443f98-590d-4b1a-ae76-2fb480bff68b\" class=\"veda-section\">\n <div class=\"core-overlay\" data-css=\"2172607115\"></div>\n <div class=\"container\">\n <div class=\"core-heading\" data-css=\"910652943\">\n <h2 class=\"core-heading__title\">Feature</h2>\n <div class=\"core-heading__text\"><p>Lorem ipsum dolor sit amet</p></div>\n </div>\n <div>\n \n {% assign collection = collections['plants'] %}\n <div class=\"product_list row\">\n {% for product in collection.products %}\n <div class=\"col-sm-2 col-md-3\">\n <div class=\"product-2\">\n <div class=\"product-2__header\">\n <div class=\"product-2__image\">\n <div class=\"core-image-cover\" data-css=\"3098573387\">\n <img src=\"{{ product.featured_image.src | img_url: '300x300' }}\" alt=\"{{ product.title }}\">\n </div>\n </div>\n </div>\n <div class=\"product-2__body\">\n <h2 class=\"product-2__title\" style=\"order: {{ 0 }}\">\n <a href=\"/products/{{ product.handle }}\" class=\"product-2__name\">{{ product.title }}</a>\n </h2>\n <div class=\"product-2__prices\" style=\"order: {{ 1 }}\">\n <div class=\"product-2__saled-price\">{{ product.price | money }}</div>\n {% if product.compare_at_price > product.price %}\n <div class=\"product-2__origin-price\">{{ product.compare_at_price | money }}</div>\n {% endif %}\n </div>\n </div>\n </div>\n </div>\n {% endfor %}\n </div>\n \n </div>\n </div>\n</section>"
},
{
"name": "veda-id_bbfa1ead-e151-48cc-abc4-c7e332c451f0.liquid",
"content": "\n\n<section data-id=\"id_bbfa1ead-e151-48cc-abc4-c7e332c451f0\" class=\"veda-section\" data-css=\"2335156226\" data-dark-css=\"1782937822\">\n <div class=\"core-overlay\" data-css=\"2172607115\"></div>\n <div class=\"container\">\n <div class=\"core-heading\" data-css=\"910652943\">\n <h2 class=\"core-heading__title\">Best selling products</h2>\n <div class=\"core-heading__text\"><p>Vivamus posuere libero nisl, quis eleifend justo ullamcorper a</p></div>\n </div>\n <div>\n \n {% assign collection = collections['plants'] %}\n <div class=\"product_list row\">\n {% for product in collection.products %}\n <div class=\"col-sm-2 col-md-3\">\n <div class=\"product\" data-product='{{ product | json }}'>\n <div class=\"product__header\" style=\"order: {{ 0 }}\">\n <div class=\"product__image\">\n <img src=\"{{ product.featured_image.src | img_url: '300x300' }}\" />\n </div>\n {% if product.available %}\n {% if product.compare_at_price > product.price %}\n <div class=\"product__label\">\n {{ ((product.price - product.compare_at_price) / product.compare_at_price * 100) | round }}%\n </div>\n {% endif %}\n {% else %}\n <div class=\"product__label\">\n Sold out\n </div>\n {% endif %}\n <button class=\"product__addToWishList\">\n <i class=\"fal fa-heart\"></i>\n </button>\n </div>\n <div class=\"product__body\" style=\"order: {{ 1 }}\">\n <div>Tags: {{ product.tags | join(', ') }}</div>\n <div class=\"product__infomation\">\n <a href=\"/products/{{ product.handle }}\" class=\"product__name\">{{ product.title }}</a>\n <div class=\"product__prices\">\n <div class=\"product__saledPrice\">{{ product.price | money }}</div>\n {% if product.compare_at_price > product.price %}\n <div class=\"product__originPrice\">{{ product.compare_at_price | money }}</div>\n {% endif %}\n </div>\n </div>\n <div class=\"product__footer\">\n <div class=\"product__rating\">\n <i class=\"fal fa-star\"></i>\n <span>4.8</span>\n </div>\n <button class=\"product__buy\">\n BUY <i class=\"fal fa-plus\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n {% endfor %}\n </div>\n \n </div>\n </div>\n</section>"
},
{
"name": "veda-id_44ea3d7f-b8b4-43d7-8d05-19bedeb348d0.liquid",
"content": "\n\n\n\n\n<section data-id=\"id_44ea3d7f-b8b4-43d7-8d05-19bedeb348d0\" class=\"veda-section\" data-css=\"968347738\">\n <div class=\"container\">\n <div class=\"heading\">\n <span class=\"heading__subtitle\">What We Can Do For You</span>\n <h2 class=\"heading__title\">Services we can<br> help you with</h2>\n </div>\n <div class=\"row\">\n <div class=\"col-lg-4 mt_md--0\">\n <div class=\"service \">\n <div class=\"service__icon\"><i class=\"fal fa-cloud-upload-alt\\\"></i></div>\n <div class=\"service__content\">\n <h5 class=\"service__title\">Design</h5>\n <div class=\"service__text\"><p>Simply drag and drop photos and videos into your workspace to automatically add them to your Collab Cloud library.</p></div>\n <a class=\"service__link\" href=\"#\">Find out more</a>\n </div>\n </div>\n </div>\n <div class=\"col-lg-4 mt_md--0\">\n <div class=\"service service--active\">\n <div class=\"service__icon\"><i class=\"fal fa-atom\\\"></i></div>\n <div class=\"service__content\">\n <h5 class=\"service__title\">Development</h5>\n <div class=\"service__text\"><p>Simply drag and drop photos and videos into your workspace to automatically add them to your Collab Cloud library.</p></div>\n <a class=\"service__link\" href=\"#\">Find out more</a>\n </div>\n </div>\n </div>\n <div class=\"col-lg-4 mt_md--0\">\n <div class=\"service \">\n <div class=\"service__icon\"><i class=\"fal fa-blender\\\"></i></div>\n <div class=\"service__content\">\n <h5 class=\"service__title\">Content strategy</h5>\n <div class=\"service__text\"><p>Simply drag and drop photos and videos into your workspace to automatically add them to your Collab Cloud library.</p></div>\n <a class=\"service__link\" href=\"#\">Find out more</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n"
},
{
"name": "veda-id_f3d0e238-af4c-43b3-9c24-5c8b878798e0.liquid",
"content": "\n\n<section data-id=\"id_f3d0e238-af4c-43b3-9c24-5c8b878798e0\" class=\"veda-section\" >\n <div class=\"core-overlay\" data-css=\"2172607115\"></div>\n <div class=\"container\">\n <div class=\"row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1\">\n <div class=\"col\">\n <div class=\"product-1\">\n <div class=\"product-1__img core-image-cover\" data-css=\"1227724396\"></div>\n <div class=\"product-1__body\">\n <h2 class=\"product-1__title\"><a href=\"#\">Macbook Pro</a></h2>\n <div class=\"product-1__text\">Apple MacBook Pro13.3″ Laptop with new Touch bar ID</div>\n <div class=\"product-1__rating\">\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star-half-alt\"></i>\n </div>\n <div class=\"product-1__prices\">\n <div class=\"product-1__saled-price\">$100.00</div>\n <div class=\"product-1__origin-price\">$120.00</div>\n </div>\n <a href=\"#\" class=\"product-1__btn\">Add to cart</a>\n </div>\n </div>\n </div>\n\n <div class=\"col\">\n <div class=\"product-1\">\n <div class=\"product-1__img core-image-cover\" data-css=\"2610014732\"></div>\n <div class=\"product-1__body\">\n <h2 class=\"product-1__title\"><a href=\"#\">Macbook Pro</a></h2>\n <div class=\"product-1__text\">Apple MacBook Pro13.3″ Laptop with new Touch bar ID</div>\n <div class=\"product-1__rating\">\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star-half-alt\"></i>\n </div>\n <div class=\"product-1__prices\">\n <div class=\"product-1__saled-price\">$100.00</div>\n <div class=\"product-1__origin-price\">$120.00</div>\n </div>\n <a href=\"#\" class=\"product-1__btn\">Add to cart</a>\n </div>\n </div>\n </div>\n\n <div class=\"col\">\n <div class=\"product-1\">\n <div class=\"product-1__img core-image-cover\" data-css=\"4078759727\"></div>\n <div class=\"product-1__body\">\n <h2 class=\"product-1__title\"><a href=\"#\">Macbook Pro</a></h2>\n <div class=\"product-1__text\">Apple MacBook Pro13.3″ Laptop with new Touch bar ID</div>\n <div class=\"product-1__rating\">\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star-half-alt\"></i>\n </div>\n <div class=\"product-1__prices\">\n <div class=\"product-1__saled-price\">$100.00</div>\n <div class=\"product-1__origin-price\">$120.00</div>\n </div>\n <a href=\"#\" class=\"product-1__btn\">Add to cart</a>\n </div>\n </div>\n </div>\n\n <div class=\"col\">\n <div class=\"product-1\">\n <div class=\"product-1__img core-image-cover\" data-css=\"3475467982\"></div>\n <div class=\"product-1__body\">\n <h2 class=\"product-1__title\"><a href=\"#\">Macbook Pro</a></h2>\n <div class=\"product-1__text\">Apple MacBook Pro13.3″ Laptop with new Touch bar ID</div>\n <div class=\"product-1__rating\">\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star-half-alt\"></i>\n </div>\n <div class=\"product-1__prices\">\n <div class=\"product-1__saled-price\">$100.00</div>\n <div class=\"product-1__origin-price\">$120.00</div>\n </div>\n <a href=\"#\" class=\"product-1__btn\">Add to cart</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</sectioen"
},
{
"name": "veda-345dsfdsf345435.liquid",
"content": "\n<section data-id=\"345dsfdsf345435\" class=\"veda-section\">\n <div class=\"container\">\n <div\n class=\"core-swiper swiper\" data-options=\"{\n speed: 400,\n spaceBetween: 30\n }\" >\n <div class=\"core-swiper-wrapper swiper-wrapper\">\n <div class=\"swiper-slide\">Text 1</div>\n <div class=\"swiper-slide\">Text 2</div>\n <div class=\"swiper-slide\">Text 3</div>\n <div class=\"swiper-slide\">Text 4</div>\n </div>\n <div class=\"core-swiper-button core-swiper-button-pill core-swiper-button-abs\">\n <div class=\"core-swiper-button-prev\">\n <i class=\"fal fa-angle-left\"></i>\n </div>\n <div class=\"core-swiper-button-next\">\n <i class=\"fal fa-angle-right\"></i>\n </div>\n </div>\n <div class=\"core-swiper-pagination\"></div>\n </div>\n </div>\n </section>"
},
{
"name": "veda-scroll-to-top.liquid",
"content": "\n<div data-id=\"scroll-to-top\" class=\"add-ons-scroll-to-top add-ons-scroll-to-top--right\">\n <i class=\"far fa-arrow-alt-up\"></i>\n</div>\n"
}
]
}Last updated
