Jump to content

display carriers as dropdown list


Recommended Posts

Hi,

 

Well are you fluent in HTML/PHP/smarty ?

 

If so : Take in note that wroking with a select element is not really differente than working with a radio button set.

The elements are all exclusive and only one can be selected.

 

You'll have to edit order-carrier.tpl, this file is the view for carrier selection. Note that you won't be able to show the carrier image in the select (drop down). You still need to show the carrier price tho.

 

I think your code must actually look like this :

 

<div class="delivery_options">
           {foreach $option_list as $key => $option}
               <div class="delivery_option {if ($option@index % 2)}alternate_{/if}item">
                   <input class="delivery_option_radio" type="radio" name="delivery_option[{$id_address}]" onchange="{if $opc}updateCarrierSelectionAndGift();{else}updateExtraCarrier('{$key}', {$id_address});{/if}" id="delivery_option_{$id_address}_{$option@index}" value="{$key}" {if isset($delivery_option[$id_address]) && $delivery_option[$id_address] == $key}checked="checked"{/if} />
                   <label for="delivery_option_{$id_address}_{$option@index}">
                       <table class="resume">
                           <tr>
                               <td class="delivery_option_logo">
                                   {foreach $option.carrier_list as $carrier}
                                       {if $carrier.logo}
                                           <img src="{$carrier.logo}" alt="{$carrier.instance->name}"/>
                                       {else if !$option.unique_carrier}
                                           {$carrier.instance->name}
                                           {if !$carrier@last} - {/if}
                                       {/if}
                                   {/foreach}
                               </td>
                               <td>
                               {if $option.unique_carrier}
                                   {foreach $option.carrier_list as $carrier}
                                       <div class="delivery_option_title">{$carrier.instance->name}</div>
                                   {/foreach}
                                   {if isset($carrier.instance->delay[$cookie->id_lang])}
                                       <div class="delivery_option_delay">{$carrier.instance->delay[$cookie->id_lang]}</div>
                                   {/if}
                               {/if}
                               {if count($option_list) > 1}
                                   {if $option.is_best_grade}
                                       {if $option.is_best_price}
                                       <div class="delivery_option_best delivery_option_icon">{l s='The best price and speed'}</div>
                                       {else}
                                       <div class="delivery_option_fast delivery_option_icon">{l s='The fastest'}</div>
                                       {/if}
                                   {else}
                                       {if $option.is_best_price}
                                       <div class="delivery_option_best_price delivery_option_icon">{l s='The best price'}</div>
                                       {/if}
                                   {/if}
                               {/if}
                               </td>
                               <td>
                               <div class="delivery_option_price">
                                   {if $option.total_price_with_tax && (!isset($free_shipping) || (isset($free_shipping) && !$free_shipping))}
                                       {if $use_taxes == 1}
                                           {convertPrice price=$option.total_price_with_tax} {l s='(tax incl.)'}
                                       {else}
                                           {convertPrice price=$option.total_price_without_tax} {l s='(tax excl.)'}
                                       {/if}
                                   {else}
                                       {l s='Free'}
                                   {/if}
                               </div>
                               </td>
                           </tr>
                       </table>
                       <table class="delivery_option_carrier {if isset($delivery_option[$id_address]) && $delivery_option[$id_address] == $key}selected{/if} {if $option.unique_carrier}not-displayable{/if}">
                           {foreach $option.carrier_list as $carrier}
                           <tr>
                               {if !$option.unique_carrier}
                               <td class="first_item">
                               <input type="hidden" value="{$carrier.instance->id}" name="id_carrier" />
                                   {if $carrier.logo}
                                       <img src="{$carrier.logo}" alt="{$carrier.instance->name}"/>
                                   {/if}
                               </td>
                               <td>
                                   {$carrier.instance->name}
                               </td>
                               {/if}
                               <td {if $option.unique_carrier}class="first_item" colspan="2"{/if}>
                                   <input type="hidden" value="{$carrier.instance->id}" name="id_carrier" />
                                   {if isset($carrier.instance->delay[$cookie->id_lang])}
                                       {$carrier.instance->delay[$cookie->id_lang]}<br />
                                       {if count($carrier.product_list) <= 1}
                                           ({l s='Product concerned:'}
                                       {else}
                                           ({l s='Products concerned:'}
                                       {/if}
                                       {* This foreach is on one line, to avoid tabulation in the title attribute of the acronym *}
                                       {foreach $carrier.product_list as $product}
                                       {if $product@index == 4}<acronym title="{/if}{if $product@index >= 4}{$product.name}{if !$product@last}, {else}">...</acronym>){/if}{else}{$product.name}{if !$product@last}, {else}){/if}{/if}{/foreach}
                                   {/if}
                               </td>
                           </tr>
                       {/foreach}
                       </table>
                   </label>
               </div>
           {/foreach}
           </div>

 

This code need to be modified into something like this (I didn't do it, so try it out and comeback if there's a problem. Test it okay?) :

<div class="delivery_options">
           <select name = "delivery_option[{$id_address}]" onchange="{if $opc}updateCarrierSelectionAndGift();{else}updateExtraCarrier('{$key}', {$id_address});{/if}" id="delivery_option_{$id_address}_{$option@index}">
           {foreach $option_list as $key => $option}
          	  <option value="{$key}" {if isset($delivery_option[$id_address]) && $delivery_option[$id_address] == $key}selected="selected"{/if}>
          	  {if $option.unique_carrier}
			    {foreach $option.carrier_list as $carrier}{$carrier.instance->name}
			    {/foreach}
			    {if isset($carrier.instance->delay[$cookie->id_lang])}{$carrier.instance->delay[$cookie->id_lang]}{/if}
		    {/if}
		    {if count($option_list) > 1}
			    {if $option.is_best_grade}
				    {if $option.is_best_price}{l s='The best price and speed'}
				    {else}
				    {l s='The fastest'}{/if}
			    {else}
				    {if $option.is_best_price}
				    {l s='The best price'}
				    {/if}
			    {/if}
		    {/if}
			 -
		    {if $option.total_price_with_tax && (!isset($free_shipping) || (isset($free_shipping) && !$free_shipping))}
			    {if $use_taxes == 1}
				    {convertPrice price=$option.total_price_with_tax} {l s='(tax incl.)'}
			    {else}
				    {convertPrice price=$option.total_price_without_tax} {l s='(tax excl.)'}
			    {/if}
		    {else}
			    {l s='Free'}
		    {/if}
          	  </option>

           {/foreach}
           </select>
           </div>

 

I think this should work for displaying, functionnality too theorically...

 

Martin

Link to comment
Share on other sites

Readig my code back I see two mistake :

 

1 : Id of the select is wrong, $option@index wont work.

 

2 : OnChange of select isn't good since you need the key, but you don'T have it. You'll have to edit the

updateExtraCarrier

function in JS to achieve the change. This function need to be revised to use only one parameter and find the other one in the page.

 

Martin

Link to comment
Share on other sites

Hi Martin,

 

i appreciate very much your help.

 

First i ll answer your question and i would say that i have basic knowledge in php/mysql html css and less in smarty. I knew that i had to use the select and option tags in order to have a drop-down list but since i needed to use smarty, i wasn't able to write the code by myself. Tried but no success.

 

As for my carriers, i have used them for something else, that's why i need a drop-down list.

I have an online pizza shop and for that i don't need carriers, but i use this feature of prestashop for taking orders when the shop is closed, in that case the customer needs to specify the time when he wants the order to be delivered. So practically my carriers are "specific times" so i don't need an image or a price. Below is a pic with how are they now displayed (i have created only some of them)

post-595057-0-00928900-1377904801_thumb.jpg

 

I have tried your code and it is "almost" working :). The error is that it can be selected only the first one, when i select other it automatically jumps to the 1st one.

Here is a screen cast:

http://screenr.com/98rH

 

Thank you very much again

Link to comment
Share on other sites

Readig my code back I see two mistake :

 

1 : Id of the select is wrong, $option@index wont work.

 

2 : OnChange of select isn't good since you need the key, but you don'T have it. You'll have to edit the

updateExtraCarrier

function in JS to achieve the change. This function need to be revised to use only one parameter and find the other one in the page.

 

Martin

 

i have changed the onchange from:

 onchange="{if $opc}updateCarrierSelectionAndGift();{else}updateExtraCarrier('{$key}', {$id_address});{/if}"

into

 onchange="{if $opc}updateExtraCarrier('{$key}', {$id_address});{/if}"

 

i dunno if it is ok but since i use only opc it works, i mean i can choose another carrier from drop-down

still there is a problem because the selection is ok only visual, in fact it is only the carrier on the 1st position selected, saw that in email confirmation

 

 

the updateExtraCarrier function looks like this:

function updateExtraCarrier(id_delivery_option, id_address)
{
var url = "";
if(typeof(orderOpcUrl) !== 'undefined')
 url = orderOpcUrl;
else
 url = orderUrl;

$.ajax({
 type: 'POST',
 headers: { "cache-control": "no-cache" },
 url: url + '?rand=' + new Date().getTime(),
 async: true,
 cache: false,
 dataType : "json",
 data: 'ajax=true'
  +'&method=updateExtraCarrier'
  +'&id_address='+id_address
  +'&id_delivery_option='+id_delivery_option
  +'&token='+static_token
  +'&allow_refresh=1',
 success: function(jsonData)
 {
  $('#HOOK_EXTRACARRIER_'+id_address).html(jsonData['content']);
 }
});
}

 

i have tried to use only "id_address" parameter, no result :(

Edited by sooroos (see edit history)
Link to comment
Share on other sites

Okay, Sorry for late answer, I was off this week-end and was taking good time shopping on Coruscant.

 

Your problem is normal, I made two mistake that needs to be rethink :

<div class="delivery_options">
            <select name = "delivery_option[{$id_address}]" onchange="{if $opc}updateCarrierSelectionAndGift();{else}updateExtraCarrier('{$key}', {$id_address});{/if}" id="delivery_option_{$id_address}">
            {foreach $option_list as $key => $option}
                  <option value="{$key}" {if isset($delivery_option[$id_address]) && $delivery_option[$id_address] == $key}selected="selected"{/if}>
                  {if $option.unique_carrier}
                                    {foreach $option.carrier_list as $carrier}{$carrier.instance->name}
                                    {/foreach}
                                    {if isset($carrier.instance->delay[$cookie->id_lang])}{$carrier.instance->delay[$cookie->id_lang]}{/if}
                            {/if}
                            {if count($option_list) > 1}
                                    {if $option.is_best_grade}
                                            {if $option.is_best_price}{l s='The best price and speed'}
                                            {else}
                                            {l s='The fastest'}{/if}
                                    {else}
                                            {if $option.is_best_price}
                                            {l s='The best price'}
                                            {/if}
                                    {/if}
                            {/if}
                                 -
                            {if $option.total_price_with_tax && (!isset($free_shipping) || (isset($free_shipping) && !$free_shipping))}
                                    {if $use_taxes == 1}
                                            {convertPrice price=$option.total_price_with_tax} {l s='(tax incl.)'}
                                    {else}
                                            {convertPrice price=$option.total_price_without_tax} {l s='(tax excl.)'}
                                    {/if}
                            {else}
                                    {l s='Free'}
                            {/if}
                  </option>
                
            {/foreach}
            </select>
            </div>

Can'T be right, because the onchange function updateExtraCarrier('{$key}', {$id_address}); can't access the "key" and can'T iterate throught it.  That problem can be solved : Either you don'tuse the function at all (Possible I think, because PS is supposed to be wroking with/without javascript enabled), or you modify the function to be like this : updateExtraCarrier({$id_address}); and to access the key throught javaScrit via the option selected value.

 

You'll also need to change the JS function like this :

function updateExtraCarrier(id_address)
{
var url = "";
if(typeof(orderOpcUrl) !== 'undefined')
  url = orderOpcUrl;
else
  url = orderUrl;

$.ajax({
  type: 'POST',
  headers: { "cache-control": "no-cache" },
  url: url + '?rand=' + new Date().getTime(),
  async: true,
  cache: false,
  dataType : "json",
  data: 'ajax=true'
   +'&method=updateExtraCarrier'
   +'&id_address='+id_address
   +'&id_delivery_option='+ $("#delivery_option_" + id_address ).val() //NOT SURE HERE, You need to get the SELECT current value.
   +'&token='+static_token
   +'&allow_refresh=1',
  success: function(jsonData)
  {
   $('#HOOK_EXTRACARRIER_'+id_address).html(jsonData['content']);
  }
});

That should be closer to the truth, but as I said, seeing the website would make it easier.

 

Martin

Link to comment
Share on other sites

  • 1 year later...
×
×
  • Create New...