How can I set a price for custom text? - prestashop

Is there a way to add price if the client add the custom text (the one inside the Options section when you add the product) in a product? or have I to add it by product combinations (adding a lot of combinations)?
With the input radio I can't control what the user will do and I can't set it as "required" because it must be a free choice.
{block name='product_customization_form'}
<form method="post" action="{$product.url}" enctype="multipart/form-data">
<ul class="clearfix">
{foreach from=$customizations.fields item="field"}
<li class="product-customization-item">
<label> {$field.label}</label>
{if $field.type == 'text'}
<textarea placeholder="{l s='Your message here' d='Shop.Forms.Help'}" class="product-message" maxlength="250" {if $field.required} required {/if} name="{$field.input_name}"></textarea>
<small class="float-xs-right">{l s='250 char. max' d='Shop.Forms.Help'}</small>
{if $field.text !== ''}
<h6 class="customization-message">{l s='Your customization:' d='Shop.Theme.Catalog'}
<label>{$field.text}</label>
</h6>
{/if}
</li>
{/foreach}
</ul>
<div class="clearfix">
<button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">{l s='Save Customization' d='Shop.Theme.Actions'}</button>
</div>
</form>
{/block}

The best way to achieve this would be to have two product combinations:
With custom text (+$0)
Without custom text (+$1.00)
Next, add some custom Javascript code to your product page (the proper way would be via a module) that would do the following:
Check if the customization textarea element is present on the page
Check if it is empty or not
If not, force the combination ID to the right ID (the "with customization" version)
That's it.
That way, the buyer won't have to select any option, they just have to fill a custom text if they would like to and the price will adjust automatically in their shopping cart.
I hope this helps!

Related

Shopify DAWN Theme - Add custom fields in Cart page and Show results in Orders Admin panel

Tried the solution given by another Developer in adding custom fields inside the Shopify theme cart page by generating the fields from here - https://ui-elements-generator.myshopify.com/pages/cart-attribute, and placing them inside the form tags of my Cart template. It works with Debut theme, however, when I tried testing it in Dawn, the form shows but the data never appeared inside my Orders (Admin Panel).
Is there an alternative solution for 2.0 themes, specifically Shopify Dawn theme?
The UI generator mise form="cart" this will make the magic. It will add the element to the cart form no matter where they are on the screen.
Why use that? well, remember the principle on 2.0 is flexibility using blocks, apps blocks, moving it around the screen, organizing differently, etc. form="cart" give this flexibility on the cart page
I use something like that on an app I write to add PO numbers on the orders.
The result using the UI generator should be:
<p class="cart-attribute__field">
<label for="long-custom-text">Long Custom Text</label>
<textarea
required
form="cart"
class="required"
id="long-custom-text"
name="attributes[Long Custom Text]"
>
{{ cart.attributes["Long Custom Text"] }}
</textarea>
</p>
the other very important part is Name the part inside the braquets is how it will appears on the admin side and how you should search the info on the order name="attributes[Long Custom Text]"
You can change what is inside the brackets Long Custom Text but the rest of the name should be there.
<input type="text" name="attributes[other custom Atribute]" form="cart" />
<input type="email" name="attributes[custom email]" form="cart" />
Solution by #chefjuanpi works. I have tried it and it works. Here are the sample fields I have created.
<p class="cart-attribute__field">
<label for="business-name">Business Name</label>
<input form="cart" id="business-name" type="text" name="attributes[Business Name]" value="{{ cart.attributes["Business Name"] }}">
</p>
<p class="cart-attribute__field">
<label for="tagline">Tagline</label><small>(If applicable)</small>
<input form="cart" id="tagline" type="text" name="attributes[Tagline]" value="{{ cart.attributes["Tagline"] }}">
</p>
<p class="cart-attribute__field">
<label for="colors">Colors</label>
<input form="cart" id="colors" type="text" name="attributes[Colors]" value="{{ cart.attributes["Colors"] }}">
</p>
<p class="cart-attribute__field">
<label for="upload">Upload Logo</label>
<input form="cart" id="upload" type="file" name="attributes[Upload]" class="product-form__input">
</p>

Display features product on category page

I am looking to display the characteristics of a product under prestashop in the category page on each product thumbnail display. Do you have any idea how is it possible to do this?
Thank you for your help.
In file \themes\default-bootstrap\product-list.tpl there is
{foreach from=$products item=product name=products}
After that add this:
{$product|#print_r}
Then You have all product data with characteristics. This code above dispaly all variable which is return by controller. You just need to display what You want.
its ok solution like this:
<div class="features">
{foreach from=$product.features item=feature}
{if $feature.name == 'Contenance'}
<div class="row">
<span><img src="{$img_dir}arrow-right-purple-2.png"
class="left_arrow"/>{$feature.value}</span>
</div>
{/if}
{if $feature.name == 'Couleur'}
<div class="row">
<span><img src="{$img_dir}arrow-right-purple-2.png"
class="left_arrow"/>{$feature.value}</span>
</div>
{/if}
{/foreach}
</div>
Thanks

Prestashop: Combinations not showing

i've got a problem with combinations in my prestashop 1.6.0.9. Combinations just not showing in product page for example here - http://b-bservis.cz.webar.cz/home/8-jolly-fix.html there should be 3 combinations with different prices. I dont know what happend, but color picker and another (also default) combinations doesn't working too.
Can anybody help me please?
Thanks
Try activating the default theme, and navigate to the product page to see if the combinations show up. If they do show up, then you have a problem with your theme.
According to source file of his website, he's already using default-bootstrap theme.
Also according to the source file, product attributes are present, they just don't show up on product page.
<div id="attributes">
<div class="clearfix"></div>
<fieldset class="attribute_fieldset">
<label class="attribute_label">BalenĂ­ </label>
<div class="attribute_list">
<ul id="color_to_pick_list" class="clearfix">
<li class="selected">
</li>
<li>
<a href="http://b-bservis.cz.webar.cz/zakladni-natery-penetracni/8-jolly-fix.html" id="color_26" name="" class="color_pick" title="">
</a>
</li>
<li>
<a href="http://b-bservis.cz.webar.cz/zakladni-natery-penetracni/8-jolly-fix.html" id="color_27" name="" class="color_pick" title="">
</a>
</li>
</ul>
<input type="hidden" class="color_pick_hidden" name="group_4" value="25" />
</div>
<!-- end attribute_list -->
</fieldset>
</div>
I had same problem with an earlier version of PrestaShop, after digging for hours I finally solved the issue.
You can check my post on PS forum and see if it helps.

capybara /cucumber can't find radio

I'm having an issue finding a radio button. Here is a snippet of the html:
<form action="/" id="frm-info" method="post"><input id="ClickedButton" name="ClickedButton" type="hidden" value="" /><input name="__RequestVerificationToken" type="hidden" value="KTQF3bkKPP0OirvtL1EYsW-Q77zq-8H9YAPqeoBB9ewpNSYoc0dOEout26qrtMmX6xBx0_roxqWRwCXAlwZRTyW9ZBTBjwNgifWqws6hyOFIRmc6O-7P6jZXbZNYJ5Pazt9Hmg2" /> <div class="row borGreyPad mlmrcolor bb0">
<div class="col-sm-12 coverImage">
<div class="col-md-7 col-lg-6 fr xs-fl">
<div class="frm-content axaborderBlue mt10">
<div class="pl25 pt15 pr15 pb10">
<p class="large-heading">Enter some basic information to get started</p>
<div class="row ">
<div class="row pl15">
<div class="col-sm-4 r xs-l mb5 f14">Application Taken: *</div>
<div class="col-sm-8 mb5">
<div class="groupBox">
<span class="dib f14 ">
<input id="ApplicationTaken" name="ApplicationTaken" tabindex="1" type="radio" value="ApplicationInPerson" /><span class="dib mr10 ">In Person</span>
</span>
<span class="dib f14 ">
<input id="ApplicationTaken" name="ApplicationTaken" tabindex="2" type="radio" value="ApplicationByPhone" /><span class="dib mr10 ">By Phone</span>
</span>
</div>
I want to select the radio button with name "ApplicationTaken" and value "ApplicationInPerson"
I've tried several different ways including:
When I click on the radio with name
"([^"]*)" and value "([^"]*)"$/ do |myName, myValue|
choose("#{myName}", :option => "#{myValue}")
end
and
When I click on the radio with name
"([^"]*)" and value "([^"]*)"$/ do |myName, myValue|
find(:xpath, "//input[#value='#{ myValue }']", match: :first).set(true)
end
I keep seeing the following error:
"Unable to find radio button "ApplicationTaken" with value "ApplicationInPerson".
I've also tried by ID, no luck. I CAN select a button on this page and fill in text fields, I just can't select radio buttons or drop downs. Thanks
Since you're using capybara try:
choose('Visible Text')
See:
https://gist.github.com/zhengjia/428105
For starters, you have two radio buttons with the same id. This is bad - you should not have duplicate ids on a page. Attempting to find an element by ID when there are duplicates is very unpredictable.
What's most likely happening is that it's finding the first element with a matching ID, and then checking the value attribute. When that doesnt match, it says the element could not be found, because it does not continue onto the next matching ID (because of the way id selectors work internally)
I see you're also using xpath to find the element. You generally should be using CSS instead of xpath for finding your elements.
So leaving the ID out, and using CSS instead, find('input[name=ApplicationTaken][value= ApplicationInPerson]') should get you the element you're looking for.

What is the Best Practice for placing validation messages using Twitter Bootstrap 3

I'm using MVC4 but I imagine this is an issue for anyone using the new Bootstrap 3 version. Since form-control is now width:100% by default, what is the best practice for placing validation messages?
In version 2.x, placing the validation messages in the help-inline span just after the input control worked best to ensure that the message was placed to the right of the control.
But in version 3, they always get pushed to the bottom making all the controls shift down because the validation messages are forced under the control.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
<span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span>
</div>
</div>
I've considered manually setting them on a new column like this (below) but wondering if there was a more acceptable way or a less manual way of dealing with this.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
</div>
<div class="col-lg-5">
<p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p>
</div>
</div>
I wouldn't say there are "best practices" for presenting form validation errors. It's more of a personal design choice.
Depending on how much JS you want to write, you could get a little slick and insert an input group addon which holds an error message in a tooltip icon, like so...
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
Honestly though, I think messages appearing below input fields are fine, as long as they don't disturb page layout and push content down when they appear. (Which is just a matter of having a container that displays block and has a a hard-coded height.)