Updating Tickets Pages

michelmany · Oct 12, 2018 · 15388a5 · 15388a5
1 parent 119c5f6
commit 15388a5
Show file tree

Hide file tree

Showing 15 changed files with 156 additions and 91 deletions.
diff --git a/resources/assets/images/placeholder-sambodromo.jpg b/resources/assets/images/placeholder-sambodromo.jpg
diff --git a/resources/assets/js/components/Purchase.vue b/resources/assets/js/components/Purchase.vue
@@ -4,7 +4,7 @@
 
             <div class="purchase__step step-1" v-show="isStep(1)">
                 <div class="purchase__step-label">
-                    <span class="number">1</span> Select the parade type
+                    <span class="number">1</span> {{ this.stepsLabelsArray.parade }}
                 </div>
                 <div class="purchase__items">
                     <label :for="`parade-${index}`" class="purchase__item button" 
@@ -20,7 +20,7 @@
             <transition name="fade">
                 <div class="purchase__step step-2" v-show="isStep(2)">
                     <div class="purchase__step-label">
-                        <span class="number">2</span> Select the date
+                        <span class="number">2</span> {{ this.stepsLabelsArray.date }}
                     </div>
                     <div class="purchase__items">
                         <label :for="`date-${index}`" class="purchase__item button" 
@@ -35,7 +35,7 @@
             <transition name="fade">
                 <div class="purchase__step step-3" v-show="isStep(3)">
                     <div class="purchase__step-label">
-                        <span class="number">3</span> Select the seat type
+                        <span class="number">3</span> {{ this.stepsLabelsArray.seat }}
                     </div>
                     <div class="purchase__items">
                         <label :for="`seat-${index}`" class="purchase__item button" 
@@ -50,7 +50,7 @@
             <transition name="fade">
                 <div class="purchase__step step-4" v-show="isStep(4)">
                     <div class="purchase__step-label">
-                        <span class="number">4</span> Select the sector
+                        <span class="number">4</span> {{ this.stepsLabelsArray.sector }}
                     </div>
                     <div class="purchase__items">
                         <label :for="`sector-${index}`" class="purchase__item button sector" 
@@ -70,7 +70,7 @@
             <transition name="fade">
                 <div class="purchase__step step-5" v-show="isStep(5)">
                     <div class="purchase__step-label">
-                        <span class="number">5</span> Enter the quantity
+                        <span class="number">5</span> {{ this.stepsLabelsArray.quantity }}
                     </div>
                     <div class="purchase__items">
                         <div class="purchase__item-quantity">
@@ -85,15 +85,19 @@
             <transition name="fade">
                 <div class="purchase__step step-6" v-show="isStep(5)">
                     <div class="purchase__step-label">
-                        <span class="number">6</span> Add to cart
+                        <span class="number">6</span> {{ this.stepsLabelsArray.add_to_cart }}
                     </div>
                     <div class="purchase__item-total">
-                        <span>{{ quantity }}x R${{ selected.product.price }}</span>
-
-                        <a class="purchase__add-to-cart-btn button" 
-                            :href="`?add-to-cart=${selected.product.id}&quantity=${ quantity }`">
-                            Add to cart
-                        </a>
+                        <div class="columns">
+                            <div class="column">
+                                <span>{{ quantity }}x R${{ selected.product.price }}</span>
+                            </div>
+                            <div class="column">
+                                <a class="purchase__add-to-cart-btn button" :href="`?add-to-cart=${selected.product.id}&quantity=${ quantity }&attribute_pa_date=${selected.date.name}`">
+                                    {{ this.stepsLabelsArray.add_to_cart }}
+                                </a>
+                            </div>
+                        </div>
                     </div>
                 </div>             
             </transition>
@@ -104,7 +108,7 @@
 
 <script>
     export default {
-        props: ['products'],
+        props: ['products', 'stepsLabels', 'productsAttr'],
         data() {
             return {
                 currentStep: 1,
@@ -117,50 +121,17 @@
                     quantity: Number
                 },
                 productsList: Array,
-                parades: [
-                    {
-                        name: 'Preliminary Parades',
-                        dates: [
-                            { name: 'Friday (March 01)', slug: 'friday-march-01'},
-                            { name: 'Saturday (March 02)', slug: 'saturday-march-02'}
-                        ],
-                        seats: [
-                            { name: 'Grandstand tickets', slug: 'grandstand-tickets' },
-                            { name: 'Open Front Box seats', slug: 'open-front-box-seats' }
-                        ]
-                    },
-                    {
-                        name: 'Main Parades',
-                        dates: [
-                            { name: 'Sunday (March 03)', slug: 'sunday-march-03'},
-                            { name: 'Monday (March 04)', slug: 'monday-march-04'}
-                        ],
-                        seats: [
-                            { name: 'Grandstand tickets', slug: 'grandstand-tickets' },
-                            { name: 'Open Front Box seats', slug: 'open-front-box-seats' },
-                            { name: 'Private Chairs', slug: 'private-chairs' }
-                        ]
-                    },
-                    {
-                        name: 'Champions’ Parade',
-                        dates: [
-                            { name: 'Saturdar (March 09)', slug: 'saturday-march-09'},
-                        ],
-                        seats: [
-                            { name: 'Grandstand tickets', slug: 'grandstand-tickets' },
-                            { name: 'Open Front Box seats', slug: 'open-front-box-seats' },
-                            { name: 'Private Chairs', slug: 'private-chairs' }
-                        ]
-                    }                    
-                ],
+                stepsLabelsArray: Array,
+                parades: Array,
+                
             }
         },
 
         computed: {
             productsFilter() {
                 const filteredProducts = this.productsList.filter(el => {
-                    return el.acf.date.slug == this.selected.date.slug
-                        && el.acf.seat_type.slug == this.selected.seat.slug
+                    return el.acf.date.name == this.selected.date.name
+                        && el.acf.seat_type.name == this.selected.seat.name
                 })
 
                 return filteredProducts
@@ -220,7 +191,11 @@
         },
 
         created() {
+            this.parades = JSON.parse(this.productsAttr)
+            this.stepsLabelsArray = JSON.parse(this.stepsLabels)
             this.productsList = JSON.parse(this.products)
+            console.log(JSON.parse(this.products))
+            console.log(JSON.parse(this.productsAttr))
         },
         
     }

diff --git a/resources/assets/sass/pages/_tickets.sass b/resources/assets/sass/pages/_tickets.sass
@@ -3,10 +3,6 @@
 
     .intro
 
-        &.section
-            padding-top: 100px
-            padding-bottom: 100px
-
         &__title
             font-family: $font-title
             font-size: 28px
@@ -20,10 +16,19 @@
             color: $gray-dark
             letter-spacing: 0.44px
             line-height: 25px     
-            max-width: 348px   
+            max-width: 520px   
+
+            +tablet
+                margin-top: 20px
+
+        &__image
+            max-width: 100%
 
     .purchase
 
+        &.section
+            padding-top: 0
+
         &__step
             margin-bottom: 50px
 
@@ -131,8 +136,9 @@
             @extend .purchase__item.button
             background-color: #2B9AE5
             border-bottom-color: #248BCF
-            max-width: 281px
+            max-width: 370px
 
             &:hover
                 background-color: #2B9AE5
                 border-bottom-color: #248BCF
+
diff --git a/resources/languages/messages.php b/resources/languages/messages.php
@@ -56,6 +56,7 @@ function get_template_messages()
         'single' => [
             'edit'     => __('Edit', 'base-camp'),
             'comments' => __('Comments', 'base-camp'),
-        ],
+        ],     
+
     ];
 }
diff --git a/resources/views/template-tickets.twig b/resources/views/template-tickets.twig
@@ -5,14 +5,25 @@
 
         <div class="intro section">
             <div class="container wrapper">
-                <div class="intro__title">About lorem Ipsum</div>
-                <div class="intro__copy">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
+                <div class="columns">
+                    <div class="column">
+                        <div class="intro__copy">{{ tickets_acf.tickets_intro }}</div>
+                    </div>
+                    <div class="column">
+                        <img src="{{ tickets_acf.sambodromo_image }}" alt="Sectors Image" class="intro__image">
+                    </div>
+                </div>
             </div>
         </div>
 
         {% set current_lang = function('pll_current_language', 'slug') %}
 
-        <purchase products="{{ products|json_encode|e('html_attr') }}" current-lang="{{ current_lang }}"></purchase>
+        <purchase
+            steps-labels="{{ steps_labels|json_encode|e('html_attr') }}"
+            products-attr="{{ products_attr|json_encode|e('html_attr') }}"
+            products="{{ products|json_encode|e('html_attr') }}"
+            current-lang="{{ current_lang }}">
+        </purchase>
 
     </div>
 {% endblock %}
diff --git a/static/css/admin.12665cfb35146bb69fbc.css → static/css/admin.df0d80edf16dcb47cd8a.css b/static/css/admin.12665cfb35146bb69fbc.css → static/css/admin.df0d80edf16dcb47cd8a.css
diff --git a/static/css/app.12665cfb35146bb69fbc.css → static/css/app.df0d80edf16dcb47cd8a.css b/static/css/app.12665cfb35146bb69fbc.css → static/css/app.df0d80edf16dcb47cd8a.css
@@ -8206,10 +8206,6 @@ nav.navbar .navbar-menu {
         padding-left: 0;
         padding-right: 0; } }
 
-.tickets .intro.section {
-  padding-top: 100px;
-  padding-bottom: 100px; }
-
 .tickets .intro__title {
   font-family: "Knewave", cursive;
   font-size: 28px;
@@ -8223,7 +8219,16 @@ nav.navbar .navbar-menu {
   color: #595656;
   letter-spacing: 0.44px;
   line-height: 25px;
-  max-width: 348px; }
+  max-width: 520px; }
+  @media screen and (min-width: 769px), print {
+    .tickets .intro__copy {
+      margin-top: 20px; } }
+
+.tickets .intro__image {
+  max-width: 100%; }
+
+.tickets .purchase.section {
+  padding-top: 0; }
 
 .tickets .purchase__step {
   margin-bottom: 50px; }
@@ -8317,7 +8322,7 @@ nav.navbar .navbar-menu {
 .tickets .purchase__add-to-cart-btn {
   background-color: #2B9AE5;
   border-bottom-color: #248BCF;
-  max-width: 281px; }
+  max-width: 370px; }
   .tickets .purchase__add-to-cart-btn:hover {
     background-color: #2B9AE5;
     border-bottom-color: #248BCF; }

diff --git a/static/css/login.12665cfb35146bb69fbc.css → static/css/login.df0d80edf16dcb47cd8a.css b/static/css/login.12665cfb35146bb69fbc.css → static/css/login.df0d80edf16dcb47cd8a.css
diff --git a/static/js/admin.12665cfb35146bb69fbc.js → static/js/admin.df0d80edf16dcb47cd8a.js b/static/js/admin.12665cfb35146bb69fbc.js → static/js/admin.df0d80edf16dcb47cd8a.js
diff --git a/static/js/app.12665cfb35146bb69fbc.js → static/js/app.df0d80edf16dcb47cd8a.js b/static/js/app.12665cfb35146bb69fbc.js → static/js/app.df0d80edf16dcb47cd8a.js
diff --git a/static/js/login.12665cfb35146bb69fbc.js → static/js/login.df0d80edf16dcb47cd8a.js b/static/js/login.12665cfb35146bb69fbc.js → static/js/login.df0d80edf16dcb47cd8a.js
diff --git a/static/js/vendor.12665cfb35146bb69fbc.js → static/js/vendor.df0d80edf16dcb47cd8a.js b/static/js/vendor.12665cfb35146bb69fbc.js → static/js/vendor.df0d80edf16dcb47cd8a.js
diff --git a/static/manifest.json b/static/manifest.json
@@ -1,14 +1,10 @@
 {
-  "admin.css": "css/admin.12665cfb35146bb69fbc.css",
-  "admin.js": "js/admin.12665cfb35146bb69fbc.js",
-  "app.css": "css/app.12665cfb35146bb69fbc.css",
-  "app.js": "js/app.12665cfb35146bb69fbc.js",
-  "login.css": "css/login.12665cfb35146bb69fbc.css",
-  "login.js": "js/login.12665cfb35146bb69fbc.js",
-  "vendor.js": "js/vendor.12665cfb35146bb69fbc.js",
-  "images/arrow-next-white.png": "images/arrow-next-white.png",
-  "images/icon-cart-white.png": "images/icon-cart-white.png",
-  "images/texture-blue-carnival.jpg": "images/texture-blue-carnival.jpg",
-  "images/base-camp-logo.png": "images/base-camp-logo.png",
-  "images/arrow-prev-white.png": "images/arrow-prev-white.png"
+  "admin.css": "css/admin.df0d80edf16dcb47cd8a.css",
+  "admin.js": "js/admin.df0d80edf16dcb47cd8a.js",
+  "app.css": "css/app.df0d80edf16dcb47cd8a.css",
+  "app.js": "js/app.df0d80edf16dcb47cd8a.js",
+  "login.css": "css/login.df0d80edf16dcb47cd8a.css",
+  "login.js": "js/login.df0d80edf16dcb47cd8a.js",
+  "vendor.js": "js/vendor.df0d80edf16dcb47cd8a.js",
+  "images/base-camp-logo.png": "images/base-camp-logo.png"
 }
diff --git a/template-tickets.php b/template-tickets.php
@@ -32,9 +32,63 @@
 
 $context['products'] = $products;
 
+$steps_labels = [
+    'parade' => __('Select the parade type', 'base-camp'),
+    'date' => __('Select the date', 'base-camp'),
+    'seat' => __('Select the seat type', 'base-camp'),
+    'sector' => __('Select the sector', 'base-camp'),
+    'quantity' => __('Enter the quantity', 'base-camp'),
+    'add_to_cart' => __('Add to cart', 'base-camp'),
+];
+
+$context['steps_labels'] = $steps_labels;
+
+$productsAttr = array(
+    [
+        'name' => __('Preliminary Parades', 'base-camp'),
+        'dates' => [
+            ['name' => __('Friday (March 01)', 'base-camp'), 'slug' => 'friday-march-01'],
+            ['name' => __('Saturday (March 02)', 'base-camp'), 'slug' => 'saturday-march-02']
+        ],
+        'seats' => [
+            ['name' => __('Grandstand tickets', 'base-camp'), 'slug' => 'grandstand-tickets'],
+            ['name' => __('Open Front Box seats', 'base-camp'), 'slug' => 'open-front-box-seats']
+        ]
+    ],
+    [
+        'name' => __('Main Parades', 'base-camp'),
+        'dates' => [
+            ['name' => __('Sunday (March 03)', 'base-camp'), 'slug' => 'sunday-march-03'],
+            ['name' => __('Monday (March 04)', 'base-camp'), 'slug' => 'monday-march-04']
+        ],
+        'seats' => [
+            ['name' => __('Grandstand tickets', 'base-camp'), 'slug' => 'grandstand-tickets' ],
+            ['name' => __('Open Front Box seats', 'base-camp'), 'slug' => 'open-front-box-seats' ],
+            ['name' => __('Private Chairs', 'base-camp'), 'slug' => 'private-chairs' ]
+        ]
+    ],
+    [
+        'name' => __('Champions’ Parade', 'base-camp'),
+        'dates' => [
+            ['name' => __('Saturday (March 09)', 'base-camp'), 'slug' => 'saturday-march-09'],
+        ],
+        'seats' => [
+            ['name' => __('Grandstand tickets', 'base-camp'), 'slug' => 'grandstand-tickets'],
+            ['name' => __('Open Front Box seats', 'base-camp'), 'slug' => 'open-front-box-seats'],
+            ['name' => __('Private Chairs', 'base-camp'), 'slug' => 'private-chairs']
+        ]
+    ]                   
+);
+
+$context['products_attr'] = $productsAttr;
+
+$context['tickets_acf'] = get_fields();
+
 // Adding ACF to each product
 foreach ($products as $key => $product) {
     $context['products'][$key]->acf = get_fields($product->id);
 }
 
+var_dump($context['products']);
+
 Timber::render('template-tickets.twig', $context);