add to cart links for products in home

This commit is contained in:
Bachir Soussi Chiadmi 2021-06-09 13:06:52 +02:00
parent d9d2180f94
commit 352223500f
25 changed files with 561 additions and 249 deletions

View File

@ -29,6 +29,15 @@ content:
settings: settings:
link_to_entity: false link_to_entity: false
third_party_settings: { } third_party_settings: { }
variations:
type: entity_reference_entity_view
weight: 2
region: content
label: hidden
settings:
view_mode: add_to_cart
link: false
third_party_settings: { }
hidden: hidden:
created: true created: true
field_price_description: true field_price_description: true
@ -36,4 +45,3 @@ hidden:
search_api_excerpt: true search_api_excerpt: true
stores: true stores: true
uid: true uid: true
variations: true

View File

@ -13,6 +13,7 @@ dependencies:
- field.field.commerce_product_variation.materio_product_variation_type.subscription_type - field.field.commerce_product_variation.materio_product_variation_type.subscription_type
module: module:
- commerce_variation_cart_form - commerce_variation_cart_form
- text
third_party_settings: third_party_settings:
commerce_variation_cart_form: commerce_variation_cart_form:
combine: '1' combine: '1'
@ -22,13 +23,19 @@ bundle: materio_product_variation_type
mode: add_to_cart mode: add_to_cart
content: content:
commerce_variation_cart_form: commerce_variation_cart_form:
weight: 1
region: content
settings: { }
third_party_settings: { }
field_description:
type: text_default
weight: 0 weight: 0
region: content region: content
label: hidden
settings: { } settings: { }
third_party_settings: { } third_party_settings: { }
hidden: hidden:
billing_schedule: true billing_schedule: true
field_description: true
field_multiple: true field_multiple: true
langcode: true langcode: true
license_expiration: true license_expiration: true

View File

@ -57,7 +57,7 @@ third_party_settings:
speed: fast speed: fast
id: '' id: ''
classes: home-database classes: home-database
label: database label: 'base de données'
region: content region: content
group_showrooms: group_showrooms:
children: children:
@ -101,6 +101,7 @@ third_party_settings:
children: children:
- field_pricing_pitch - field_pricing_pitch
- field_pricing - field_pricing
- computed_products_reference
parent_name: '' parent_name: ''
weight: 4 weight: 4
format_type: html_element format_type: html_element
@ -114,7 +115,7 @@ third_party_settings:
id: '' id: ''
classes: home-pricing classes: home-pricing
element: section element: section
label: pricing label: tarifs
region: content region: content
group_db_col_left: group_db_col_left:
children: children:
@ -229,6 +230,15 @@ targetEntityType: node
bundle: frontpage bundle: frontpage
mode: home_light mode: home_light
content: content:
computed_products_reference:
type: entity_reference_entity_view
weight: 6
region: content
label: hidden
settings:
view_mode: home_summary
link: false
third_party_settings: { }
field_a_database: field_a_database:
weight: 6 weight: 6
label: above label: above
@ -350,7 +360,6 @@ content:
hidden: hidden:
computed_articles_reference: true computed_articles_reference: true
computed_materials_reference: true computed_materials_reference: true
computed_products_reference: true
computed_showrooms_reference: true computed_showrooms_reference: true
langcode: true langcode: true
links: true links: true

View File

@ -45,9 +45,11 @@ class ComputedMaterialsReferences extends EntityReferenceFieldItemList
->sort('created', 'DESC') ->sort('created', 'DESC')
->range(0,200); ->range(0,200);
$results = $query->execute(); $results = $query->execute();
$nids = array_rand($results, 70); if ($results) {
foreach ($nids as $key => $nid) { $nids = array_rand($results, 70);
$this->list[$key] = $this->createItem($key, $nid); foreach ($nids as $key => $nid) {
$this->list[$key] = $this->createItem($key, $nid);
}
} }
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,8 +1,83 @@
.overlay[data-v-b98ce164]{background-color:rgba(0,0,0,0.8);position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999}.modal[data-v-b98ce164]{background-color:#fff;position:absolute;box-sizing:border;max-width:80vw;max-height:70vh;top:0;right:0;bottom:0;left:0;margin:auto;padding:1em;border-radius:3px;box-shadow:2px 2px} .overlay[data-v-b98ce164] {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
}
.modal[data-v-b98ce164] {
background-color: #fff;
position: absolute;
box-sizing: border;
max-width: 80vw;
max-height: 70vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 1em;
border-radius: 3px;
box-shadow: 2px 2px;
}
.form-item[data-v-7bb795f8],.form-actions[data-v-7bb795f8]{display:inline-block;max-width:32%;margin:0}input[data-v-7bb795f8]{box-sizing:border-box;max-width:100%}div.description[data-v-7bb795f8]{display:none}.form-item-persistent-login[data-v-7bb795f8]{display:none} .form-item[data-v-7bb795f8],
.form-actions[data-v-7bb795f8] {
display: inline-block;
max-width: 32%;
margin: 0;
}
input[data-v-7bb795f8] {
box-sizing: border-box;
max-width: 100%;
}
div.description[data-v-7bb795f8] {
display: none;
}
.form-item-persistent-login[data-v-7bb795f8] {
display: none;
}
.form-type-email[data-v-2acc57a0],.form-type-password-confirm[data-v-2acc57a0]{max-width:30%;margin:0}.form-type-password input.weak[data-v-2acc57a0]{border-width:2px;border-color:red !important}.form-type-password input.weak[data-v-2acc57a0]:focus{outline:none}.form-type-password input.medium[data-v-2acc57a0]{border-width:2px;border-color:orange !important}.form-type-password input.medium[data-v-2acc57a0]:focus{outline:none}.form-type-password input.strong[data-v-2acc57a0]{border-width:2px;border-color:green !important}.form-type-password input.strong[data-v-2acc57a0]:focus{outline:none}input[data-v-2acc57a0]{box-sizing:content-box;max-width:100%}label[data-v-2acc57a0],div.description[data-v-2acc57a0]{display:none} .form-type-email[data-v-2acc57a0],
.form-type-password-confirm[data-v-2acc57a0] {
max-width: 30%;
margin: 0;
}
.form-type-password input.weak[data-v-2acc57a0] {
border-width: 2px;
border-color: red !important;
}
.form-type-password input.weak[data-v-2acc57a0]:focus {
outline: none;
}
.form-type-password input.medium[data-v-2acc57a0] {
border-width: 2px;
border-color: orange !important;
}
.form-type-password input.medium[data-v-2acc57a0]:focus {
outline: none;
}
.form-type-password input.strong[data-v-2acc57a0] {
border-width: 2px;
border-color: green !important;
}
.form-type-password input.strong[data-v-2acc57a0]:focus {
outline: none;
}
input[data-v-2acc57a0] {
box-sizing: content-box;
max-width: 100%;
}
label[data-v-2acc57a0],
div.description[data-v-2acc57a0] {
display: none;
}
fieldset[data-v-340aa566]{padding:0;margin:0;border:none} fieldset[data-v-340aa566] {
padding: 0;
margin: 0;
border: none;
}

File diff suppressed because one or more lines are too long

View File

@ -1239,37 +1239,22 @@ article.node--type-frontpage{
.field--name-computed-products-reference{ .field--name-computed-products-reference{
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
@include col-mediaquery-max(3){ @include col-mediaquery-max(5){
flex-flow: column; flex-flow: column;
justify-content: flex-start; justify-content: flex-start;
} }
>.field__item{ >.field__item{
flex:0 0 50%; flex:0 0 33%;
text-align: center; text-align: center;
padding: 2em 0; padding: 2em 0;
a.btn{ color: #fff;
@include btn;
background-color: #fff;
}
&:nth-child(1){
background-color: $color-base;
a.btn{
color: $color-base;
}
}
&:nth-child(2){
background-color: $color-webshowroom;
a.btn{
color: $color-webshowroom;
}
}
color: #fff;
position: relative; position: relative;
height:18em; height:23em;
>article{ >article{
position: absolute; position: absolute;
top:50%; left:50%; top:50%; left:50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width:80%;
} }
.field--name-title{ .field--name-title{
@extend %front-col-field__label; @extend %front-col-field__label;
@ -1286,8 +1271,77 @@ article.node--type-frontpage{
margin: 0; margin: 0;
} }
} }
.field--name-variations{
.field__item{
>div{
display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
.form-actions,p{
margin:0;
}
.field--name-field-description{
margin-right: 0.5em;
p{
font-size: 1.512em;
font-weight: 800;
color: #fff;
white-space: nowrap;
text-align: right;
}
}
input.button--add-to-cart{
@include btn;
}
}
}
}
a.btn{
@include btn;
background-color: #fff;
}
&:nth-child(1){
background-color: $color-base;
a.btn{
color: $color-base;
}
.field--name-variations{
.field__item{
>div{
input.button--add-to-cart{
color: $color-base;
}
}
}
}
}
&:nth-child(2){
background-color: $color-webshowroom;
a.btn{
color: $color-webshowroom;
}
.field--name-variations{
.field__item{
>div{
input.button--add-to-cart{
color: $color-webshowroom;
}
}
}
}
}
&:nth-child(3){
background-color: $color-showrooms;
a.btn{
color: $color-showrooms;
}
>article{
max-width: 345px;
}
}
@include col-mediaquery-max(3){ @include col-mediaquery-max(5){
flex: 0 0 auto; flex: 0 0 auto;
padding:0; padding:0;
// height: auto; // height: auto;
@ -2176,7 +2230,7 @@ article.card{
article.product, article.product,
.views-row{ .views-row{
flex:0 0 50%; flex:0 0 33%;
text-align: center; text-align: center;
padding: 2em 0; padding: 2em 0;
>header{ >header{
@ -2233,6 +2287,12 @@ article.card{
aside .variation button{ aside .variation button{
color: $color-webshowroom; color: $color-webshowroom;
} }
}
&:nth-child(3){
background-color: $color-showrooms;
aside .variation button{
color: $color-showrooms;
}
} }
} }
@include col-mediaquery-max(3){ @include col-mediaquery-max(3){
@ -2247,99 +2307,128 @@ article.card{
.modal{ .modal{
position: relative; position: relative;
} }
#pricing-modal-login-register{ // #pricing-modal-login-register{
position: relative; // position: relative;
width: 100%; // width: 100%;
text-align: left; // text-align: left;
h2{ //
margin: 0.4em 0 1.1em; // .vm--modale-loginregister{
padding-right: 4em; // }
font-size: 1.2em;
font-weight: 300;
}
#login-register{ #login-register{
width: 100%; padding: 1em;
display: flex; box-sizing: content-box;
flex-flow: row nowrap; width: 100%;
>section{ h2{
flex:0 0 250px; margin: 0.4em 0 1.1em;
form{ padding-right: 4em;
.form-item, .form-actions { font-size: 1.2em;
margin: 0.5em 0; font-weight: 300;
max-width: none; }
} >div.wrapper{
.form-type-email, display: flex;
.form-type-password, flex-flow: row nowrap;
.form-actions{
display:block;
}
input[type="email"],
input[type="password"]{
max-width: 11em;
}
&#user-login-form #edit-pass--description,
#edit-pass-pass1--description{
display: block;
max-width: 16em;
font-size: 0.693em;
}
span.login-message,
span.register-message{
color: red;
font-size: 0.693em;
line-height: 1.2;
display: block;
padding: 0.8em 0 0 0;
}
span.login-message[v-if="loginMessage"],
span.register-message[v-if="registerMessage"]{
display: none;
}
}
}
section.login{
form{
>div{
// display: block;
}
}
}
section.register{
}
}
@include col-mediaquery-max(3){
height:100%;
overflow-y: auto;
#login-register{
flex-flow: column;
>section{ >section{
flex:0 0 auto; flex:0 0 50%;
form{ form{
input[type="email"], .form-item, .form-actions {
margin: 0.5em 0;
max-width: none;
}
.form-type-email,
.form-type-password,
.form-actions{
display:block;
}
input[type="email"],
input[type="password"]{ input[type="password"]{
max-width: 90%; max-width: 11em;
width: 90%;
} }
&#user-login-form #edit-pass--description, &#user-login-form #edit-pass--description,
#edit-pass-pass1--description{ #edit-pass-pass1--description{
max-width: 90%; display: block;
width: 90%; max-width: 16em;
font-size: 0.693em;
} }
}
&.login{ span.login-message,
padding-bottom: 0.5em; span.register-message{
color: red;
font-size: 0.693em;
line-height: 1.2;
display: block;
padding: 0.8em 0 0 0;
}
span.login-message[v-if="loginMessage"],
span.register-message[v-if="registerMessage"]{
display: none;
}
}
}
section.login{
form{
>div{
// display: block;
}
}
}
section.register{
}
@include col-mediaquery-max(3){
flex-flow: column;
>section{
flex:0 0 auto;
form{
input[type="email"],
input[type="password"]{
max-width: 90%;
width: 90%;
}
&#user-login-form #edit-pass--description,
#edit-pass-pass1--description{
max-width: 90%;
width: 90%;
}
}
&.login{
padding-bottom: 0.5em;
}
} }
} }
} }
} }
@include col-mediaquery-max(4, landscape){ // @include col-mediaquery-max(3){
h2{ // height:100%;
margin: 0 0 0.5em; // overflow-y: auto;
} // #login-register{
} // flex-flow: column;
} // >section{
// flex:0 0 auto;
// form{
// input[type="email"],
// input[type="password"]{
// max-width: 90%;
// width: 90%;
// }
// &#user-login-form #edit-pass--description,
// #edit-pass-pass1--description{
// max-width: 90%;
// width: 90%;
// }
// }
// &.login{
// padding-bottom: 0.5em;
// }
// }
// }
// }
// @include col-mediaquery-max(4, landscape){
// h2{
// margin: 0 0 0.5em;
// }
// }
// }
#pricing{ #pricing{
@include col-mediaquery-max(3){ @include col-mediaquery-max(3){
.overlay > .modal{ .overlay > .modal{

View File

@ -182,6 +182,25 @@ function materiotheme_preprocess_page(&$vars){
// kint($vars['attributes']); // kint($vars['attributes']);
// } // }
/**
* Implements hook_form_alter
*/
function materiotheme_form_alter(&$form, FormStateInterface $form_state, $form_id) {
// commerce_order_item_variation_cart_form_form_commerce_product_variation_3
preg_match('/commerce_order_item_variation_cart_form_form_commerce_product_variation_(\d+)/', $form_id, $matches);
if ($matches && isset($matches[1]) && $variation_id = $matches[1]) {
// if (isset($form['#entity_type']) && $form['#entity_type'] == "commerce_order_item") {
// $product = $form_state->storage['product'];
// $storage = &$form_state->getStorage();
// $product = $storage['product'];
// $variations = $product->fields['variations'];
$form['actions']['submit']['#attributes'] += array(
"@click.prevent.stop" => "checkaddtocart(\$event, $variation_id)"
);
}
}
/** /**
* Implements hook_form_alter * Implements hook_form_alter
*/ */

View File

@ -0,0 +1,33 @@
{#
/**
* @file
*
* Default product template.
*
* Available variables:
* - attributes: HTML attributes for the wrapper.
* - product: The rendered product fields.
* Use 'product' to print them all, or print a subset such as
* 'product.title'. Use the following code to exclude the
* printing of a given field:
* @code
* {{ product|without('title') }}
* @endcode
* - product_entity: The product entity.
* - product_url: The product URL.
*
* @ingroup themeable
*/
#}
{#
<article{{ attributes }}>
{{- product -}}
</article>
#}
<article{{ attributes }}>
{{- product|without('variation_attributes') -}}
<a href="mailto:info@materio.com?subject=Multi-Joueurs" class="btn">
{% trans %}Demander un devis{% endtrans %}
</a>
</article>

View File

@ -19,9 +19,14 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
{#
<article{{ attributes }}> <article{{ attributes }}>
{{- product|without('variation_attributes') -}} {{- product|without('variation_attributes') -}}
<a href="/{{ language }}/pricing" @click.prevent="onClickLink" class="btn"> <a href="/{{ language }}/pricing" @click.prevent="onClickLink" class="btn">
{% trans %}View Option Details{% endtrans %} {% trans %}View Option Details{% endtrans %}
</a> </a>
</article> </article>
#}
<article{{ attributes }}>
{{- product -}}
</article>

View File

@ -21,7 +21,7 @@
#} #}
<div{{ attributes }}> <div{{ attributes }}>
{{- product_variation -}} {{- product_variation -}}
<a href="/pricing" @click.prevent="onClickLink" class="btn"> <!-- <a href="/pricing" @click.prevent="onClickLink" class="btn">
{% trans %}View Option Details{% endtrans %} {% trans %}View Option Details{% endtrans %}
</a> </a> -->
</div> </div>

View File

@ -25,7 +25,7 @@
</aside> </aside>
<Modal <!-- <Modal
v-if="showLoginModal" v-if="showLoginModal"
@close="closeModal" @close="closeModal"
:styles="{width:'500px', height:'350px'}" :styles="{width:'500px', height:'350px'}"
@ -38,132 +38,44 @@
@onRegistered="onRegistered" @onRegistered="onRegistered"
/> />
</section> </section>
</Modal> </Modal> -->
</article> </article>
</template> </template>
<script> <script>
import { REST } from 'vuejs/api/rest-axios' // import { REST } from 'vuejs/api/rest-axios'
import router from 'vuejs/route' import router from 'vuejs/route'
import { mapState, mapActions } from 'vuex' // import { mapState, mapActions } from 'vuex'
import Modal from 'vuejs/components/Helper/Modal' import productsMixins from 'vuejs/components/productsMixins'
import LoginRegister from 'vuejs/components/Helper/LoginRegister' // import Modal from 'vuejs/components/Helper/Modal'
// import LoginRegister from 'vuejs/components/Helper/LoginRegister'
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix; // let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
export default { export default {
name: "Product", name: "Product",
router, router,
props: ['product'], props: ['product'],
mixins: [productsMixins],
data(){ data(){
return { return {
quantity: 1, quantity: 1,
showLoginModal:false // showLoginModal:false
} }
},
computed: {
...mapState({
isloggedin: state => state.User.isloggedin,
isAdherent: state => state.User.isAdherent,
csrftoken: state => state.User.csrftoken
})
},
methods:{
// ...mapActions({
// userLogin: 'User/userLogin'
// }),
closeModal () {
this.showLoginModal = false;
},
checkaddtocart(e, variation_id) {
console.log('checkaddtocart')
if (!this.isloggedin) {
// show popup for login or register
// login or register event will be catched by onLogedin or onRegistered
this.showLoginModal = variation_id
} else {
// if already logedin directly goes to cart operations
this.addtocart(variation_id)
}
},
// event bubbled from modal login form
onLogedIn (variation_id) {
console.log('Product: onLogedIn. variation_id', variation_id)
this.addtocart(variation_id)
},
// event bubbled from modal register form
onRegistered (variation_id) {
console.log('Product: onRegistered. variation_id', variation_id)
this.addtocart(variation_id)
},
getCarts () {
// this is bugging on stage
return REST.get(`/cart?_format=json`, {}, {'X-CSRF-Token':this.csrftoken})
// .then(({ data }) => {
// console.log('current user carts: data', data)
// })
.catch((error) => {
console.warn('Issue with get cart', error)
Promise.reject(error)
})
},
deleteCart (order_id) {
console.log('deleting cart ', order_id)
return REST.delete(`/cart/${order_id}/items?_format=json`)
.then(({ data }) => {
console.log(`product cart ${order_id} deleted: data`, data)
})
.catch((error) => {
console.warn(`Issue with cart ${order_id} deleting`, error)
Promise.reject(error)
})
},
clearCarts (data) {
let promises = [];
// clear each cart as a promise
for (let i = 0; i < data.length; i++) {
promises.push(this.deleteCart(data[i].order_id))
}
// return all the promises as one
return Promise.all(promises)
},
addtocart (variation_id) {
console.log('addtocart')
this.getCarts()
.then(({data}) => {
console.log('current user carts: data', data)
this.clearCarts(data)
.then(() => {
console.log('all carts cleared')
// fill the cart with new product
REST.post(`/cart/add?_format=json`, [{
"purchased_entity_type": "commerce_product_variation",
"purchased_entity_id": variation_id,
"quantity": this.quantity
}])
.then(({ data }) => {
console.log('product added to cart: data', data)
this.closeModal()
// redirect to /cart
// window.location.href = "/cart"
// TODO: redirect to checkout instead of cart
window.location.href = `/checkout/${data[0].order_id}/order_information`
})
.catch((error) => {
console.warn('Issue with product add to cart', error)
Promise.reject(error)
})
})
})
}
},
components: {
Modal,
LoginRegister
} }
// ,
// methods:{
// // ...mapActions({
// // userLogin: 'User/userLogin'
// // })
// }
// ,
// components: {
// Modal,
// LoginRegister
// }
} }
</script> </script>

View File

@ -25,7 +25,7 @@ export default {
// vuejs attributes a inserted by form alter in same module // vuejs attributes a inserted by form alter in same module
MA.get(`/materio_user/login_form`) MA.get(`/materio_user/login_form`)
.then(({data}) => { .then(({data}) => {
console.log('getLoginForm data', data) // console.log('getLoginForm data', data)
this.form = Vue.compile(data.rendered) this.form = Vue.compile(data.rendered)
this.$options.staticRenderFns = []; this.$options.staticRenderFns = [];
this._staticTrees = []; this._staticTrees = [];

View File

@ -38,7 +38,7 @@ export default {
// vuejs attributes a inserted by form alter in same module // vuejs attributes a inserted by form alter in same module
MA.get(`/materio_user/register_form`) MA.get(`/materio_user/register_form`)
.then(({data}) => { .then(({data}) => {
console.log("getRegisterForm data", data) // console.log("getRegisterForm data", data)
this.form = Vue.compile(data.rendered) this.form = Vue.compile(data.rendered)
this.$options.staticRenderFns = []; this.$options.staticRenderFns = [];
this._staticTrees = []; this._staticTrees = [];

View File

@ -1,13 +1,16 @@
<template> <template>
<div id="login-register"> <div id="login-register">
<section class="login"> <h2>{{ $t("materio.Please login or create a new account") }}</h2>
<h3>{{ $t("default.Login") }} </h3> <div class="wrapper">
<LoginForm @onLogedIn="onLogedIn" /> <section class="login">
</section> <h3>{{ $t("default.Login") }} </h3>
<section class="register"> <LoginForm @onLogedIn="onLogedIn" />
<h3>{{ $t("default.Register a new account") }}</h3> </section>
<RegisterForm @onRegistered="onRegistered" /> <section class="register">
</section> <h3>{{ $t("default.Register a new account") }}</h3>
<RegisterForm @onRegistered="onRegistered" />
</section>
</div>
</div> </div>
</template> </template>
@ -24,17 +27,19 @@ export default {
password:null, password:null,
registerEmail:null registerEmail:null
}), }),
props:['callbackargs'], props:['callbackargs', 'onLogedInBack', 'onRegisteredBack'],
methods: { methods: {
...mapActions({ ...mapActions({
userLogin: 'User/userLogin', userLogin: 'User/userLogin',
userRegister: 'User/userRegister' userRegister: 'User/userRegister'
}), }),
onLogedIn () { onLogedIn () {
this.$emit('onLogedIn', this.callbackargs) // this.$emit('onLogedIn', this.callbackargs)
this.onLogedInBack(this.callbackargs)
}, },
onRegistered () { onRegistered () {
this.$emit('onRegistered', this.callbackargs) // this.$emit('onRegistered', this.callbackargs)
this.onRegisteredBack(this.callbackargs)
} }
}, },
components: { components: {

View File

@ -80,7 +80,7 @@
></div> ></div>
</div> </div>
<aside class="linked-materials"> <aside class="linked-materials">
<h3 class="field__label">{{$t("materio.Linked Materials")}}</h3> <h3 class="field__label">{{ $t('materio.Linked Materials') }}</h3>
<div class="cards-list"> <div class="cards-list">
<ul class=""> <ul class="">
<li v-for="node in article.linked_materials" v-bind:key="node.id"> <li v-for="node in article.linked_materials" v-bind:key="node.id">

View File

@ -1,9 +1,11 @@
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import productsMixins from 'vuejs/components/productsMixins'
export default { export default {
props: ['html', 'full'], // get the html from parent with props props: ['html', 'full'], // get the html from parent with props
mixins: [productsMixins],
data() { data() {
return { return {
template: null, // compiled template from html used in render template: null, // compiled template from html used in render
@ -151,7 +153,7 @@ export default {
}, },
watch: { watch: {
html: function(val) { html: function(val) {
console.log('html prop changed', val) // console.log('html prop changed', val)
this.compileTemplate() this.compileTemplate()
} }
} }

View File

@ -0,0 +1,138 @@
// https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
import { REST } from 'vuejs/api/rest-axios'
import Modal from 'vuejs/components/Helper/Modal'
import LoginRegister from 'vuejs/components/Helper/LoginRegister'
import { mapState } from 'vuex'
export default {
components: {
Modal,
LoginRegister
},
computed: {
...mapState({
isloggedin: state => state.User.isloggedin,
isAdherent: state => state.User.isAdherent,
csrftoken: state => state.User.csrftoken
})
},
methods: {
closeModal () {
this.showLoginModal = false
},
checkaddtocart (e, variation_id) {
console.log('checkaddtocart', e, variation_id, this.isloggedin)
if (!this.isloggedin) {
// show popup for login or register
// login or register event will be catched by onLogedin or onRegistered
// this.showLoginModal = variation_id
this.showLoginModal(variation_id)
} else {
// if already logedin directly goes to cart operations
this.addtocart(variation_id)
}
},
showLoginModal (variation_id) {
this.$modal.show(
LoginRegister,
// props
{
// item: this.item,
callbackargs: { variation_id: variation_id },
// close: (variation_id) => { this.closeModal(variation_id) },
onLogedInBack: (cba) => { this.onLogedIn(cba.variation_id) },
onRegisteredBack: (cba) => { this.onRegistered(cba.variation_id) }
// // not really an event
// // more a callback function passed as prop to the component
// addNoteId: (id) => {
// // no needs to refresh the entire item via searchresults
// // plus if we are in article, there is not searchresults
// // this.refreshItem({id: this.item.id})
// // instead create the note id directly
// this.item.note = { id: id }
// }
},
// settings
{
// name: `modal-${this.item.id}`,
draggable: false,
classes: 'vm--modale-loginregister',
width: '500px',
height: '350px'
}
)
},
// event bubbled from modal login form
onLogedIn (variation_id) {
console.log('Product: onLogedIn. variation_id', variation_id)
this.addtocart(variation_id)
},
// event bubbled from modal register form
onRegistered (variation_id) {
console.log('Product: onRegistered. variation_id', variation_id)
this.addtocart(variation_id)
},
getCarts () {
// this is bugging on stage
return REST.get('/cart?_format=json', {}, { 'X-CSRF-Token': this.csrftoken })
// .then(({ data }) => {
// console.log('current user carts: data', data)
// })
.catch((error) => {
console.warn('Issue with get cart', error)
Promise.reject(error)
})
},
deleteCart (order_id) {
console.log('deleting cart ', order_id)
return REST.delete(`/cart/${order_id}/items?_format=json`)
.then(({ data }) => {
console.log(`product cart ${order_id} deleted: data`, data)
})
.catch((error) => {
console.warn(`Issue with cart ${order_id} deleting`, error)
Promise.reject(error)
})
},
clearCarts (data) {
const promises = []
// clear each cart as a promise
for (let i = 0; i < data.length; i++) {
promises.push(this.deleteCart(data[i].order_id))
}
// return all the promises as one
return Promise.all(promises)
},
addtocart (variation_id) {
console.log('addtocart')
this.getCarts()
.then(({ data }) => {
console.log('current user carts: data', data)
this.clearCarts(data)
.then(() => {
console.log('all carts cleared')
// fill the cart with new product
REST.post('/cart/add?_format=json', [{
purchased_entity_type: 'commerce_product_variation',
purchased_entity_id: variation_id,
quantity: this.quantity
}])
.then(({ data }) => {
console.log('product added to cart: data', data)
this.closeModal()
// redirect to /cart
// window.location.href = "/cart"
// TODO: redirect to checkout instead of cart
window.location.href = `/checkout/${data[0].order_id}/order_information`
})
.catch((error) => {
console.warn('Issue with product add to cart', error)
Promise.reject(error)
})
})
})
}
}
}