Adding Modal Delivery on Cart (front-end)

app/config/wp/add-options-to-database.php

@@ -1,23 +1,21 @@
 <?php
 
-function MySaveOptions() {
-    global $woocommerce;
+function my_save_options() {
+    $nonce = $_POST['nonce_ajax'];
 
-    $nonce = $_POST['nonce']; 
+    // if ( ! wp_verify_nonce( $nonce, 'ajax-nonce' ) )
+        // die ( 'Busted!');
 
-    if (isset($_POST['delivery_enabled']) ) {
+    if ( isset($_POST['delivery_enabled']) ) {
         $delivery_enabled = $_POST['delivery_enabled'];
-        update_option('wacs_delivery_enabled', $delivery_enabled);
+        // update_option('wacs_delivery_enabled', $delivery_enabled);
 
         if ( $delivery_enabled == 'yes' ) {
-            $_SESSION['delivery'] = 'yes';
-            echo 'wacs_delivery_enabled option saved YES';
-            return;
+            echo 'TUDO CERTO!';
+        } else {
+            echo 'ALGO ERRADO!';
         }
-
-        $_SESSION['delivery'] = 'no';
-        echo 'wacs_delivery_enabled option saved NO';
-    } 
+    }
 
     exit;
 }

app/config/wp/scripts-and-styles.php

@@ -21,10 +21,9 @@ function base_camp_scripts_and_styles()
 
     wp_localize_script('base-camp-scripts', 'ajax_var', array(
         'url' => admin_url('admin-ajax.php'),
-        'nonce' => wp_create_nonce('ajaxnonce')
+        'nonce' => wp_create_nonce('ajax-nonce')
     ));   
 
-
     // comment reply script for threaded comments
     if (is_singular() && comments_open() && (get_option('thread_comments') == 1)) {
         wp_enqueue_script('comment-reply');
@@ -33,8 +32,8 @@ function base_camp_scripts_and_styles()
 
 add_action('wp_enqueue_scripts', 'base_camp_scripts_and_styles', 999);
 
-add_action( 'wp_ajax_MySaveOptions', 'MySaveOptions' );
-add_action( 'wp_ajax_nopriv_MySaveOptions', 'MySaveOptions' );
+add_action( 'wp_ajax_my_save_options', 'my_save_options' );
+add_action( 'wp_ajax_nopriv_my_save_options', 'my_save_options' );
 
 
 /**

package.json

@@ -50,6 +50,7 @@
     "i": "^0.3.6",
     "jquery": "^3.3.1",
     "vue": "^2.5.16",
+    "vuejs-datepicker": "^1.5.3",
     "woocommerce-api": "^1.4.2"
   }
 }

resources/assets/js/main.js

@@ -3,22 +3,45 @@ import Slick from 'vue-slick';
 import Example from './components/Example';
 import Purchase from './components/Purchase';
 import axios from 'axios'
+import Datepicker from 'vuejs-datepicker'
+import {en, ptBR} from 'vuejs-datepicker/dist/locale'
 
 Vue.component('slick', Slick)
 Vue.component('purchase', Purchase)
 
+function defaultModalDeliveryData() {
+  return {
+    delivery: 'no',
+    isOpen: 'no',
+    type: 'hotel',
+    arrival_date: '',
+    departure_date: '',
+    hotel: {
+      name: '',
+      reservation: '',
+      customer_name: ''
+    },
+    ship: {
+      name: '',
+      cabin_number: ''
+    }
+  }
+}
+
 new Vue({
     el: '#app',
     components: {
         Example,
-        Purchase
+        Purchase,
+        Datepicker
     },
     data() {
         return {
-            modalDelivery: {
-              delivery: 'no',
-              isOpen: 'no'
+            lang: {
+              en,
+              br: ptBR
             },
+            modalDelivery: defaultModalDeliveryData(),
             registerForm: {
               nationality: 'brazilian'
             },
@@ -114,7 +137,7 @@ new Vue({
         }
         this.modalDelivery.isOpen = 'no'
         this.modalDelivery.delivery = 'no'
-        this.updateCart()
+        this.resetModalDeliveryData()
         this.saveOptionToDatabase()
       },
 
@@ -140,26 +163,27 @@ new Vue({
       },
 
       saveOptionToDatabase() {
-
         const data = {
-          action: 'MySaveOptions',
-          nonce: ajax_var.nonce,
+          action: 'my_save_options',
+          nonce_ajax: ajax_var.nonce,
           delivery_enabled: this.modalDelivery.delivery
         }
 
         axios
           .post(ajax_var.url, $.param(data))
           .then(res => {
-            console.log(res)
+            console.log(res.data)
 
           })
           .catch(error => {
             console.log(error.data)
           })
-
-
       },
 
+    resetModalDeliveryData: function (){
+        this.$data.modalDelivery = defaultModalDeliveryData();
+    }
+
     }
 
 })

resources/assets/sass/_common.sass

@@ -69,4 +69,7 @@ body
     background: $gray-dark center / cover no-repeat
 
 .select2-dropdown
-    border: 1px solid #dadada !important
+    border: 1px solid #dadada !important
+
+.modal-card-foot
+    justify-content: space-between !important

resources/assets/sass/components/_modal-delivery.sass

@@ -0,0 +1,19 @@
+
+.modal-delivery
+    &__title
+        border-bottom: 1px solid #cacaca
+        padding-bottom: 13px
+        color: #404040
+
+    .label
+        font-size: 14px
+        color: #545454
+
+    .modal-card-head
+        background-color: $primary
+
+    .modal-card-foot
+        background: #d6d6d6
+
+    .modal-card-title
+        color: #fff

resources/assets/sass/components/_navbar.sass

@@ -57,7 +57,7 @@ nav.navbar
             width: 120px
             height: auto
             max-height: none !important
-            z-index: 999
+            z-index: 35
             position: absolute
             top: 0
 

resources/assets/sass/components/index.sass

@@ -5,3 +5,4 @@
 @import buttons
 @import custom-slick-slider
 @import contact-form
+@import modal-delivery

resources/assets/sass/woocommerce/_common.sass

@@ -146,11 +146,11 @@ input[name='update_cart']
   display: none !important
 
 .woocommerce-message
-    border-top-color: #43b962
+  border-top-color: #43b962
 
 .woocommerce-message::before
-    content: '\e015'
-    color: #43b962
+  content: '\e015'
+  color: #43b962
 
 .woocommerce-cart table.cart input
   margin: 10px 6px 10px
@@ -163,7 +163,6 @@ input[name='update_cart']
   border-radius: 4px
 
 .woocommerce-form-register
-    .select
-        width: 100%
-
+  .select
+    width: 100%