first commit
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
<?php
|
||||
st_theme_use_stylesheet('stProductOptionsPlugin.css');
|
||||
$smarty->assign('colors', $avail_colors);
|
||||
$smarty->display('list_colors.html');
|
||||
@@ -0,0 +1,70 @@
|
||||
<?php
|
||||
use_helper('stProductImage', 'stProductOptions', 'stCurrency');
|
||||
st_theme_use_stylesheet('stProductOptionsPlugin.css');
|
||||
|
||||
$smarty_filters = array();
|
||||
|
||||
$i = 0;
|
||||
foreach ($filters as $filter) {
|
||||
|
||||
$smarty_filters[$i]['name'] = $filter->getName();
|
||||
|
||||
foreach (stNewProductOptions::getOptionsForFilter($filter) as $option) {
|
||||
if ($filter->getFilterType()==2)
|
||||
{
|
||||
|
||||
$val = $option->getColor();
|
||||
$selected = isset($params[$filter->getId()]) && array_search($val ,$params[$filter->getId()]) !== false;
|
||||
$smarty_filters[$i]['options'][] = content_tag('div',
|
||||
content_tag('div',
|
||||
checkbox_tag('options_filters['.$filter->getId().']['.$option->getId().']',$val , $selected, array('class' => 'pof_group-'.$i)),
|
||||
array(
|
||||
'class'=>'product_options-color-filter-box',
|
||||
'style'=> $option->getUseImageAsColor() ? "background: url(".$option->getColorImagePath().") no-repeat; background-size: cover" : "background-color: #".$option->getColor(),
|
||||
'id'=>'product_option_filter_div_'.$option->getId())),
|
||||
array('class'=>'product_options-color-filter'.($selected ? '-selected' : ''))
|
||||
);
|
||||
}
|
||||
else
|
||||
{
|
||||
$smarty_filters[$i]['options'][] = content_tag('div',checkbox_tag('options_filters['.$filter->getId().']['.$option->getId().']' ,$option->getOptValue(),isset($params[$filter->getId()]) && array_search($option->getOptValue(), $params[$filter->getId()]) !== false, array('onclick'=>"jQuery('#of_form').submit()", "class" => "pof_group-".$i)).$option->getValue());
|
||||
}
|
||||
}
|
||||
$reset_url = st_url_for(stProductFilter::getFilterResetUrl($sf_context, $filter->getId(), 'options'));
|
||||
$smarty_filters[$i]['clear'] = isset($params[$filter->getId()]) && $params[$filter->getId()] ? '<a href="'.$reset_url.'" rel="nofollow">'.st_theme_image_tag('stProductOptionsPlugin/icon_delete.png',array('class'=>'product_options_filter_clear_button', 'id' => "pof_group-".$i)).'</a>':'';
|
||||
$i++;
|
||||
}
|
||||
|
||||
|
||||
$smarty->assign('form_start', form_tag(stProductFilter::getFilterUrl($sf_context), array('method'=>'post', 'id'=>'of_form')));
|
||||
$smarty->assign('clear_filters',st_link_to(__('wyczyść',null,'stProductOptionsFrontend'), stProductFilter::getFilterResetUrl($sf_context, 'all', 'options')));
|
||||
$smarty->assign('has_filters', stNewProductOptions::hasFilters($sf_context));
|
||||
$smarty->assign('filters', $smarty_filters);
|
||||
$smarty->display('options_filter.html');
|
||||
?>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var form = $('#of_form');
|
||||
form.find('.product_options-color-filter-box').click(function() {
|
||||
var div = $(this).parent();
|
||||
|
||||
if (div.hasClass('product_options-color-filter-selected')) {
|
||||
div.removeClass('product_options-color-filter-selected');
|
||||
div.addClass('product_options-color-filter');
|
||||
var checked = false;
|
||||
} else {
|
||||
div.addClass('product_options-color-filter-selected');
|
||||
div.removeClass('product_options-color-filter');
|
||||
var checked = true;
|
||||
}
|
||||
|
||||
div.find('input[type="checkbox"]').prop('checked', checked);
|
||||
|
||||
form.submit();
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
@@ -0,0 +1,158 @@
|
||||
<?php
|
||||
use_helper('stUrl', 'stProductOptions', 'stBasket');
|
||||
|
||||
sfLoader::loadHelpers('stProduct', 'stProduct');
|
||||
|
||||
use_javascript('stPrice.js');
|
||||
|
||||
st_theme_use_stylesheet('stProductOptionsPlugin.css');
|
||||
|
||||
if ($info)
|
||||
{
|
||||
$options_smarty->assign('options', st_product_options_get_form($product, $selected_options));
|
||||
|
||||
$options_smarty->display('options_form.html');
|
||||
|
||||
|
||||
if (!$product_config->get('hide_basket'))
|
||||
{
|
||||
$smarty->assign('product_id', $product->getId());
|
||||
|
||||
if ($product_config->get('show_basket_quantity'))
|
||||
{
|
||||
$smarty->assign('form_action', st_secure_url_for('stBasket/addReferer?product_id='.$product->getId().'&option_list='.implode('-', $selected_options)));
|
||||
|
||||
if ($product->getStepQty())
|
||||
{
|
||||
$smarty->assign('quantity_field', st_product_quantity_list('quantity', $product, null, array('disabled' => !$enabled)).' '.st_product_uom($product));
|
||||
}
|
||||
else
|
||||
{
|
||||
$smarty->assign('quantity_field', input_tag('quantity', stPrice::round($product->getMinQty(), $product->getStockInDecimals()), array(
|
||||
'size' => 3,
|
||||
'maxlength' => 11,
|
||||
'style' => 'text-align:right',
|
||||
'disabled' => !$enabled,
|
||||
'onchange' => 'this.value = stPrice.fixNumberFormat(this.value, '.$product->getStockInDecimals().');'
|
||||
)).' '.st_product_uom($product));
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
$smarty->assign('form_action', st_secure_url_for('stBasket/addReferer?product_id='.$product->getId().'&quantity='.$product->getMinQty().'&option_list='.implode('-', $selected_options)));
|
||||
}
|
||||
|
||||
$smarty->assign('submit_button', submit_tag(__('Dodaj do koszyka', null, 'stBasket'), array('class' => 'st_button-basket-submit-enabled', 'disabled' => $enabled == false)));
|
||||
|
||||
$smarty->assign('enabled', $enabled);
|
||||
|
||||
$smarty->display('basket_add_quantity_enabled.html');
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if (!$simple && !$product_config->get('hide_basket'))
|
||||
{
|
||||
$smarty->assign('basket_add_enable', st_link_to(__('Wybierz opcje produktu'), 'stProduct/show?url='.$product->getFriendlyUrl(), array('class' => "st_button_options_basket")));
|
||||
|
||||
$smarty->display('basket_add_enabled.html');
|
||||
}
|
||||
}
|
||||
|
||||
if ($basket_config->get('ajax'))
|
||||
{
|
||||
init_ajax_basket('#st_basket-add-to-basket-form', 'submit');
|
||||
}
|
||||
?>
|
||||
<?php if ($info): $url = st_url_for('@stProductOptionsFrontend?action=ajaxNewUpdateProduct&product_id='.$product->getId()) ?>
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var link = $("#st_basket-add-button a");
|
||||
|
||||
<?php if (!$enabled): ?>
|
||||
link.addClass('disabled');
|
||||
<?php endif ?>
|
||||
|
||||
link.click(function(event) {
|
||||
if (!link.hasClass('disabled')) {
|
||||
$("#st_basket-add-to-basket-form").submit();
|
||||
}
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$("#quantity").click(function(event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
||||
function change_color(field, option_id) {
|
||||
jQuery('#'+field).val(option_id);
|
||||
}
|
||||
jQuery(function($) {
|
||||
var colors = $('div.product_options-color-filter-box');
|
||||
colors.click(function() {
|
||||
var color = $(this);
|
||||
|
||||
if (color.data('clicked')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
colors.data('clicked', true);
|
||||
|
||||
var form = $('#st_update_product_options_form');
|
||||
|
||||
var parameters = form.serializeArray();
|
||||
|
||||
var basket_form = $('#st_basket-add-to-basket-form');
|
||||
|
||||
if (basket_form.length) {
|
||||
var submit = $(basket_form.get(0).elements);
|
||||
submit.attr('disabled', true);
|
||||
}
|
||||
|
||||
if (form.length) {
|
||||
var options = $(form.get(0).elements);
|
||||
options.attr('disabled', true);
|
||||
}
|
||||
|
||||
var change_field = $(this).attr('class').replace('color_st_product_options_', '').replace('product_options-color-filter-box', '').replace(' ', '');
|
||||
|
||||
parameters.push({ name: "change_field", value: change_field });
|
||||
|
||||
$.post("<?php echo $url ?>", parameters, function() {
|
||||
if (form.length) {
|
||||
options.removeAttr('disabled');
|
||||
}
|
||||
$('div.product_options-color-filter-box').data('clicked', false);
|
||||
});
|
||||
});
|
||||
|
||||
var options = $('.st_product_options_select');
|
||||
|
||||
options.change(function() {
|
||||
|
||||
var form = $(this.form);
|
||||
|
||||
var basket_form = $('#st_basket-add-to-basket-form');
|
||||
|
||||
if (basket_form.length) {
|
||||
var submit = $(basket_form.get(0).elements);
|
||||
submit.attr('disabled', true);
|
||||
}
|
||||
|
||||
parameters = form.serializeArray();
|
||||
|
||||
options.attr('disabled', true);
|
||||
|
||||
parameters.push({ name: "change_field", value: $(this).attr('id').replace('st_product_options_', '') });
|
||||
|
||||
$.post("<?php echo $url ?>", parameters, function() {
|
||||
options.removeAttr('disabled');
|
||||
});
|
||||
});
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
@@ -0,0 +1,135 @@
|
||||
<form action="#" class="form-horizontal">
|
||||
{$options}
|
||||
</form>
|
||||
|
||||
{literal}
|
||||
|
||||
<script id="options-tpl" type="text/x-template">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span> <span class="text">#selected#</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
#content#
|
||||
</ul>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script id="options-color-tpl" type="text/x-template">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span> #icon# <span class="text">#selected#</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
#content#
|
||||
</ul>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
function escapeHtml(text) {
|
||||
var map = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
};
|
||||
|
||||
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
|
||||
}
|
||||
|
||||
var tpl = $('#options-tpl').html();
|
||||
var colorTpl = $('#options-color-tpl').html();
|
||||
{/literal}
|
||||
var isMobile = {$is_mobile|string_format:"%d"};
|
||||
{literal}
|
||||
function renderSelectTpl(select) {
|
||||
var content = '';
|
||||
var selected = null;
|
||||
|
||||
select.children().each(function() {
|
||||
var option = $(this);
|
||||
|
||||
if (option.val() == select.val()) {
|
||||
selected = option;
|
||||
content += '<li class="active"><a href="#" data-value="'+option.val()+'">'+option.text()+'</a></li>';
|
||||
} else {
|
||||
content += '<li><a href="#" data-value="'+option.val()+'">'+option.text()+'</a></li>';
|
||||
}
|
||||
});
|
||||
|
||||
return tpl.replace('#selected#', selected.text()).replace('#content#', content);
|
||||
}
|
||||
|
||||
function renderColorsTpl(select) {
|
||||
var content = '';
|
||||
var selected = null;
|
||||
|
||||
select.children().each(function() {
|
||||
var option = $(this);
|
||||
var color = option.data('color');
|
||||
|
||||
if (color[0] != '#') {
|
||||
var image = '<span class="icon" style="background-image: url('+color+')"></span>';
|
||||
var title = escapeHtml('<img src="'+color+'" style="max-width: 100%; max-height: 200px">');
|
||||
|
||||
} else {
|
||||
var image = '<span class="icon" style="background: '+color+'" data-color="hex-' + color + '"></span>';
|
||||
var title = '';
|
||||
}
|
||||
|
||||
if (option.val() == select.val()) {
|
||||
selected = option;
|
||||
content += '<li class="active"><a href="#" data-value="'+option.val()+'" data-color="'+color+'" title="'+title+'">'+image+option.text()+'</a></li>';
|
||||
} else {
|
||||
content += '<li><a href="#" data-value="'+option.val()+'" data-color="'+option.data('color')+'" title="'+title+'">'+image+option.text()+'</a></li>';
|
||||
}
|
||||
});
|
||||
|
||||
if (selected.data('color')[0] != '#') {
|
||||
var icon = '<span class="icon" style="background-image: url('+selected.data('color')+')"></span>';
|
||||
} else {
|
||||
var icon = '<span class="icon" style="background: '+selected.data('color')+'" data-color="hex-'+selected.data('color')+'"></span>';
|
||||
}
|
||||
|
||||
return colorTpl.replace('#icon#', icon).replace('#selected#', selected.text()).replace('#content#', content);
|
||||
}
|
||||
|
||||
var options = $('.st_product_options_select');
|
||||
options.hide();
|
||||
options.each(function() {
|
||||
var select = $(this);
|
||||
|
||||
if (select.hasClass('colors')) {
|
||||
var dropdown = $(renderColorsTpl(select));
|
||||
} else {
|
||||
var dropdown = $(renderSelectTpl(select));
|
||||
}
|
||||
|
||||
dropdown.on('click', 'a', function(e) {
|
||||
var link = $(this);
|
||||
if (!link.parent().hasClass('active')) {
|
||||
var select = link.parents('.btn-group').first().next();
|
||||
select.val(link.data('value')).trigger('change');
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
if (!isMobile) {
|
||||
dropdown.find('a[data-color]').tooltip({
|
||||
container: 'body',
|
||||
placement: 'left',
|
||||
html: true
|
||||
});
|
||||
}
|
||||
|
||||
select.before(dropdown);
|
||||
});
|
||||
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,6 @@
|
||||
{foreach from=$colors item=color}
|
||||
<div class="product_options-color-filter-list">
|
||||
<div class="product_options-color-filter-box-list" style="background-color: #{$color.color}; {if $color.stock==0}opacity: 0.3;{/if}"></div>
|
||||
</div>
|
||||
{/foreach}
|
||||
<div class="clear"></div>
|
||||
@@ -0,0 +1,22 @@
|
||||
<div id="option_filter" class="st_frame_option_filter block">
|
||||
{$form_start}
|
||||
<div class="st_frame_option_filter_top">
|
||||
<div class="st_frame_option_filter_top_header">{__ text="Filtry"}:</div>
|
||||
</div>
|
||||
<div class="st_frame_option_filter_middle">
|
||||
<div class="st_content">
|
||||
{foreach from=$filters item=filter}
|
||||
<div class="product_options_filter_name">
|
||||
{$filter.name}:
|
||||
<div class="product_options_filter_options">
|
||||
{foreach from=$filter.options item=option}
|
||||
{$option}
|
||||
{/foreach}
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
</div>
|
||||
<div class="st_frame_option_filter_bottom"></div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
{$options}
|
||||
<div class="st_no_javascript">
|
||||
{$no_javascript}
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{$options_list}
|
||||
@@ -0,0 +1,6 @@
|
||||
{$form_head}
|
||||
{$head}
|
||||
{$options}
|
||||
{$foot}
|
||||
{$hidden_submit}
|
||||
{$form_foot}
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="st_product_options">
|
||||
<ul>
|
||||
{foreach item=product_option from=$product_options}
|
||||
<li>{$product_option.label}</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</div>
|
||||
<br class="st_clear_all" />
|
||||
@@ -0,0 +1,8 @@
|
||||
<li class="st_admin-horizontal-look-element">
|
||||
{$field_label}
|
||||
<div>
|
||||
{foreach key=id item=option from=$options}
|
||||
<input type="radio" onclick="send_form(this);" {if $id==$selected}checked="checked"{/if} id={$field_id} name={$field_name} value="{$id}"/>{$option.label}
|
||||
{/foreach}
|
||||
</div>
|
||||
</li>
|
||||
@@ -0,0 +1,12 @@
|
||||
<li class="st_admin-horizontal-look-element">
|
||||
{$field_label}
|
||||
<div>
|
||||
{foreach key=id item=option from=$options}
|
||||
<li>
|
||||
<input type="radio" onclick="send_form(this);" {if $id==$selected}checked="checked"{/if} id={$field_id} name={$field_name} value="{$id}"/>
|
||||
{$option.label}
|
||||
{$option.image}
|
||||
</li>
|
||||
{/foreach}
|
||||
</div>
|
||||
</li>
|
||||
@@ -0,0 +1,16 @@
|
||||
<li class="st_admin-horizontal-look-element colors">
|
||||
<table class="colors_table" cellpadding="0" cellspacing="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td nowrap="nowrap" class="name_colors" valign="top">{$field_label}</td>
|
||||
<td valign="top">
|
||||
<input type="hidden" id="{$field_id}" name="{$field_name}" value="{$selected}"/>
|
||||
{foreach key=id item=option from=$options}
|
||||
<div class="product_options-color-filter{if $id==$selected}-selected{/if}">
|
||||
<div class="product_options-color-filter-box color_{$field_id}" style="background-color: #{$option.color}; {if $option.stock==0}opacity: 0.3;{/if}" onclick="change_color('{$field_id}',{$id})"></div>
|
||||
</div>
|
||||
{/foreach}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br class="st_clear_all" />
|
||||
</li>
|
||||
@@ -0,0 +1,11 @@
|
||||
<li class="st_admin-horizontal-look-element">
|
||||
<div class="st_field_label">{$field_label}</div>
|
||||
<div class="st_field_value">
|
||||
<select class="st_product_options_select" onchange="send_form(this);" id={$field_id} name={$field_name}>
|
||||
{foreach key=id item=option from=$options}
|
||||
<option {if $id==$selected}selected="selected"{/if} value="{$id}">{$option.label} {if $option.modify}({$option.modify}){/if}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
<br class="st_clear_all">
|
||||
</li>
|
||||
@@ -0,0 +1,10 @@
|
||||
{foreach from=$colors item=color}
|
||||
<div class="product_options-color-filter-list">
|
||||
{if $color.image_as_color}
|
||||
<div class="product_options-color-filter-box-list" style="background: url({$color.color}) no-repeat; background-size: cover; {if $color.stock==0}opacity: 0.3;{/if}"></div>
|
||||
{else}
|
||||
<div class="product_options-color-filter-box-list" style="background-color: #{$color.color}; {if $color.stock==0}opacity: 0.3;{/if}"></div>
|
||||
{/if}
|
||||
</div>
|
||||
{/foreach}
|
||||
<div class="clear"></div>
|
||||
@@ -0,0 +1,18 @@
|
||||
<div id="product_options_filter" class="block box roundies">
|
||||
{$form_start}
|
||||
<div class="content">
|
||||
{foreach from=$filters item=filter}
|
||||
<span class="title_filter">{$filter.name} {$filter.clear}</span>
|
||||
<div class="product_options_filter_name">
|
||||
<div class="product_options_filter_options">
|
||||
{foreach from=$filter.options item=option}
|
||||
{$option}
|
||||
{/foreach}
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
{if $has_filters}<div class="product_options_filter_clear">{$clear_filters}</div>{/if}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
{$options}
|
||||
<div class="st_no_javascript">
|
||||
{$no_javascript}
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{$options_list}
|
||||
@@ -0,0 +1,139 @@
|
||||
{use_stylesheet src="stProductOptionsColorPicker.css"}
|
||||
|
||||
{$form_head}
|
||||
{$head}
|
||||
{$options}
|
||||
{$foot}
|
||||
{$hidden_submit}
|
||||
{$form_foot}
|
||||
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
var showColorNames = {/literal}{if $config->get('show_color_names')}true{else}false{/if}{literal};
|
||||
var colorOptions = $('.color_options');
|
||||
var pickerTriggers = [];
|
||||
|
||||
function disablePickers() {
|
||||
$.each(pickerTriggers, function() {
|
||||
this.unbind('click').unbind('focus').addClass('picker-disabled');
|
||||
});
|
||||
}
|
||||
|
||||
colorOptions.each(function() {
|
||||
|
||||
var select = $(this);
|
||||
|
||||
select.addClass('picker-select-hidden');
|
||||
|
||||
var preventClose = false;
|
||||
|
||||
var option = select.children(':selected');
|
||||
|
||||
var current = option.data('color');
|
||||
|
||||
var picker = $('<div class="color-picker"><div class="color-preview"></div><button type="button"><span></span></button><ul></ul></div>');
|
||||
|
||||
var pickerTrigger = picker.children('button');
|
||||
|
||||
pickerTriggers.push(pickerTrigger);
|
||||
|
||||
var pickerColors = picker.children('ul');
|
||||
|
||||
if (current[0] != '#') {
|
||||
pickerTrigger.css({ 'background-image': 'url('+current+')' });
|
||||
} else {
|
||||
pickerTrigger.css({ 'background': current });
|
||||
}
|
||||
|
||||
select.before(picker);
|
||||
|
||||
pickerColors.on('mousedown', 'button', function(e) {
|
||||
var selected = $(this);
|
||||
var color = selected.data('color');
|
||||
|
||||
select.val(selected.data('id')).trigger('change');
|
||||
if (color[0] != '#') {
|
||||
pickerTrigger.css({ 'background-image': 'url('+color+')' });
|
||||
} else {
|
||||
pickerTrigger.css({ 'background': color });
|
||||
}
|
||||
|
||||
disablePickers();
|
||||
pickerColors.hide();
|
||||
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
|
||||
pickerTrigger.click(function() {
|
||||
pickerTrigger.trigger('focus');
|
||||
});
|
||||
|
||||
pickerColors.mousedown(function() {
|
||||
preventClose = true;
|
||||
});
|
||||
|
||||
pickerColors.mouseup(function() {
|
||||
preventClose = false;
|
||||
pickerTrigger.focus();
|
||||
});
|
||||
|
||||
pickerTrigger.blur(function() {
|
||||
if (!preventClose) {
|
||||
pickerColors.hide();
|
||||
}
|
||||
});
|
||||
|
||||
pickerTrigger.focus(function() {
|
||||
if (pickerColors.is(':empty')) {
|
||||
var content = '';
|
||||
select.children().each(function() {
|
||||
var option = $(this);
|
||||
var active = option.val() == select.val() ? ' class="current"' : '';
|
||||
var color = option.data('color');
|
||||
if (color[0] != '#') {
|
||||
var backgroundColor = 'background-image: url('+color+')';
|
||||
var img = '<div class="color-preview"><img src="'+color+'" /></div>';
|
||||
} else {
|
||||
var backgroundColor = 'background: '+color;
|
||||
var img = '<div class="color-preview"><div class="color-bg" style="'+backgroundColor+'"></div></div>';
|
||||
}
|
||||
|
||||
if (showColorNames) {
|
||||
content += '<li class="color-name"><button type="button"'+active+' data-id="'+option.val()+'" data-color="'+color+'"><i style="'+backgroundColor+'"></i> '+option.html()+'</button></li>';
|
||||
} else {
|
||||
content += '<li><button type="button"'+active+' data-id="'+option.val()+'" data-color="'+color+'" style="'+backgroundColor+'"></button></li>';
|
||||
}
|
||||
});
|
||||
|
||||
pickerColors.html(content);
|
||||
|
||||
pickerColors.find('button').tooltip({
|
||||
position: 'center left',
|
||||
delay: 0,
|
||||
predelay: 30,
|
||||
offset: [0, -20],
|
||||
tip: pickerColors.parents('.color-picker').first().children('.color-preview'),
|
||||
onBeforeShow: function() {
|
||||
var color = this.getTrigger().data('color');
|
||||
if (color[0] != '#') {
|
||||
var content = '<img src="'+color+'" />';
|
||||
} else {
|
||||
|
||||
var content = '<div class="color-bg" style="background: '+color+'"></div>';
|
||||
}
|
||||
|
||||
this.getTip().html(content);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
pickerColors.show();
|
||||
});
|
||||
});
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,25 @@
|
||||
<div class="st_product_options">
|
||||
<ul>
|
||||
{foreach item=product_option from=$product_options}
|
||||
<li>
|
||||
{if $product_option.custom.field}
|
||||
{$product_option.custom.field}:
|
||||
{/if}
|
||||
{if $product_option.custom.color}
|
||||
{if $product_option.custom.color[0] == '/'}
|
||||
<div class="basket_color" style="background-image: url({$product_option.custom.color})"></div>
|
||||
<div class="basket_preview" style="display: none">
|
||||
<img src="{$product_option.custom.color}" alt="" />
|
||||
</div>
|
||||
{else}
|
||||
<div class="basket_color" style="background-color: #{$product_option.custom.color}"></div>
|
||||
<div class="basket_preview" style="display: none">
|
||||
<div style="background-color: #{$product_option.custom.color}"></div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{$product_option.label}
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<li class="st_admin-horizontal-look-element">
|
||||
{$field_label}
|
||||
<div>
|
||||
{foreach key=id item=option from=$options}
|
||||
<input type="radio" onclick="send_form(this);" {if $id==$selected}checked="checked"{/if} id={$field_id} name={$field_name} value="{$id}"/>{$option.label}
|
||||
{/foreach}
|
||||
</div>
|
||||
</li>
|
||||
@@ -0,0 +1,12 @@
|
||||
<li class="st_admin-horizontal-look-element">
|
||||
{$field_label}
|
||||
<div>
|
||||
{foreach key=id item=option from=$options}
|
||||
<li>
|
||||
<input type="radio" onclick="send_form(this);" {if $id==$selected}checked="checked"{/if} id={$field_id} name={$field_name} value="{$id}"/>
|
||||
{$option.label}
|
||||
{$option.image}
|
||||
</li>
|
||||
{/foreach}
|
||||
</div>
|
||||
</li>
|
||||
@@ -0,0 +1,11 @@
|
||||
<li class="st_admin-horizontal-look-element">
|
||||
<div class="st_field_label">{$field_label}</div>
|
||||
<div class="st_field_value">
|
||||
<select class="st_product_options_select color_options" id="{$field_id}" name="{$field_name}">
|
||||
{foreach key=id item=option from=$options}
|
||||
<option data-color="{$option.color}" {if $id==$selected}selected="selected"{/if} value="{$id}">{$option.label} {if $option.modify}({$option.modify}){/if}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</li>
|
||||
@@ -0,0 +1,11 @@
|
||||
<li class="st_admin-horizontal-look-element">
|
||||
<div class="st_field_label">{$field_label}</div>
|
||||
<div class="st_field_value">
|
||||
<select class="st_product_options_select" id="{$field_id}" name="{$field_name}">
|
||||
{foreach key=id item=option from=$options}
|
||||
<option {if $id==$selected}selected="selected"{/if} value="{$id}">{$option.label} {if $option.modify}({$option.modify}){/if}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</li>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="form-group product-options-group">
|
||||
<label class="control-label" for="{$field_id}">{$field_label}</label>
|
||||
<select class="st_product_options_select form-control colors" id="{$field_id}" name="{$field_name}">
|
||||
{foreach key=id item=option from=$options}
|
||||
<option data-color="{$option.color}" {if $id==$selected}selected="selected"{/if} value="{$id}">{$option.label} {if $option.modify}({$option.modify}){/if}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="form-group product-options-group">
|
||||
<label class="control-label" for="{$field_id}">{$field_label}</label>
|
||||
<select class="st_product_options_select form-control" id="{$field_id}" name="{$field_name}">
|
||||
{foreach key=id item=option from=$options}
|
||||
<option {if $id==$selected}selected="selected"{/if} value="{$id}">{$option.label} {if $option.modify}({$option.modify}){/if}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
<div class="st_box block" id="options_filter">
|
||||
<div class="st_head">
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="st_body">
|
||||
{$form_start}
|
||||
<div class="product_options_filter_clear">{$clear_filters}</div>
|
||||
{foreach from=$filters item=filter}
|
||||
<div class="product_options_filter_name">
|
||||
<span>{$filter.name}:</span>
|
||||
<div class="product_options_filter_options">
|
||||
{foreach from=$filter.options item=option}
|
||||
{$option}
|
||||
{/foreach}
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
</form>
|
||||
<div style="clear:left;"></div>
|
||||
</div>
|
||||
<div class="st_foot">
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
<form class="product-options-filter-container" action="{url_for internal=$filter_url}" method="post">
|
||||
{foreach from=$filters item=filter key=id}
|
||||
<div class="filter-title">{$filter.name}</div>
|
||||
{if $filter.type == 2}
|
||||
<div class="form-group colors-filter clearfix">
|
||||
{foreach from=$filter.options key=oid item=option}
|
||||
<span class="colors-filter-item">
|
||||
<button class="btn btn-default{if isset($selected[$id][$oid])} active{/if}" style="{if $option.has_color}background-color: #{$option.color}{else}background-image: url({$option.color}){/if}" data-color="hex-#{$option.color}" type="button" title="{$option.value}"></button>
|
||||
<input class="sr-only" type="checkbox" name="options_filters[{$id}][{$oid}]" value="{$option.color_value}" {if isset($selected[$id][$oid])}checked{/if} />
|
||||
</span>
|
||||
{/foreach}
|
||||
</div>
|
||||
{else}
|
||||
{foreach from=$filter.options key=oid item=option}
|
||||
<div class="form-group text-filter">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="options_filters[{$id}][{$oid}]" value="{$option.value|escape}" {if isset($selected[$id][$oid])}checked{/if} />
|
||||
{$option.name}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
{/if}
|
||||
{if $selected[$id]}
|
||||
<div class="clearfix">
|
||||
<a href="{url_for internal=$filter.reset_url}" class="pull-right reset">{__ text="wyczyść"} <span class="clear-value"></span></a>
|
||||
</div>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</form>
|
||||
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
$(document).ready(function() {
|
||||
$('.product-options-filter-container').each(function() {
|
||||
var $this = $(this);
|
||||
|
||||
if (!$this.data('initialized')) {
|
||||
$this.data('initialized', true);
|
||||
$this.on('click', '.colors-filter button', function() {
|
||||
var btn = $(this);
|
||||
btn.toggleClass('active').next().click();
|
||||
})
|
||||
.on('change', 'input', function() {
|
||||
$(this).closest('form').submit();
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,9 @@
|
||||
<ul class="product-options-color-filter-list">
|
||||
{foreach from=$colors item=color}
|
||||
{if $color.color|strstr:'/'}
|
||||
<li style="background-image: url({$color.color});" {if !$color.stock}class="disabled"{/if}></li>
|
||||
{else}
|
||||
<li style="background-color: #{$color.color};" {if !$color.stock}class="disabled"{/if} data-color="hex-#{$color.color}"></li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</ul>
|
||||
@@ -0,0 +1,4 @@
|
||||
{$options}
|
||||
<div class="st_no_javascript">
|
||||
{$no_javascript}
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{$options_list}
|
||||
@@ -0,0 +1,143 @@
|
||||
<form action="#" class="form-horizontal">
|
||||
{$options}
|
||||
</form>
|
||||
|
||||
{literal}
|
||||
|
||||
<script id="options-tpl" type="text/x-template">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span> <span class="text">#selected#</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
#content#
|
||||
</ul>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script id="options-color-tpl" type="text/x-template">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span> #icon# <span class="text">#selected#</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
#content#
|
||||
</ul>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
jQuery(function($) {
|
||||
function escapeHtml(text) {
|
||||
var map = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
};
|
||||
|
||||
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
|
||||
}
|
||||
|
||||
var tpl = $('#options-tpl').html();
|
||||
var colorTpl = $('#options-color-tpl').html();
|
||||
{/literal}
|
||||
var isMobile = {$is_mobile|string_format:"%d"};
|
||||
{literal}
|
||||
function renderSelectTpl(select) {
|
||||
var content = '';
|
||||
var selected = null;
|
||||
|
||||
select.children().each(function() {
|
||||
var option = $(this);
|
||||
|
||||
if (option.val() == select.val()) {
|
||||
selected = option;
|
||||
var hidden = !option.val().length ? ' hidden' : '';
|
||||
content += '<li class="active'+hidden+'"><a href="#" data-value="'+option.val()+'">'+option.text()+'</a></li>';
|
||||
} else {
|
||||
content += '<li><a href="#" data-value="'+option.val()+'">'+option.text()+'</a></li>';
|
||||
}
|
||||
});
|
||||
|
||||
return tpl.replace('#selected#', selected.text()).replace('#content#', content);
|
||||
}
|
||||
|
||||
function renderColorsTpl(select) {
|
||||
var content = '';
|
||||
var selected = null;
|
||||
|
||||
select.children().each(function() {
|
||||
var option = $(this);
|
||||
var color = option.data('color');
|
||||
|
||||
if (!color.length) {
|
||||
var image = '';
|
||||
var title = '';
|
||||
}
|
||||
else if (color[0] != '#') {
|
||||
var image = '<span class="icon" style="background-image: url('+color+')"></span>';
|
||||
var title = escapeHtml('<img src="'+color+'" style="max-width: 100%; max-height: 200px">');
|
||||
|
||||
} else {
|
||||
var image = '<span class="icon" style="background: '+color+'" data-color="hex-' + color + '"></span>';
|
||||
var title = '';
|
||||
}
|
||||
|
||||
if (option.val() == select.val()) {
|
||||
selected = option;
|
||||
var hidden = !option.val().length ? ' hidden' : '';
|
||||
content += '<li class="active'+hidden+'"><a href="#" data-value="'+option.val()+'" data-color="'+color+'" title="'+title+'">'+image+option.text()+'</a></li>';
|
||||
} else {
|
||||
content += '<li><a href="#" data-value="'+option.val()+'" data-color="'+option.data('color')+'" title="'+title+'">'+image+option.text()+'</a></li>';
|
||||
}
|
||||
});
|
||||
|
||||
if (!selected.data('color').length) {
|
||||
var icon = '';
|
||||
} else if (selected.data('color')[0] != '#') {
|
||||
var icon = '<span class="icon" style="background-image: url('+selected.data('color')+')"></span>';
|
||||
} else {
|
||||
var icon = '<span class="icon" style="background: '+selected.data('color')+'" data-color="hex-'+selected.data('color')+'"></span>';
|
||||
}
|
||||
|
||||
return colorTpl.replace('#icon#', icon).replace('#selected#', selected.text()).replace('#content#', content);
|
||||
}
|
||||
|
||||
var options = $('.st_product_options_select');
|
||||
options.hide();
|
||||
options.each(function() {
|
||||
var select = $(this);
|
||||
|
||||
if (select.hasClass('colors')) {
|
||||
var dropdown = $(renderColorsTpl(select));
|
||||
} else {
|
||||
var dropdown = $(renderSelectTpl(select));
|
||||
}
|
||||
|
||||
dropdown.on('click', 'a', function(e) {
|
||||
var link = $(this);
|
||||
if (!link.parent().hasClass('active')) {
|
||||
var select = link.parents('.btn-group').first().next();
|
||||
select.val(link.data('value')).trigger('change');
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
if (!isMobile) {
|
||||
dropdown.find('a[data-color]').tooltip({
|
||||
container: 'body',
|
||||
placement: 'left',
|
||||
html: true,
|
||||
});
|
||||
}
|
||||
|
||||
select.before(dropdown);
|
||||
});
|
||||
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
{/literal}
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="product-option-labels">
|
||||
{foreach item=modifier from=$product_options}
|
||||
{if $modifier.custom.field}
|
||||
<span class="label label-default product-option-label" title="{$modifier.custom.field|escape:'html'}: {$modifier.label|escape:'html'}" data-toggle="tooltip" data-placement="top">{$modifier.custom.field}: {$modifier.label}</span>
|
||||
{else}
|
||||
<span class="label label-default product-option-label" title="{$modifier.custom.field|escape:'html'}: {$modifier.label|escape:'html'}" data-toggle="tooltip" data-placement="top">{$modifier.label}</span>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<li class="st_admin-horizontal-look-element">
|
||||
{$field_label}
|
||||
<div>
|
||||
{foreach key=id item=option from=$options}
|
||||
<input type="radio" onclick="send_form(this);" {if $id==$selected}checked="checked"{/if} id={$field_id} name={$field_name} value="{$id}"/>{$option.label}
|
||||
{/foreach}
|
||||
</div>
|
||||
</li>
|
||||
@@ -0,0 +1,12 @@
|
||||
<li class="st_admin-horizontal-look-element">
|
||||
{$field_label}
|
||||
<div>
|
||||
{foreach key=id item=option from=$options}
|
||||
<li>
|
||||
<input type="radio" onclick="send_form(this);" {if $id==$selected}checked="checked"{/if} id={$field_id} name={$field_name} value="{$id}"/>
|
||||
{$option.label}
|
||||
{$option.image}
|
||||
</li>
|
||||
{/foreach}
|
||||
</div>
|
||||
</li>
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="form-group product-options-group">
|
||||
<label class="col-sm-6 control-label" for="{$field_id}">{$field_label}</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="st_product_options_select form-control colors" id="{$field_id}" name="{$field_name}" {if $field_required}required{/if}>
|
||||
{if !$selected}
|
||||
<option data-color="" value="" selected>{__ text="Wybierz"}</option>
|
||||
{/if}
|
||||
{foreach key=id item=option from=$options}
|
||||
<option data-color="{$option.color}" {if $id==$selected}selected="selected"{/if} value="{$id}">{$option.label} {if $option.modify}({$option.modify}){/if}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="form-group product-options-group">
|
||||
<label class="col-sm-6 control-label" for="{$field_id}">{$field_label}</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="st_product_options_select form-control" id="{$field_id}" name="{$field_name}" {if $field_required}required{/if}>
|
||||
{if !$selected}
|
||||
<option value="" selected>{__ text="Wybierz"}</option>
|
||||
{/if}
|
||||
{foreach key=id item=option from=$options}
|
||||
<option {if $id==$selected}selected="selected"{/if} value="{$id}">{$option.label} {if $option.modify}({$option.modify}){/if}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user