ClickAndCollect : quasiment terminé
This commit is contained in:
@@ -18,20 +18,41 @@
|
||||
height:450px;
|
||||
width:100%;
|
||||
}
|
||||
/********************************************/
|
||||
|
||||
tr.ligne-cnc {
|
||||
border-top: 2px solid gray !important;
|
||||
border-bottom: 1px solid gray !important;
|
||||
}
|
||||
tr.ligne-cnc:nth-child(1) {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
tr.ligne-cnc:nth-child(1) .creneau > td {
|
||||
background-color: white;
|
||||
}
|
||||
tr.ligne-cnc:nth-child(2) {
|
||||
background-color: white;
|
||||
}
|
||||
tr.ligne-cnc > td:first-child {
|
||||
border-left: 1px solid gray !important;
|
||||
}
|
||||
tr.ligne-cnc > td:last-child {
|
||||
border-right: 1px solid gray !important;
|
||||
}
|
||||
tr.ligne-cnc td {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
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;
|
||||
padding: 2px 0 2px 20px !important;
|
||||
}
|
||||
.creneau:first-child > td {
|
||||
padding-top: 10px !important;
|
||||
}
|
||||
|
||||
div.titre-pdr {
|
||||
div.titre-cnc {
|
||||
font-size: 1.6rem;
|
||||
color: #e74c3c;
|
||||
font-weight: 600;
|
||||
@@ -46,7 +67,11 @@ div.titre-pdr {
|
||||
}
|
||||
.table-schedule {
|
||||
background-color: #f5f5f5 !important;
|
||||
border-color: white !important;
|
||||
border: none !important;
|
||||
}
|
||||
.cnc-bouton-radio {
|
||||
vertical-align:middle !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.img-pin {
|
||||
@@ -63,3 +88,11 @@ span.pin-number {
|
||||
color: #e74c3c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.next-date {
|
||||
color: #e74c3c;
|
||||
font-weight: 400;
|
||||
}
|
||||
.next-date .b {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
<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-heading">{intl l="Order to withdraw" d="clickandcollect"}</div>
|
||||
<div class="panel-body">
|
||||
<span class="org"><strong>{$TITLE}</strong></span>
|
||||
<address class="adr">
|
||||
@@ -15,9 +15,9 @@
|
||||
</div>
|
||||
{/loop}
|
||||
|
||||
<div class="panel-heading">{intl l="Scheduled date" d="clickandcollect"}</div>
|
||||
<div class="panel-heading">{intl l="Starting 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>
|
||||
<span>{$day}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
<script type="text/html" id="pdr_ui">
|
||||
<script type="text/html" id="cnc_ui">
|
||||
|
||||
{loop type="pdr_places" name="places-first-loop"}
|
||||
{assign var=module_id value=$MODULE_ID}
|
||||
{loop type="delivery" name="cnc-delivery-loop" code="clickandcollect"}
|
||||
{assign var=cnc_module_id value=$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}">
|
||||
<label for="delivery-method_{$cnc_module_id}">
|
||||
<input type="radio" delivery-mode="cnc" name="{$name}" id="delivery-method_{$cnc_module_id}" value="{$cnc_module_id}">
|
||||
<strong>{intl l="Module name - customer" d="clickandcollect"}</strong>
|
||||
<br>
|
||||
</label>
|
||||
@@ -20,15 +21,17 @@
|
||||
<div class="col-sm-4"> </div>
|
||||
</div>
|
||||
|
||||
<div class="row message-explicatif">{intl l="Message explicatif" d="clickandcollect"}</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">
|
||||
{loop type="pdr_places" name="places-loop-cnc" active=true click_and_collect=1 order="city"}
|
||||
<tr class="ligne-cnc">
|
||||
<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>
|
||||
<div class="titre-cnc"><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}
|
||||
@@ -37,15 +40,22 @@
|
||||
</div>
|
||||
{else}
|
||||
<table class="table table-schedule">
|
||||
{assign var="nextDate" value=""}
|
||||
{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>
|
||||
<td>{$DAY_LABEL}</td>
|
||||
<td>{format_date date=$BEGIN format="H\hi"}</td>
|
||||
<td>{format_date date=$END format="H\hi"}</td>
|
||||
</tr>
|
||||
{if $nextDate eq ''}
|
||||
{assign var="nextDate" value="$DAY_LABEL $CALCULATED_DAY"}
|
||||
{/if}
|
||||
{/loop}
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
<div class="next-date">{intl l="Message availability" d="clickandcollect"} <b>{$nextDate}</b></div>
|
||||
|
||||
<div class="price">
|
||||
{if $PRICE > 0}
|
||||
{format_number number=$PRICE} €
|
||||
@@ -54,6 +64,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="cnc-bouton-radio"><input type="radio" name="cnc-choosen-place" value="{$ID}"{if {cart attr='total_taxed_price_without_discount'} < $MINIMUM_AMOUNT} disabled{/if} /></td>
|
||||
</tr>
|
||||
{/loop}
|
||||
</table>
|
||||
@@ -61,11 +72,11 @@
|
||||
{/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} />
|
||||
<input type="hidden" id="map-center-lat-cnc" value={{module_config module='PlanificationLivraison' key='map_center_latitude' locale='en_US'}|default:50.75075530537203} />
|
||||
<input type="hidden" id="map-center-lon-cnc" 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"}
|
||||
<table id="coordinates-cnc" class="hidden">
|
||||
{loop type="pdr_places" name="places-loop-cnc" active=true click_and_collect=1 order="city"}
|
||||
<tr>
|
||||
<td>{$ID}
|
||||
<td>{$LATITUDE}</td>
|
||||
@@ -84,28 +95,20 @@
|
||||
|
||||
<script>
|
||||
|
||||
// Masquer par défaut les options du mode PDR
|
||||
// Masquer par défaut les options du mode CNC
|
||||
$(document).ready(function(){
|
||||
$("#delivery-module-{$module_id}").html($('#cnc_ui').html());
|
||||
$("#delivery-module-{$cnc_module_id}").html($('#cnc_ui').html());
|
||||
$('#select-cnc').slideUp('fast');
|
||||
});
|
||||
|
||||
// Gestion du pliage/dépliage du mode PDR
|
||||
// Gestion du pliage/dépliage du mode CNC
|
||||
$('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() {
|
||||
function initMapCnc() {
|
||||
const LIMITES = {
|
||||
north: 50.85043724044059,
|
||||
east: 2.6869845409159923,
|
||||
@@ -114,7 +117,7 @@
|
||||
};
|
||||
|
||||
var opt = {
|
||||
center: new google.maps.LatLng($("#map-center-lat").val(), $("#map-center-lon").val()),
|
||||
center: new google.maps.LatLng($("#map-center-lat-cnc").val(), $("#map-center-lon-cnc").val()),
|
||||
zoom: 12,
|
||||
streetViewControl: true,
|
||||
mapTypeControl: true,
|
||||
@@ -124,21 +127,21 @@
|
||||
}
|
||||
};
|
||||
|
||||
Data.map = new google.maps.Map(document.getElementById('cnc_map'), opt);
|
||||
DataCnc.map = new google.maps.Map(document.getElementById('cnc_map'), opt);
|
||||
|
||||
displayPins();
|
||||
displayPinsCnc();
|
||||
}
|
||||
|
||||
function displayPins() {
|
||||
function displayPinsCnc() {
|
||||
var arrays = [];
|
||||
$('#coordinates').eq(0).find('tr').each((r,row) => arrays.push($(row).find('td,th').map((c,cell) => $(cell).text()).toArray()))
|
||||
$('#coordinates-cnc').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
|
||||
map: DataCnc.map
|
||||
});
|
||||
});
|
||||
|
||||
@@ -147,17 +150,12 @@
|
||||
|
||||
/*********************************************************/
|
||||
|
||||
var Data = {
|
||||
var DataCnc = {
|
||||
markers: [],
|
||||
map: null,
|
||||
geocoder: null,
|
||||
bounds: null
|
||||
};
|
||||
|
||||
if (typeof(google) === 'undefined') {
|
||||
loadScript();
|
||||
} else {
|
||||
initMap();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user