<!-- Trigger Link that will appear inside the nav portal -->
<portal to="nav-search-toggle">
- <a href="#" class="text-white hover:text-blue" @click.prevent="toggleVisibility" :class="visible ? 'text-blue' : ''">
+ <a href="#" class="text-white hover:text-blue" @click.prevent="toggleVisibility"
+ :class="visible ? 'text-blue' : ''">
<slot name="link"></slot>
</a>
</portal>
<slide-toggle :active="visible" :duration="300" @open-end="focusField">
<div class="header-search-box container py-3">
- <form :action="endpoint" method="get" class="flex justify-between items-center">
-
+ <form :action="endpoint" method="get" class="flex justify-between items-center" @submit="submitForm">
<search-field :placeholder="placeholder" ref="searchInput"></search-field>
-
<button class="ml-4 p-3 -mr-3 appearance-none focus:outline-none focus:bg-grey-100">
<slot name="button"></slot>
</button>
}
},
- mounted () {
+ mounted() {
let component = this;
// Allow search field to be opened using the common '/' shortcut
focusField() {
this.$refs.searchInput.focus()
+ },
+ submitForm() {
+ cubistga.event('search', 'engagment', null, null, false, {'search_term': this.$refs.searchInput.getInputValue()});
}
}
}
<autocomplete
class="flex-grow"
name="q"
+ :default-value="value"
ref="autocomplete"
:search="getSuggestions"
:get-result-value="getResultValue"
data() {
return {
ajaxURL: `/ajax/search`,
- suggestionsLimit: 5,
+ suggestionsLimit: 5
}
},
placeholder: {
type: String,
},
+ value:{
+ type: String,
+ }
},
mounted () {
this.$refs.autocomplete.$refs.input.focus()
},
+ getInputValue(){
+ return this.$refs.autocomplete.$refs.input.value;
+ },
+
getSuggestions(input) {
return new Promise(resolve => {
return result.title
},
- handleSubmit(input) {
+ handleSubmit() {
let $this = this;
this.$nextTick(function () {
$this.$el.closest('form').submit();
let responseClasses = form.data('confirmation-classes') || 'text-2xl text-center p-8';
form.find('.error').removeClass('error');
form.html(`<p class="${responseClasses}">${form.data('confirmation')}</p>`);
+ cubistga.handleGtag($(form).get(0));
}).fail(function (response) {
button.text(button.data('text')).prop('disabled', false);
form.find('.error').removeClass('error');
});
document.addEventListener('click', function (e) {
- if (e.target.matches('[data-ga]')) {
+ if (e.target.matches('a[data-ga]')) {
$this.handleGtag(e.target);
}
- if (e.target.closest('[data-ga]')) {
- $this.handleGtag(e.target.closest('[data-ga]'));
+ if (e.target.closest('a[data-ga]')) {
+ $this.handleGtag(e.target.closest('a[data-ga]'));
}
}, false);
};
if (undefined !== value && null !== value) {
options.value = value;
}
- console.log('gtag event',action,options);
+ console.log('gtag event', action, options);
return gtag('event', action, options)
};
let category = el.getAttribute('data-ga-category');
let label = el.getAttribute('data-ga-label');
let value = el.getAttribute('data-ga-value');
+ let options = el.getAttribute('data-ga-options');
+ if (options !== null) {
+ try {
+ options = JSON.parse(options);
+ }catch (e) {
+ console.log(options);
+ options={};
+ }
+ }
- return this.event(action, category, label, value, el.getAttribute('data-ga-noninteraction') === 1);
+ return this.event(action, category, label, value, el.getAttribute('data-ga-noninteraction') === 1, options);
}
};
@if (!empty($address))
- <a class="{{ $class ?? '' }}" href="https://maps.google.fr/?q={{ urlencode(str_replace("\n", " ", $address)) }}" target="_blank" rel="noopener">
+ <a data-ga="event" data-ga-category="contact" data-ga-action="click" data-ga-label="postal_address"
+ class="{{ $class ?? '' }}"
+ href="https://maps.google.fr/?q={{ urlencode(str_replace("\n", " ", $address)) }}" target="_blank"
+ rel="noopener">
{{ $slot }}
</a>
@endphp
- <a class="{{ $class ?? '' }}" href="tel:{{ $number }}">
+ <a data-ga="event" data-ga-category="contact" data-ga-action="click"
+ data-ga-label="phone" class="{{ $class ?? '' }}" href="tel:{{ $number }}">
{{ $slot }}
</a>
<div class="bg-grey-100 p-1v">
@form([
'action' => '/ajax/request_quote',
+ 'ga'=>false,
'extra_fields' => '<input type="hidden" name="cart_data" :value="cartData">' // Populated by VueJS
])
</div>
{{-- Social Networks --}}
@php($networks = ['twitter' => 'Twitter', 'linkedin' => 'LinkedIn'])
@foreach ($networks as $networkID => $network)
- <a class="flex items-center mb-4 font-bold text-navy hover:text-blue"
+ <a data-ga="event" data-ga-category="social" data-ga-action="click"
+ data-ga-label="{{$networkID}}"
+ class="flex items-center mb-4 font-bold text-navy hover:text-blue"
href="{{ $global->get("social.{$networkID}") }}" target="_blank" rel="noopener">
@svg("icon-{$networkID}", 'mr-3')
{{ __($network) }}
@section('content')
<content class="pb-3v">
- <text-block :title="$page->page_heading" />
+ <meta data-ga="event" data-ga-action="view_search_results" data-ga-category="engagment"
+ data-ga-options='{"search_term":"{{request()->get('q')}}"}'>
+ <text-block :title="$page->page_heading"/>
<div class="search-results-layout">
<div class="search-results-main">
<div class="bg-grey-100 p-1v">
- <form action="{{ $nav->getHrefByName('recherche') }}" method="get" class="flex justify-between items-center sm:block">
+ <form action="{{ $nav->getHrefByName('recherche') }}" method="get"
+ class="flex justify-between items-center sm:block">
- <search-field placeholder="{{ __('Saisissez votre recherche') }}"></search-field>
+ <search-field placeholder="{{ __('Saisissez votre recherche') }}"
+ value="{{request()->get('q')}}"></search-field>
- <button class="btn flex items-center py-3 px-8 font-display text-lg rounded ml-4 sm:mt-4 sm:mx-auto">
+ <button
+ class="btn flex items-center py-3 px-8 font-display text-lg rounded ml-4 sm:mt-4 sm:mx-auto">
@svg('search', 'fill-current mr-2')
{{ __('Rechercher') }}
</button>
<div class="breadcrumbs sm:text-sm">
@foreach ($result['breadcrumbs'] as $breadcrumb)
<div @if(!$loop->last) class="breadcrumbs-item" @endif>
- <a class="breadcrumbs-link" @if ($breadcrumb->url)href="{{ $breadcrumb->url }}" @endif>
+ <a class="breadcrumbs-link"
+ @if ($breadcrumb->url)href="{{ $breadcrumb->url }}" @endif>
{{ $breadcrumb->title }}
</a>
</div>
@endforeach
</div>
- <a class="text-2xl sm:text-xl xs:text-lg font-display mt-1 inline-block animated-underline" href="{{ $result['url'] }}">{{ $result['title'] }}</a>
+ <a class="text-2xl sm:text-xl xs:text-lg font-display mt-1 inline-block animated-underline"
+ href="{{ $result['url'] }}">{{ $result['title'] }}</a>
</div>
@endforeach
</div>
</div>
</map-link>
-<a class="contact-details-block" href="mailto:{{ $global->email }}">
+<a data-ga="event" data-ga-category="contact" data-ga-action="click"
+ data-ga-label="email" class="contact-details-block" href="mailto:{{ $global->email }}">
@svg('icon-email', 'contact-details-icon')
<div class="contact-details-text">
<div class="contact-details-title">{{ __('Email') }}</div>
+@php
+ $gaattrs='data-ga="event" data-ga-action="send" data-ga-category="contact" data-ga-label="form"';
+ if(isset($ga) && !$ga){
+ $gaattrs='';
+ }
+@endphp
@if ($page->get('form'))
-
@push('scripts')
<script src="{{ mix('/js/mailform.js') }}"></script>
@endpush
-<div id="contact-form">
- <div class="ajax-form flex flex-col max-w-half">
- @if($page->get('form_intro'))
- <div class="form-info text-navy">@markdown($page->get('form_intro'))</div>
- @endif
- <form class="text-navy mailform" action="{{ $action ?? '/ajax/mailform' }}" method="post"
- data-confirmation="{{$page->get('form_confirmation')??__('Votre message a bien été envoyé')}}" novalidate>
- @honeypot
- <input type="hidden" value="{{$page->get('id')}}" name="page">
+ <div id="contact-form">
+ <div class="ajax-form flex flex-col max-w-half">
+ @if($page->get('form_intro'))
+ <div class="form-info text-navy">@markdown($page->get('form_intro'))</div>
+ @endif
+ <form {!! $gaattrs !!} class="text-navy mailform" action="{{ $action ?? '/ajax/mailform' }}" method="post"
+ data-confirmation="{{$page->get('form_confirmation')??__('Votre message a bien été envoyé')}}"
+ novalidate>
+ @honeypot
+ <input type="hidden" value="{{$page->get('id')}}" name="page">
- {!! $extra_fields ?? '' !!}
+ {!! $extra_fields ?? '' !!}
- <div class="fields grid" >
- @foreach($page->get('form') as $field)
- @php
- $required=$field['mandatory']?' required':'';
- $asx=$field['mandatory']?' *':'';
- @endphp
- <label class="form-input">
- @switch($field['type'])
- @case('name')
- {{__('Nom')}}{{$asx}} <input class="py-3 mt-3" type="text" {!! $required !!} name="name">
- @break
+ <div class="fields grid">
+ @foreach($page->get('form') as $field)
+ @php
+ $required=$field['mandatory']?' required':'';
+ $asx=$field['mandatory']?' *':'';
+ @endphp
+ <label class="form-input">
+ @switch($field['type'])
+ @case('name')
+ {{__('Nom')}}{{$asx}} <input class="py-3 mt-3" type="text"
+ {!! $required !!} name="name">
+ @break
- @case('firstname')
- {{__('Prénom')}}{{$asx}} <input class="py-3 mt-3" type="text"
- {!! $required !!} name="firstname">
- @break
+ @case('firstname')
+ {{__('Prénom')}}{{$asx}} <input class="py-3 mt-3" type="text"
+ {!! $required !!} name="firstname">
+ @break
- @case('company')
- {{__('Société')}}{{$asx}} <input class="py-3 mt-3" type="text"
- {!! $required !!} name="company">
- @break
+ @case('company')
+ {{__('Société')}}{{$asx}} <input class="py-3 mt-3" type="text"
+ {!! $required !!} name="company">
+ @break
- @case('email')
- {{__('E-mail')}}{{$asx}} <input class="py-3 mt-3" type="email"
- {!! $required !!} name="email">
- @break
+ @case('email')
+ {{__('E-mail')}}{{$asx}} <input class="py-3 mt-3" type="email"
+ {!! $required !!} name="email">
+ @break
- @case('ref')
- {{__('Référence')}}{{$asx}} <input class="py-3 mt-3" type="text"
- {!! $required !!} name="ref">
- @break
+ @case('ref')
+ {{__('Référence')}}{{$asx}} <input class="py-3 mt-3" type="text"
+ {!! $required !!} name="ref">
+ @break
- @case('sku')
- {{__('Numéro de série')}}{{$asx}} <input class="py-3 mt-3" type="text"
- {!! $required !!} name="sku">
- @break
+ @case('sku')
+ {{__('Numéro de série')}}{{$asx}} <input class="py-3 mt-3" type="text"
+ {!! $required !!} name="sku">
+ @break
- @case('subject')
- {{__('Sujet')}}{{$asx}} <input class="py-3 mt-3" type="text"
- {!! $required !!} name="subject">
- @break
+ @case('subject')
+ {{__('Sujet')}}{{$asx}} <input class="py-3 mt-3" type="text"
+ {!! $required !!} name="subject">
+ @break
- @case('message')
- {{__('Message')}}{{$asx}} <textarea class="py-3 textarea mt-3" type="text"
- {!! $required !!} name="message"></textarea>
- @break
- @endswitch
- </label>
- @endforeach
- </div>
+ @case('message')
+ {{__('Message')}}{{$asx}} <textarea class="py-3 textarea mt-3" type="text"
+ {!! $required !!} name="message"></textarea>
+ @break
+ @endswitch
+ </label>
+ @endforeach
+ </div>
<div class="form-endmessage my-6 text-grey-dark text-sm">
@markdown($global->get('form_privacy'))
</div>
<div class="form-footer flex justify-between items-center xs:flex-col-reverse">
- <span class="form-required-legend text-grey-dark xs:self-start xs:mt-5">*{{__('Champs obligatoires')}}</span>
+ <span
+ class="form-required-legend text-grey-dark xs:self-start xs:mt-5">*{{__('Champs obligatoires')}}</span>
<button type="submit" class="form-submit-button btn btn-custom xs:w-full"
data-sending="{{__('Envoi en cours')}}">{{ $page->get('form_button_text', __('Envoyer')) }}</button>
</div>
projects / pmi.git / commitdiff