add to cart links for products in home
This commit is contained in:
+9
-1
@@ -29,6 +29,15 @@ content:
|
||||
settings:
|
||||
link_to_entity: false
|
||||
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:
|
||||
created: true
|
||||
field_price_description: true
|
||||
@@ -36,4 +45,3 @@ hidden:
|
||||
search_api_excerpt: true
|
||||
stores: true
|
||||
uid: true
|
||||
variations: true
|
||||
|
||||
+8
-1
@@ -13,6 +13,7 @@ dependencies:
|
||||
- field.field.commerce_product_variation.materio_product_variation_type.subscription_type
|
||||
module:
|
||||
- commerce_variation_cart_form
|
||||
- text
|
||||
third_party_settings:
|
||||
commerce_variation_cart_form:
|
||||
combine: '1'
|
||||
@@ -22,13 +23,19 @@ bundle: materio_product_variation_type
|
||||
mode: add_to_cart
|
||||
content:
|
||||
commerce_variation_cart_form:
|
||||
weight: 1
|
||||
region: content
|
||||
settings: { }
|
||||
third_party_settings: { }
|
||||
field_description:
|
||||
type: text_default
|
||||
weight: 0
|
||||
region: content
|
||||
label: hidden
|
||||
settings: { }
|
||||
third_party_settings: { }
|
||||
hidden:
|
||||
billing_schedule: true
|
||||
field_description: true
|
||||
field_multiple: true
|
||||
langcode: true
|
||||
license_expiration: true
|
||||
|
||||
@@ -57,7 +57,7 @@ third_party_settings:
|
||||
speed: fast
|
||||
id: ''
|
||||
classes: home-database
|
||||
label: database
|
||||
label: 'base de données'
|
||||
region: content
|
||||
group_showrooms:
|
||||
children:
|
||||
@@ -101,6 +101,7 @@ third_party_settings:
|
||||
children:
|
||||
- field_pricing_pitch
|
||||
- field_pricing
|
||||
- computed_products_reference
|
||||
parent_name: ''
|
||||
weight: 4
|
||||
format_type: html_element
|
||||
@@ -114,7 +115,7 @@ third_party_settings:
|
||||
id: ''
|
||||
classes: home-pricing
|
||||
element: section
|
||||
label: pricing
|
||||
label: tarifs
|
||||
region: content
|
||||
group_db_col_left:
|
||||
children:
|
||||
@@ -229,6 +230,15 @@ targetEntityType: node
|
||||
bundle: frontpage
|
||||
mode: home_light
|
||||
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:
|
||||
weight: 6
|
||||
label: above
|
||||
@@ -350,7 +360,6 @@ content:
|
||||
hidden:
|
||||
computed_articles_reference: true
|
||||
computed_materials_reference: true
|
||||
computed_products_reference: true
|
||||
computed_showrooms_reference: true
|
||||
langcode: true
|
||||
links: true
|
||||
|
||||
+5
-3
@@ -45,9 +45,11 @@ class ComputedMaterialsReferences extends EntityReferenceFieldItemList
|
||||
->sort('created', 'DESC')
|
||||
->range(0,200);
|
||||
$results = $query->execute();
|
||||
$nids = array_rand($results, 70);
|
||||
foreach ($nids as $key => $nid) {
|
||||
$this->list[$key] = $this->createItem($key, $nid);
|
||||
if ($results) {
|
||||
$nids = array_rand($results, 70);
|
||||
foreach ($nids as $key => $nid) {
|
||||
$this->list[$key] = $this->createItem($key, $nid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+9
-1
File diff suppressed because one or more lines are too long
Binary file not shown.
+3
-3
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
+2
-2
File diff suppressed because one or more lines are too long
@@ -1239,37 +1239,22 @@ article.node--type-frontpage{
|
||||
.field--name-computed-products-reference{
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
@include col-mediaquery-max(3){
|
||||
@include col-mediaquery-max(5){
|
||||
flex-flow: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
>.field__item{
|
||||
flex:0 0 50%;
|
||||
flex:0 0 33%;
|
||||
text-align: center;
|
||||
padding: 2em 0;
|
||||
a.btn{
|
||||
@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;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
height:18em;
|
||||
height:23em;
|
||||
>article{
|
||||
position: absolute;
|
||||
top:50%; left:50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width:80%;
|
||||
}
|
||||
.field--name-title{
|
||||
@extend %front-col-field__label;
|
||||
@@ -1286,8 +1271,77 @@ article.node--type-frontpage{
|
||||
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;
|
||||
padding:0;
|
||||
// height: auto;
|
||||
@@ -2176,7 +2230,7 @@ article.card{
|
||||
|
||||
article.product,
|
||||
.views-row{
|
||||
flex:0 0 50%;
|
||||
flex:0 0 33%;
|
||||
text-align: center;
|
||||
padding: 2em 0;
|
||||
>header{
|
||||
@@ -2233,6 +2287,12 @@ article.card{
|
||||
aside .variation button{
|
||||
color: $color-webshowroom;
|
||||
}
|
||||
}
|
||||
&:nth-child(3){
|
||||
background-color: $color-showrooms;
|
||||
aside .variation button{
|
||||
color: $color-showrooms;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include col-mediaquery-max(3){
|
||||
@@ -2247,99 +2307,128 @@ article.card{
|
||||
.modal{
|
||||
position: relative;
|
||||
}
|
||||
#pricing-modal-login-register{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
h2{
|
||||
margin: 0.4em 0 1.1em;
|
||||
padding-right: 4em;
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
}
|
||||
// #pricing-modal-login-register{
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
// text-align: left;
|
||||
//
|
||||
// .vm--modale-loginregister{
|
||||
// }
|
||||
#login-register{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
>section{
|
||||
flex:0 0 250px;
|
||||
form{
|
||||
.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"]{
|
||||
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;
|
||||
padding: 1em;
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
h2{
|
||||
margin: 0.4em 0 1.1em;
|
||||
padding-right: 4em;
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
}
|
||||
>div.wrapper{
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
>section{
|
||||
flex:0 0 auto;
|
||||
form{
|
||||
input[type="email"],
|
||||
flex:0 0 50%;
|
||||
form{
|
||||
.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"]{
|
||||
max-width: 90%;
|
||||
width: 90%;
|
||||
max-width: 11em;
|
||||
}
|
||||
&#user-login-form #edit-pass--description,
|
||||
#edit-pass-pass1--description{
|
||||
max-width: 90%;
|
||||
width: 90%;
|
||||
display: block;
|
||||
max-width: 16em;
|
||||
font-size: 0.693em;
|
||||
}
|
||||
}
|
||||
&.login{
|
||||
padding-bottom: 0.5em;
|
||||
|
||||
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){
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include col-mediaquery-max(3){
|
||||
// height:100%;
|
||||
// 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{
|
||||
@include col-mediaquery-max(3){
|
||||
.overlay > .modal{
|
||||
|
||||
@@ -182,6 +182,25 @@ function materiotheme_preprocess_page(&$vars){
|
||||
// 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
|
||||
*/
|
||||
|
||||
+33
@@ -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>
|
||||
+5
@@ -19,9 +19,14 @@
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
{#
|
||||
<article{{ attributes }}>
|
||||
{{- product|without('variation_attributes') -}}
|
||||
<a href="/{{ language }}/pricing" @click.prevent="onClickLink" class="btn">
|
||||
{% trans %}View Option Details{% endtrans %}
|
||||
</a>
|
||||
</article>
|
||||
#}
|
||||
<article{{ attributes }}>
|
||||
{{- product -}}
|
||||
</article>
|
||||
|
||||
+2
-2
@@ -21,7 +21,7 @@
|
||||
#}
|
||||
<div{{ attributes }}>
|
||||
{{- product_variation -}}
|
||||
<a href="/pricing" @click.prevent="onClickLink" class="btn">
|
||||
<!-- <a href="/pricing" @click.prevent="onClickLink" class="btn">
|
||||
{% trans %}View Option Details{% endtrans %}
|
||||
</a>
|
||||
</a> -->
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
</aside>
|
||||
|
||||
<Modal
|
||||
<!-- <Modal
|
||||
v-if="showLoginModal"
|
||||
@close="closeModal"
|
||||
:styles="{width:'500px', height:'350px'}"
|
||||
@@ -38,132 +38,44 @@
|
||||
@onRegistered="onRegistered"
|
||||
/>
|
||||
</section>
|
||||
</Modal>
|
||||
</Modal> -->
|
||||
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { REST } from 'vuejs/api/rest-axios'
|
||||
// import { REST } from 'vuejs/api/rest-axios'
|
||||
import router from 'vuejs/route'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
import Modal from 'vuejs/components/Helper/Modal'
|
||||
import LoginRegister from 'vuejs/components/Helper/LoginRegister'
|
||||
// import { mapState, mapActions } from 'vuex'
|
||||
import productsMixins from 'vuejs/components/productsMixins'
|
||||
// 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 {
|
||||
name: "Product",
|
||||
router,
|
||||
props: ['product'],
|
||||
mixins: [productsMixins],
|
||||
data(){
|
||||
return {
|
||||
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>
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ export default {
|
||||
// vuejs attributes a inserted by form alter in same module
|
||||
MA.get(`/materio_user/login_form`)
|
||||
.then(({data}) => {
|
||||
console.log('getLoginForm data', data)
|
||||
// console.log('getLoginForm data', data)
|
||||
this.form = Vue.compile(data.rendered)
|
||||
this.$options.staticRenderFns = [];
|
||||
this._staticTrees = [];
|
||||
|
||||
@@ -38,7 +38,7 @@ export default {
|
||||
// vuejs attributes a inserted by form alter in same module
|
||||
MA.get(`/materio_user/register_form`)
|
||||
.then(({data}) => {
|
||||
console.log("getRegisterForm data", data)
|
||||
// console.log("getRegisterForm data", data)
|
||||
this.form = Vue.compile(data.rendered)
|
||||
this.$options.staticRenderFns = [];
|
||||
this._staticTrees = [];
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<template>
|
||||
<div id="login-register">
|
||||
<section class="login">
|
||||
<h3>{{ $t("default.Login") }} </h3>
|
||||
<LoginForm @onLogedIn="onLogedIn" />
|
||||
</section>
|
||||
<section class="register">
|
||||
<h3>{{ $t("default.Register a new account") }}</h3>
|
||||
<RegisterForm @onRegistered="onRegistered" />
|
||||
</section>
|
||||
<h2>{{ $t("materio.Please login or create a new account") }}</h2>
|
||||
<div class="wrapper">
|
||||
<section class="login">
|
||||
<h3>{{ $t("default.Login") }} </h3>
|
||||
<LoginForm @onLogedIn="onLogedIn" />
|
||||
</section>
|
||||
<section class="register">
|
||||
<h3>{{ $t("default.Register a new account") }}</h3>
|
||||
<RegisterForm @onRegistered="onRegistered" />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -24,17 +27,19 @@ export default {
|
||||
password:null,
|
||||
registerEmail:null
|
||||
}),
|
||||
props:['callbackargs'],
|
||||
props:['callbackargs', 'onLogedInBack', 'onRegisteredBack'],
|
||||
methods: {
|
||||
...mapActions({
|
||||
userLogin: 'User/userLogin',
|
||||
userRegister: 'User/userRegister'
|
||||
}),
|
||||
onLogedIn () {
|
||||
this.$emit('onLogedIn', this.callbackargs)
|
||||
// this.$emit('onLogedIn', this.callbackargs)
|
||||
this.onLogedInBack(this.callbackargs)
|
||||
},
|
||||
onRegistered () {
|
||||
this.$emit('onRegistered', this.callbackargs)
|
||||
// this.$emit('onRegistered', this.callbackargs)
|
||||
this.onRegisteredBack(this.callbackargs)
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
></div>
|
||||
</div>
|
||||
<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">
|
||||
<ul class="">
|
||||
<li v-for="node in article.linked_materials" v-bind:key="node.id">
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<script>
|
||||
|
||||
import Vue from 'vue'
|
||||
import productsMixins from 'vuejs/components/productsMixins'
|
||||
|
||||
export default {
|
||||
props: ['html', 'full'], // get the html from parent with props
|
||||
mixins: [productsMixins],
|
||||
data() {
|
||||
return {
|
||||
template: null, // compiled template from html used in render
|
||||
@@ -151,7 +153,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
html: function(val) {
|
||||
console.log('html prop changed', val)
|
||||
// console.log('html prop changed', val)
|
||||
this.compileTemplate()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user