Dropdown populated by array of countries

Question

As the title reads I have an issue with a drop down that I made. It contains a list of countries to which a store is able to ship. It can create a shipping region, give it a name and then select all the countries that fall under that region. to then add a price to it.

During checkout I want to get that list of countries given by the webstore and use that so that the customer can select where he lives. The options for the country are the ones the store ships its products too. However I have ran into some issues.

The main problem is that the way it was constructed is that one selects a region which will do a reload of the page with the extra parameter in the URL which will add the shipping region to the order about to be created. This causes an issue on my drop down. As it will always pick the bottom option of the drop down instead of the one I just selected, which means I can't set the country the person lives in properly.

so if dropdown is

USA
China

and I select USA the page will reload and china will be hovered

My code:

Dropdown html

{% for shippingRegion in store.getShippingRegions %}
    <a style="display: none" id="addShippingRegion{{shippingRegion.id}}" href="{{ path('checkout', {'store_id': store.id, 'shippingRegion': shippingRegion.id}) }}"></a>
{% endfor %}

 <div class="collection">
     <select onchange="shippingRegionSelectCheck(this)" class="browser-default" id="shippingRegion" name="ShippingRegion">
           <option selected disabled>Select a shipping region</option>
              {% for key,country  in regionCountries %}
                  {% for c in country %}  = 
                    <option id="countrySelect" data-id="{{key}}" selected value="{{c}}" >{{c}}</option>   
                  {% endfor %}
             {% endfor %}
      </select>
</div>

Javascript function reloading the page

function shippingRegionSelectCheck(regionSelect){
    if(regionSelect){
         var selected = $('#shippingRegion').find('option:selected');
         var extra = selected.data('id'); 
         var country = $('#shippingRegion').val('value');
         var href = $('#addShippingRegion' + extra).attr('href');

         window.location.href = href; 
    }

}

Entity

/**
 * @ORM\Entity
 * @ORM\Table(name="Shipping_Regions")
 */
class ShippingRegion{
    public function __construct() {
        $this->shipping_weight_prices = new ArrayCollection();
        $this->shipping_amount_prices = new ArrayCollection();
    }

    /**
     * @ORM\Column(type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    protected $id;

    /**
     * @ORM\Column(type="string", length=100, nullable=true)
     */
    protected $name;

    /**
     * @ORM\Column(type="boolean", nullable=true)
     */
    protected $regionType;

    /**
     * @ORM\Column(type="array", nullable=true)
     */
    protected $regionCountry;

twharmon · Accepted Answer · 2017-01-03 16:33:26Z

1

Perhaps it's because you have 'selected' written in each option, so the browser selects the last one.

<option id="countrySelect" data-id="{{key}}" {{ c == selected_country ? 'selected' }} value="{{c}}" >{{c}}</option>

answered Jan 3, 2017 at 16:33

twharmon

3,7905 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KevinTheGreat Over a year ago

that euhm.. might be it, If it is I'll let you know. Thanks!

KevinTheGreat Over a year ago

Using this I go the error Variable "selected_country" does not exist in webstore\checkout.html.twig at line 187

twharmon Over a year ago

You will have to get that variable some how. If the country is in the query as a parameter, (like example.com/regions?country=USA), then you might be able to get that parameter: {{ c == app.request.get('country') ? 'selected' }}.

KevinTheGreat Over a year ago

Thanks you for the help. I eventually figured it out myself. But your answer did lead me in the right direction. Will post my solution soon.

KevinTheGreat · Accepted Answer · 2017-01-06 12:00:08Z

So reason that I got stuck was partially due to my own mess up. What I did to fix it was give the countries their own ID, so that could be used in the HTML and JS to refresh the data used. Using a nullable paramter named cId to set in the route and use its data. Hope this answer will help others in the future

/**
     * @Route("/checkout/{store_id}/{shippingRegion}/{cId}", name="checkout", defaults={"shippingRegion" = null, "cId" = null})
     */
    public function showAction($store_id, $shippingRegion, $cId, Request $request)

giving countries their own ID

foreach ($webstore->getShippingRegions() as $shippingRegions) {
            foreach ($shippingRegions->getRegionCountry() as $key=>$regionCountry) { 
// key being the ID used for countries
                  $regionCountries[$shippingRegions->getId()][$key] = Intl::getRegionBundle()->getCountryName($regionCountry);
             }  
    }

the twig of the dropdown:

 {% for key,country  in regionCountries %}
    {% for id,c in country %}
       {% if shippingRegionEntity is defined and shippingRegionEntity is not null and key == shippingRegionEntity.getId and cId is defined  and cId is not null  and cId == id %}
         <option id="countrySelect" data-cId="{{id}}" selected checked data-id="{{key}}" >{{c}}</option>
       {% else %}
         <option id="countrySelect" data-cId="{{id}}" data-id="{{key}}" >{{c}}</option>
       {% endif %}                                      
    {% endfor %}
{% endfor %}

and finally the JS I used to refresh the page and load the data:

function shippingRegionSelectCheck(regionSelect){
    if(regionSelect){
         var selected = $('#shippingRegion').find('option:selected');
         var extra = selected.data('id'); 
         var country = selected.attr('data-cId');

         var href = $('#addShippingRegion' + extra ).attr('href')+ '/' + country;
         window.location.href = href; 

    }

}

Collectives™ on Stack Overflow

Dropdown populated by array of countries

Dropdown html

Javascript function reloading the page

Entity

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Dropdown html

Javascript function reloading the page

Entity

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related