• This template is used to define how to display location selection popup or Store Locator and its elements which are used for navigating users to location based stores.

  • You can manage how different elements like Location search type, Location Name, Location Address, etc.. should be displayed after placing an order in the storefront by customizing the template accordingly.

  • For easy understanding, the Source Code and different elements of this template are displayed here.

  • You can restructure the template, show/hide elements, modify the static content as per your merchandising requirements.


 Area wise Location

  • You can also customize the template to display specific options to the user for displaying available stores as per the user selected criteria while placing the Order.
    • Another example usage of customizing the template can be displaying 'Store Selector Popup' as shown in the following figures:

  • Note: For properly working of 'Store Locator' functionality, you also need to configure:
    • Location Awareness app with delivery mode enabled.

    • Delivery Slots app and create required delivery slots.
      Please Refer: Create Slots

    • Locations accordingly.

    • respective Delivery Options for the Products.


 Open and Close Timings


 Open and Close Timings


Source Code - Area wise Location:

@{
string LocationBySearch = Martjack.QueryStringParams[TemplateConstants.QueryStrings.LocationBySearch].ToString();
String Pincode =  "";
var locCollection = Martjack.CurrentLocations.Sort("Name");
String LocationId =  Martjack.QueryStringParams[TemplateConstants.QueryStrings.LocationID].ToString();
string ProductId="";
if(Martjack.QueryStringParams.ContainsKey(TemplateConstants.QueryStrings.ProductId)){
    ProductId=Martjack.QueryStringParams[TemplateConstants.QueryStrings.ProductId].ToString();
}    
String LocId = "";
string LocationAvailable="none";
if(locCollection!=null){
    LocationAvailable="block";
}
string PopUpClass = "storelist";
string Title = "Stores in";    
string NotFoundErr = "none";        
}
@if(LocationBySearch=="True")
{
TemplateConstants.Events MCurrentEvent = Martjack.CurrentEvent;
var CurrentEvent = MCurrentEvent.ToString();
if(Martjack.QueryStringParams.ContainsKey(TemplateConstants.QueryStrings.Pincode)){
    Pincode =  Martjack.QueryStringParams[TemplateConstants.QueryStrings.Pincode].ToString();
}
if(LocationId!=""){        
    PopUpClass="storelist bottom-space";
}
if(Pincode != ""){        
    if(locCollection.Count == 0){
        NotFoundErr="block";
        CurrentEvent="Page_Load";
    }        
}    
if(ProductId!="0"){        
    if(locCollection.Count == 0){
        Title="This product is not available in ";
    }                                
}
switch(CurrentEvent)
{
case "Page_Load" :
{        
    <div id="divsearch" name="divsearch">
        <div class="readpicode_popup">
            <p>
                <span class="boldtxt">ENTER YOUR <span>PINCODE</span></span>to browse through<br/>the 
                <span class="boldtxt">
                <span>CATALOGUE</span>
                </span> at your 
                <span class="boldtxt">NEAREST 
                <span>LOCATION</span>
                </span>
            </p>
            <label>ENTER YOUR PINCODE 
                <input  id="tbxSearch" name="pincode"  value="" data-productid="@ProductId" data-field="textbox" class="pincodetxt pcpu_txtPinCode" type="text" />
            </label>                
            <div class="pcpu_errmsgdiv" id="errorMsgEmpty" class="loc_errmsg" style="display:none;">Please enter pincode.</div>
            <div class="pcpu_errmsgdiv" id="errMsgNotAvailable" class="loc_errmsg" style="display:@NotFoundErr;">Entered pincode is invalid.</div>
            <div class="navbtn">
                <span class="navbtn_l"></span>
                <span class="navbtn_m"><input type="button" id="btnFindStore" data-filter="pincode" value="Find your Store" class="mj_btnbg pcpu_btnSubmit" name="search_stores" data-result="divLocation" data-hide="divsearch"/></span>
                <span class="navbtn_r"></span>
            </div>
            @if(ProductId!=""){
                <a id="customClose" class="pincode-customclose" name="customclose" >X</a>
            }    
            else{
                <a id="pcpu_btnSkip" href="javascript:void(0)" class="navbtn">
                    <span class="navbtn_l"></span>
                    <span class="navbtn_m">Skip</span>
                    <span class="navbtn_r"></span>
                </a>                    
            }                
        </div>
    </div>
    <div id="divLocation" name="divLocation"></div>
}
break;
case "Location_Search":
{    
    <div id="divLocation">
        <div id="divStoreList" class="@PopUpClass">
            <div class="storeselection">
                @if(LocationId!=""){
                    <a id="customClose" class="pincode-customclose" name="customclose">X</a>
                }                                
                <label>
                    @Title <span>@Pincode</span>
                </label>
                <div class="navbtn">
                    <span class="navbtn_l"></span>
                    <span class="navbtn_m">
                        <input id="btnChangeArea" name="change_filter" class="mj_btnbg" type="button" value="Change pincode"/>
                    </span>
                    <span class="navbtn_r"></span>
                </div>
                <div class="clear"></div>            
            </div>
            <div class="stores">                
                @foreach (Location location in locCollection)
                {
                    <div class="storeaddress" id="loc_@location.ID" data-locationid="@location.ID" data-locationcode="@location.Code" data-locationname="@location.Name" name="submit" data-filter="pincode-divlocation" data-field="div" data-pincode="@Pincode">
                        <ul>
                            <li class="storename">@location.Name</li>
                            <li>@location.Address,</li>
                            <li>@location.State @location.Pin</li>
                            <li class="store-phone">Phone: @location.ContactNo</li>
                        </ul>
                    </div>                         
                }
                <div class="clear"></div>
            </div>
        </div>                
    </div>
}
break;
}
}
else
{
<div id="divLocation">    
    <div id="changecity_popup" class="changecity_popup">        
          <div class="paddint-lr">
            @if(Martjack.CurrentLocations.Count > 0)
            {
                LocId=LocationId;
                if(LocId==""){
                        LocId=Martjack.CurrentLocations[0].ID;
                }
                <label>Select your city</label>
                <select id="ddlLocationNames" class="city_dropdown" name="location">
                    @foreach (Location location in locCollection)
                    {
                        if(LocId==location.ID){
                            <option selected="selected" value="@location.ID">@location.Name</option>
                        }
                        else{
                            <option value="@location.ID">@location.Name</option>
                        }                    
                    }
                </select>                
            }
            else
            {
                <div class="errMsgNotAvailable">Location not available.</div>
            }
            <div class="cartbutton_r">
                @if(Martjack.CurrentLocations.Count > 0){
                    <div class="navbtn"> 
                        <span class="navbtn_l"></span>
                        <span class="navbtn_m">
                                <input id="pcpu_btnSubmit" type="button" class="mj_btnbg pcpu_btnSubmit" value="Submit" name="submit" data-field="button" data-filter="location"/>
                        </span>
                        <span class="navbtn_r"> </span>
                    </div>            
                    if(ProductId!=""){
                        <a id="customClose" class="pincode-customclose" name="customclose">X</a>
                    }
                    else{
                        <a id="pcpu_btnSkip" href="javascript:void(0)" class="citypopup-lnk pcpu_btnSkip" name="skip">Skip</a>
                    }
                }
                else{        
                    <a id="customClose"class="pincode-customclose" name="customclose">X</a>
                }
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
}
<script type="text/javascript">    
require(["App/Widgets/LocationPopUp"], function (locationpopup) { locationpopup()
    $("#ctl00_Searchbox_PCPU_Div").LocationPopUp({             
        Width: "500",
        Height: "auto",
        dialogClass: "",
        OverLayClass: "",
        CallBackFunction: function () {
        }
    });
});    
</script>



Elements - Area wise Location
Element PurposeElementElement TypeDescription
Location search typeLocationBySearchVariableVariable contains the value of location selection option (i.e. 'Search' or 'Location Names' options) that is selected in 'location awareness' app. If it contains 'true' (i.e. When 'Search' option is selected), then it will display a textbox for entering location options (Pincode, City, Country, Delivery Area, etc…) and after searching the entered option it returns to another view displaying details of available stores. If it contains 'false', then it will display location names dropdown
Control IdtbxSearchControl IdThis text box used to enter pin code or area name for location search
Div IderrorMsgEmptyDiv IdThis div display the error message is any error is there
Div IderrMsgNotAvailableDiv IdUsed to display message for location not available
Control IdbtnFindStoreButton IdButton for search locations
Location Name@location.NameVariableDisplays Location Name
Location Address@location.AddressVariableDisplays Location Address
Location State@location.StateVariableDisplays Location State
Location Pincode@location.PinVariableDisplays location Pincode
Phone@location.ContactNoVariablePhone number
Location Title@TitleVariableDisplays the title of selected location
Location Pincode@PincodeVariableDisplays the Pincode of selected location