Битрикс корзина на Vue.js
В данной статье приведен пример реализации корзины в CMS Битрикс на Vue.js.
В примере нет сложных модификаций, здесь сделано все по простому.
Создадим в проекте папке basket. Корзина будет доступна по пути /basket/.
В файле index.php будет примерно такой код:
<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetPageProperty("description", "Интернет-магазин Корзина");
$APPLICATION->SetPageProperty("keywords", "Интернет-магазин Корзина");
$APPLICATION->SetTitle("Корзина");
?>
<? $APPLICATION->IncludeFile(
"/basket/baskedFixed.php",
Array(),
Array("MODE" => "html", "NAME" => "включаемую область"));
?><?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
Создадим файл baskedFixed.php в папке /basket/.
<? $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/styles/baskedFixed.min.css", true) ?>
<?
use Bitrix\Main\Context,
Bitrix\Currency\CurrencyManager,
Bitrix\Sale\Order,
Bitrix\Sale\Basket,
Bitrix\Sale\Delivery,
Bitrix\Sale\PaySystem;
CModule::IncludeModule("iblock");
CModule::IncludeModule("catalog");
CModule::IncludeModule("sale");
//получаем корзину
$basket = \Bitrix\Sale\Basket::loadItemsForFUser(\Bitrix\Sale\Fuser::getId(CSaleBasket::GetBasketUserID()), \Bitrix\Main\Context::getCurrent()->getSite());
if (!$basket->getPrice()) {?>
<div class="make-an-order order_success-wrap">
<div class="wrapper">
<h2 class="make-an-order_title">Корзина</h2>
<div class="order_success" style="margin-bottom: 15px;">
<h2 class="success_title">Корзина пуста</h2>
</div>
</div>
</div>
<?
}
else{
?>
<div class="cart">
<div class="wrapper">
<div class="cart_header">
<h2 class="header_title">Корзина</h2>
<p class="header_subtitle">
У вас в корзине есть товары, которых нет в наличии, вы можете оформить предзаказ, либо удалить эти товары.<br>
Товар будет доставлен вам в течение 14 дней, мы дополнительно свяжемся с вами.
</p>
</div>
<div class="cart_main" id="fixedBasket">
<div class="cart_line">
<div class="line_img"><img src="/img/cart_img.png" alt="cart img"></div>
<p class="line_name">Наименование товара</p>
<div class="line_desc">
</div>
<div class="line_country"><p>Страна</p></div>
<div class="line_season"><p>Сезон</p></div>
<div class="line_size"><p>Размер коробки</p></div>
<div class="line_price"><p>Цена</p></div>
<div class="line_counter">
<p>Кол-во</p>
</div>
<div class="line_summary">
<p>Итого</p>
</div>
</div>
<div class="cart_line" v-for="(item, key) in goods" :data-productId="item.ID">
<div class="line_img"><img :src="item.IMAGE" :alt="item.NAME"></div>
<p class="line_name">
<a v-if="item.DETAIL_PAGE_URL" :href="item.DETAIL_PAGE_URL">{{item.NAME}}</a>
<span v-else>{{item.NAME}}</span>
</p>
<div class="line_desc">
<p class="desc_btn">
<a v-if="item.DETAIL_PAGE_URL" :href="item.DETAIL_PAGE_URL">
Подробнее
о товаре
</a>
</p>
<div class="desc_desc">
<div class="desc_line">
<p class="desc_line_country">Страна</p>
<p class="desc_line_season">Сезон</p>
<p class="desc_line_sizes">Размер коробки</p>
</div>
<div class="desc_line">
<p class="desc_line_country">{{item.COUNTRY_PRODUCTION}}</p>
<p class="desc_line_season">
{{item.PRODUCT_SEZON}}
</p>
<p class="desc_line_sizes">
{{item.PRODUCT_K}}
</p>
</div>
<img v-on:click="goodsDelete(item, key)" src="/img/svg/cart-desc-close.svg" alt="close" class="desc_close">
</div>
</div>
<div class="line_country"><p>{{item.COUNTRY_PRODUCTION}}</p></div>
<div class="line_season"><p>
{{item.PRODUCT_SEZON}}
</p>
</div>
<div class="line_size"><p>
{{item.PRODUCT_K}}
</p></div>
<div class="line_price"><p>{{item.PRICE}} ₽</p><span style="display: none">Цена</span></div>
<div class="line_counter">
<span style="display: none">Кол-во</span>
<img src="/img/svg/counter_minus.svg" alt="minus" class="counter_minus" v-on:click="goodsMinus(item); item.quantity - 1">
<p class="">{{item.QUANTITY}}</p>
<?/*<input style="width: 38px;" class="counter_counter" type="number" min="1" name="quantity" :value="item.QUANTITY" disabled>*/?>
<img src="/img/svg/counter_plus.svg" alt="plus" class="counter_plus" v-on:click="goodsPlus(item)">
</div>
<div class="line_summary">
<span style="display: none">Итого</span>
<p class="summ">{{rounded(item.DISCOUNT * item.QUANTITY)}} ₽</p>
</div>
<div class="line_delete">
<img src="/img/svg/cart_line_delete.png" v-on:click="goodsDelete(item, key)" alt="delete">
</div>
</div>
<div class="cart_summ">
<p>Стоимость покупки: <span class="itog_summ"><b>0</b> руб</span></p>
</div>
<a href="/personal/order/make/" class="cart_buy">Оформить заказ</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
function round(value, decimals) {
return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}
var vm = new Vue({
el: '#fixedBasket',
data: {
goods: [],
},
watch:{
goods: {
handler: function (data) {//высчитываем сумму товаров
let result = 0;
for (const item of data) {
let price = item.DISCOUNT;
let quantity = item.QUANTITY;
result += Number(price) * Number(quantity);
}
if (document.querySelectorAll('.basket__fixed-btn__text b').length > 0) {
document.querySelector('.basket__fixed-btn__text b').textContent = this.summPrettify(result);
}
if (document.querySelectorAll('#fixedBasket .itog_summ b').length > 0) {
document.querySelector('#fixedBasket .itog_summ b').textContent = this.summPrettify(result);
}
if (document.querySelectorAll('.header__basket_order-counter span').length > 0) {
document.querySelector('.header__basket_order-counter span').textContent = this.summPrettify(result) + ' руб.';
}
},
deep: true,
immediate: true,
},
},
methods: {
getGoods: function() {//получаем товары из корзины пользователя
fetch("https://<?=$_SERVER["HTTP_HOST"]?>/basket/getPersonalBasketGoods.php")
.then(response => response.json())
.then(json => {
this.goods = json;
});
},
goodsPlus: function (item) {//увеличиваем кол-во товара
let product_id = item.PRODUCT_ID;
id = Number(item.ID);
product_name = item.NAME;
product_quant = Number(item.QUANTITY) + 1;
var price = round(item.PRICE,2);
product_price = item.PRICE;
$.ajax({
type: 'POST',
url: '/basket/ajax.php',
data: {
'ACTION': 'CART_UPDATE',
'PRODUCT': product_id,
'QUANTITY': product_quant,
'NAME': product_name,
'PRODUCT_CART_ID': id,
// 'PRICE': product_price,
},
success: () => {
item.QUANTITY = Number(item.QUANTITY) + 1
}
});
},
goodsMinus: function (item) {//уменьшаем кол-во товара
if (item.QUANTITY > Number('<?=COUNT_ADD_BASKET?>')) {
let product_id = item.PRODUCT_ID;
id = Number(item.ID);
product_name = item.NAME;
product_quant = Number(item.QUANTITY) - 1;
var price = round(item.PRICE,2);
product_price = item.PRICE;
$.ajax({
type: 'POST',
url: '/basket/ajax.php',
data: {
'ACTION': 'CART_UPDATE',
'PRODUCT': product_id,
'QUANTITY': product_quant,
'NAME': product_name,
'PRODUCT_CART_ID': id,
},
success: () => {
item.QUANTITY = Number(item.QUANTITY) - 1
}
});
}else{
item.QUANTITY = Number('<?=COUNT_ADD_BASKET?>');
}
},
goodsDelete: function (item, key) {//удаляем товар
let product_id = item.PRODUCT_ID;
id = Number(item.ID);
product_name = item.NAME;
product_quant = 1;
product_price = item.PRICE;
$.ajax({
type: 'POST',
url: '/basket/ajax.php',
data: {
'ACTION': 'DEL_PRODUCT',
'PRODUCT_ID': id,
'NAME': product_name,
},
success: () => { this.goods.splice(key, 1) },
})
},
summPrettify: function(num){//улучшение визуального вида суммы. добавляем пробелы между цифрами.
var n = num.toString();
return n.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g, "$1" + ' ');
},
rounded: function(number){
return +number.toFixed(2);
},
},
mounted: function () {
this.getGoods();
},
});
window.vm = vm;
</script>
<?}?>
Создадим файл getPersonalBasketGoods.php, в котором будет формироваться массив для корзины.
<?
define("NO_KEEP_STATISTIC", true);
define('BX_SESSION_ID_CHANGE', false);
define('NO_AGENT_CHECK', true);
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
use Bitrix\Main\Context,
Bitrix\Currency\CurrencyManager,
Bitrix\Sale\Order,
Bitrix\Sale\Basket,
Bitrix\Sale\Delivery,
Bitrix\Sale\PaySystem;
Bitrix\Main\Loader::includeModule("sale");
Bitrix\Main\Loader::includeModule("catalog");
Bitrix\Main\Loader::includeModule("sale");
//получаем корзину
$basket = \Bitrix\Sale\Basket::loadItemsForFUser(\Bitrix\Sale\Fuser::getId(CSaleBasket::GetBasketUserID()), \Bitrix\Main\Context::getCurrent()->getSite());
//скидка
$fuser = new \Bitrix\Sale\Discount\Context\Fuser($basket->getFUserId(true));
$discounts = \Bitrix\Sale\Discount::buildFromBasket($basket, $fuser);
$discounts->calculate();
$result = $discounts->getApplyResult(true);
$prices = $result['PRICES']['BASKET']; // цены товаров с учетом скидки
foreach ($basket as $basketItem) {
$ID = $basketItem->getField('ID');
$PRODUCT_ID = $basketItem->getField('PRODUCT_ID');
$NAME = $basketItem->getField('NAME');
$QUANTITY = $basketItem->getQuantity();
$PRODUCT_ID = $basketItem->getField('PRODUCT_ID');
$DETAIL_PAGE_URL = $basketItem->getField('DETAIL_PAGE_URL');
$BASE_PRICE = $basketItem->getField('BASE_PRICE');
$PRICE = $basketItem->getField('PRICE');
$DISCOUNT = $basketItem->getDiscountPrice();
$FINAL_PRICE = $basketItem->getFinalPrice();
$arResult["BASKET"][] = array(
"ID" => $ID,
"NAME" => $NAME,
"QUANTITY" => $QUANTITY,
"PRODUCT_ID" => $PRODUCT_ID,
"DETAIL_PAGE_URL" => $DETAIL_PAGE_URL,
"BASE_PRICE" => $BASE_PRICE,
"PRICE" =>$PRICE,
);
}
//засовываем скидку
$i = 0;
foreach ($prices as $price){
$arResult["BASKET"][$i]["DISCOUNT"]=$price["PRICE"];
$arResult["BASKET"][$i]["DISCOUNT_PRODUCT"]=round($price["PRICE"] *$arResult["BASKET"][$i]["QUANTITY"], 2);
$i++;
}
//убираем баг когда не отображаюся картинки: перешли в /order/ и затем в каталог и добавили товар
foreach ($arResult["BASKET"] as $key => $value) {
$PRODUCT_ID = $value["PRODUCT_ID"];
$intElementID = $value["PRODUCT_ID"]; // ID предложения
$mxResult = CCatalogSku::GetProductInfo(
$intElementID
);
if (is_array($mxResult))
{
$value["PRODUCT_ID"]= $mxResult['ID']; ///echo 'ID товара = '.$mxResult['ID'];
}
else
{
///ShowError('Это не торговое предложение');
}
//получение карьера, на всякий случай
if(CModule::IncludeModule('iblock'))
{
$arSelect = Array("ID", "IBLOCK_ID", "NAME","DETAIL_PAGE_URL","DETAIL_PICTURE","PREVIEW_PICTURE","PICTURE", "DATE_ACTIVE_FROM","PROPERTY_*");//IBLOCK_ID и ID обязательно должны быть указаны, см. описание arSelectFields выше
$arFilter = Array( "ACTIVE_DATE"=>"Y", "ACTIVE"=>"Y","ID"=>$value["PRODUCT_ID"]);
$res = CIBlockElement::GetList(Array(), $arFilter, false, false, $arSelect);
//можно использовать Fetch, когда нет множественных свойств
while($ob = $res->GetNextElement()){
$arFields = $ob->GetFields();
$arProps = $ob->GetProperties();
$arPhotoSmall = CFile::ResizeImageGet(
($arFields["DETAIL_PICTURE"])?$arFields["DETAIL_PICTURE"]:$arFields["PREVIEW_PICTURE"],
array(
'width'=>250,
'height'=>250
),
BX_RESIZE_IMAGE_PROPORTIONAL,
Array(
"name" => "sharpen",
"precision" => 0
)
);
$arResult["BASKET"][$key]["IMAGE"] = $arPhotoSmall['src'];
if(empty($arResult["BASKET"][$key]["DETAIL_PAGE_URL"])) $arResult["BASKET"][$key]["DETAIL_PAGE_URL"] = $arFields["DETAIL_PAGE_URL"];
$arResult["BASKET"][$key]['COUNTRY_PRODUCTION'] = $arProps["COUNTRY_PRODUCTION"]["VALUE"];
$arResult["BASKET"][$key]['PRODUCT_SEZON'] =implode(" ", $arProps["PRODUCT_SEZON"]["VALUE"]);
$arSKU = CCatalogSKU::getOffersList(
$value["PRODUCT_ID"],
0,
array('ACTIVE' => 'Y'),
array('ID', 'NAME', 'CODE'),
array()
);
$intval_id = intval($PRODUCT_ID);
if ($arSKU[$value["PRODUCT_ID"]]) {
$arResult["BASKET"][$key]['PRODUCT_K'] = $arSKU[$value["PRODUCT_ID"]][$intval_id]["NAME"];
}else $arResult["BASKET"][$key]['PRODUCT_K'] = "";
}
}
}
echo json_encode($arResult["BASKET"]);
Создадим обработчик ajax.php, в котором реализуем обновление товаров и удаление.
<?
define('STOP_STATISTICS', true);
require_once($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php');
$GLOBALS['APPLICATION']->RestartBuffer();
use COption;
use CCurrency;
use CCatalogProduct;
use CFile;
use CModule;
use CCatalogDiscount;
use CCatalogSKU;
use CPrice;
use CCurrencyLang;
use CCurrencyRates;
use CIBlockElement;
use CIBlockPriceTools;
use CSaleBasket;
\CModule::IncludeModule('iblock');
\CModule::IncludeModule('catalog');
\CModule::IncludeModule('sale');
$IBLOCK_ID = 40;//здесь лучше написать класс для получения по коде id инфоблока
$IBLOCK_OFF = 3;
if (\Bitrix\Main\Loader::includeModule("sale") && \Bitrix\Main\Loader::includeModule("catalog") && \Bitrix\Main\Loader::includeModule("iblock"))
{
$ajaxAction = trim( $_POST['ACTION'] );
$ajaxActionForm = trim( $_POST['ACTION_FORM'] );
if ( $_POST['ACTION'] == 'CART_UPDATE' )
{
if ( $_POST['PRODUCT'] ){
$filter = array();
$filter['IBLOCK_ID'] = $IBLOCK_ID;
$filter['ID'] = $_POST['PRODUCT'];
$getOffersList = CIBlockElement::GetList(
array(),
$filter,
false,
false,
array('ID','NAME','DETAIL_PAGE_URL','CATALOG_GROUP_1')
);
if( $getOffersElement = $getOffersList->GetNext() )
{
$postPrice = $getOffersElement['CATALOG_PRICE_1'];
$getOfferPrice = $getOffersElement['CATALOG_PRICE_1'];
$detailPage = $getOffersElement['DETAIL_PAGE_URL'];
$getOffersElement = $getOffersElement['ID'];
$thisName = $getOffersElement['NAME'];
}
}
$arFields = array(
"PRODUCT_ID" => $_POST['PRODUCT'],
"PRODUCT_PRICE_ID" => 1,
"PRICE" => $postPrice,
"CURRENCY" => "RUB",
"QUANTITY" => $_POST['QUANTITY'],
"LID" => 's1',
"DELAY" => "N",
"CAN_BUY" => "Y",
"NAME" => $_POST['NAME'],
"MODULE" => "catalog",
"PRODUCT_PROVIDER_CLASS"=>'CCatalogProductProvider',
"DETAIL_PAGE_URL" => $detailPage
);
CSaleBasket::Update($_POST['PRODUCT_CART_ID'], $arFields);
}
if ($_POST['ACTION'] == 'DEL_PRODUCT')
{
CSaleBasket::Delete($_POST['PRODUCT_ID']);
}
}
Стили будут отличаться, сама корзина представлена для примера. Поэтому и стили также не являются полным соответствием, и представлены только для части корзины. Так как остальная часть всегда будет отличаться.
/* ------------------------------------ */
/* ------------------------------------ */
/* ------------------------------------ */
/* -------=========CART==========------ */
/* ------------------------------------ */
/* ------------------------------------ */
/* ------------------------------------ */
.cart {
margin-top: 67px; }
.cart .wrapper {
display: grid;
grid-template-columns: 1095px 261px;
column-gap: 84px; }
.cart .wrapper .cart_header {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
margin-bottom: 65px; }
.cart .wrapper .cart_header .header_title {
font-size: 48px;
line-height: 46px;
font-family: "OpiumNewC" !important;
font-weight: 500 !important;
margin-bottom: 25px; }
.cart .wrapper .cart_header .header_subtitle {
font-size: 18px;
line-height: 175%;
color: #373737;
font-family: "OpiumNewC" !important;
font-weight: 400 !important; }
.cart .wrapper .cart_main {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3; }
.cart .wrapper .cart_main .cart_line {
display: grid;
grid-template-columns: 259px 134px 96px 255px 96px 132px 79px 38px;
grid-template-columns: 12.49vw 6.979vw 5vw 11.281vw 5vw 6.875vw 5.115vw 1.979vw;
padding: 34px 0;
align-items: center;
border-bottom: 1px solid #C4C4C4; }
.cart .wrapper .cart_main .cart_line .line_img {
display: none; }
.cart .wrapper .cart_main .cart_line .line_desc {
display: none; }
.cart .wrapper .cart_main .cart_line p {
font-size: 16px;
line-height: 15px;
font-family: "OpiumNewC" !important;
font-weight: 500 !important;
color: #000000;
word-wrap: break-word; }
.cart .wrapper .cart_main .cart_line .line_name {
padding-right: 0 15px; }
.cart .wrapper .cart_main .cart_line .line_country {
text-align: center;
padding: 0 15px; }
.cart .wrapper .cart_main .cart_line .line_season {
text-align: center;
padding: 0 10px; }
.cart .wrapper .cart_main .cart_line .line_size {
padding-left: 25px; }
.cart .wrapper .cart_main .cart_line .line_price {
padding: 0 10px; }
.cart .wrapper .cart_main .cart_line .line_counter {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px; }
.cart .wrapper .cart_main .cart_line .line_counter img {
cursor: pointer; }
.cart .wrapper .cart_main .cart_line .line_summary {
padding-left: 15px; }
.cart .wrapper .cart_main .cart_line .line_delete {
display: flex;
justify-content: flex-end;
align-items: center; }
.cart .wrapper .cart_main .cart_line:first-child {
padding: 0;
padding-bottom: 10px; }
.cart .wrapper .cart_main .cart_line:first-child p {
color: #61a036; }
.cart .wrapper .cart_main .cart_line:first-child .line_counter {
display: flex;
justify-content: center; }
.cart .wrapper .cart_main .cart_summ {
display: flex;
justify-content: flex-end;
padding-top: 20px;
padding-bottom: 48px;
font-size: 24px;
line-height: 23px;
font-family: "OpiumNewC" !important;
font-weight: 500 !important; }
.cart .wrapper .cart_main .cart_summ span {
font-size: 36px;
line-height: 34px; }
.cart .wrapper .cart_main .cart_buy {
display: block;
background: #61a036;
border-radius: 7px;
padding: 20px;
color: #FFFFFF;
border: 0;
font-family: "OpiumNewC" !important;
font-weight: 500 !important;
font-size: 18px;
line-height: 17px;
text-align: center;
margin-bottom: 167px; }
.cart .wrapper .cart_sidebar {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3; }
.cart .wrapper .cart_sidebar .sidebar_blk {
position: relative;
padding-left: 73px;
padding-top: 8px; }
.cart .wrapper .cart_sidebar .sidebar_blk .sidebar_blk_title {
font-size: 18px;
line-height: 153.69%;
font-family: "OpiumNewC" !important;
font-weight: 500 !important;
margin-bottom: 10px; }
.cart .wrapper .cart_sidebar .sidebar_blk .sidebar_blk_desc {
font-size: 14px;
line-height: 175%;
font-family: "OpiumNewC" !important;
font-weight: 400 !important;
color: #969696; }
.cart .wrapper .cart_sidebar .sidebar_blk .subtitle_img {
position: absolute;
left: 0;
top: 0;
width: 48px;
height: 48px; }
@media screen and (max-width: 1920px){
.cathalog_cathalog .wrapper .cathalog_main .cathalog_main_filter .cathalog_main_filter_groupbox:nth-of-type(4) .filter_selection {
min-width: 13.698vw;
}
.cathalog_cathalog .wrapper .cathalog_main .cathalog_products .product_blk .product_heart{
border-radius: 11px 11px 21px 19px;
}
.cart {
margin-top: 3.490vw; }
.cart .wrapper {
grid-template-columns: 57.031vw 13.594vw;
column-gap: 4.375vw; }
.cart .wrapper .cart_header {
margin-bottom: 3.385vw; }
.cart .wrapper .cart_header .header_title {
font-size: 2.500vw;
line-height: 2.396vw;
margin-bottom: 1.302vw; }
.cart .wrapper .cart_header .header_subtitle {
font-size: 0.938vw; }
.cart .wrapper .cart_main {
border-radius: 0.365vw;
padding: 1.042vw 0;
font-size: 0.938vw;
line-height: 0.885vw;
margin-bottom: 8.698vw; }
.cart .wrapper .cart_main .cart_line {
/*grid-template-columns: 13.490vw 6.979vw 5vw 13.281vw 5vw 6.875vw 4.115vw 1.979vw;*/
grid-template-columns: 12.49vw 6.979vw 5vw 11.281vw 5vw 6.875vw 5.115vw 1.979vw;
padding: 1.771vw 0; }
.cart .wrapper .cart_main .cart_line p {
font-size: 0.833vw;
line-height: 0.781vw; }
.cart .wrapper .cart_main .cart_line .line_name {
padding-right: 0 0.781vw; }
.cart .wrapper .cart_main .cart_line .line_country {
padding: 0 0.781vw; }
.cart .wrapper .cart_main .cart_line .line_season {
padding: 0 0.521vw; }
.cart .wrapper .cart_main .cart_line .line_size {
padding-left: 1.302vw; }
.cart .wrapper .cart_main .cart_line .line_price {
padding: 0 0.521vw; }
.cart .wrapper .cart_main .cart_line .line_counter {
padding: 0 0.521vw; }
.cart .wrapper .cart_main .cart_line .line_counter img {
width: 1.667vw;
height: 1.667vw; }
.cart .wrapper .cart_main .cart_line .line_summary {
padding-left: 0.781vw; }
.cart .wrapper .cart_main .cart_line .line_delete img {
width: 1.042vw;
height: 1.042vw; }
.cart .wrapper .cart_main .cart_line:first-child {
padding: 0;
padding-bottom: 0.521vw; }
.cart .wrapper .cart_main .cart_summ {
padding-top: 1.042vw;
padding-bottom: 2.500vw;
font-size: 1.250vw;
line-height: 1.198vw; }
.cart .wrapper .cart_main .cart_summ span {
font-size: 1.875vw;
line-height: 1.771vw; }
.cart .wrapper .cart_sidebar .sidebar_blk {
padding-left: 3.802vw;
padding-top: 0.417vw; }
.cart .wrapper .cart_sidebar .sidebar_blk .sidebar_blk_title {
font-size: 0.938vw;
margin-bottom: 0.521vw; }
.cart .wrapper .cart_sidebar .sidebar_blk .sidebar_blk_desc {
font-size: 0.729vw; }
.cart .wrapper .cart_sidebar .sidebar_blk .subtitle_img {
width: 2.500vw;
height: 2.500vw; }
}
.politic_margin{
margin-top: 20px;
margin-bottom: 20px;
}
.popular_blocks .product_heart{
position: absolute;
top: 19px;
right: 21px;
}
/*
.popular_blocks .favor.active{
border-radius: 29px 38px 73px 65px;
height: 19px;
width: 19px;
background: url(/img/favor_cart_active.png);
}*/
/*
.product_product .favor.active{
border-radius: 29px 38px 73px 65px;
height: 20px;
width: 26px;
background: url(/img/favor_detail_active.png);
}
*/
@media (min-width: 768px) and (max-width: 769px){
.header_mobile_burger{
margin-left: 30px;
}
}
@media (min-width: 1023px) and (max-width: 1024px) {
.header .desktop .desktop_header_wrapper .desktop_nav .desktop_nav_items a{
margin-right: 0.442vw !important;
}
}
@media screen and (max-width: 768px){
.cart .wrapper .cart_main .cart_line .line_desc {
display: block;
position: relative;
padding: 0 2.734vw 0 2.604vw;
}
.cart {
margin-top: 2.604vw; }
.cart .wrapper {
grid-template-columns: 1fr;
column-gap: 0;
padding: 0 0px; }
.cart .wrapper .cart_header {
margin-bottom: 2.604vw;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2; }
.cart .wrapper .cart_header .header_title {
font-size: 3.125vw;
line-height: 3.125vw;
margin-bottom: 2.604vw; }
.cart .wrapper .cart_header .header_subtitle {
font-size: 1.823vw; }
.cart .wrapper .cart_main {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4; }
.cart .wrapper .cart_main .cart_line {
grid-template-columns: 30.599vw 19.271vw 11.849vw 17.188vw 10.286vw 4.818vw;
padding: 1.771vw 0; }
.cart .wrapper .cart_main .cart_line p {
font-size: 2.083vw;
line-height: 2.083vw; }
.cart .wrapper .cart_main .cart_line .line_name {
padding-right: 0; }
.cart .wrapper .cart_main .cart_line .line_country {
display: none; }
.cart .wrapper .cart_main .cart_line .line_season {
display: none; }
.cart .wrapper .cart_main .cart_line .line_size {
display: none; }
.cart .wrapper .cart_main .cart_line .line_desc {
display: block;
position: relative;
padding: 0 2.734vw 0 2.604vw; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_btn {
padding: 0.651vw 2.214vw;
background: #61a036;
border-radius: 0.911vw;
color: #FFFFFF;
font-size: 1.563vw;
line-height: 153.69%;
text-align: center; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_btn a{
color: #fff;
}
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc {
position: absolute;
width: 63.542vw;
background: white;
z-index: 1;
padding: 2.083vw 2.083vw 0.911vw 1.693vw;
transform: translateX(-40%);
border: 1px solid #61a036;
align-items: center;
opacity: 0;
visibility: hidden;
transition: .3s; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc p {
font-size: 2.083vw;
line-height: 1.953vw;
font-family: "OpiumNewC" !important;
font-weight: 400 !important; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_line {
display: grid;
grid-template-columns: 11.589vw 11.849vw 1fr;
padding: 5.599vw 0;
border-bottom: 1px solid #C4C4C4; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_line:first-child {
padding: 0;
padding-bottom: 1.302vw; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_line:first-child p {
color: #61a036; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_line p:nth-child(1) {
padding-right: 0.651vw; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_line p:nth-child(2) {
padding: 0 0.651vw; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_close {
position: absolute;
top: 7px;
right: 10px; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc-active {
opacity: 1;
visibility: visible; }
.cart .wrapper .cart_main .cart_line .line_price {
padding: 0 0.521vw; }
.cart .wrapper .cart_main .cart_line .line_counter {
padding: 0 15px; }
.cart .wrapper .cart_main .cart_line .line_counter img {
width: 4.167vw;
height: 4.167vw; }
.cart .wrapper .cart_main .cart_line .line_summary {
padding-left: 0.781vw; }
.cart .wrapper .cart_main .cart_line .line_delete img {
width: 2.604vw;
height: 2.604vw; }
.cart .wrapper .cart_main .cart_line:first-child {
padding: 0;
padding-bottom: 0.521vw; }
.cart .wrapper .cart_main .cart_summ {
padding-top: 2.604vw;
padding-bottom: 5.859vw;
font-size: 3.125vw;
line-height: 2.995vw; }
.cart .wrapper .cart_main .cart_summ span {
font-size: 4.688vw;
line-height: 4.427vw; }
.cart .wrapper .cart_main .cart_buy {
border-radius: 0.911vw;
padding: 2.604vw;
font-size: 2.344vw;
line-height: 2.214vw;
margin-bottom: 9.505vw; }
.cart .wrapper .cart_sidebar {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
display: flex;
flex-direction: row; }
.cart .wrapper .cart_sidebar .sidebar_blk {
display: flex;
flex-direction: row-reverse;
align-items: center;
padding-top: 0;
margin-right: 7.161vw;
padding-left: 0;
margin-bottom: 1.953vw; }
.cart .wrapper .cart_sidebar .sidebar_blk .sidebar_blk_title {
font-size: 2.344vw;
margin-bottom: 0;
margin-left: 3.255vw; }
.cart .wrapper .cart_sidebar .sidebar_blk .sidebar_blk_desc {
display: none; }
.cart .wrapper .cart_sidebar .sidebar_blk .subtitle_img {
position: relative;
width: 6.250vw;
height: 6.250vw; }
.cart .wrapper .cart_sidebar .sidebar_blk:last-child {
margin-right: 0; }
}
@media screen and (max-width: 520px){
.cart {
margin-top: 5.604vw; }
.cart .wrapper {
grid-template-columns: 1fr;
column-gap: 0;
padding: 0 0px; }
.cart .wrapper .cart_header {
margin-bottom: 6.250vw; }
.cart .wrapper .cart_header .header_title {
font-size: 4.375vw;
line-height: 4.375vw;
margin-bottom: 2.604vw; }
.cart .wrapper .cart_header .header_subtitle {
font-size: 4.063vw; }
.cart .wrapper .cart_main {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
width: 93.750vw; }
.cart .wrapper .cart_main .cart_line {
grid-template-columns: 28.125vw 18.750vw 30.625vw 16.875vw;
padding: 0 0;
position: relative;
border: 0;
margin-bottom: 12.500vw; }
.cart .wrapper .cart_main .cart_line p, .cart .wrapper .cart_main .cart_line span {
/*font-size: 4.063vw;*/
font-size: 3.363vw;
line-height: 4.063vw; }
.cart .wrapper .cart_main .cart_line span {
color: #61a036;
display: block !important;
font-family: "OpiumNewC" !important;
font-weight: 500 !important; }
.cart .wrapper .cart_main .cart_line .line_img {
display: block;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 4; }
.cart .wrapper .cart_main .cart_line .line_img img {
width: 28.125vw;
height: 28.125vw; }
.cart .wrapper .cart_main .cart_line .line_desc {
padding: 0;
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_btn {
padding: 2.188vw 10.625vw;
border-radius: 2.188vw;
font-size: 3.125vw;
width: fit-content;
margin-left: 3.125vw;
margin-bottom: 1.563vw; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc {
width: 95.625vw;
padding: 3.750vw 2.188vw;
transform: translateX(-31.5%); }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc p {
font-size: 4.063vw;
line-height: 4.063vw; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_line {
grid-template-columns: 18.750vw 20vw 1fr;
padding: 9.375vw 0;
border-bottom: 1px solid #C4C4C4; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_line:first-child {
padding: 0;
padding-bottom: 1.302vw; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_line:first-child p {
color: #61a036; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_line p:nth-child(1) {
padding-right: 1.151vw; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_line p:nth-child(2) {
padding: 0 1.151vw; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_close {
position: absolute;
top: 2.188vw;
right: 3.125vw; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc .desc_close img {
width: 3.750vw;
height: 3.750vw; }
.cart .wrapper .cart_main .cart_line .line_desc .desc_desc-active {
opacity: 1;
visibility: visible; }
.cart .wrapper .cart_main .cart_line .line_name {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
padding: 0.938vw 10.938vw 0.938vw 0;
text-align: right;
margin-bottom: 3.125vw; }
.cart .wrapper .cart_main .cart_line .line_price {
padding: 0 0.521vw;
display: flex;
flex-direction: column-reverse;
align-items: center;
border-right: 1px solid #C4C4C4; }
.cart .wrapper .cart_main .cart_line .line_price span {
margin-bottom: 5.938vw; }
.cart .wrapper .cart_main .cart_line .line_counter {
padding: 0 1.563vw;
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center; }
.cart .wrapper .cart_main .cart_line .line_counter span {
grid-column-start: 1;
grid-column-end: 4;
text-align: center;
margin-bottom: 3.125vw; }
.cart .wrapper .cart_main .cart_line .line_counter img {
width: 7.813vw;
height: 7.813vw;
text-align: center; }
.cart .wrapper .cart_main .cart_line .line_summary {
padding-left: 0.781vw;
display: flex;
flex-direction: column;
align-items: center;
border-left: 1px solid #C4C4C4;
justify-content: center; }
.cart .wrapper .cart_main .cart_line .line_summary span {
margin-bottom: 5.938vw; }
.cart .wrapper .cart_main .cart_line .line_delete {
position: absolute;
right: 0;
top: 0; }
.cart .wrapper .cart_main .cart_line .line_delete img {
width: 4.688vw;
height: 4.688vw; }
.cart .wrapper .cart_main .cart_line:first-child {
display: none; }
.cart .wrapper .cart_main .cart_summ {
padding-top: 0;
padding-bottom: 7.813vw;
font-size: 4.063vw;
line-height: 4.063vw; }
.cart .wrapper .cart_main .cart_summ span {
font-size: 5.625vw;
line-height: 5.625vw; }
.cart .wrapper .cart_main .cart_buy {
border-radius: 0.911vw;
padding: 3.750vw;
font-size: 3.750vw;
line-height: 3.750vw;
margin-bottom: 14.063vw; }
.cart .wrapper .cart_sidebar {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
display: flex;
flex-direction: row;
flex-wrap: wrap; }
.cart .wrapper .cart_sidebar .sidebar_blk {
display: flex;
flex-direction: row-reverse;
align-items: center;
padding-top: 0;
margin-right: 7.813vw;
padding-left: 0;
margin-bottom: 7.500vw; }
.cart .wrapper .cart_sidebar .sidebar_blk .sidebar_blk_title {
font-size: 4.375vw;
margin-bottom: 0;
margin-left: 3.255vw; }
.cart .wrapper .cart_sidebar .sidebar_blk .sidebar_blk_desc {
display: none; }
.cart .wrapper .cart_sidebar .sidebar_blk .subtitle_img {
position: relative;
width: 9.375vw;
height: 9.375vw; }
.cart .wrapper .cart_sidebar .sidebar_blk:last-child {
margin-right: 0; }
.cart .wrapper .cart_sidebar .sidebar_blk:nth-child(2) {
margin-right: 0; }
/* MAKE ORDER*/
.make-an-order .wrapper {
padding-top: 7.813vw;
column-gap: 0;
grid-template-columns: 100%;
width: 87.500vw; }
.make-an-order .wrapper .make-an-order_title {
font-size: 7.500vw;
line-height: 8.750vw;
margin-bottom: 10.313vw;
text-align: center; }
.make-an-order .wrapper .make-an-order_status {
display: none; }
.make-an-order .wrapper .make-an-order_my-data {
margin-bottom: 11.250vw;
width: 100%; }
.make-an-order .wrapper .make-an-order_my-data .my-data_header {
margin-bottom: 4.167vw; }
.make-an-order .wrapper .make-an-order_my-data .my-data_header .my-data_title {
font-size: 5.625vw;
line-height: 6.563vw;
padding: 1.875vw 0 1.875vw 15vw;
background-size: 10vw; }
.make-an-order .wrapper .make-an-order_my-data .my-data_header .my-data_hint {
display: none; }
.make-an-order .wrapper .make-an-order_my-data .my-data_inputs {
width: 100%; }
.make-an-order .wrapper .make-an-order_my-data .my-data_inputs .my-data_groupbox .my-data_input-title {
font-size: 4.375vw;
line-height: 4.063vw;
margin-bottom: 4.688vw;
font-family: "OpiumNewC" !important;
font-weight: 500 !important; }
.make-an-order .wrapper .make-an-order_my-data .my-data_inputs .my-data_groupbox .my-data_input {
font-size: 4.375vw;
line-height: 4.063vw;
border-radius: 2.188vw;
padding: 3.438vw 6.250vw;
margin-bottom: 4.688vw; }
.make-an-order .wrapper .make-an-order_my-data .my-data_inputs .my-data_groupbox-splitted {
flex-direction: column; }
.make-an-order .wrapper .make-an-order_my-data .my-data_inputs .my-data_groupbox-splitted .my-data_groupbox {
width: 100%; }
.make-an-order .wrapper .make-an-order_my-data .my-data_inputs .my-data_checkbox label {
font-size: 4.375vw;
line-height: 4.063vw;
padding: 0 0 0 9.688vw;
background-size: 6.250vw;
display: block;
font-family: "OpiumNewC" !important;
font-weight: 500 !important; }
.make-an-order .wrapper .make-an-order_my-data .my-data_inputs .my-data_checkbox input:checked + label {
background-size: 6.875vw; }
.make-an-order .wrapper .make-an-order_delivey-method {
margin-bottom: 4.063vw;
grid-column-start: 1;
grid-column-end: 3; }
.make-an-order .wrapper .make-an-order_delivey-method .delivey-method_header {
font-size: 5.625vw;
line-height: 6.563vw;
padding: 1.875vw 0 1.875vw 15vw;
background-size: 10vw;
display: block;
margin: 0 auto;
margin-bottom: 12.813vw;
text-align: center;
width: fit-content; }
.make-an-order .wrapper .make-an-order_delivey-method .delivey-method_methods {
column-gap: 0;
grid-template-columns: 1fr; }
.make-an-order .wrapper .make-an-order_delivey-method .delivey-method_methods .delivey-method_method {
width: 100%;
position: relative; }
.make-an-order .wrapper .make-an-order_delivey-method .delivey-method_methods .delivey-method_method label {
font-size: 4.375vw;
line-height: 4.063vw;
padding: 0 0 0 9.688vw;
background-size: 6.250vw;
width: 51.563vw;
margin-bottom: 3.125vw;
min-height: 7.500vw; }
.make-an-order .wrapper .make-an-order_delivey-method .delivey-method_methods .delivey-method_method label span {
position: absolute;
right: 0;
padding: 1.563vw;
border-radius: 0.938vw;
margin-top: 0.239vw; }
.make-an-order .wrapper .make-an-order_delivey-method .delivey-method_methods .delivey-method_method input:checked + label {
background-size: 8.500vw;
margin-left: -1vw;
padding-left: 10.688vw; }
.make-an-order .wrapper .make-an-order_delivey-method .delivey-method_methods .delivey-method_method .method_desc {
padding-left: 9.688vw;
font-size: 3.750vw;
margin-bottom: 8.438vw; }
.make-an-order .wrapper .make-an-order_adress {
width: 100%;
grid-column-start: 1;
grid-column-end: 3; }
.make-an-order .wrapper .make-an-order_adress input, .make-an-order .wrapper .make-an-order_adress select {
font-size: 5.625vw;
line-height: 6.563vw;
border-radius: 2.188vw;
padding: 3.438vw 6.250vw; }
.make-an-order .wrapper .make-an-order_adress .adress_input_title {
font-size: 5.625vw;
line-height: 6.563vw;
margin-bottom: 4.688vw; }
.make-an-order .wrapper .make-an-order_adress .adress_line1 {
flex-direction: column; }
.make-an-order .wrapper .make-an-order_adress .adress_line1 .adress_groupbox {
margin-bottom: 4.688vw; }
.make-an-order .wrapper .make-an-order_adress .adress_line1 .adress_groupbox:nth-of-type(1) {
width: 100%; }
.make-an-order .wrapper .make-an-order_adress .adress_line1 .adress_groupbox:nth-of-type(2) {
width: 100%; }
.make-an-order .wrapper .make-an-order_adress .adress_line1 .adress_groupbox:nth-of-type(3) {
width: 100%; }
.make-an-order .wrapper .make-an-order_adress .adress_line1 .adress_groupbox:nth-of-type(3) select {
width: 41.250vw; }
.make-an-order .wrapper .make-an-order_adress .adress_line1 .adress_groupbox:nth-of-type(3) .groupbox_splitter {
padding: 1.563vw;
font-size: 5.625vw; }
.make-an-order .wrapper .make-an-order_adress .adress_line2 {
margin-bottom: 3.906vw;
display: flex;
flex-direction: column; }
.make-an-order .wrapper .make-an-order_adress .adress_line2 .adress_groupbox {
margin-bottom: 4.688vw; }
.make-an-order .wrapper .make-an-order_adress .adress_line2 .adress_groupbox input, .make-an-order .wrapper .make-an-order_adress .adress_line2 .adress_groupbox select {
width: 100%;
font-size: 5.625vw;
line-height: 6.563vw;
border-radius: 2.188vw;
padding: 3.438vw 6.250vw; }
.make-an-order .wrapper .make-an-order_adress .adress_line2 .adress_groupbox:nth-of-type(1) {
width: 100%; }
.make-an-order .wrapper .make-an-order_adress .adress_line2 .adress_groupbox:nth-of-type(2) {
width: 100%; }
.make-an-order .wrapper .make-an-order_payment-way {
grid-column-start: 1;
grid-column-end: 2;
display: flex;
flex-direction: column;
width: 100%; }
.make-an-order .wrapper .make-an-order_payment-way .payment-way_title {
font-size: 5.625vw;
line-height: 6.563vw;
padding: 1.875vw 0 1.875vw 15vw;
background-size: 10vw;
display: block;
margin: 0 auto;
margin-bottom: 12.813vw;
text-align: center;
width: fit-content; }
.make-an-order .wrapper .make-an-order_payment-way .payment-way_way {
width: 100%; }
.make-an-order .wrapper .make-an-order_payment-way .payment-way_way label {
font-size: 4.375vw;
line-height: 4.063vw;
padding: 1.250vw 0 1.250vw 9.688vw;
background-size: 6.250vw;
margin-bottom: 3.125vw; }
.make-an-order .wrapper .make-an-order_payment-way .payment-way_way input:checked + label {
background-size: 8.500vw;
margin-left: -1vw;
padding-left: 10.688vw; }
.make-an-order .wrapper .make-an-order_payment-way .payment-way_way .way_description {
padding-left: 9.688vw;
font-size: 3.750vw;
margin-bottom: 8.438vw;
line-height: 6.563vw; }
.make-an-order .wrapper .make-an-order_payment-way .payment-way_way .way_description:last-child {
margin-bottom: 12.500vw; }
.make-an-order .wrapper .make-an-order_payment-way .payment-way_pay-btn {
padding: 15px;
font-size: 18px;
border-radius: 7px;
width: 100%;
margin-bottom: 9.375vw; }
.make-an-order .wrapper .make-an-order_my-order {
width: 100%;
grid-column-start: 2;
grid-column-end: 1;
grid-row-start: 6;
grid-row-end: 6; }
.make-an-order .wrapper .make-an-order_my-order .my-order_header {
font-size: 5.625vw;
line-height: 6.563vw;
padding: 1.875vw 0 1.875vw 15vw;
background-size: 10vw;
display: block;
margin: 0 auto;
margin-bottom: 9.375vw;
text-align: center;
width: fit-content; }
.make-an-order .wrapper .make-an-order_my-order .my-order_main {
padding: 4.688vw;
border-radius: 2.188vw;
margin-bottom: 7.813vw; }
.make-an-order .wrapper .make-an-order_my-order .my-order_main .my-order_product p {
font-size: 4.375vw;
line-height: 4.063vw;
margin-bottom: 7.813vw; }
.make-an-order .wrapper .make-an-order_my-order .my-order_main .my-order_product .product_name {
width: 54.125vw; }
.make-an-order .wrapper .make-an-order_my-order .my-order_main .my-order_product .product_price {
margin-left: 0.694vw; }
.make-an-order .wrapper .make-an-order_my-order .my-order_main .my-order_delivery p {
font-size: 4.375vw;
font-size: 3.675vw;
line-height: 4.063vw;
margin-bottom: 7.813vw; }
.make-an-order .wrapper .make-an-order_my-order .my-order_main .my-order_delivery .delivery_name {
width: 54.125vw; }
.make-an-order .wrapper .make-an-order_my-order .my-order_main .my-order_delivery .delivery_price {
margin-left: 0.694vw;
font-size: 5.625vw;
line-height: 6.563vw; }
.make-an-order .wrapper .make-an-order_my-order .my-order_main .my-order_summ {
padding-top: 7.813vw; }
.make-an-order .wrapper .make-an-order_my-order .my-order_main .my-order_summ .summ_text {
font-size: 4.375vw;
line-height: 4.063vw; }
.make-an-order .wrapper .make-an-order_my-order .my-order_main .my-order_summ .summ_summ {
/*font-size: 7.500vw;*/
font-size: 4.500vw;
line-height: 8.750vw;
margin-left: 0.694vw; }
}
.auth-message.mes-text p{
text-align: left;
}
p.counter_minus, p.counter_plus,.sidebar_tell-friends a.social_share{
cursor: pointer;
}
.back_nono_product{
background: #C4C4C4 !important;
}
.pagination_blk a {
padding: 13px 20px;
border: 1px solid #61a036;
border-radius: 10px;
}
.lk .wrapper .lk_main-info .info_fieldname{
font-size: 18px;
}
.about_sertificats .wrapper .about_sertificats_slider .swiper-container .swiper-wrapper .swiper-slide .sertificats_sertificat img{
border: 1px solid #61a036;
border-radius: 12px;
}
@media (max-width: 470px) {
#myModal > div > div.modal-header > h2{
margin-left: -10px;
font-size: 16px;
}
#myModal > div > div.modal-header > span{
font-size: 20px;
}
}
.pagination_blk{
padding: 1px !important;
}
.navigation_left, .navigation_right{
align-items: center !important;
}
.pagination_blk-active{
margin-top: -1px !important;
height: 2.550vw; !important;
}
.product_button {
background: #61a036;
border-radius: 7px;
display: block;
padding: 16px;
text-align: center;
color: white;
font-size: 16px;
line-height: 15px;
font-family: "OpiumNewC" !important;
font-weight: 400 !important;
}
@media(min-width: 1024px){
.popular_class_width{
/*width: calc(20% );*/
min-width: 237px;
}
.catalog_quantity_width{
flex-wrap: inherit;
}
.catalog_quantity_width .card__calc{
margin-left: 5px;
}
.make-an-order.order_success-wrap.basket-empty{
min-height: 600px;
}
.lk .wrapper .lk_selection-blk{
position: relative;
padding-right: 30px;
width: 100%;
}
.lk .cathalog_main_filter_groupbox {
display: flex;
align-items: center;
position: absolute;
/* margin-left: 35.5%; */
right: 30px;
margin:0;
}
.lk .wrapper .lk_header{
padding-right: 30px;
}
}
@media (max-width: 450px){
.card__btn-buy.disabled{
/*margin-top:30px !important;*/
font-size: 16px;
}
.about_sertificats .wrapper .about_sertificats_slider .swiper-container {
margin: 0px 37px;
}
.about_sertificats .wrapper .about_sertificats_slider .swiper-container .swiper-wrapper .swiper-slide .sertificats_sertificat {
width: 195px;
margin-right: 40px;
}
.about_sertificats .wrapper .about_sertificats_slider .swiper-button-prev{
left: 10px;
}
.about_sertificats .wrapper .about_sertificats_slider .swiper-button-next {
right: 10px;
}
.about_webs .wrapper .webs_main{
display: none;
}
.popular__list{
margin-top: 15px;
}
.cathalog_cathalog .wrapper .wrapper{
padding-left: 0px;
padding-right: 30px;
}
.popular.recomends_class{
margin-top:30px;
}
.mobile_search_in_catalog{
display:block;
width: 100%;
}
.cathalog_main .swiper-container{
width: 100%;
}
}
@media(min-width: 451px){
.about_seti_desc{
display:none;
}
.mobile_search_in_catalog{
display:none;
}
}
select.typeselect{background: 0;
border: 2px solid #61A036;
border-radius: 7px;
padding: 10px;
-webkit-appearance: none;
font-size: 18px;
/* line-height: 17px; */
font-family: "OpiumNewC" !important;
font-weight: 400 !important;
color: #171717;
margin-top: 10px;
margin-right: 7px;
line-height: 1.1vw;}
.head-actives .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets{
display:none;
}
На этом корзина на Vue.js на Битрикс завершена. Код не является идеальным. Лучше конечно использовать сборщик, собирать стили и скрипты, и подключать стили и скрипты в нужном месте. Здесь код больше представлен для ознакомления, в учебных целях, когда можно по простому создать корзину.
Комментарии находятся на модерации или не добавлены.
Для добавления комментариев необходимо зарегистрироваться и авторизоваться
Также возможно авторизоваться через Социальную сеть Вконтакте (VK)