Quelques corrections + init du module ClickAndCollect

This commit is contained in:
2021-03-11 18:47:03 +01:00
parent 2e82f5643a
commit 57e69ddd2f
48 changed files with 2224 additions and 57 deletions

View File

@@ -0,0 +1,65 @@
.custom-map-control-button {
appearance: button;
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
cursor: pointer;
margin: 10px;
padding: 0 0.5em;
height: 40px;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
}
.custom-map-control-button:hover {
background: #ebebeb;
}
.locationMap {
height:450px;
width:100%;
}
tr.ligne-pdr > td {
border: 1px solid gray !important;
}
.ligne-pdr > td {
padding: 5px !important;
}
.creneau > td {
text-align: left !important;
font-size: 1.2rem;
}
div.titre-pdr {
font-size: 1.6rem;
color: #e74c3c;
font-weight: 600;
margin-bottom: 10px;
}
.adresse {
font-size: 1.4rem;
}
.table-main {
margin-bottom: 0 !important;
}
.table-schedule {
background-color: #f5f5f5 !important;
border-color: white !important;
}
.img-pin {
width: 30px;
}
span.pin-number {
color: black !important;
position: relative;
left: -19px;
top: -2px;
z-index: 50;
}
.additional-price {
color: #e74c3c;
font-weight: 600;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

View File

@@ -0,0 +1,24 @@
{strip}
<div class="panel panel-default col-sm-6">
{loop type="pdr_places" name="place-loop" id={$place_id}}
<div class="panel-heading">{intl l="Order to withdraw" d="pointretrait"}</div>
<div class="panel-body">
<span class="org"><strong>{$TITLE}</strong></span>
<address class="adr">
<span class="street-address">{$ADDRESS1}</span><br>
{if $ADDRESS2 != ""}
<span class="street-address">{$ADDRESS2}</span><br>
{/if}
<span class="locality">{$ZIPCODE} {$CITY}</span>
</address>
</div>
{/loop}
<div class="panel-heading">{intl l="Scheduled date" d="clickandcollect"}</div>
<div class="panel-body">
<span>{$day} entre {format_date date=$begin_time format="H\hi"} et {format_date date=$end_time format="H\hi"}</span>
</div>
</div>
{/strip}

View File

@@ -0,0 +1,163 @@
<script type="text/html" id="pdr_ui">
{loop type="pdr_places" name="places-first-loop"}
{assign var=module_id value=$MODULE_ID}
{/loop}
<td colspan="3">
<div class="row">
<div class="col-sm-4">
{form name="thelia.order.delivery"}
{form_field field='delivery-module'}
<label for="delivery-method_{$module_id}">
<input type="radio" delivery-mode="cnc" name="{$name}" id="delivery-method_{$module_id}" value="{$module_id}">
<strong>{intl l="Module name - customer" d="clickandcollect"}</strong>
<br>
</label>
{/form_field}
{/form}
</div>
<div class="col-sm-4">&nbsp;</div>
</div>
<div class="row" id="select-cnc">
<div class="col-md-5">
{form name="thelia.order.delivery"}
<div class="table-responsive" style="border: 0px solid gray">
<table class="table table-condensed table-main">
{loop type="pdr_places" name="places-loop" active=true click_and_collect=1 order="city"}
<tr class="ligne-pdr">
<td>
<div class="titre-pdr"><img src="{image file='assets/img/pin.png' source='ClickAndCollect'}" class="img-pin"><span class="pin-number">{$ID}</span>{$TITLE}</div>
<span class="adresse">{$ADDRESS1}</span><br>
<span class="adresse">{$ZIPCODE} {$CITY}</span><br>
{if {cart attr='total_taxed_price_without_discount'} < $MINIMUM_AMOUNT}
<div class="row">
<div class="alert alert-info" style="width:95%; margin:5px">{intl l="Message info minimum de commande" d="clickandcollect" minimum=$MINIMUM_AMOUNT}</div>
</div>
{else}
<table class="table table-schedule">
{loop type="pdr_schedule" name="schedule-loop" place_id={$ID}}
<tr class="creneau">
<td style="padding:10px; text-align: center">{$DAY_LABEL} {$CALCULATED_DAY} {format_date date=$BEGIN format="H\hi"} à {format_date date=$END format="H\hi"}</td>
<td style="padding:10px; text-align: center"><input type="radio" name="pdr-choosen-day" value="{$ID}"{if {cart attr='total_taxed_price_without_discount'} < $MINIMUM_AMOUNT} disabled{/if} /></td>
</tr>
{/loop}
</table>
{/if}
<div class="price">
{if $PRICE > 0}
{format_number number=$PRICE}
{else}
{intl l="Free" d="clickandcollect"}
{/if}
</div>
</td>
</tr>
{/loop}
</table>
</div>
{/form}
</div>
<div class="col-md-7">
<input type="hidden" id="map-center-lat" value={{module_config module='PlanificationLivraison' key='map_center_latitude' locale='en_US'}|default:50.75075530537203} />
<input type="hidden" id="map-center-lon" value={{module_config module='PlanificationLivraison' key='map_center_longitude' locale='en_US'}|default:2.252608244005041} />
<table id="coordinates" class="hidden">
{loop type="pdr_places" name="places-loop" active=true order="city"}
<tr>
<td>{$ID}
<td>{$LATITUDE}</td>
<td>{$LONGITUDE}</td>
<td>{$TITLE}</td>
</tr>
{/loop}
</table>
<div id="cnc_map" class="locationMap">
</div>
</td>
</script>
<script>
// Masquer par défaut les options du mode PDR
$(document).ready(function(){
$("#delivery-module-{$module_id}").html($('#cnc_ui').html());
$('#select-cnc').slideUp('fast');
});
// Gestion du pliage/dépliage du mode PDR
$('input[type=radio][delivery-mode]').click(function() {
$('div[id^="select"]').not($('#select-' + $(this).attr('delivery-mode'))).slideUp();
$('#select-' + $(this).attr('delivery-mode')).slideDown('fast');
});
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js?callback=initMap" +
"&key={module_config module='PlanificationLivraison' key='googlemap_api_key' locale='en_US'}";
document.body.appendChild(script);
}
function initMap() {
const LIMITES = {
north: 50.85043724044059,
east: 2.6869845409159923,
south: 50.616717259788544,
west: 1.8122213465336767,
};
var opt = {
center: new google.maps.LatLng($("#map-center-lat").val(), $("#map-center-lon").val()),
zoom: 12,
streetViewControl: true,
mapTypeControl: true,
restriction: {
latLngBounds: LIMITES,
strictBounds: false,
}
};
Data.map = new google.maps.Map(document.getElementById('cnc_map'), opt);
displayPins();
}
function displayPins() {
var arrays = [];
$('#coordinates').eq(0).find('tr').each((r,row) => arrays.push($(row).find('td,th').map((c,cell) => $(cell).text()).toArray()))
arrays.forEach(function(place) {
var marker = new google.maps.Marker({
title: place[3],
label: place[0],
position: new google.maps.LatLng(place[1], place[2]),
map: Data.map
});
});
}
/*********************************************************/
var Data = {
markers: [],
map: null,
geocoder: null,
bounds: null
};
if (typeof(google) === 'undefined') {
loadScript();
} else {
initMap();
}
</script>