/ let xhr = new XMLHttpRequest();
// xhr.open("POST", "https://mydomain.ru/orders");
// xhr.setRequestHeader("Accept", "application/json");
// xhr.setRequestHeader("Content-Type", "multipart/form-data");
// xhr.onreadystatechange = function () {
// if (xhr.readyState === 4) {
// console.log(xhr.status);
// console.log(xhr.responseText);
// }};
// let data = `{
// "Id": 78912,
// "Customer": "Jason Sweet",
// "Quantity": 1,
// "Price": 18.00
// };`SET_CART:(state,product)=>{
if (state.cart.length){
let isProductExist = false;
state.cart.map(function(item){
if (item.id === product.id){
isProductExist = true;
item.quantity++
}
})
if(!isProductExist){
state.cart.push(product)
}
}
else {
state.cart.push(product); }
},ADD_TO_CART({commit},product){
commit('SET_CART',product);
},
selectSize(i) {
i = i || 0
let vm = this;
vm.$set(vm.selectedVariation, i || !vm.selectedVariation, i);
vm.product_data.price = vm.selectedVariation[i].price
vm.product_data.size = vm.selectedVariation[i].size
vm.product_data.sku = vm.selectedVariation[i].weight
vm.product_data.topping = vm.selectedVariation[i].topping
vm.$emit('select-size', this.selectedVariation, i);
},
<template>
<div class="ar-catalog-item">
<span class="ar-catalog-item__badge">
<img :src="('../assets/images/' + product_data.badge)" alt="">
{{ product_data.badge }}
</span>
<img class="ar-catalog-item__img"
:src="require('../assets/images/' + product_data.image)" alt="img">
<div v-for="(index, weight) in isActive"
:key="weight"> Вес {{ index.weight }}</div>
<p class="ar-catalog-item__sku">{{ product_data.sku }}</p>
<p class="ar-catalog-item__name">{{ product_data.name }}</p>
<p class="ar-catalog-item__except">{{ product_data.except }}</p>
<p v-if="product_data.type == 'pizza'"
class="ar-catalog-item_sku_variations">Выберите размер</p>
<!-- <ar-variation
:options="product_data.variations"
@select="mysortFunction()">
</ar-variation> -->
<div class="variations"
v-for="(variation, index) in product_data.variations"
:key="index">
<a class="ar-variable"
:class="{ active: isActive }"
@click="selectSize(variation)">
{{ variation.size }}
</a>
</div>
<div class="ar-catalog-item-bottom">
<p class="ar-catalog-item-bottom__price"> Цена: {{ product_data.price }}₽</p>
<button @click="addToCart"
class="ar-catalog-item-bottom__add_to_cart_btn btn">хочу</button>
<!-- <div class="ar-catalog-item-qty">
<span
v-if="product_data.quantity > 1"
class="ar-catalog-item-qty_btns">
<button class="item_quantity_btn"
@click="decrementInProductCard">-</button>
{{ product_data.quantity }}
<button class="item_quantity_btn"
@click="addToCart">+</button>
</span>
</div> -->
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex';
// import arVariation from './ar-variables.vue'
export default {
name: 'ar-catalog-item',
components: {
// arVariation
},
props: {
product_data: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
isActive: {},
}
},
created() { },
computed: { },
methods: {
// mysortFunction: function () {
// this.orderedObjects = this.sortKeyObject(this.product_data.variations);
// },
// sortKeyObject: function (o) {
// return Object.keys(o).sort().reduce((r, k) => (r[k] = o[k], r), {});
// },
selectSize(i) {
let vm = this;
vm.$set(vm.isActive, i || !vm.isActive, i);
vm.$emit('select-size', this.isActive);
console.log('size checked')
},
...mapActions([ ]),
//* Кнопки отвечающие за действие увелечения и убавления количества в корзине из карточки товара *//
addToCart() {
this.$emit('addToCart', this.product_data); //* Добавляем в корзину товар
},
decrementInProductCard() { //* Убавляем товар
let pd = this;
pd.$emit(
'decrementInProductCard',
pd.product_data.quantity--)
}
},
mounted() {
this.$set(this.product_data, 'quantity', 1)
}
}
</script>
<style lang="scss">
.ar-catalog-item {
padding: 15px;
position: relative;
flex-direction: column;
border-color: transparent #00000028 #f2f2f226 transparent;
border-style: solid;
border-width: 1px;
overflow: hidden;
&__img {
width: 100%;
transition: 1s;
}
&__img:hover {
transform: scale(1.2);
}
&__name {
color: rgb(255, 255, 255);
}
&__except {
font-size: 12px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: rgb(255, 255, 255);
text-align: left;
}
&__sku {
font-size: 14px;
text-align: left;
color: rgb(255, 255, 255);
border-radius: 50%;
}
&__badge {
position: absolute;
top: 0;
right: 5;
font-size: 14px;
color: whitesmoke;
background: rgb(131, 58, 180);
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%,
rgba(253, 29, 29, 1) 54%, rgba(252, 176, 69, 1) 100%);
border-radius: 25px;
overflow: hidden;
}
&_sku_variations {
font-size: 12px;
}
}
.ar-catalog-item-bottom {
position: bottom;
padding-top: 10px;
color: rgb(255, 255, 255);
flex-grow: 1;
height: 35px;
flex-direction: row;
justify-content: space-between;
display: inline-flex;
align-items: center;
&__price {
color: rgb(255, 255, 255);
}
&__add_to_cart_btn {
cursor: pointer;
margin-left: 20px;
font-size: 18px;
align-items: inherit;
width: 80px;
height: 25px;
transition: background-color .3s ease;
background-color: #ff6900;
border: 0px;
border-radius: 30px;
color: whitesmoke;
}
&__add_to_cart_btn:active {
background-color: #eeee;
}
.item_quantity_btn {
color: #fff;
background-color: #ff6900;
border-radius: 50%;
height: 30px;
width: 30px;
border-style: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
cursor: pointer;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.ar-catalog-item-qty {
position: absolute;
bottom: 15px;
right: 20px;
justify-content: center;
align-items: center;
}
.ar-catalog-item-qty_btns {
font-size: 16px;
padding-left: 5px;
padding-right: 5px;
display: flex;
max-height: 25px;
width: 80px;
border-radius: 25px;
justify-content: space-between;
position: bottom;
flex-grow: 1;
height: 35px;
flex-direction: row;
}
.ar-catalog-item:hover {
border: 11px solid $color;
}
}
.ar-variations-btn {
cursor: pointer;
color: whitesmoke;
background-color: black;
border: 1px solid $color;
backdrop-filter: blur;
}
.ar-variable.active {
cursor: pointer;
background: red;
}
.variations {
display: inline-flex;
flex-flow: row;
overflow-y: hidden;
white-space: nowrap;
}
.ar-variable {
display: inline;
text-align: center;
font-size: 14px;
cursor: pointer;
margin: $margin;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 7px;
padding-right: 7px;
border: 1px solid;
background-color: transparent;
border-color: $color;
border-radius: 50px;
justify-content: center;
align-items: center;
}
</style><template>
<section class="ar-variables">
<div class="variations">
<span class="ar-variable"
v-for="variation in options"
:key="variation.id"
@click="selectVariable(variation.size)
">
{{variation.size}}
</span>
</div>
</section>
</template>
<script>
export default {
name: "ar-variables",
props: {
options: {
type: Array,
default() {
return [
]
}
},
selected:{
type:String,
default:'',
}
},
methods: {
selectVariable(option) {
this.$emit('select' ,option);
},
}
}methods: {
mysortFunction: function () {
this.orderedObj = this.sortKeyObject(this.product_data.variations);
console.log('fckoff')
},
sortKeyObject: function (o) {
return Object.keys(o).sort().reduce((r, k) => (r[k] = o[k], r), {});
},<ar-variation
:selected="selected"
:options="product_data.variations"
@select="mysortFunction()">
</ar-variation>
<div v-for="(item,index) in orderedObj"
:key="index"> Вес {{ item.weight }}</div>