// Carrier Wizard with bootstrap WIP

This commit is contained in:
Kevin Granger
2013-09-03 19:36:04 +02:00
parent f29c2d3fcb
commit 671d419c27
8 changed files with 336 additions and 71 deletions
File diff suppressed because one or more lines are too long
+281 -1
View File
@@ -619,7 +619,7 @@ hr
//filter table
tr.filter
background-color: darken($bg-content-color,20%)
background-color: $bg-content-color
input[type="text"].filter, input[type="password"].filter, select.filter
font-size: 12px
@@ -1224,3 +1224,283 @@ $treeBackgroundSelect: blue
background-color: $treeBackgroundSelect
&:hover
background-color: $treeBackgroundSelect
#carrier_wizard.swMain
position: relative
display: block
.stepContainer
position: relative
display: block
overflow: hidden
clear: both
div.content
position: absolute
display: block
width: 100%
text-align: left
overflow: visible
z-index: 88
clear: both
.StepTitle
display: block
position: relative
margin: 0
padding: 5px
clear: both
text-align: left
z-index: 88
-webkit-border-radius: 5px
-moz-border-radius: 5px
ul.anchor
position: relative
display: block
float: left
list-style: none
padding: 0
margin: 0 0 10px 0
clear: both
width: 100%
&.nbr_steps_4
li
width: 25%
float: left
&.nbr_steps_5
li
width: 25%
float: left
li
position: relative
display: block
a
height: 32px
display: block
position: relative
margin: 0
margin-right: 16px
padding-right: 25px
text-decoration: none
outline-style: none
z-index: 99
//overflow: hidden
.stepNumber
position: relative
float: left
width: 24px
height: 32px
text-align: center
padding: 0 5px
padding-top: 0
font-size: 30px
line-height: 32px
color: #fffffe
text-shadow: none
font-weight: normal
font-style: normal
.stepDesc
position: relative
text-align: left
font-size: 15px
height: 32px
display: table-cell
vertical-align: middle
line-height: 13px
.chevron
border: 16px solid transparent
border-left: 14px solid white
border-right: 0
position: absolute
background-color: #ccc
right: -16px
top: 0
&:after
border: 16px solid transparent
border-left: 14px solid #ccc
border-right: 0
position: absolute
content: ""
right: 2px
top: -16px
&.selected a.selected
color: #F8F8F8
cursor: text
background-color: $main-color
.chevron:after
border-left: 14px solid $main-color
&.done a
color: #ccc
background-color: $main-color
.chevron
background-color: $main-color
.chevron:after
border-left: 14px solid $main-color
&.disabled a
cursor: text
background-color: #ccc
color: #878787
.chevron:after
border-left: 14px solid #ccc
&.done a.selected
position: relative
color: #FFF
background-color: $main-color
.chevron
background-color: $main-color
.loader
display: none
.buttonNext
@extend .btn
@extend .btn-default
.buttonDisabled
@extend .btn
@extend .btn-disabled
.buttonPrevious
@extend .btn
@extend .btn-default
.buttonFinish
@extend .btn
@extend .btn-primary
.msgBox
position: relative
display: none
float: left
margin: 4px 0 0 5px
padding: 5px
border: 1px solid #FFD700
background-color: #FFFFDD
color: #5A5655
+border-radius(5px)
z-index: 999
min-width: 200px
.msgBox .content
padding: 0px
float: left
.msgBox .close
border: 1px solid #CCC
border-radius: 3px
color: #CCC
display: block
float: right
margin: 0 0 0 5px
outline-style: none
padding: 0 2px 0 2px
position: relative
text-align: center
text-decoration: none
#carrier_logo_block
position: absolute
right: 10px
.wizard_error
@extend .alert
@extend .alert-danger
.wizardUX
@extend .clearfix
border: 1px solid blue
background-color: white
ul
list-style: none outside none
padding: 0
margin: 0
li
float: left
margin: 0
padding: 0 20px 0 30px
height: 46px
line-height: 46px
position: relative
background: #ededed
color: blue
font-size: 16px
cursor: default
.chevron
border: 24px solid transparent
border-left: 14px solid blue
border-right: 0
display: block
position: absolute
right: -14px
top: 0
.chevron:before
border: 24px solid transparent
border-left: 14px solid #ededed
border-right: 0
content: ""
display: block
position: absolute
right: 1px
top: -24px
&.complete
background: #f3f4f5
color: blue
&:hover
background: #e7eff8
cursor: pointer
.chevron:before
border-left: 14px solid #e7eff8
.chevron:before
border-left: 14px solid #f3f4f5
&.active
background: #f1f6fc
color: blue
.chevron:before
border-left: 14px solid #f1f6fc
.badge
margin-right: 8px
li:nth-child(1)
border-radius: 4px 0 0 4px
padding-left: 20px
z-index: 10
li:nth-child(2)
z-index: 9
li:nth-child(3)
z-index: 8
li:nth-child(4)
z-index: 7
li:nth-child(5)
z-index: 6
li:nth-child(6)
z-index: 5
li:nth-child(7)
z-index: 4
li:nth-child(8)
z-index: 3
li:nth-child(9)
z-index: 2
li:nth-child(10)
z-index: 1
.actions
line-height: 44px
float: right
padding-right: 15px
vertical-align: middle
a
line-height: 45px
font-size: 12px
margin-right: 8px
.btn-prev
i
margin-right: 5px
.btn-next
i
margin-left: 5px
.step-content
.step-pane
display: none
.active
display: block
.btn-group
.active
display: inline-block
@@ -32,25 +32,21 @@
{if $input.name == 'zones'}
<div class="ranges_not_follow warn" style="display:none">
<label>{l s="Ranges are not correctly ordered:"}</label>
<a href="#" class="button" style="text-decoration:none">{l s="Reordering"}</a>
<a href="#" class="btn btn-default" style="text-decoration:none">{l s="Reordering"}</a>
</div>
{include file='controllers/carrier_wizard/helpers/form/form_ranges.tpl'}
<!--
<div class="validate_range" style="display:none">
<a href="#" class="button" id="validate_range_button">{l s="Validate"}</a>
</div>
-->
<div class="new_range">
<a href="#" onclick="add_new_range();return false;" class="button" id="add_new_range">{l s='Add new range'}</a>
<a href="#" onclick="add_new_range();return false;" class="btn btn-default" id="add_new_range">{l s='Add new range'}</a>
</div>
{/if}
{if $input.name == 'logo'}
<div class="margin-form">
<div class="row">
<input id="carrier_logo_input" type="file" onchange="uploadCarrierLogo();" name="carrier_logo_input" />
<input type="hidden" id="logo" name="logo" value="" />
<p class="preference_description">
{l s='Format:'} JPG, GIF, PNG. {l s='Filesize:'} {$max_image_size|string_format:"%.2f"} {l s='MB max.'}
<br />{l s='Current size:'} <span id="carrier_logo_size">{l s='undefined'}</span>.
{l s='Format:'} JPG, GIF, PNG. {l s='Filesize:'} {$max_image_size|string_format:"%.2f"} {l s='MB max.'}<br />
{l s='Current size:'} <span id="carrier_logo_size">{l s='undefined'}</span>.
</p>
</div>
{/if}
@@ -53,7 +53,7 @@
{if $smarty.foreach.ranges.first}
<td class="center">&nbsp;</td>
{else}
<td class="center"><button class="button">{l s='Delete'}</button</td>
<td class="center"><button class="btn btn-default">{l s='Delete'}</button</td>
{/if}
{/foreach}
</tr>
@@ -42,24 +42,28 @@
var invalid_range = '{l s='This range is not valid' js=1}';
var range_is_overlapping = '{l s='Ranges are overlapping' js=1}';
</script>
<div id="carrier_wizard" class="swMain">
<ul class="nbr_steps_{$wizard_steps.steps|count}">
{foreach from=$wizard_steps.steps key=step_nbr item=step}
<li>
<a href="#step-{$step_nbr + 1}">
<label class="stepNumber">{$step_nbr + 1}</label>
<span class="stepDesc">
{$step.title}<br />
{if isset($step.desc)}<small>{$step.desc}</small>{/if}
</span>
</a>
</li>
{/foreach}
</ul>
{foreach from=$wizard_contents.contents key=step_nbr item=content}
<div id="step-{$step_nbr + 1}" class="step_container">
{$content}
</div>
{/foreach}
<div class="row">
<div id="carrier_wizard" class="panel swMain">
<ul class="steps nbr_steps_{$wizard_steps.steps|count}">
{foreach from=$wizard_steps.steps key=step_nbr item=step}
<li>
<a href="#step-{$step_nbr + 1}">
<span class="stepNumber">{$step_nbr + 1}</span>
<span class="stepDesc">
{$step.title}<br />
{if isset($step.desc)}<small>{$step.desc}</small>{/if}
</span>
<span class="chevron"></span>
</a>
</li>
{/foreach}
</ul>
{foreach from=$wizard_contents.contents key=step_nbr item=content}
<div id="step-{$step_nbr + 1}" class="step_container">
{$content}
</div>
{/foreach}
</div>
</div>
{/block}
@@ -24,9 +24,8 @@
*}
<div id="carrier_logo_block">
<img id="carrier_logo_img" src="{if $carrier_logo}{$carrier_logo}{else}../img/admin/carrier-default.jpg{/if}" />
<br/>
<a id="carrier_logo_remove" {if !$carrier_logo}style="display:none"{/if} href="javascript:removeCarrierLogo();"><img src="../img/admin/disabled.gif" /> {l s='Remove the logo'}</a>
<img id="carrier_logo_img" src="{if $carrier_logo}{$carrier_logo}{else}../img/admin/carrier-default.jpg{/if}" class="thumbnail" />
<a id="carrier_logo_remove" class="btn btn-default" {if !$carrier_logo}style="display:none"{/if} href="javascript:removeCarrierLogo();"><i class="icon-trash"></i> {l s='Remove the logo'}</a>
</div>
<script type="text/javascript">
@@ -36,35 +36,27 @@
var summary_translation_price = '<strong>{l s='according to the price' js=1}</strong>';
var summary_translation_weight = '<strong>{l s='according to the weight' js=1}</strong>';
</script>
<div class="defaultForm">
<fieldset>
{l s='Carrier name:'} <strong id="summary_name"></strong>
<div class="clear">&nbsp;</div>
<div id="summary_meta_informations"></div>
<div class="clear">&nbsp;</div>
<div id="summary_shipping_cost"></div>
<div class="clear">&nbsp;</div>
<div id="summary_range"></div>
<div class="clear">&nbsp;</div>
<div>
{l s='It will be displayed only for the following zones:'}
<ul id="summary_zones"></ul>
</div>
<div class="clear">&nbsp;</div>
<div>
{l s='It will be displayed only for the following groups:'}
<ul id="summary_groups"></ul>
</div>
{if $is_multishop}
<div class="clear">&nbsp;</div>
<div>
{l s='It will be displayed only for the following shops:'}
<ul id="summary_shops"></ul>
</div>
{/if}
<div class="clear">&nbsp;</div>
{$active_form}
</fieldset>
</div>
<div class="clear">&nbsp;</div>
</div>
@@ -30,6 +30,7 @@ class AdminCarrierWizardControllerCore extends AdminController
public function __construct()
{
$this->bootstrap = true;
$this->display = 'view';
$this->table = 'carrier';
$this->identifier = 'id_carrier';
@@ -161,10 +162,9 @@ class AdminCarrierWizardControllerCore extends AdminController
'type' => 'text',
'label' => $this->l('Carrier name:'),
'name' => 'name',
'size' => 25,
'required' => true,
'hint' => sprintf($this->l('Allowed characters: letters, spaces and %s'), '().-'),
'desc' => array(
'hint' => array(
sprintf($this->l('Allowed characters: letters, spaces and %s'), '().-'),
$this->l('Carrier name displayed during checkout'),
$this->l('For in-store pickup, enter 0 to replace the carrier name with your shop name.')
)
@@ -175,9 +175,8 @@ class AdminCarrierWizardControllerCore extends AdminController
'name' => 'delay',
'lang' => true,
'required' => true,
'size' => 41,
'maxlength' => 128,
'desc' => $this->l('Estimated delivery time will be displayed during checkout.')
'hint' => $this->l('Estimated delivery time will be displayed during checkout.')
),
array(
'type' => 'text',
@@ -185,7 +184,7 @@ class AdminCarrierWizardControllerCore extends AdminController
'name' => 'grade',
'required' => false,
'size' => 1,
'desc' => $this->l('Enter "0" for a longest shipping delay, or "9" for the shortest shipping delay.')
'hint' => $this->l('Enter "0" for a longest shipping delay, or "9" for the shortest shipping delay.')
),
array(
'type' => 'logo',
@@ -196,8 +195,7 @@ class AdminCarrierWizardControllerCore extends AdminController
'type' => 'text',
'label' => $this->l('Tracking URL:'),
'name' => 'url',
'size' => 40,
'desc' => $this->l('Delivery tracking URL: Type \'@\' where the tracking number should appear. It will then be automatically replaced by the tracking number.')
'hint' => $this->l('Delivery tracking URL: Type \'@\' where the tracking number should appear. It will then be automatically replaced by the tracking number.')
),
)),
);
@@ -231,7 +229,7 @@ class AdminCarrierWizardControllerCore extends AdminController
'id_form' => 'step_carrier_ranges',
'input' => array(
array(
'type' => 'radio',
'type' => 'switch',
'label' => $this->l('Shipping and handling:'),
'name' => 'shipping_handling',
'required' => false,
@@ -249,10 +247,10 @@ class AdminCarrierWizardControllerCore extends AdminController
'label' => $this->l('Disabled')
)
),
'desc' => $this->l('Include the shipping and handling costs in the carrier price.')
'hint' => $this->l('Include the shipping and handling costs in the carrier price.')
),
array(
'type' => 'radio',
'type' => 'switch',
'label' => $this->l('Apply shipping cost:'),
'name' => 'is_free',
'required' => false,
@@ -269,10 +267,10 @@ class AdminCarrierWizardControllerCore extends AdminController
'label' => '<img src="../img/admin/disabled.gif" alt="'.$this->l('No').'" title="'.$this->l('No').'" />'
)
),
'desc' => $this->l('Apply both regular shipping cost and product-specific shipping costs.')
'hint' => $this->l('Apply both regular shipping cost and product-specific shipping costs.')
),
array(
'type' => 'radio',
'type' => 'switch',
'label' => $this->l('Billing:'),
'name' => 'shipping_method',
'required' => false,
@@ -327,7 +325,7 @@ class AdminCarrierWizardControllerCore extends AdminController
'id' => 'id',
'name' => 'name'
),
'desc' => $this->l('Out-of-range behavior occurs when no defined range matches the customer\'s cart (e.g. when the weight of the cart is greater than the highest weight limit defined by the weight ranges)')
'hint' => $this->l('Out-of-range behavior occurs when no defined range matches the customer\'s cart (e.g. when the weight of the cart is greater than the highest weight limit defined by the weight ranges)')
)
),
@@ -355,8 +353,7 @@ class AdminCarrierWizardControllerCore extends AdminController
'label' => $this->l('Maximum package height ('.Configuration::get('PS_DIMENSION_UNIT').'):'),
'name' => 'max_height',
'required' => false,
'size' => 10,
'desc' => $this->l('Maximum height managed by this carrier. Set the value to "0", or leave this field blank to ignore.').' '.$this->l('The value must be an integer
'hint' => $this->l('Maximum height managed by this carrier. Set the value to "0", or leave this field blank to ignore.').' '.$this->l('The value must be an integer
.')
),
array(
@@ -364,8 +361,7 @@ class AdminCarrierWizardControllerCore extends AdminController
'label' => $this->l('Maximum package width ('.Configuration::get('PS_DIMENSION_UNIT').'):'),
'name' => 'max_width',
'required' => false,
'size' => 10,
'desc' => $this->l('Maximum width managed by this carrier. Set the value to "0", or leave this field blank to ignore.').' '.$this->l('The value must be an integer
'hint' => $this->l('Maximum width managed by this carrier. Set the value to "0", or leave this field blank to ignore.').' '.$this->l('The value must be an integer
.')
),
array(
@@ -373,8 +369,7 @@ class AdminCarrierWizardControllerCore extends AdminController
'label' => $this->l('Maximum package depth ('.Configuration::get('PS_DIMENSION_UNIT').'):'),
'name' => 'max_depth',
'required' => false,
'size' => 10,
'desc' => $this->l('Maximum depth managed by this carrier. Set the value to "0", or leave this field blank to ignore.').' '.$this->l('The value must be an integer
'hint' => $this->l('Maximum depth managed by this carrier. Set the value to "0", or leave this field blank to ignore.').' '.$this->l('The value must be an integer
.')
),
array(
@@ -382,15 +377,14 @@ class AdminCarrierWizardControllerCore extends AdminController
'label' => $this->l('Maximum package weight ('.Configuration::get('PS_WEIGHT_UNIT').'):'),
'name' => 'max_weight',
'required' => false,
'size' => 10,
'desc' => $this->l('Maximum weight managed by this carrier. Set the value to "0", or leave this field blank to ignore.')
'hint' => $this->l('Maximum weight managed by this carrier. Set the value to "0", or leave this field blank to ignore.')
),
array(
'type' => 'group',
'label' => $this->l('Group access:'),
'name' => 'groupBox',
'values' => Group::getGroups(Context::getContext()->language->id),
'desc' => $this->l('Mark the groups that are allowed access to this carrier.')
'hint' => $this->l('Mark the groups that are allowed access to this carrier.')
)
)
));
@@ -419,7 +413,7 @@ class AdminCarrierWizardControllerCore extends AdminController
'id_form' => 'step_carrier_summary',
'input' => array(
array(
'type' => 'radio',
'type' => 'switch',
'label' => $this->l('Status:'),
'name' => 'active',
'required' => false,
@@ -437,7 +431,7 @@ class AdminCarrierWizardControllerCore extends AdminController
'label' => $this->l('Disabled')
)
),
'desc' => $this->l('Enable the carrier in the Front Office')
'hint' => $this->l('Enable the carrier in the Front Office')
)
)
));